📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

本小节最后更新于 2023 年 06 月 24 日

效果预览

记录集
我の文字瞬间

创建数据

  • 创建 [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://s1.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 样式文件，并新增以下内容
    （也可以在自建的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://s1.ax1x.com/2023/04/08/ppHp6W4.jpg
      contents_list:
        - content: 她现在这阵仗估计就安居上海了
        - content: 毕竟让你找房子
          avatar: https://s1.ax1x.com/2023/04/09/ppbFj4P.jpg
        - content: 但我还是喜欢深圳
        - content: 喵的

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