点击查看更新记录

更新记录

2022-06-24 方案落地

1. 1.0版本编写

2022-06-23 灵感 & 思路

1. 从主题的归档获取灵感,构思文章更新记录的实现

2. 通过 Front-matter 方便的添加,发布时自动生成时间轴

# 引言

灵感来源于主题文章 归档 的时间轴效果,用同样时间轴的方式对文章修订记录进行展示

# 实现

时间轴的实现,采用集成到主题的方式,使用文章 Front-matter 记录历史信息,在 Hexo 渲染时,读取信息,解析成时间轴对应的 HTML 文本段

# 时间轴 css 样式

  1. 直接 Copy 主题的归档样式。

f12 查看样式,找到主题对应的归档时间轴样式在文件 themes/shoka/source/css/_common/pages/collapse.styl 内。

  1. 同级目录 post 下新建一个 historytimeline.styl 文件,直接粘贴样式,进行简单修改即可,修改后的完整代码如下
.historytimeline {
    small {
        color: var(--grey-4);
        margin: auto 0.3125rem;
    }
    .item {
        position: relative;
        padding: 1.1rem 1.86rem;
        margin: 0;
        &::before {
            content: '';
            position: absolute;
            z-index: $zindex-1;
            the-transition();
            box-sizing: unset;
            top: 1.9rem;
            left: 0;
            width: 0.6rem;
            height: 0.6rem;
            border: 0.15rem solid var(--primary-color);
            border-radius: 50%;
            background: var(--grey-1);
        }
        &:not(:last-child):not(.title)::after {
            content: '';
            position: absolute;
            top: 1.9rem;
            bottom: -1.9rem;
            left: 0.35rem;
            border-left: 0.2rem solid var(--color-red-a3);
        }
        &:hover::before {
            border-color: var(--color-blue);
        }
    }
    .item.header {
        font-size: 1.375em;
        color: var(--historytimeline-font-color);
        &:hover {
            color: var(--historytimeline-hover-forground);
        }
        &::after {
            border-left-style: dashed !important;
        }
        .cheers {
            display: block;
        }
    }
    .item.section {
        font-size: 1.25em;
        color: var(--historytimeline-font-color);
        &:hover {
            color: var(--historytimeline-hover-forground);
        }
        &::before {
            width: 0.4rem;
            height: 0.4rem;
            margin-left: 0.1rem;
        }
    }
    .item.title, .item.header, .item.section {
        a {
            border-bottom: 0.0625rem dashed var(--grey-4);
        }
        &:hover a {
            border-bottom-color: var(--color-blue);
        }
    }
    .item.normal {
        &::before {
            top: 1.4rem;
            width: 0.2rem;
            height: 0.2rem;
            margin-left: 0.2rem;
            background: var(--primary-color);
        }
        &:hover::before {
            background: var(--color-blue);
        }
        &:hover {
            color: var(--historytimeline-hover-forground);
        }
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: .325rem 0 .325rem 3.55rem;
        font-size: 1em;
        line-height: 1.8;
        color: var(--historytimeline-font-color);
        .meta {
            display: inline;
            font-size: $font-size-smallest;
            margin-right: 0.625rem;
            time {
                color: var(--grey-4);
            }
        }
        .title {
            display: inline;
            a {
                color: var(--primary-color);
                &:hover {
                    color: var(--color-blue);
                }
            }
            .i-link-alt {
                font-size: $font-size-small;
                margin-left: 0.3125rem;
            }
        }
    }
}
  1. 其中的几个代表 颜色 的变量,定义在了主题文件 themes/shoka/source/css/_colors.styl 中,分别对应 日间和夜间 模式 时间轴 文字颜色和鼠标悬浮的前景颜色
:root {
    // ...
    /*
     * 新增
     */
    --historytimeline-font-color: #30343f;
    --historytimeline-hover-forground: #38a1db;
}
[data-theme="dark"] {
    &:root {
        // ...
        /*
        * 新增
        */
        --historytimeline-font-color: #eee;
        --historytimeline-hover-forground: #38a1db;
    }
}
  1. 最后在 themes/shoka/source/css/_common/components/post/post.styl 最后面引入自定义样式
@import 'historytimeline';

# Front-matter 历史记录配置

事实上有了上面的样式后,我们在文章的头部其实手撸 html 就能够写出历史时间轴了,但这样总归不够 优雅,和直接写页面有什么区别

于是我盯上了 Front-matter 这块风水宝地,直接吧记录写在里面,按需解析即可

由于 Front-matter 其实是一段 yaml 格式的配置,所以为了便于解析,我们编写的 历史记录 配置应该尽可能利用和符合 yaml 的语法,为后续的解析提供便利

权衡后,我给出了如下配置标准

changelogs:
    - summary: 2022-06-23 灵感 & 思路
      list:
        - 1. 从主题的归档获取灵感,构思文章更新记录的实现
        - 2. 通过 Front-matter 方便的添加,发布时自动生成时间轴
    - summary: 2022-06-24 方案落地
      list:
        - 1. 1.0版本编写
  • changelog 表示文章有记录 历史记录 信息,可以根据配置解析生成 时间轴
  • summary 一条记录 概括,简单描述当前次修改,通过 list 进行详细解释 (可以没有 list )
  • list 修改明细条目,是 summary 详细解释

这样一个历史记录信息就可以以 配置 的形式存在于 Front-matter 中了

# 时间轴解析生成

主题文件 themes/shoka/layout/_partials/post/post.njk 是整个文章的框架代码,我们可以在其中处理 历史信息 的解析生成 时间轴 到文章的最头部.

  1. 在文件中定位到
/* 大概在 46 行前后 */
{{ post.content }}
  1. 在这之前添加如下代码即可
{%- if post.changelogs and post.changelogs.length %}
    <details class="primary">
        <summary>
            <b>{{ __('post.changelogs_summary', '') }}</b>
        </summary>
        <div class="historytimeline">
            <p class="item header">{{ __('post.changelogs_title', '') }}</p>
            {%- for changelog in post.changelogs | reverse %}
                {%- for key, value in changelog %}
                    {%- if key == 'summary' %}
                        <p class="item section">{{ value }}</p>
                    {%- elif key == 'list' and value.length %}
                        {%- for subvalue in value %}
                            <p class="item normal">{{ subvalue }}</p>
                        {%- endfor %}
                    {%- endif %}
                {%- endfor %}
            {%- endfor %}
        </div>
    </details>
{%- endif %}

其中 post.changelogs_summarypost.changelogs_title 是在主题的语言包 themes/shoka/languages/zh-CN.yml 内新增了两个键值,如下所示 (这儿完全可以直接使用 对应中文 替换进去)。

至于为啥我这么干,别问,问就是强迫症🤣

post:
+    changelogs_summary: 点击查看更新记录
+    changelogs_title: 更新记录

# 结语

后续在需要展示 更新记录 的文章的 Front-matter 内定义 changelogs ,然后 Hexo 三连就可以,看到 时间轴 效果了,就像本文开头一样

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

yx.zhang 微信支付

微信支付

yx.zhang 支付宝

支付宝