点击查看更新记录

2022-06-24 方案落地

1. 1.0版本编写

2022-06-23 灵感 & 思路

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

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

# 引言

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

# 实现

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

# 时间轴 css 样式

直接 Copy 主题的归档样式。

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

同级目录 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;
	}
	}
	}
	}

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

最后在 themes/shoka/source/css/_common/components/post/post.styl 最后面引入自定义样式

@import 'historytimeline';

# Front-matter 历史记录配置

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

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

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

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

	changelogs:
	- summary: 2022-06-23 灵感 & 思路
	list:
	- 1. 从主题的归档获取灵感，构思文章更新记录的实现
	- 2. 通过 Front-matter 方便的添加，发布时自动生成时间轴
	- summary: 2022-06-24 方案落地
	list:
	- 1. 1.0版本编写

changelog 表示文章有记录历史记录信息，可以根据配置解析生成时间轴
summary 一条记录 [概括]{.blue}，简单描述当前次修改，通过 list 进行详细解释 (可以没有 list )
list 修改明细条目，是 summary 详细解释

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

# 时间轴解析生成

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

在文件中定位到

	/* 大概在 46 行前后 */

	{{ post.content }}

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

	{%- 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: 更新记录

# 结语

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