Hexo博客加时间线timeline功能

最新推荐文章于 2024-03-18 10:36:58 发布

FreshSJQ

最新推荐文章于 2024-03-18 10:36:58 发布

阅读量2.8k

点赞数

分类专栏：个人博客文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_43168521/article/details/116131587

版权

本文介绍了如何在Hexo博客中添加时间线功能，主要通过魔改归档页面实现，涉及scripts/timeline.js、timeline.swig和index.md等文件的修改。作者分享了实现过程中的难点和感想，强调理解代码逻辑的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

博客链接
由于本人比较懒，所以就懒的修改格式啥的了，去博客中看，效果可能会更好~

主题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

最低0.47元/天解锁文章