进阶内容：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的定义过程主要涉及两个地方：

1. scaffolds/文件夹：主要控制新创建的Markdown文件的基本内容模板。
2. themes/theme-name/layout/文件夹：定义具体的排版和样式设置，主要包括ejs模板文件。

3. scaffolds/文件夹

scaffolds/文件夹的作用是定义新的Markdown文件时默认的内容格式。当你使用hexo new命令创建一篇新的文章时，Hexo会自动使用scaffolds/中的模板来生成该文件的初始内容。

如何使用：

假设你希望创建一个自定义的布局，名为selflayout，可以按照以下步骤操作：

1. 在scaffolds/文件夹下创建一个新文件，例如selflayout.md，并定义其Front Matter内容：

   1 2 3 4 5 6 7

   --- title: {{title}} date: {{date}} author: hahaha layout: {{layout}} --- Demo: self-defined post content

2. 然后使用命令生成新的文章：

   1	hexo new selflayout "demo"

   在_posts/文件夹下会生成一个名为demo.md的文件，并且layout属性会自动设置为selflayout。

通过这种方式，你可以避免每次创建文章时都重复填写相同的属性（如author、categories等）。例如，你可以为所有文章默认添加一个作者：

• 在scaffolds/post.md中定义：

  1 2 3 4 5 6

  --- 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渲染页面时，会按照以下顺序处理：

1. 根据Markdown文件中的layout属性，Hexo会选择相应的ejs模板进行渲染。
2. layout.ejs是每个页面的基础模板，它通常包含HTML骨架、头部、导航栏、页脚等通用结构。页面内容通过<%- body %>插入到layout.ejs的指定位置。
3. 对于每篇博客文章，Hexo会选择post.ejs模板进行渲染。如果你在Front Matter中指定了一个自定义的layout，比如selflayout，那么Hexo会查找selflayout.ejs并使用它来渲染该页面。

示例：

假设你的theme目录下有以下结构：

1
2
3
4

themes/theme-name/layout/
  ├── layout.ejs
  ├── post.ejs
  ├── selflayout.ejs

当你创建一个selflayout类型的页面时，Hexo会：

1. 先加载layout.ejs，这是基础模板。
2. 然后检查是否存在selflayout.ejs，如果存在，会将其内容插入到layout.ejs的<%- body %>位置。

如果selflayout.ejs不存在，Hexo会退回使用post.ejs，并根据post.ejs的排版规则进行渲染。

5. 自定义layout

除了Hexo提供的默认post、draft和page布局，你还可以创建自己的layout，并且通过修改主题的_config.yml文件来指定默认布局。

步骤：

1. 在themes/theme-name/layout/中创建新的.ejs文件，如mycustomlayout.ejs。
2. 在Markdown文件的Front Matter中指定使用该布局：

   1 2 3 4 5 6

   --- title: My Custom Post date: 2024-11-15 layout: mycustomlayout --- This is a custom post with a custom layout.

3. 当Hexo渲染该文章时，会加载layout.ejs和mycustomlayout.ejs，然后将文章内容插入到mycustomlayout.ejs定义的位置。

总结

• scaffolds/ 文件夹用于定义新建Markdown文件时的内容模板，帮助我们快速创建符合格式的文章。
• themes/theme-name/layout/ 文件夹用于定义页面的排版模板，负责最终的HTML渲染过程。
• layout属性控制了Hexo如何渲染页面的内容和样式，通过灵活的layout.ejs和自定义的ejs文件，我们可以创建多种布局，满足不同的需求。

掌握layout的使用，将大大提高我们在Hexo中的主题定制能力。你可以根据不同的需求灵活控制页面结构和样式，使每篇文章、每个页面都具备独特的表现形式。如果你有更具体的布局需求，可以通过创建和修改自定义的layout来实现。