加上layout.ejs
时间: 2023-11-03 17:05:55 浏览: 42
当 Hexo 渲染页面时,会先加载主题的 `layout.ejs` 文件,然后再加载具体页面的模板文件,将两者组合起来生成最终的 HTML 页面。因此,在编写 Hexo 主题时,需要先创建 `layout.ejs` 文件,再创建具体页面的模板文件。
以下是一个简单的 `layout.ejs` 文件示例,供参考:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<%- partial('head') %>
<body>
<%- partial('header') %>
<main class="container">
<%- body %>
</main>
<%- partial('footer') %>
<%- partial('scripts') %>
</body>
</html>
```
以上代码比之前的示例多了一行 `<%- body %>`,这是用来引入具体页面模板的。具体页面模板可以是 `index.ejs`、`post.ejs`、`page.ejs` 等。
在具体页面模板中,您可以使用以下语法引入 `layout.ejs` 文件:
```html
---
layout: layout
---
```
其中 `layout` 是 `layout.ejs` 文件所在的路径和文件名,相对于主题目录的路径。例如,如果 `layout.ejs` 文件在主题目录下的 `layout` 子目录中,那么这里应该写成 `layout: layout/layout`。
以下是一个简单的 `index.ejs` 文件示例,引入了 `layout.ejs` 文件:
```html
---
title: 首页
layout: layout
---
<div class="row">
<div class="col-md-8">
<% for (var i = 0; i < posts.length; i++) { %>
<%- partial('article', {post: posts[i]}) %>
<% } %>
<%- partial('pagination') %>
</div>
<div class="col-md-4">
<%- partial('sidebar') %>
</div>
</div>
```
以上代码中,`layout` 的值为 `layout`,表示引入主题目录下的 `layout.ejs` 文件。`<% for (var i = 0; i < posts.length; i++) { %>` 和 `<%- partial('article', {post: posts[i]}) %>` 是 EJS 引擎的语法,用于遍历文章列表并引入 `article.ejs` 文件。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)