【hexo专栏】hexo的归档功能
目前博客采用hexo搭建，虽说hexo有一些使用上的痛点，但是还是挺喜欢的。这篇文章记录一下，hexo的归档功能。
一、什么是归档
博客的归档指的是按照时间顺序排列和归纳博客文章的列表，以便读者可以方便地查找和浏览博客历史文章。通常情况下，博客的归档页面会按照年份、月份或者季度等方式对文章进行分组，显示每个分组中的文章列表和发布时间。
博客归档是博客网站中比较常见的一个功能，也是一个非常有用的功能。通过博客归档，读者可以方便地找到自己感兴趣的文章，快速浏览博客历史内容，了解博主的写作风格和思考方式，增加读者的粘性和忠诚度。
在使用 Hexo 进行博客建设时，可以通过安装相应的插件来生成博客归档页面，例如 hexo-generator-archive 插件可以方便地生成按年份、月份等方式归档的页面。同时，也可以根据自己的需求自定义博客归档页面的模板和样式，提供更好的用户体验。
二、hexo是如何实现归档的
第一章节，我们已经讲了hexo 是通过 hexo-generator-archive 插件实现的。
2.1 如何进行配置
安装 Hexo-generator-archive 插件后，需要在 Hexo 的配置文件 _config.yml 中配置相关参数，例如：
1
2
3
4
5
| archive_generator:
per_page: 10
yearly: true
monthly: true
daily: false
|
上述配置表示生成归档页面时，每页显示 10 篇文章，同时按年份和月份分别生成归档页面。这也是这个插件的默认配置
2.2 hexo-generator-archive的实现原理
Hexo-generator-archive 插件的实现原理相对简单。在 Hexo 中，插件是通过 Node.js 模块的形式实现的，插件本质上就是一个 Node.js 模块，通过在 Hexo 的配置文件中配置相应的参数来控制插件的行为。
在 Hexo-generator-archive 插件中，主要是通过解析博客文章的元数据（Front-matter）来获取文章的发布时间、分类、标签等信息，然后根据用户在配置文件中指定的归档方式（按年份、月份、分类、标签等）对文章进行分组，生成对应的归档页面。
具体来说，Hexo-generator-archive 插件主要有以下几个步骤：
- 获取博客文章的元数据信息，包括发布时间、分类、标签等信息。
- 根据用户在配置文件中指定的归档方式（如按年份、月份、分类、标签等）对文章进行分组，生成对应的归档页面。
- 在归档页面中列出相应的文章标题、发布时间等信息，以及链接到文章的详情页面。
- 将生成的归档页面保存到
Hexo 的 public 目录中，以便在生成静态网站时一并生成。
需要注意的是，Hexo-generator-archive 插件是通过模板引擎来生成归档页面的，因此用户可以自定义归档页面的模板和样式，以满足自己的需求。同时，插件也提供了一些默认的模板和样式供用户参考。
2.3 关于模板
它会通过读取模板 archive，如果没有就找 index 进行渲染。
在归档页面的模板中，可以使用 EJS 模板引擎语法来引用变量、控制流程等。具体来说，可以使用以下变量：
page.archive：表示当前归档页面的信息，包括归档方式、归档标题、归档页面的 URL 等。page.posts：表示当前归档页面所包含的文章列表，包括文章的标题、发布时间、摘要、链接等。site.data.categories：表示博客的分类列表，可以在归档页面中引用。site.data.tags：表示博客的标签列表，可以在归档页面中引用。
下面是一个示例的归档页面模板代码，以按年份归档为例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| ---
layout: archive
title: <%= page.archive.title %>
archive_type: <%= page.archive.type %>
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<% page.posts.forEach(function(post){ %>
<article>
<h3><a href="<%= post.permalink %>"><%= post.title %></a></h3>
<time datetime="<%= post.date.toISOString() %>"><%= post.date.format('YYYY-MM-DD') %></time>
<p><%= post.excerpt %></p>
</article>
<% }); %>
</body>
</html>
|
在上面的代码中，我们首先使用 YAML 格式定义了归档页面的元数据，包括布局、标题和归档方式等信息。然后，在模板中使用 EJS 语法遍历文章列表，依次输出每篇文章的标题、发布时间和摘要等信息。需要注意的是，我们可以使用 Moment.js 库来格式化日期，使用 post.permalink 变量来获取文章详情页的链接。
2.4 生成结果查询
Hexo-generator-archive 生成的归档页面默认存放在 public 目录下，可以通过访问相应的 URL 来查看生成的结果。但我们可以通过配置，让其存放在另外的目录。
此处涉及配置:
1
2
| archive_dir: 'archives'
pagination_dir: 'page'
|
archive_dir 代表public 下面存放在哪个位置，而 pagination_dir 表示分页的格式，比如第二页，就是/archives/page/2/
最后，我们可以通过npm run build 也就是 hexo g 查看生成结果，如果我们配置了 archive_dir 是 ‘archives’, 那么归档的目录: public/archives。
需要注意的是，如果你使用的是本地服务器预览，那么在生成归档页面之后，需要重新启动服务器才能看到生成的结果。如果你使用的是线上服务器，那么生成的归档页面会被自动部署到服务器上，无需额外操作即可查看。
2.5 为什么本地服务器模式需要重新启动
在本地预览 Hexo 生成的归档页面时，需要重新启动 Hexo 服务器才能看到生成结果的原因是：
Hexo-generator-archive 是一款 Hexo 插件，它的作用是生成归档页面。在生成归档页面时，需要读取博客的所有文章，并按照指定的格式进行分类、排序等操作，然后才能生成归档页面。而在 Hexo 本地预览的过程中，Hexo 服务器只会在启动时生成一次归档页面，之后就不会再次生成了，也不会自动检测到新添加的文章。
三、小结
总之，Hexo-generator-archive 是一个很实用的插件，可以方便地生成博客的归档页面，提供了更好的浏览和查找博客文章的方式。
四、Hexo专栏
目前 Hexo 系列形成了一个小专栏，欢迎读者继续阅读: Hexo专栏地址