为hexo-next建立静态说说

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
    {######################}

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

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

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

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

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

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