Skip to content

Hexo layout system

The Hexo layout system defines the structural hierarchy used to render web pages within a Hexo theme, typically located within the themes directory^[600-developer__blog__hexo-blog__Hexo-command.md].

Structure

Layout files are stored in the layout/ subfolder of a specific theme directory^[600-developer__blog__hexo-blog__Hexo-command.md]. For example, in the default landscape theme, the path is themes/landscape/layout/^[600-developer__blog__hexo-blog__Hexo-command.md].

Core Components

The system relies on a hierarchy of embedded JavaScript (EJS) templates:

  • layout.ejs: This serves as the master layout file^[600-developer__blog__hexo-blog__Hexo-command.md].
  • index.ejs: This file represents the specific content view that is injected into the master layout^[600-developer__blog__hexo-blog__Hexo-command.md].

The layout.ejs file acts as a wrapper that defines the overall page structure (such as the <head> and <body> tags), while index.ejs contains the specific logic or content for the page being rendered.^[600-developer__blog__hexo-blog__Hexo-command.md]

Rendering Logic

The content of index.ejs is rendered in place of the <%- body %> variable found within layout.ejs^[600-developer__blog__hexo-blog__Hexo-command.md]. This allows for a separation of concerns where the main layout remains consistent across different pages, while the specific body content is dynamically generated by child templates like index.ejs.

Sources

^[600-developer__blog__hexo-blog__Hexo-command.md]

  • [[Hexo]]
  • [[EJS (Embedded JavaScript)]]
  • [[Web development]]
  • [[Theming]]