8.Hexo主题自定义layout布局文件夹

原创已于 2024-04-15 18:24:48 修改 · 1k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Hexo个人博客搭建

于 2024-04-15 13:38:34 首次发布

本文介绍了如何在Hexo主题中创建和管理自定义布局文件，如layout.ejs作为基础布局，index.ejs和post.ejs分别用于索引页和博客文章，同时提到了如何为tag和类别页面创建专用布局（tag.ejs）。

![[Pasted image 20240414134245.png]]

现在的主题是自定义的，因为没有任何定义，现在是一个空白页面
![[Pasted image 20240415123421.png]]

目前资源文件夹里是有一个博客文件a和一个页面文件b

layout.ejs

布局基本上是不同的文件进入Hexo主题内部，决定了主题的外观和感觉
在这个layout文件夹中，要创建一个新文件layout.ejs
这个ejs扩展名是需要在layout文件上使用的
![[Pasted image 20240415123927.png]]

再创建一个文件index.ejs，索引
![[Pasted image 20240415124112.png]]

在layout.ejs文件中，要添加一个基本的HTML骨架

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  
</body>
</html>

在body标签中写一些十分具体的代码

	<%- body %>

转到index.ejs文件
输入

This is the index.ejs file

再回到layout.ejs文件
再输入

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    This is the layout.ejs file
    <br>
    <%- body %>
</body>
</html>

现在要发生的是，当打开网站
![[Pasted image 20240415130231.png]]

会发现页面中多了两行字
![[Pasted image 20240415130532.png]]

再加上一行同样的内容
![[Pasted image 20240415130251.png]]

刷新页面发现同样多了一行

index.ejs

中间一行空白的是index.ejs文件

所以这个布局是两个layout.ejs文件两侧围绕indes.ejs文件的布局

layout.ejs文件是网站中的最高级别的布局
所以网站上所有的页面都会使用这个layout.ejs文件
layout文件里面有一行特殊代码

<%- body %>

就是这个小body标签
它的作用就是这个body标签会被index文件的内容替换
所以当渲染文件时，index文件里的内容会被放置在body标记所在的位置

所以现在有一个整体布局，layout.ejs
和一个单独的布局，index.ejs

![[Pasted image 20240415130737.png]]

在网址上输入b
进入b页面
发现有相同的文本，所以这个页面会使用index.ejs和layout.ejs文件

打开a页面
![[Pasted image 20240415131123.png]]

在a这里也是相同的布局

所以所有在layout.ejs文件中的代码都将显示在所有的这些页面上

post.ejs

现在有两个布局文件layout.ejs和index.ejs
如果想添加一个仅特定于博客文章的布局在网站上，希望博客文章页面和其他页面不同，可以为博客文章单独创建一个布局post.ejs
![[Pasted image 20240415131556.png]]

输入

<h1>This is a post</h1>

![[Pasted image 20240415131724.png]]

刷新a页面
现在使用的是post.ejs的内容为不是index.ejs文件的内容
所以当创建post.ejs文件时，基本上Hexo对任何博客文章或者网站上的所有文章都会使用这个post.ejs文件
但是任然会使用layout.ejs文件，这个layout文件是最高等级的布局文件
post.ejs文件是插入到layout布局文件中的一个布局