进阶内容：Hexo中的layout概念
对于想深入了解Hexo主题定制和博客排版的开发者来说，layout是一个非常重要的概念。理解它有助于更好地控制博客页面的结构和样式，使我们能够根据需求轻松创建和管理不同类型的页面和文章。
在Hexo中，layout主要指的是页面的排版和布局。它决定了每个页面的外观和内容如何被展示。通过layout，我们可以灵活地选择和定制文章、页面或草稿的布局。
1. layout概述
layout的基本作用是告诉Hexo如何渲染特定页面或文章的HTML结构和样式。它实际上涉及了两个部分：
内容设置：即定义页面或文章的主要内容（Front Matter、正文等）。
排版设置：即如何根据不同的
layout类型渲染HTML结构，并应用相应的CSS样式。
默认情况下，Hexo为我们提供了几种常见的布局：post（文章）、draft（草稿）和page（页面）。但实际上，我们可以根据需要创建更多自定义布局。
2. layout的工作原理
在Hexo中，每个Markdown文件都有一个layout属性。这个属性通常会出现在文件的Front Matter部分。如果在Front Matter中没有指定layout，Hexo会根据_config.yml中的default_layout参数来决定默认的布局，默认为post。
具体来说，Hexo在渲染一个页面时，会根据layout属性来选择相应的ejs模板文件，生成最终的HTML页面。一个layout的定义过程主要涉及两个地方：
scaffolds/文件夹：主要控制新创建的Markdown文件的基本内容模板。themes/theme-name/layout/文件夹：定义具体的排版和样式设置，主要包括ejs模板文件。
3. scaffolds/文件夹
scaffolds/文件夹的作用是定义新的Markdown文件时默认的内容格式。当你使用hexo new命令创建一篇新的文章时，Hexo会自动使用scaffolds/中的模板来生成该文件的初始内容。
如何使用：
假设你希望创建一个自定义的布局，名为selflayout，可以按照以下步骤操作：
在
scaffolds/文件夹下创建一个新文件，例如selflayout.md，并定义其Front Matter内容：MARKDOWNmarkdown
MARKDOWN--- title: {{title}} date: {{date}} author: hahaha layout: {{layout}} --- Demo: self-defined post content然后使用命令生成新的文章：
BASHbash
BASHhexo new selflayout "demo"在
_posts/文件夹下会生成一个名为demo.md的文件，并且layout属性会自动设置为selflayout。
通过这种方式，你可以避免每次创建文章时都重复填写相同的属性（如author、categories等）。例如，你可以为所有文章默认添加一个作者：
在
scaffolds/post.md中定义：MARKDOWNmarkdown
MARKDOWN--- title: {{title}} date: {{date}} author: aa layout: post ---
这样，每次使用hexo new post创建文章时，author字段就会自动填充为aa，省去了手动添加的麻烦。
4. themes/theme-name/layout/文件夹
themes/theme-name/layout/文件夹用于定义实际的页面排版和HTML渲染。在这里，你会找到许多.ejs文件，这些文件负责最终的页面展示。
在Hexo渲染页面时，会按照以下顺序处理：
根据Markdown文件中的
layout属性，Hexo会选择相应的ejs模板进行渲染。layout.ejs是每个页面的基础模板，它通常包含HTML骨架、头部、导航栏、页脚等通用结构。页面内容通过<%- body %>插入到layout.ejs的指定位置。对于每篇博客文章，Hexo会选择
post.ejs模板进行渲染。如果你在Front Matter中指定了一个自定义的layout，比如selflayout，那么Hexo会查找selflayout.ejs并使用它来渲染该页面。
示例：
假设你的theme目录下有以下结构：
PLAINTEXT
PLAINTEXT
themes/theme-name/layout/
├── layout.ejs
├── post.ejs
├── selflayout.ejs当你创建一个selflayout类型的页面时，Hexo会：
先加载
layout.ejs，这是基础模板。然后检查是否存在
selflayout.ejs，如果存在，会将其内容插入到layout.ejs的<%- body %>位置。
如果selflayout.ejs不存在，Hexo会退回使用post.ejs，并根据post.ejs的排版规则进行渲染。
5. 自定义layout
除了Hexo提供的默认post、draft和page布局，你还可以创建自己的layout，并且通过修改主题的_config.yml文件来指定默认布局。
步骤：
在
themes/theme-name/layout/中创建新的.ejs文件，如mycustomlayout.ejs。在Markdown文件的Front Matter中指定使用该布局：
MARKDOWNmarkdown
MARKDOWN--- title: My Custom Post date: 2024-11-15 layout: mycustomlayout --- This is a custom post with a custom layout.当Hexo渲染该文章时，会加载
layout.ejs和mycustomlayout.ejs，然后将文章内容插入到mycustomlayout.ejs定义的位置。
总结
scaffolds/文件夹用于定义新建Markdown文件时的内容模板，帮助我们快速创建符合格式的文章。themes/theme-name/layout/文件夹用于定义页面的排版模板，负责最终的HTML渲染过程。layout属性控制了Hexo如何渲染页面的内容和样式，通过灵活的layout.ejs和自定义的ejs文件，我们可以创建多种布局，满足不同的需求。
掌握layout的使用，将大大提高我们在Hexo中的主题定制能力。你可以根据不同的需求灵活控制页面结构和样式，使每篇文章、每个页面都具备独特的表现形式。如果你有更具体的布局需求，可以通过创建和修改自定义的layout来实现。
