# 引言

# 实现

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

# 时间轴css样式

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

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

2. 同级目录 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.65rem;
            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.65rem;
            bottom: -1.65rem;
            left: 0.35rem;
            margin-bottom: 0px !important;
            border-left: 0.2rem solid var(--color-red-a3);
        }

        &:hover::before {
            border-color: var(--color-blue);
        }
    }

    .item.header {
        font-size: 1.15em;
        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.0em;
        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.0rem;
            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;
            }
        }
    }
}

3. 其中的几个代表 颜色 的变量，定义在了主题文件 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;
    }
}

4. 最后在 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行前后 */

<!--swig0-->

2. 在这之前添加如下代码即可

{%- 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_summary 和 post.changelogs_title 是在主题的语言包 themes/shoka/languages/zh-CN.yml 内新增了两个键值，如下所示(这儿完全可以直接使用 对应中文 替换进去)。

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

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

# 结语