Processing math: 100%

吐槽改进日志

Hexo的工作流程以及文件结构

字数统计: 2.1k字   |   阅读时长: 8分
117

摘要: 探索一下 Hexo 的原理，以及文件的组织结构，为以后的定制化做准备

【对算法，数学，计算机感兴趣的同学，欢迎关注我哈，阅读更多原创文章】
我的网站：潮汐朝夕的生活实验室
我的公众号：算法题刷刷
我的知乎：潮汐朝夕
我的github：FennelDumplings
我的leetcode：FennelDumplings

现在我的网站用的是以 Hexo 为核心的方案。主题用的是 hueman，部署用的是阿里云的轻量应用服务器，图床用的是阿里云的 oss，这一套已经稳定运行了很久了。各方面都很满意，有一定的阿里云的费用但是可以接受。在文章 两年网站维护过程记录 中也回忆了一下从一开始建网站到现在的稳定方案之间的历程。

在现有的这一套的基础上，在这么长时间的使用过程中还是有一些小的想法想尝试一下的，例如：

  • 现在的站内搜索是主题自带的，但是只能展示 top5，能不能增加；
  • 能不能渲染进度条，显示在 About 页面，管理近期最重要的事情的进度/满意度；
  • 能不能通过百度统计的 API 把一些网站的运营数据显示在 About 页面；
  • 能不能在首页增加按阅读量推荐，随机推荐等板块；

要实现这些想法，就不是简单地通过配置文件改一改就可以了，这需要进入到 Hexo 或者主题的代码中去修改。但是直接干是无从下手的，文件这么多，连改那个文件都不知道，因此一些基础知识还是需要先补充一下，了解目录结构下面的每个文件都是干什么的，这样自己有了想法之后至少知道要看哪些文件了。

本文就梳理一下 Hexo 和主题的原理，以及目录结构。为后面的定制化打好基础。这个系列写的不错：Hexo: 从零开始编写自己的主题，可以参考。

此外更重要的一份文档是 Hexo 的官方文档。这里面包含了 Hexo 的大部分知识，以及写文章时的常见的需求对应的写法。

hueman 主题下的目录结构

由于 Hexo 启动会访问主题下的文件，因此我们先了解主题的目录结构，再看 Hexo 的启动流程。下面是 hueman 主题的目录结构，其他主题也大同小异。

1
2
3
4
5
6
7
8
9
10
▾  themes/hueman/
  ▸  languages/
  ▸  layout/
  ▸  scripts/
  ▸  source/
     _config.yml
     _config.yml.example
     LICENSE
     package.json
     README.md

其中 languages 是国际化(i18n)相关的，内容是对于同一个变量的各个语言的表达方式。layout 是主题的布局文件，scripts 是主题的脚本文件，source 是主题的 css/js 资源文件，_config.yml 是主题的配置文件。

下面详细看一下 languages、layout、source、scripts 这四个目录下的文件。

languages

该目录下的内容给出了变量在不同语言下的含义，我们只需要关心中文的文件 zh-CN.yml 内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
index:
    home: '主页'
    about: '关于'
    search: '搜索'
    archive: '归档'
    category: '分类'
    uncategorized: '未分类'
    tag: '标签'
    messagepad: '留言板'
nav:
    current_page:
        other: '第 %d 页，'
    total_page:
        other: '共 %d 页'
sidebar:
    follow: '关注我 '
    newer: '下一篇'
    older: '上一篇'
    recents: '最新文章'
    archives: '归档'
    categories: '分类'
    links: '链接'
    tags: '标签'
    tag_cloud: '标签云'
    catalogue: '目录'
article:
    comments: '评论'
    share: '分享到'
insight:
    hint: '想要查找什么...'
    posts: '文章'
    pages: '页面'
    categories: '分类'
    tags: '标签'
    untitled: '(未命名)'
counter:
    views: 阅读次数
    count: 本文字数
    count_total: 站点总字数
    time: 阅读时长
    time_total: 站点阅读时长
    time_minutes: 分钟
adsense:
    sponsored: Sponsored

layout

在启动 hexo 的时候，博客渲染的入口为其中的 layout.ejs 文件，其他的内容也对应其他得 ejs 文件，比如分类对应的是 category.ejs ，标签对应的是 tag.ejs。

