模板

模板通过描述每个页面的外观来定义你网站的渲染方式。下表显示了每个可用页面的相应模板。主题至少应该包含一个 index 模板。

¥Templates define the presentation of your website by describing what each page should look like. The table below shows the corresponding template for every available page. At the very least, a theme should contain an index template.

模板 页面 后备
index 主页
post 帖子 index
page 页面 index
archive 存档 index
category 类别档案 archive
tag 标签档案 archive

布局

¥Layouts

当页面共享相似结构时 - 例如,当两个模板都有页眉和页脚时 - 你可以考虑使用 layout 来声明这些结构相似性。每个布局文件都应包含一个 body 变量来显示相关模板的内容。例如:

¥When pages share a similar structure - for instance, when two templates have both a header and a footer - you can consider using a layout to declare these structural similarities. Every layout file should contain a body variable to display the contents of the template in question. For example:

index.ejs
index
layout.ejs
<!doctype html>
<html>
<body>
<%- body %>
</body>
</html>

产生:

¥yields:

<!doctype html>
<html>
<body>
index
</body>
</html>

默认情况下,layout 模板被所有其他模板使用。你可以在 front-matter 中指定其他布局或将其设置为 false 以禁用它。甚至可以通过在顶部布局中包含更多布局模板来构建复杂的嵌套结构。

¥By default, the layout template is used by all other templates. You can specify additional layouts in the front-matter or set it to false to disable it. It’s even possible to build a complex nested structure by including more layout templates in your top layout.

部分

¥Partials

部分对于在模板之间共享组件很有用。典型示例包括页眉、页脚或侧边栏。你可能希望将你的部分放在单独的文件中,以使维护你的网站更加方便。例如:

¥Partials are useful for sharing components between your templates. Typical examples include headers, footers or sidebars. You may want to put your partials in separate files to make maintaining your website significantly more convenient. For example:

partial/header.ejs
<h1 id="logo"><%= config.title %></h1>
index.ejs
<%- partial('partial/header') %>
<div id="content">Home page</div>

产生:

¥yields:

<h1 id="logo">My Site</h1>
<div id="content">Home page</div>

本地变量

¥Local Variables

你可以在模板中定义局部变量并在其他模板中使用它们。

¥You can define local variables in templates and use them in other templates.

partial/header.ejs
<h1 id="logo"><%= title %></h1>
index.ejs
<%- partial('partial/header', {title: 'Hello World'}) %>
<div id="content">Home page</div>

产生:

¥yields:

<h1 id="logo">Hello World</h1>
<div id="content">Home page</div>

优化

¥Optimization

如果你的主题非常复杂或者要生成的文件数量太大,Hexo 的文件生成性能可能会开始显着下降。除了简化主题外,你还可以尝试在 Hexo 2.7 中引入的 Fragment Caching。

¥If your theme is exceedingly complex or if the number of files to generate becomes too large, Hexo’s file generation performance may begin to decrease considerably. Aside from simplifying your theme, you may also try Fragment Caching, which was introduced in Hexo 2.7.

此功能借鉴自 Ruby on Rails。它会导致内容被保存为片段并缓存,以便在触发其他请求时使用。这可以减少数据库查询的数量,也可以加快文件生成速度。

¥This feature was borrowed from Ruby on Rails. It causes content to be saved as fragments and cached for when additional requests are made. This can reduce the number of database queries and can also speed up file generation.

片段缓存最适合用于页眉、页脚、侧边栏或其他不太可能因模板而异的静态内容。例如:

¥Fragment caching is best used for headers, footers, sidebars or other static content that is unlikely to change from template to template. For example:

<%- fragment_cache('header', function(){
return '<header></header>';
});

虽然使用 partials 可能更容易:

¥Though it may be easier to use partials:

<%- partial('header', {}, {cache: true});

fragment_cache() 将缓存渲染结果并将缓存结果输出到其他页面。这应该只用于预计不会在不同页面之间发生变化的部分。否则,不应启用它。例如,当在配置中启用 relative_link 时,它应该被禁用。这是因为相对链接在不同页面上的显示方式可能不同。

¥fragment_cache() will cache the rendered result and output the cached result to other pages. This should only be used on partials that are expected not to change across different pages. Otherwise, it should not be enabled.
For example, it should be disabled when relative_link is enabled in the config. This is because relative links may appear differently across pages.