《Hexo：从零开始编写自己的主题》
1. Hexo概述以及Hexo工作原理
 2. 入门Hexo主题编写
 3. 优化样式，设计自己的主题
 4. fancybox优化图片展示效果、代码高亮以及数学公式
 5. 添加本地搜索功能以及发布博客让官网接收
 6. 添加自己的脚本处理数学公式

引言 {#引言}

主题的源码地址为：https://github.com/smile-yan/hexo-theme-heyan

本系列博客是从开发者的角度看 Hexo 这个博客系统，快速了解基本原理以后，再编写自己的主题。

希望通过阅读本系列博客你也能编写一个自己喜欢的样式的主题，并在下面评论，让大家前去看看，给你的github点星星。

注意，此系列博客假设读者已经有一定的 Node.js 基础以及安装好了 node 环境，hexo 环境。这些环境的搭建教程有非常多博客教程，希望自行前去学习以及搭建环境。

关于Hexo及其工作原理 {#1-关于Hexo及其工作原理} =================================

俗话说得好，磨刀不误砍柴工。先来了解一下Hexo和工作原理。

1.1 什么是Hexo {#1-1-什么是Hexo}

Hexo.js 官网的概述是：快速、简洁且高效的博客框架。准确而具体地概述应该是 Hexo.js 是一个基于 Node.js ，可以将 markdown 文件转换为html静态界面的博客框架。

换句话说，hexo.js 可以使用 hexo serve 的命令运行提供网站功能，但其最主要的作用应当是生成静态文件，然后交给 nginx / tomcat 等服务器软件进行维护，对外提供网页服务。

1.2 Hexo 工作原理 {#1-2-Hexo-工作原理}

应该把 Hexo.js 看作一个工具，一个根据配置文件与markdown文件以及html/css/js代码转换为前端界面的工具。

默认情况下 Hexo.js 运行后，将会默认生成多个页面，并具有相应的路径。

因此，Hexo 主题的作用就是将每个页面进行特定样式的渲染。

1.3 Hexo 快速开始 {#1-3-Hexo-快速开始}

接下来是以官网提供的教程快速一个 hexo 博客，官网地址 hexo.io

按照教程进行初始化项目：

|-----------------|---------------------------------------------------------------| | 1 2 3 4 | $ hexo init blog $ cd blog $ npm install $ hexo serve |

默认情况下自带的 hello-world.md 不含分类与标签，因此不能体现 hexo 的核心功能，为此我们需要添加修改博客，来查看效果。具体方法比较简单，即在自带的 hello-world.md 文件中的前面添加以下内容：

添加前前面部分只有 title: Hello World，添加后前面内容为：

|------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | --- title: Hello World categories: - Hexo tags: - demo - start --- Welcome to [Hexo](https://hexo.io/)! This is your very first post. Check [documentation](https://hexo.io/docs/) for more info. If you get any problems when using Hexo, you can find the answer in [troubleshooting](https://hexo.io/docs/troubleshooting.html) or you can ask me on [GitHub](https://github.com/hexojs/hexo/issues). ##Quick Start ###Create a new post .... .... |

1.4 总体分析默认的 landscape 主题 {#1-4-总体分析默认的-landscape-主题}

现在版本的 hexo 默认使用的是 landscape 主题，但事实上项目中 themes 目录下不含这个主题，现在下载过来。

|-----------|-------------------------------------------------------------------------------------| | 1 | $ git clone git@github.com:hexojs/hexo-theme-landscape.git themes/landscape |

1.4.1 languages 国际化 {#1-4-1-languages-国际化}

即对于同一个变量对应的语言表达方法，比如英文 home 简体中文主页。

1.4.2 layout 主题布局文件 {#1-4-2-layout-主题布局文件}

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

这里详细展开layout中所有的文件：

_partial: 将整个网页拆成若干个局部模块，这些子模块存储于这个文件夹。
- _partial/post：查看博客时的所有组件；
  - _partial/post/category.ejs: 查看博客详情时显示博客的类别；
  - _partial/post/date.ejs: 查看博客详情时显示博客的日期；
  - _partial/post/gallery.ejs: 查看博客详情时显示博客的图片；
  - _partial/post/nav.ejs: 查看博客详情时显示博客的上一篇下一篇的导航；
  - _partial/post/tag.ejs: 查看博客详情时显示博客的标签；
  - _partial/post/title.ejs: 查看博客详情时显示博客的标题；
- _partial/after-footer.ejs：所有页面html的最后面应用 js 部分；
- _partial/archive-post.ejs：对所有博客的归档；
- _partital/archive.ejs：包括分类，标签以及博客的归档；
- _partial/article.ejs：展示每篇博客的内容；
- _partial/footer.ejs：每页内容的最下面展示的内容，比如copyright等；
- _partial/gauges_analytics：对每篇博客的字数统计分析；
- _partial/google_analytics：对每篇博客的谷歌统计分析；
- _partial/head.ejs：html的头部内容；
- _partial/mobile-nav.ejs：移动端时的导航；
- _partial/sidebar.ejs：侧边栏；
_widget：小工具类，也就是侧边导航栏的组件；
- _widget/archive.ejs：侧边栏的归档；
- _widget/category.ejs：侧边栏的分类；
- _widget/recent_posts.ejs：侧边栏的最近博客；
- _widget/tag.ejs：侧边栏的标签；
- _widget/tagcloud.ejs：侧边栏的标签云（使用自带的函数）；
archive.ejs ：博客的归档，是直接绑定 archives/ 的入口，根据归档的不同会在这里进行分岔。比如博客的归档，分类的归档，标签的归档。
category.ejs：博客的分类，是直接绑定 categories/某类名称的入口，根据某类名的不同进行渲染。
index.ejs：直接绑定博客的主页，在访问根目录时，对应的 <%- body %> 输出的内容。
layout.ejs：整个主题的入口，包括 html 的标签等所有内容。一般而言不同页面渲染结果不同是因为 <%- body %> 输出的内容不同。<%-body %> 是自带的内容，会根据访问的是主页还是分类或者标签或者归档进行渲染。
page.ejs：特殊页的渲染，除了分类、标签、主页和归档，用户可以自己定义页面，自己定义的页面对应的 markdown 文件的渲染方法与 page.ejs 对应。
post.ejs：博客的详细内容渲染，也就是对应markdown文件转换出的 html 界面。
tag.ejs：标签的分类，直接绑定某个标签的内容，比如访问 tags/某标签则返回这个标签的所有内容，就是在这里进行控制的。

1.4.3 scripts 主题自带脚本文件夹 {#1-4-3-scripts-主题自带脚本文件夹}

接下来查看 scripts 文件夹：

fancybox.js：在启动 hexo 时候会运行这个脚本。

1.4.4 source 主题自带的资源文件夹 {#1-4-4-source-主题自带的资源文件夹}

主题的渲染过程样式非常重要，主题对应的 css 样式存储于这个文件夹，以及用得到的 js 脚本，也存储于此（与scripts不同，那个会启动时自动执行，只执行一次）。

css ：所有的样式文件夹。
fancybox：fancybox 对应的样式与js文件；
js：所有的js 文件。
1.4.5 _config.yml 主题配置文件
编写主题的时候必须考虑到不同的人审美、需求是不一样的，为了让用户用起来简单，把尽可能可以通过配置文件配置的内容均放在这个文件中比较合适。比如，主题默认情况下侧边栏的顺序是：

|---------------------|-----------------------------------------------------------------------| | 1 2 3 4 5 6 | widgets: - category - tag - tagcloud - archive - recent_posts |

但是如果我不想展示 tagcloud 把这行删除即可，另外包括顺序的修改也是如此。