17 Hexo 自定义布局和样式教程
在这个小节中，我们将详细讨论如何在 Hexo 中自定义布局和样式，帮助你创建独特的网站外观。
1. 理解 Hexo 的布局结构
Hexo 的布局是基于 EJS（Embedded JavaScript）模板引擎的，每个页面都有一个对应的布局文件。默认的布局文件位于主题目录下的 layout 文件夹里。
常见布局文件
layout/_layout.ejs：主布局文件，所有页面都基础于此文件。layout/post.ejs：单个文章的布局文件。layout/page.ejs：单个页面的布局文件。
2. 自定义布局
2.1 创建新的布局文件
你可以在 layout 文件夹中创建新的布局文件。例如，我们可以创建一个新的布局用于特定的页面：
1 | touch themes/your-theme/layout/custom.ejs |
示例内容
你可以在 custom.ejs 中添加以下基础内容：
1 | <!DOCTYPE html> |
2.2 使用自定义布局
在 Markdown 文件中，你可以指定使用这个自定义布局。例如，在你的文章或页面的 front matter 中添加：
1 |
|
这样，当你访问这个页面时，Hexo 会使用 custom.ejs 布局。
3. 自定义样式
3.1 创建样式文件
在你的主题目录中，你可以创建一个 CSS 文件来定义样式：
1 | touch themes/your-theme/source/css/style.css |
3.2 编辑样式文件
在 style.css 中添加你的自定义样式：
1 | body { |
3.3 引入样式
确保在你的布局文件中引入了这个 CSS 文件。上面的示例已经包含了：
1 | <link rel="stylesheet" href="<%= url_for('/css/style.css') %>"> |
4. 运行并查看效果
4.1 生成和部署
最后，运行以下命令生成静态文件并部署：
1 | hexo generate |
4.2 查看效果
在浏览器中访问你的网站，查看是否成功应用了自定义布局和样式。
5. 总结
通过以上步骤，你已经学习了如何在 Hexo 中自定义布局和样式。你可以自由地根据个人喜好调整布局文件和样式表，以创建出独特的博客界面。切记，布局文件和样式文件之间的结合可以让你实现更多的个性化展示。
17 Hexo 自定义布局和样式教程
