theme文件夹结构

  • _config.yml
  • languages
  • layout
  • scripts
  • source

_config.yml

主题的配置文件，修改主题的配置文件不需要重启服务器（修改网站根目录的那个_config.yml则需要重启才能生效)

languages

国际化设置，使用yml文件设置网站元素的翻译，具体参考i18n

layout

网页、模板的设置。hexo默认使用Swig,不过也可以手动添加EJS,Haml,Jade或者Pug的支持。模板的写法参考 Templates

scripts

存放JavaScript代码的文件夹，Hexo会自动加载这里的javaScript文件。扩展功能参考 plugins

source

顾名思义，这里是存放资源的。不属于页面模板的资源理论上都应该在此文件夹下面。

模板

Layout 布局

在主题文件夹下的layout中定义不同模板的页面的呈现方式，具体的模板文件定义了页面的body内容，而layout则定义了如何显示body。
比如在布局中这样写：

1
2
3
4
<!DOCTYPE html>
<html>
  <body><%- body %></body>
</html>

系统默认的布局为layout布局，不过在post的头部可以通过定义来使用具体的布局。

Partial 组件

不同页面之间共享的内容可以写成组件来管理，比如Header,Footer,Sidebar。
引用组件时：

1
<%- partial('partial/header') %>

变量

资源文件夹

从Hexo 3 开始，在_config.yml中启用post_asset_folder=true, 使用hexo的资源文件夹功能。
启用后，_posts里每生成一个post，会在相同路径下生成一个同名的文件夹作用该post的资源管理文件夹。

引用资源文件夹中的资源

启用了asset_folder后，可以使用以下几种命令，在文章中引用资源:

1
2
3
{% asset_path name %}
{% asset_img name title %}
{% asset_link name title %}

在name的地方填写资源文件夹内的相对路径。

比如以下的文件结构：

1
2
3
4
- sample.md
- sample
  - part1
   - img.jpg

在sample.md中引用img.jpg时的写法是:

1
{% asset_img part1\img.jpg this is title %}

优点

使用资源文件夹与使用markdown的引用语法的最大不同就是：在网站首页或者归档处显示时，使用资源文件夹功能的引用可以被显示，而markdown语法引用的内容则无法被正确显示。

样板

国际化 i18n

i18n (Internationalization) 是指针对不同的国家、地域、语言环境，改变网站通用部分的显示语言。

设置

使用YAML或者JSON编写不同的语言文件，并统一放在主题文件夹languages中。

使用

使用__或者_p来取得对应语言的字符串。比如：

1
2
3
4
menu：
  titile: HOME
  archive: ARCHIVE
  search: SEARCH
1
2
3
4
menu：
  titile: 首页
  archive: 归档
  search: 搜索

在模板中使用目录时（例如语言是英文）：

1
2
3
<%= __('menu.title') %> // HOME
<%= __('menu.archive') %> // 归档
<%= __('menu.search) %> // 搜索