下面是 hueman 的 layout 下的内容，比较关键的文件在后面备注了用途。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
▾  layout/
  ▾  comment/
       changyan.ejs
       counter.ejs
       disqus.ejs
       duoshuo.ejs
       facebook.ejs
       gitalk.ejs
       index.ejs
       isso.ejs
       livere.ejs
       scripts.ejs
       valine.ejs
       youyan.ejs
  ▾  common/
    ▾  post/
         author.ejs
         counter.ejs
         date.ejs # 显示博客的日期
         gallery.ejs # 显示博客的图片
         ld_json.ejs
         nav.ejs # 显示上一篇下一篇的导航
         tag.ejs # 文章的标签
         title.ejs # 文章标题
         valinecounter.ejs
         word.ejs
       archive.ejs # 分类、标签、归档
       article.ejs # 展示每篇文章的内容
       content-title.ejs
       footer.ejs # 每页展示在最下面的内容
       head.ejs # html 头部的内容
       header.ejs
       scripts.ejs
       sidebar.ejs # 侧边栏
       summary.ejs
       thumbnail.ejs
  ▾  plugin/
       baidu-analytics.ejs 
       cookie-consent.ejs
       google-adsense.ejs
       google-analytics.ejs # 每篇文章的谷歌统计分析
       scripts.ejs
       statcounter.ejs
       twitter-conversion.ejs
  ▾  pwa/
       index.ejs
  ▾  search/
       baidu.ejs
       index.ejs
       insight.ejs
       swiftype.ejs
  ▾  share/
       addtoany.ejs
       bdshare.ejs
       default.ejs
       index.ejs
       jiathis.ejs
  ▸  widget/
       archive.ejs # 侧边栏的归档                   
       catalog.ejs
       category.ejs # 侧边栏的分类
       google_adsense.ejs
       links.ejs
       recent_posts.ejs # 侧边栏的最近博客
       sticky_posts.ejs
       tag.ejs # 侧边栏的标签
       tagcloud.ejs # 侧边栏的标签云
     archive.ejs # 博客的归档
     author.ejs
     category.ejs # 博客的分类
     index.ejs # 直接绑定博客的主页
     layout.ejs # 整个主题的入口
     page.ejs # 特殊页的渲染
     post.ejs # 博客的详细内容渲染
     tag.ejs # 标签的分类

layout 下面的几个 ejs 文件可以理解为入口，比较关键，下面记录一下各个文件的细节：

文件 备注
archive.ejs 博客的归档，是直接绑定 archives/ 的入口。
category.ejs 博客的分类，是直接绑定 categories/class 的入口，根据 class 的不同进行渲染。
index.ejs 绑定博客的主页，在访问根目录时，对应的 <%- body %> 输出的内容。
layout.ejs 整个主题的入口，包括 html 的 标签等所有内容。一般而言不同页面渲染结果不同是因为 <%- body %> 输出的内容不同。<%-body %> 是自带的内容，会根据访问的是主页还是分类或者标签或者归档进行渲染。
page.ejs 特殊页的渲染，例如自己定义的页面。
post.ejs 博客的详细内容渲染，也就是对应 markdown 文件转换出的 html 界面。
tag.ejs 标签的分类，直接绑定某个标签的内容，比如访问 tags/tag_name 则返回这个标签的所有内容。

博客有一些常见的功能，他们都对应着某个 ejs 文件，在其他主题中也是这些文件，只是位置可能不同，下面是 hueman 主题下这些文件的一览表：

功能 访问的路径 对应的 ejs 文件 作用
入口 无 layout/layout.ejs 主题入口
主页 / layout/index.ejs 主页。一般显示最近文章，含分页
归档 /archives/ layout/archive.ejs 归档。一般包含所有文章，含分页，也有分类归档，标签归档
分类 /categories/类名 layout/category.ejs 显示某一类的素有文章，含分页
标签 /tags/标签名 layout/tag.ejs 显示某一标签的所有文章，含分页
文章 /_posts/文章路径 layout/post.ejs 某篇具体文章，一般有前一篇，后一篇功能
自定义页面 /page路径 layout/page.ejs 常见的比如“关于”页面，一般是静态页面

scripts

scripts 中的 js 会在启动时执行且只执行一次。

1
2
3
4
5
▾  scripts/
     excerpt.js
     md5.js
     meta.js
     thumbnail.js

scource

主题的渲染过程会用很多样式，对应的 css 存在这个文件夹里，用得到的 js 脚本也在这里。注意这里的 js 与 scripts 中的区别，scripts 中的 js 会在启动时执行且只执行一次。

1
2
3
4
▾  source/
  ▸  css/
  ▸  js/
  ▸  libs/

Hexo 的工作原理

了解了主题的目录结构之后，就可以理解 Hexo 的启动流程了。Hexo 启动后，会执行以下三步：

  1. 读取 scripts 下的所有脚本并执行。
  2. 读取 layout 目录下的 layout.ejs。
  3. 根据 <%-body% 在 layout.ejs 的位置进行渲染，例如主页、分类、自定义页面、归档等等。

另外 Hexo 有一些内置变量需要了解一下，在定制化的时候有用，可以看 官方文档-变量。

Share