模板決定了網站內容的呈現方式,每個主題至少都應包含一個 index
模板,以下是各頁面相對應的模板名稱:
模板 | 用途 | 回調 |
---|---|---|
index |
首頁 | |
post |
文章 | index |
page |
分頁 | index |
archive |
歸檔 | index |
category |
分類歸檔 | archive |
tag |
標簽歸檔 | archive |
如果頁面結構類似,例如兩個模板都有頁首(Header)和頁腳(Footer),您可考慮通過「布局」讓兩個模板共享相同的結構。一個布局文件必須要能顯示 body
變量的內容,如此一來模板的內容才會被顯示,舉例來說:
index.ejs
index
layout.ejs
<!DOCTYPE html>
<html>
<body><%- body %></body>
</html>
生成:
<!DOCTYPE html>
<html>
<body>index</body>
</html>
每個模板都默認使用 layout
布局,您可在 front-matter 指定其他布局,或是設為 false
來關閉布局功能,您甚至可在布局中再使用其他布局來建立嵌套布局。
局部模板讓您在不同模板之間共享相同的組件,例如頁首(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 '';
});
如果您使用局部模板的話,可以更簡單:
<%- partial('header', {}, {cache: true});
但是,如果您開啟了 relative_link
參數的話,請勿使用局部緩存功能,因為相對鏈接在每個頁面可能不同。