为hexo-next建立静态说说

发布时间：2024-09-20 17:22:58更新时间：2024-09-20 17:23:00

🕒 阅读时间：8 分钟📝 字数：1234👀 阅读量：Loading...

曾经考虑使用Artitalk,但由于网络原因以及github无法备案等原因，暂时放弃，转而使用静态方法写说说

改改改

新建essay.swig

在 hexo/themes/next/layout/ 下创建 essay.swig 并写入以下内容

1
    {##################}
2
    {### ESSAY BLOCK ###}
3
    {##################}
4

5
<style>
6
#bber * {
7
  box-sizing: border-box;
8
}
9
ul#waterfall {
10
    display: flex;
11
    flex-wrap: wrap;
12
    justify-content: space-between;
13
    list-style: none;
14
    margin: 0;
15
    padding: 0;
16
}
17
li.item {
18
    display: flex;
19
    flex-direction: column;
20
    flex-wrap: nowrap;
21
    justify-content: flex-end;
22
    align-items: flex-start;
23
    border: 1px solid #e3e8f7;
24
    padding: 20px;
25
    margin: 10px;
26
    flex-basis: 100%;
27
    border-radius: 12px;
28
}
29
.bber-content {
30
    display: flex;
31
    flex-wrap: wrap;
32
    justify-content: space-between;
33
}
34
div#bber-tips {
35
    display: flex;
36
    justify-content: center;
37
}
38
#bber p {
39
  margin: 0px;
40
  padding: 0px;
41
}
42
.item hr {
43
  border: 1px dashed #4259ef23;
44
  height: 0px;
45
  margin: 8px 0px;
46
  display: flex;
47
  width: 100%;
48
}
49
.bber-container-img {
50
    display: flex;
51
    gap: 3px;
52
    margin-bottom: 3px;
53
}
54
a.fancybox {
55
    flex: 1;
56
}
57
.bber-info, .bber-info-time, .bber-content-link {
58
    display: inline-block;
59
}
60
.bber-content-link {
61
    margin-left: 15px;
62
}
63
.bber-bottom {
64
    width: 100%;
65
}
66
.bber-info-time, .bber-content-link {
67
    background-color: rgba(153,153,153,0.169);
68
    border-radius: 20px;
69
    padding: 0 8px;
70
    font-size: .9rem;
71
    color: var(--text-color);
72
}
73
</style>
74

75
<div id="bber">
76
  <section class="timeline page-1">
77
    <ul id="waterfall" class="list">
78
      {% for i in site.data.essay %}
79
        {% for item in i.essay_list %}
80
            <li class="item">
81
              <div class="bber-content">
82
                <p class="datacont">{{ item.content }}</p>
83
                {% if item.image %}
84
                  <div class="bber-container-img">
85
                    {% for indey in item.image %}
86
                      <img src="{{ indey }}" style="margin-bottom: 0px;" alt="miaoshu"/>
87
                    {% endfor %}
88
                  </div>
89
                {% endif %}
90
              </div>
91
              <hr>
92
              <div class="bber-bottom">
93
                <div class="bber-info">
94
                  <div class="bber-info-time">
95
                    <i class="far fa-clock"></i>
96
                    <time class="datatime" datetime="{{ item.date }}">{{ date(item.date, "YYYY/M/D") }}</time>
97
                  </div>
98
                  {% if item.link %}
99
                    <a href="{{ item.link }}" class="bber-content-link" target="_blank" title="跳转到短文指引的链接">
100
                      <i class="fas fa-link"></i>
101
                      链接
102
                    </a>
103
                  {% endif %}
104
                </div>
105
              </div>
106
            </li>
107
        {% endfor %}
108
      {% endfor %}
109
    </ul>
110
  </section>
111
</div>
112

113
    {######################}
114
    {### END ESSAY BLOCK ###}
115
    {######################}

{% endif %}

{% if item.link %} 链接 {% endif %}

{% endfor %} {% endfor %}

{######################} {### END ESSAY BLOCK ###} {######################}">

修改page.swig

然后打开 hexo/themes/next/layout/page.swig在 {% block title %}{% endblock %} 内的 (%- else %) 前添加

1
{%- elif page.type === 'essay' and not page.title %}
2
    {{- __('title.essay') + page_title_suffix }}

然后在下面的 block content 里的 PAGE BODY 内的 (% else %) 前，插入

1
{% elif page.type === 'essay' %}
2
  {%- include 'essay.njk' -%}

注意对齐格式

创建essay.yml

然后在 hexo/source/_data/ 下创建 essay.yml，写入以下内容

1
- class_name: 说说
2
  essay_list:
3
      - content: #（必须）内容
4
        date: #（必须）日期 格式：年-月-日（月与日必须是 2 位数，如2024年3月9号为 2024-03-09）
5
        link: #（可选）链接，可以在下方插入一条链接
6
        image: #（可选），插入图片，可插入多张，写法如下，注意缩进
7
            -  #图片路径
8
            -  #图片路径
9
            -  #图片路径
10
      - content:
11
        date:
12
      - content:
13
        date:

创建页面

运行

1
hexo new page essay

其会创建 hexo/source/essay/index.md文件设置标题日期，type 要设置为 “essay”

1
---
2
title: 说来亦无妨
3
type: "essay"
4
date: 2024-09-19 17:22:12
5
---

注意，如果你想在说说页面添加自己的样式，请修改essay.yml文件，修改index.md文件不会产生效果

在侧边栏添加说说

打开hexo\themes\next\_config.yml在menu处添加

1
说说: /essay/ || fas fa-pen

这样侧边栏会显示说说

后续更新

在 hexo/source/_data/essay.yml 更新内容就可以了，需要注意的是，内容的先后顺序与渲染出来的结果是一致的，即越写在上面的，在渲染结果中也就越排在上方

1
- content: 因为在最上面，所以网页中在最上方
2
  date: 2024-03-09
3
- content: 因为排在下方，所以网页中排在后面
4
  date: 2024-03-09

参考

Next 主题添加说说

为hexo-next建立静态说说

作者：xingwangzhe

本文链接：https://xingwangzhe.fun/posts/f513b372/

本文采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。