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

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

2022-10-13

Hexo16

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

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

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

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

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

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

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

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

hueman 主题下的目录结构

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

▾  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 内容如下:

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 下的内容，比较关键的文件在后面备注了用途。

▾  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 会在启动时执行且只执行一次。

▾  scripts/
     excerpt.js
     md5.js
     meta.js
     thumbnail.js

scource

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

▾  source/
  ▸  css/
  ▸  js/
  ▸  libs/

Hexo 的工作原理

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

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

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

潮汐朝夕的生活实验室 \Doge 陪伴一个算法工程师的职业生涯

吐槽改进日志