给博客添加更新日志

前言

看了石姐@铭心石刻的博客，觉得新增一个更新日志很有意义，可以记录自己博客一路的发展历程，但是问了大佬，网上也没有相关的教程，自己摸索着尝试了一下。居然成功了，记录一下。

敢于尝试！

效果图

效果图

具体实现

添加changelog.pug

新建\layout\includes\page\changelog.pug
1.配置卡片背景background-image
2.上面小标题.content-item-tips 更新日志😶‍🌫️
3.下面标题.tips 记录一下博客的发展历程😎🎶
4.下面的是包含page内容

1
2
3
4
5
6
7
8
9
#changelog-box
    .page-top-card(style='background-image: url(https://cdn.jsdelivr.net/gh/HysenEcho/picture1/blog/202308262227209.jpg);')
        .content-item-tips 更新日志😶‍🌫️
        span.content-item-title ChangeLog
        .content-bottom
            .tips 记录一下博客的发展历程😎🎶

#article-container
  != page.content

修改\layout\page.pug

添加即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
case page.type
    when 'tags'
        include includes/page/tags.pug
        include includes/page/default-page.pug
    when 'link'
        include includes/page/flink.pug
    when 'categories'
        include includes/page/categories.pug
        include includes/page/default-page.pug
    when 'essay'
        include includes/page/essay.pug
+    when 'changelog'
+        include includes/page/changelog.pug
    default
        include includes/page/default-page.pug

新建页面

输入命令hexo new page changelog

1
2
3
4
5
6
7
---
title: 更新日志
date: 2023-03-18 14:07:13
comments: false
aside: false
type: changelog
---

注意这里type参数要填changelog

添加日志内容

样式使用anzhiyu主题的内置标签timeline
编辑文件\source\changelog\index.md即可

1
2
3
4
5
6
7
{% timeline 2022,blue %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}

在menu添加todolist

在主题配置文件（_config.anzhiyu.yml）里面的引入todolist页面

1
2
3
4
5
6
  关于:
    关于本人: /about/ || anzhiyu-icon-paper-plane
    闲言碎语: /essay/ || anzhiyu-icon-lightbulb
    随便逛逛: javascript:toRandomPost() || anzhiyu-icon-shoe-prints1
    我的装备: /equipment/ || anzhiyu-icon-dice-d20
+   更新日志: /changelog/ || anzhiyu-icon-dice-d20

注意这里changelog参数要和新建page时的标题一致