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.
Template | Page | Fallback |
---|---|---|
index |
Home page | |
post |
Posts | index |
page |
Pages | index |
archive |
Archives | index |
category |
Category archives | archive |
tag |
Tag archives | archive |
Layouts
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 |
|
yields:
|
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:
<h1 id="logo"><%= config.title %></h1> |
<%- partial('partial/header') %> |
yields:
<h1 id="logo">My Site</h1> |
Local Variables
You can define local variables in templates and use them in other templates.
<h1 id="logo"><%= title %></h1> |
<%- partial('partial/header', {title: 'Hello World'}) %> |
yields:
<h1 id="logo">Hello World</h1> |
Optimization
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.
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(){ |
Though it may be easier to use partials:
<%- partial('header', {}, {cache: true}); |
Don’t use fragment caching when the relative_link
setting has been enabled. This may cause issues because relative links can and probably will be different depending on the pages they appear in.