当你看到你用的主题出现在两个以上的博客的时候，那你就要考虑自己写一个了。本文的主角是 Hexo ，如果你没有用过，那可以考虑 Hexo 你的博客了，如果你还没有写博客，那你真的 该试试了。根据 阮一峰提出的博客三阶段，技术人员早晚会选择 Github Pages 类似的服务，而 Hexo 绝对是值得尝试的。
本文内容与目的
写这篇文章的目的，当然是希望帮你快速的制作一款主题，将要包含的内容如下：
主题的基本结构 常见问题 常用页面的实现 基本工具最终结果
写这篇文章的原因，就是因为制作了一个主题Random（ 代码、 Demo），大家可以先看看，下面的代码，大都来自于这个主题。
基础知识
制作 Hexo 主题，除了需要了解 HTML / CSS / JavaScript 之外，还需要了解两个主要的技术，首先一个是模板引擎，Hexo支持主流的模板引擎，像 EJS / Jade / Swig 等，另外一个是 CSS 预处理，如 SASS / LESS / Stylus ，当然，这两个不用，直接使用 HTML / CSS 也是可以的，只不过可能效率会低一点，在本文中，选择使用如下两个：
Stylus： 语法文档，选择它，纯粹是因为想熟悉一下新技术 Swig： 语法文档，这个项目的作者已经半放弃了该项目，你也可以考虑使用 Jade Pug，两个功能差距不大，选择这个的原因同上这篇文章将不介绍它们的使用，请参考它们的文档。
Hexo 工作流程
如果你已经看到了这篇文章，基本上你已经是一个 Hexo 用户了，但还是简单的介绍一下 Hexo 的流程：
使用 hexo init来生成基本文件，做一些基本的配置，像安装模块、配置主题等 使用 hexo new page / post来生成文章或页面的 md 文件，编辑 使用 hexo g生成文件，Hexo 会根据主题中的模板，来生成对应的 html 文件，转译 CSS 文件，复制其它的静态文件（如图片图标字体等），组织为一个静态网站 使用 hexo d来部署，一般是借助一些 部署模块完成主题的作用就是在 Hexo 生成文件的时候，提供对应的模板和资源。
主题的基本结构
Hexo 对主题的基本要求，是需要有如下几个页面：
首页 index 存档页 archive 标签文章列表页 tag 分类文章列表页 category 文章详情页 post 页面详情页 page以上这些文件，是 Hexo 在生成 HTML 文件时要用到的，全部放在主题的 layout文件夹中。由于上面这些页面里，有很多代码是重复的，比如，HTML文件的 head 部分，页面的顶部导航，底部版权部分等，为了修改方便，组织简洁，一般会将可重用的部分提出来，再利用模板引擎来引入。
此外，还有些 JS / CSS / 图片/ favicon.ico 一类的文件，这类文件并不需要 Hexo 进行转换，直接就在 HTML 页面里引用了，所以全部放在主题的 source文件夹中。
使用 yeoman 生成基础代码
现在开始项目之前，我都会搜索一下 yeoman 有没有库，生成 Hexo 主题就有 generator-hexo-theme。如果还没有安装 yeoman ，那先用 npm 全局安装。
npm i -g yo
接着安装生成器的库：
npm i -g generator-hexo-theme
然后到自己的博客目录之下，进入到 themes目录，创建一个用主题名命名的新文件夹，比如 test，进入新文件夹，先设置一下目录的权限，否则 yeoman 会提示权限不足：
chmod 675 ./
运行这个命令一般需要管理员权限，请根据自己系统的情况加 su/ sudo。接着开始生成代码：
yo hexo-theme
然后选择一些基本的配置，比如使用什么模板引擎，使用什么 CSS 预编译等，这里分别选择 Swig 和 Stylus。完成之后，主题目录下就会生成一些如下结构的文件：
├── _config.yml // 主题配置文件├── languages // 多语言文件夹├── layout│ ├── archive.swig // 存档页模板│ ├── category.swig // 分类文章列表页模板│ ├── includes // 各页面共享的模板│ │ ├── layout.swig // 页面布局模板，其它的页面模板都是根据它扩展来的│ │ ├── pagination.swig // 翻页按钮模板│ │ └── recent-posts.swig // 文章列表模板│ ├── index.swig // 首页模板│ ├── page.swig // 页面详情页模板│ ├── post.swig // 文章详情页模板│ └── tag.swig // 标签文章列表页模板└── source ├── css │ └── theme.styl // 主题自定义 CSS 文件 ├── favicon.ico └── js └── theme.js // 主题 JavaScript 文件
赶紧在 Hexo 的主配置文件中使用新主题，到博客根目录下找到 _config.yml文件，找到 theme行，修改如下：
theme: test
赶紧 hexo s启动博客，到浏览器看看效果吧。
多语言支持
Hexo 支持多语言显示，在主题的 languages文件夹中，存放具体的多语言文件，可以是 YML 或者 JSON 文件。再在主配置文件 _config.yml中使用下面的方法来指定具体的使用的配置文件名：
language: zh-CN# 或者多个配置文件language: - zh-CN - en
像下面这样组织语言文件， languages/en.yml：
archive_title: Archivescategory_title: Categorytag_title: Tag
在模板里，当需要在页面中显示文字时，可以使用 Hexo 提供的帮助函数 __()/ _p()来读取具体的值，如：
{% if is_archive() %} {% set pageTitle = _p('archive_title') %}{% endif %}{{ page_title }}
这样，主题就可以轻松支持使用不同语言的博客主。
各个页面的布局
在上面生成的代码中，所有页面均使用同一个布局，全部扩展自 includes/layout.swig，在这个文件中，可以看到第 51 行有如下的代码：
{% block body %}{% endblock %} 在其它的布局文件（除开 includes目录中的）里，都是使对 includes/layout.swig进行扩展，然后指定 body这个块的代码，比如像 index.swig的代码如下：
{% extends 'includes/layout.swig' %}{% block body %} {% include 'includes/recent-posts.swig' %} {% include 'includes/pagination.swig' %}{% endblock %} 这就相当于是使用 includes/layout.swig里的代码，并且将 block body替换为那两行代码。注意，这个功能， EJS 模板引擎是不支持的。
因此，如果你要不同页面使用不同的布局，那就需要你在各自的页面里自定义，或者在单独的布局文件中定义，再扩展。
数据的填充
主题是供了页面的布局和样式，在生成 HTML 文件时，Hexo 会把特定的数据，传给 swig 模板，然后再由 swig 将数据填充到 HTML 文件之中。这些特定的数据，分为如下几类。
主配置文件数据
Hexo 的根目录中，有个 _config.yml文件，它就是主配置文件，数据组织使用 yml语法，其中的项目，可以在模板中直接使用，比如博客的名字、副标题等等之类。这些数据项组织在 config对象中。可以数字、字符串、对象、数组，例如：
# 字符串title: 不可能不确定# 没有值permalink_defaults:# 逻辑值auto_spacing: true# 数字since: 2010# 数组skip_render: - "books" - "books/*"# 对象social: GitHub: https://github测试数据/stiekel Coding.NET: https://coding.net/u/Stiekel Twitter: https://twitter测试数据/SidCN
完整代码，请参见 _config.yml。
主题配置文件
每个主题，还有单独的配置文件，用于配置与主题紧密相关的内容，格式与主配置文件一致。只不过变量名为 theme。
具体哪些数据放到主配置文件中，哪些数据放到主题配置文件，自由度其实很高，一般的，推荐与博客中的数据相关的，放主配置文件，如博客的名字、作者、菜单配置等，与主题相关的，放到主题配置文件，比如主题的脚本文件列表、样式文件列表等。当然，在编写主题的时候，也可以考虑对于某一个数据，既可以放在主配置文件中，也可以放在主题配置文件中，像这样：
{% set menu = config.menu || theme.menu %} 要读取菜单配置时，任意哪个配置文件中有都可以，而且是优先使用主配置文件中的配置。
配置文件中数据的使用
如果要在模板中使用某个具体的值，比如字符串、数字、逻辑变量或者对象的某个成员，可以在主题的模板文件 swig 中直接使用：
{{ config.title }}
查看更多关于Hexo主题制作指南_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112621