效果预览

引用站外地址，注意辨别
记录集
我の文字瞬间

创建数据

小节开始前，提醒事项。
对于初次魔改新手，建议先过一遍：魔改前置教程：添加自定义css和js文件

  • 创建[blogRoot]/source/records/index.md页面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: 文字瞬间
date: 2023-04-07 21:07:54
type: records
top_img: false
aside: false
top_page: true
top_bg: https://s11.ax1x.com/2023/04/08/ppHKgpR.jpg
top_item: WeChet
top_title: 每刻の感动瞬间
top_tips: 记录 文字的力量
comments: false
---

<!-- 页面内容 -->
  • 修改[blogRoot]/themes/butterfly/layout/page.pug来使页面匹配。
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'records'
+        include includes/page/records.pug
      default
        include includes/page/default-page.pug
  • 创建[blogRoot]/themes/butterfly/layout/includes/page/records.pug页面，并新增以下内容。
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
- var result = ''
each i in site.data.records
  each j in i.records_list
    - var listResult = ''
    - var listContents = ''
    -
      listResult += `
        <div id="icat-records">
            <details>
                <summary>${j.title}</summary>
                <div class="icat-records-tab-content">
                    <div class="icat-records-container">
                        <div class="icat-records-chat-time">
                            <span>${j.time}</span>
                        </div>`
    - var j_avatar = j.avatar || url_for(theme.avatar.img)
    each l in j.contents_list
      -
        if (l.avatar && l.avatar.trim())
          listContents += `<div class="icat-records-the-other-side"><img src="${l.avatar}"><div class="icat-records-left-arrowhead"></div><div class="icat-records-the-other-side-content"><p>${l.content}</p></div></div>`
        else
          listContents += `<div class="icat-records-self"><div class="icat-records-self-content"><p>${l.content}</p></div><div class="icat-records-right-arrowhead"></div><img src="${j_avatar}"></div>`
      -
    -
    - listResult += listContents + `</div></div></details></div>`
    - result += listResult
!= result
  • 新建[blogRoot]/source/css/records.css样式文件，并新增以下内容。
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
#icat-records {
  padding-top: 12px;
}
.icat-records-self,
.icat-records-the-other-side {
  padding: 12px 2rem;
  display: flex;
  clear: both;
}
.icat-records-self {
  float: right;
}
.icat-records-self img,
.icat-records-the-other-side img {
  width: 50px;
  height: 50px;
  border-radius: 6px;
}
/* 头像 */

.icat-records-self-content {
  background: var(--icat-self-content-background-color);
  border-radius: 6px;
  margin-right: -4px;
  padding: 0px 16px;
  margin-left: 66px;
}
.icat-records-the-other-side-content {
  background: var(--icat-the-other-side-content-background-color);
  border-radius: 6px;
  margin-left: 1em;
  padding: 0px 16px;
  margin-right: 66px;
}
.icat-records-self-content p {
  color: #000;
}
.icat-records-the-other-side-content p {
  color: var(--icat-the-other-side-content-text-color);
}
/* 文字内容 */

.icat-records-left-arrowhead {
  position: absolute;
  transform: rotate(90deg);
  margin-left: 48px;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-top: 8px solid var(--icat-the-other-side-content-background-color);
}
.icat-records-right-arrowhead {
  transform: rotate(-90deg);
  margin-right: -2px;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-top: 8px solid var(--icat-self-content-background-color);
}
.icat-records-left-arrowhead,
.icat-records-right-arrowhead {
  width: 0;
  height: 0;
  margin-top: 16px;
}
/* 左右箭头 */

.icat-records-chat-time {
  display: flex;
  padding-top: 10px;
}
.icat-records-chat-time span {
  color: var(--icat-chat-time-text-color);
  margin: 0 auto;
  padding: 0 6px;
  background-color: var(--icat-chat-time-background-color);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
}
/* 时间戳 */

