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

现在的主题是自定义的，因为没有任何定义，现在是一个空白页面

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

layout.ejs

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

再创建一个文件index.ejs，索引

在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>

现在要发生的是，当打开网站

会发现页面中多了两行字

再加上一行同样的内容

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

index.ejs

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

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

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

<%- body %>

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

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

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

打开a页面

在a这里也是相同的布局

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

post.ejs

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

输入

<h1>This is a post</h1>

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

page.ejs

也可以对page页面执行相同的操作
默认情况下，页面b，网站上的任何一个页面会使用post.ejs文件，或者如果post.ejs文件不能用，会使用index.ejs文件
如果想要新的页面，可以创建一个新的文件page.ejs
输入

<h1>This is a page</h1>

打开b页面

tag.ejs

如果markdown文件里有标签和类别

也可以为标签和类别创建布局
创建tag.ejs文件
输入

<h1>This is a tag</h1>

打开tag1页面

同样也可以为类别页面创建布局

这个layout.ejs文件，根据在网站中访问的页面类型，会使用其中不同的布局
这些布局会插入到更高级别的布局中
可以根据所在页面的类型来更改两个文件中的内容