hexo 框架学习总结

模版

模板决定了网站内容的呈现方式,每个主题至少都应包含一个 index 模板,以下是各页面相对应的模板名称:

模板 用途 回调
index 首页
post 文章 index
page 分页 index
archive 归档 index
category 分类归档 archive
tag 标签归档 archive

局部模版(Partial)

局部模板让您在不同模板之间共享相同的组件,例如页首(Header)、页脚(Footer)或侧边栏(Sidebar)等,可利用局部模板功能分割为个别文件,让维护更加便利。举例来说:

partial/header.ejs


<h1 id="logo"><%= config.title %></h1>

index.ejs


<%- partial('partial/header') %>
<div id="content">Home page</div>

生成:


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

局部变量

您可以在局部模板中指定局部变量并使用。
partial/header.ejs

<h1 id="logo"><%= title></h1>

index.ejs


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

生成:


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

优化

如果您的主题太过于复杂,或是需要生成的文件量太过于庞大,可能会大幅降低性能,除了简化主题外,您可以考虑 Hexo 2.7 新增的局部缓存(Fragment Caching) 功能。

本功能借鉴于 Ruby on Rails,它储存局部内容,下次便能直接使用缓存内容,可以减少文件夹查询并使生成速度更快。

它可用于页首、页脚、侧边栏等文件不常变动的位置,举例来说:

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

如果您使用局部模板的话,可以更简单:

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

但是,如果您开启了 relative_link 参数的话,请勿使用局部缓存功能,因为相对链接在每个页面可能不同。

参考文档

本站所有文章除特殊声明外均为原创,未经允许禁止转载!
换个声音
停止播放