summary {
  font-size: 1rem;
  font-weight: 600;
  background-color: #f3f3f3;
  color: #000;
  padding: 1rem;
  margin-bottom: 4px;
  outline: none;
  border-radius: 0.25rem;
  cursor: pointer;
  position: relative;
}
details {
  clear: both;
}
details[open] summary~* {
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0% {
      opacity: 0;
      margin-top: -10px
  }
  100% {
      opacity: 1;
      margin-top: 0px
  }
}
details>summary::after {
  position: absolute;
  content: "+";
  right: 20px;
}

details[open]>summary::after {
  position: absolute;
  content: "-";
  right: 20px;
}
details>summary::-webkit-details-marker {
  display: none;
}
/* 折叠栏 */

@media screen and (max-width: 768px) {
  .icat-records-self, .icat-records-the-other-side {
      padding: 12px 4px;
  }
  .icat-records-self img, .icat-records-the-other-side img {
      width: 45px;
      height: 45px;
  }
  .icat-records-self-content p, .icat-records-the-other-side-content p {
      font-size: 12px;
  }
  .icat-records-left-arrowhead {
      margin-left: 43px;
  }
  .icat-records-self-content {
      margin-left: 60px;
  }
  .icat-records-the-other-side-content {
      margin-right: 60px;
  }
}
/* 响应式 */

[data-theme="light"] {
  --icat-self-content-background-color: #95EC69;
  --icat-the-other-side-content-background-color: rgba(237,237,237,0.2);
  --icat-the-other-side-content-text-color: #000;
  --icat-chat-time-background-color: rgba(44,44,44,0.02);
  --icat-chat-time-text-color: #000;
}
[data-theme="dark"] {
  --icat-self-content-background-color: #28B561;
  --icat-the-other-side-content-background-color: #2C2C2C;
  --icat-the-other-side-content-text-color: #FFF;
  --icat-chat-time-background-color: rgba(255,255,255,0.12);
  --icat-chat-time-text-color: #FFF;
}
/* 颜色变量 */

/* 文字瞬间 - 聊天记录页 */
  • 在_config.butterfly.yml主题配置文件中inject下的head引入records.css。
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/records.css"> # 聊天记录页样式
  bottom:
    - ···

  ···
  • 创建[blogRoot]/source/_data/records.yml文件，并新增以下内容。
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
- class_name: 文字瞬间
  records_list:
    - title: KKKi_安琪姐
      time: 2023-4-9 16:40
      avatar: https://s11.ax1x.com/2023/04/08/ppHp6W4.jpg
      contents_list:
        - content: 她现在这阵仗估计就安居上海了
        - content: 毕竟让你找房子
          avatar: https://s11.ax1x.com/2023/04/09/ppbFj4P.jpg
        - content: 但我还是喜欢深圳
        - content: 喵的

    - title: 魔女娜儿
      time: 2023-4-7 09:53
      avatar: https://s11.ax1x.com/2023/04/08/ppHp6W4.jpg
      contents_list:
        - content: 小封，答应我一件事好不好嘛
          avatar: https://s11.ax1x.com/2023/04/08/ppHEpbd.jpg
        - content: 咋啦
        - content: 啥事先说
        - content: 给你买了个手刮剃须刀，记得每天洗漱的时候都要刮胡子！
          avatar: https://s11.ax1x.com/2023/04/08/ppHEpbd.jpg
        - content: 我 三天 刮一次
        - content: 长的又不快..
        - content: 不要，不然我就每天给你刮
          avatar: https://s11.ax1x.com/2023/04/08/ppHEpbd.jpg
        - content: 没有胡子的你才超帅的！！！
          avatar: https://s11.ax1x.com/2023/04/08/ppHEpbd.jpg

数据参数释义

参数 类型/释义
class_name 【可选】标识符，无实际意义，选填
records_list 【必选】记录页数据列表
records_list.title 【必选】标题内容
records_list.time 【必选】显示的时间 格式必须为 2023-4-9 16:40 样式
records_list.avatar 【可选】右边（本人）头像
records_list.contents_list 聊天数据
records_list.contents_list.content 【必填】文字内容，如有特殊符号请用””包括
records_list.contents_list.avatar 【选填】对方的头像