hexo-custom-layout v1.1.1
Hexo custom layout
This Hexo plugin allows user to:
- Load custom layouts without modifying theme files
- Apply custom layouts from a relative path or from post asset folder
- Use tags to insert another file into posts or pages
- Markdown, HTML, etc.
- Insert templates into posts or pages
- Nunjucks, EJS, etc. Same as layouts
- Can pass arguments when referencing
- Generate sub pages as standalone pages in post asset folders
Quick Start
Global custom layout
The plugin provides a config key layout_dir for setting the name of directory that stores global layouts.
The default value is layout.
For example, your website has a video collection and you want to create a layout to be applied to all video pages, so that you only need to write the video file address in the front matter, and the template will build the video page.
- Create
layoutfolder in your website root directory (same level assource) - Write a template
video.ejsaccording to guides on hexo theme - Put
video.ejsinlayout - Add
layout: videoin the front matter of your video pages
Portable custom layout
You can also put layouts together with your pages, in source folder. Name those in the format of <name>.layout.ejs or <name>.layout.njk, and write layout_from: example in the front matter of the page you want to apply to.
source/_post/example.layout.njk
<body>
<h1>{{ page.title }}</h1>
<div>Behold! {{ page.content }}</div>
</body>source/_post/main.html
---
title: Welcome
layout_from: example
---
The great and powerful Triksyie!Rendered result
<body>
<h1>Welcome</h1>
<div>Behold! The great and powerful Triksyie!</div>
</body>Include snippet file
Use the nunjucks tag snippet to include a snippet file. The snippet file must be named as <name>.snippet.html, or <name>.snippet.md, etc.
source/_post/avatar.snippet.html
<div class='avatar'>
<img src='/images/avatar.png'></img>
</div>source/_post/main.html
<body>
This is my avatar:
{% snippet avatar.html %}
</body>Note that you must remove the .snippet part in the filename when referencing.
Rendered result
<body>
This is my avatar:
<div class='avatar'>
<img src='/images/avatar.png'></img>
</div>
</body>Besides that, the second parameter of the tag can be chosen from from, asset, and global.
They corresponds to relative path, path in post asset folder, and global path.
In the example above, {% snippet bibliography.md asset %} will reference source/_post/main/bibliography.md.
Inserting templates works similarly. See relevant test files for example usage
Asset pages
Put pages in post asset folder and name them as <name>.page.<ext> to render them as standalone pages.
See tests for examples.
See under test for more examples.