博客链接
由于本人比较懒,所以就懒的修改格式啥的了,去博客中看,效果可能会更好~
主题Next下,貌似没有时间线这个功能,网上搜了很多,没有找到一个非常简单的处理方式,网上大多的处理方式是,(1)根据archive归档进行魔改,改成timeline时间线,(2)自己写javascript,注册一些指令,然后通过在markdown中编写这样的指令来修改html中的内容,从而实现时间线这个功能。(3)直接把layui中的时间线html、js、css下载到timeline这一文件夹,然后稍加修改从而实现时间线。
本文主要采用第(1)种方法。
1 需求分析
实现一个类似于archive归档中的时间线,如下图
因为归档中时间线上的内容,是根据上传的文章中的主题和时间进行显示的,这里我们并不能自己加入一些时间线(比如,我是希望能够,记录下博客的变化,此时的心情以及最近的一些经历等),archive的这个完全不能够满足这一需求。
2 解决方法
下述主要采用魔改归档这一方法来实现这一功能。
由于本人长期使用后端,基本上没怎么接触前端的内容,写的代码基本上是完全借鉴(读书人的事,能算偷么),
后端也是长期借鉴
最主要的三个文件
- 主题/scripts/timeline.js(用于注册事件)
- 主题/layout/timeline.swig(用于timeline显示样式)
- source/timeline/index.md(用于存放时间线等内容)
2.1 主题/scripts/timeline.js
当时分析这个文件如何写的时候,就是一步一步通过console.log语句对locals的结构进行分析,然后根据结构中的内容进行分析,然后写出如下函数,获取timeline文件中的每一条时间线内容。
// 不知道为什么,读取的时间字符串是准确时间,但是转变成日期格式之后,就出现,时间减了8个小时
// 网上搜了很多方法都不行,后来搜到这个函数,就是将时间格式转变成东八区时间。
function GetTimeByTimeStr(dateString) {
let timeArr = dateString.split(" ");
let d = timeArr[0].split