在基于hexo的fluid主题中创建自定义布局
在网上找了一圈，没发现fluid中的自定义布局该怎么创建（可能是我懒找不到🤣），参照现有页面以及和大语言模型做对抗训练给写出来了，在此记录下流程。
示例需求是：
“创建一个日记页，存储以‘日记’为tag的文章并计数”。如下：
注意：本主题安装方式为npm安装，安装步骤中会有具体的路径说明；若是使用压缩包安装的朋友们可以直接在对应的主题文件夹下找到这里记录的配置文件。
创建新页面，这里和
创建关于页相同1
hexo new page diary在
source文件下修改新页面下的index.md中layout为自定义的模板英文名称
后续将会频繁用到这个模板名称，后续我将直接使用模板名称指代layout的值，命名请尽量简洁。
目前系统不会识别这个布局信息，后续我们将在fluid主题文件夹下复制归档页的逻辑实现这个功能。1
2
3
4
5---
title: 日记
date: 2023-08-01 21:32:25
layout: diary
---在
_config.fluid.yml中的navbar.menu中复制一行并将key和link的值修改为模板名称：1
2
3
4
5
6navbar:
....
menu:
....省略已有项
- { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
- { key: "diary", link: "/diary/", icon: "iconfont icon-notebook" }在
_config.fluid.yml下面部分添加你的页面属性，这里直接复制了归档页的参数，并修改了一级的英文名称为模板名称：
你可以通过在文件中搜索归档页来快速找到你应该添加页面参数的地方，注意缩进，模板名称在这里是没有缩进的。1
2
3
4
5
6
7
8#---------------------------
# 日记页
# diary Page
#---------------------------
diary:
banner_img: /img/bg/default.jpg
banner_img_height: 60
banner_mask_alpha: 0.3_config.fluid.yml到此配置完毕，进入博客根目录\node_modules\hexo-theme-fluid\layout文件夹中，复制archive.ejs并在同级目录下粘贴，将粘贴的文件重命名为模板名称.ejs。
现在你就得到了一个是归档页的模板，但是命名是模板名称的模板文件。打开
模板名称.ejs模板文件搜索并替换
archive为模板名称，注意最后一行的diary-list.ejs是另外一个后续需要新建的模板文件名称，不要拼错：1
2
3
4
5
6
7
8
9
10<%
page.layout = "diary"
page.title = theme.diary.title || __('diary.title')
page.subtitle = theme.diary.subtitle || __('diary.subtitle')
page.banner_img = theme.diary.banner_img
page.banner_img_height = theme.diary.banner_img_height
page.banner_mask_alpha = theme.diary.banner_mask_alpha
%>
<%- partial('_partials/diary-list.ejs', { params: { key: page.layout, postTotal: site.posts.length } }) %>添加下面这行代码到
partial上方，并修改partial中的代码逻辑为下面的样子。代码作用请看注释，如需修改请自行改变条件或逻辑：1
2
3<!-- 迭代查找所有post的tag中如果有日记，则放入diaryPosts对象中，并传入diary-lists中 -->
<% var diaryPosts=site.posts.filter(post=> post.tags.map(tag => tag.name).includes('日记')) %>
<%- partial('_partials/archive-list.ejs', { params: { key: page.layout, postTotal: site.posts.length } }) %>全部代码如下：
1
2
3
4
5
6
7
8
9
10
11
12<%
page.layout = "diary"
page.title = theme.diary.title || __('diary.title')
page.subtitle = theme.diary.subtitle || __('diary.subtitle')
page.banner_img = theme.diary.banner_img
page.banner_img_height = theme.diary.banner_img_height
page.banner_mask_alpha = theme.diary.banner_mask_alpha
%>
<!-- 迭代查找所有post的tag中如果有日记，则放入diaryPosts对象中，并传入diary-lists中 -->
<% var diaryPosts=site.posts.filter(post=> post.tags.map(tag => tag.name).includes('日记')) %>
<%- partial('_partials/diary-list.ejs', { params: { key: page.layout, postTotal: diaryPosts.length }, posts: diaryPosts }) %>大语言模型对上面的代码给出的解释如下：
1
2
3
4这段代码首先设置了页面的布局和标题。
然后，它创建了一个 **diaryPosts** 变量，包含了所有带有 diary 标签的文章。
最后，它调用了 **_partials/archive-list.ejs** 部分模板，传递了一个参数对象给它，其中包含了 **key、postTotal 和 posts** 属性。
在 Hexo 的模板中，page 对象包含了有关当前页面的信息，这里的**key: page.layout**是在这个文件的第二行的值。
模板名称.ejs修改完毕后，进入同级目录下的_partials目录中，复制archive-list.ejs并粘贴到同级目录，将其重命名为模板名称-list.ejs打开
模板名称-list.ejs将
page.posts修改为posts,代码如下：1
2
3
4
5
6
7<div class="list-group">
<p class="h4"><%= __(params.key + '.post_total', params.postTotal) %></p>
<hr>
<% var dateCursor %>
<% posts.each(function (post) { %> <!-- 修改这行代码中的page.posts为posts -->
<% if(date(post.date, "YYYY") !== dateCursor) { %>
<% dateCursor = date(post.date, "YYYY") %>
在
source\_data\languages\en.yml以及zh-CN.yml中添加语言翻译
如果您发现没有这个路径或者这个文件，请先完成下面的指南再加入您模板名称的翻译：1
2
3
4
5
6
7
8
9
10
11
12# zh-CN
diary:
menu: '日记'
title: '日记'
subtitle: '日记'
post_total: '共计 %d 篇日记'
# en
diary:
menu: 'Diary'
title: 'Diary'
subtitle: 'Diary'
post_total: '%d diaries in total'在
博客根目录\scaffolds中新建一个模板名称.md文件，在其中填入下面的内容：1
2
3
4
5---
title: {{ title }}
date: {{ date }}
tags: [] # 以模板名称.ejs中的判断条件为准，可以不是tag
---可直接输入
hexo new 模板名称即可快速创建一个模板，并显示在对应的页面中
如有错误请在评论区告知，我看到后将第一时间修改