看见洪哥的即刻页面很好看，想 Copy 过来，可惜技术不行，写不来瀑布流，就只能搞个简单的 flex 布局。
原理和友链页面是一样的，模版文件遍历 hexo/source/_data 文件夹下的 yml 然后循环生成结构。
在这里感谢好朋友 @OrzMiku 的帮助，修改该博客过程中，很多问题都是通过大佬耐心解答才得以解决 Orz
废话不多说，直接 Ctrl + C / V 走起
在 hexo/themes/next/layout/ 下创建 essay.njk 并写入以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
| {##################}
{### ESSAY BLOCK ###}
{##################}
<style>
#bber * {
box-sizing: border-box;
}
ul#waterfall {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
li.item {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: flex-start;
border: 1px solid #e3e8f7;
padding: 20px;
margin: 10px;
flex-basis: 100%;
border-radius: 12px;
}
.bber-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div#bber-tips {
display: flex;
justify-content: center;
}
#bber p {
margin: 0px;
padding: 0px;
}
.item hr {
border: 1px dashed #4259ef23;
height: 0px;
margin: 8px 0px;
display: flex;
width: 100%;
}
.bber-container-img {
display: flex;
gap: 3px;
margin-bottom: 3px;
}
a.fancybox {
flex: 1;
}
.bber-info, .bber-info-time, .bber-content-link {
display: inline-block;
}
.bber-content-link {
margin-left: 15px;
}
.bber-bottom {
width: 100%;
}
.bber-info-time, .bber-content-link {
background-color: rgba(153,153,153,0.169);
border-radius: 20px;
padding: 0 8px;
font-size: .9rem;
color: var(--text-color);
}
</style>
<div id="bber">
<section class="timeline page-1">
<ul id="waterfall" class="list">
{% for i in site.data.essay %}
{% for item in i.essay_list %}
<li class="item">
<div class="bber-content">
<p class="datacont">{{ item.content }}</p>
{% if item.image %}
<div class="bber-container-img">
{% for indey in item.image %}
<img src="{{ indey }}" style="margin-bottom: 0px;" />
{% endfor %}
</div>
{% endif %}
</div>
<hr>
<div class="bber-bottom">
<div class="bber-info">
<div class="bber-info-time">
<i class="far fa-clock"></i>
<time class="datatime" datetime="{{ item.date }}">{{ date(item.date, "YYYY/M/D") }}</time>
</div>
{% if item.link %}
<a href="{{ item.link }}" class="bber-content-link" target="_blank" title="跳转到短文指引的链接">
<i class="fas fa-link"></i>
链接
</a>
{% endif %}
</div>
</div>
</li>
{% endfor %}
{% endfor %}
</ul>
</section>
</div>
{######################}
{### END ESSAY BLOCK ###}
{######################}
|
然后打开 hexo/themes/next/layout/page.njk，在 {% block title %}{% endblock %} 内的 {%- else %} 前添加
1
2
3
4
5
6
7
8
9
| {%- if page.type === 'categories' and not page.title %}
{{- __('title.category') + page_title_suffix }}
{%- elif page.type === 'tags' and not page.title %}
{{- __('title.tag') + page_title_suffix }}
{%- elif page.type === 'schedule' and not page.title %}
{{- __('title.schedule') + page_title_suffix }}
+{%- elif page.type === 'essay' and not page.title %}
+ {{- __('title.essay') + page_title_suffix }}
{%- else %}
|
以下为方便复制版本
1
2
| {%- elif page.type === 'essay' and not page.title %}
{{- __('title.essay') + page_title_suffix }}
|
然后在下面的 block content 里的 PAGE BODY 内的 {% else %} 前，插入
1
2
3
4
5
6
7
8
9
| {%- if page.type === 'tags' %}
{%- include '_partials/page/tags.njk' -%}
{% elif page.type === 'categories' %}
{%- include '_partials/page/categories.njk' -%}
{% elif page.type === 'schedule' %}
{%- include '_partials/page/schedule.njk' -%}
+{% elif page.type === 'essay' %}
+ {%- include 'essay.njk' -%}
{% else %}
|
以下为方便复制版本
1
2
| {% elif page.type === 'essay' %}
{%- include 'essay.njk' -%}
|
然后在 hexo/source/_data/ 下创建 essay.yml，写入以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
| - class_name: 说说
essay_list:
- content: #（必须）内容
date: #（必须）日期 格式：年-月-日（月与日必须是 2 位数，如2024年3月9号为 2024-03-09）
link: #（可选）链接，可以在下方插入一条链接
image: #（可选），插入图片，可插入多张，写法如下，注意缩进
- #图片路径
- #图片路径
- #图片路径
- content:
date:
- content:
date:
|
运行 hexo new page "essay" 创建 hexo/source/essay/index.md 文件，设置标题日期，type 要设置为 "essay"
1
2
3
| title: 说说
date: 2023-09-26 11:18:28
type: "essay"
|
打开 _config.next.yml，在 menu 中添加
1
2
| menu:
essay: /essay/ || fas fa-pen
|
打开 hexo/themes/next/languages/zh-CN.yml，在 menu 中添加
之后在 hexo/source/_data/essay.yml 更新内容就可以了，需要注意的是，内容的先后顺序与渲染出来的结果是一致的，即越写在上面的，在渲染结果中也就越排在上方
1
2
3
4
| - content: 因为在最上面，所以网页中在最上方
date: 2024-03-09
- content: 因为排在下方，所以网页中排在后面
date: 2024-03-09
|