Acrylic 主题自定义六：说说嵌入 B 站视频

有时候发表说说会涉及 B 站视频，于是乎就想将 B 站视频嵌入说说中

修改说说列表结构

如果你已经创建了说说页面，那么就会有 source/_data/essay.yml

如果没有创建说说页面，请参考主题说明文档

在说说列表中添加 bilibili 属性，内容就是视频编号，既 https://www.bilibili.com/video/BV1XP411278M 中的 BV1XP411278M

1
2
3
4
5
6
essay_list:
  - content: 烟distance 百听不厌
    date: 2023-6-1
    from: Ruins
    bilibili: BV1XP411278M
    link: https://www.bilibili.com/video/BV1XP411278M

修改说说内容代码

说说内容代码文件位置 themes/Acrylic/layout/partial/component/says/saysContent.ejs，将文件原来的代码替换成下面 👇 的代码

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
<div class="bber-content">
    <p class="datacont"><%- item.content %></p>
    <% if(item.image){ %>
        <div class="bber-content-img">
            <% item.image.forEach(img => { %>
                <img src="<%= img %>">
            <% }); %>
        </div>
    <% } %>
    <% if (item.bilibili) { %>
        <a href="https://www.bilibili.com/video/<%= item.bilibili %>/" class="bilibili_box" id="<%= item.bilibili %>"></a>
        <script>
            const playIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67735 4.2798C5.98983 4.1725 7.85812 4.0625 10 4.0625C12.1421 4.0625 14.0105 4.17252 15.323 4.27983C16.2216 4.3533 16.9184 5.04049 16.9989 5.9318C17.0962 7.00837 17.1875 8.43614 17.1875 10C17.1875 11.5639 17.0962 12.9916 16.9989 14.0682C16.9184 14.9595 16.2216 15.6467 15.323 15.7202C14.0105 15.8275 12.1421 15.9375 10 15.9375C7.85812 15.9375 5.98983 15.8275 4.67735 15.7202C3.77861 15.6467 3.08174 14.9593 3.00119 14.0678C2.90388 12.9908 2.8125 11.5627 2.8125 10C2.8125 8.43727 2.90388 7.00924 3.00119 5.93221C3.08174 5.04067 3.77861 4.35327 4.67735 4.2798ZM10 2.8125C7.81674 2.8125 5.9136 2.92456 4.5755 3.03395C3.07738 3.15643 1.8921 4.31616 1.75626 5.81973C1.65651 6.92379 1.5625 8.39058 1.5625 10C1.5625 11.6094 1.65651 13.0762 1.75626 14.1803C1.8921 15.6838 3.07738 16.8436 4.5755 16.966C5.9136 17.0754 7.81674 17.1875 10 17.1875C12.1835 17.1875 14.0868 17.0754 15.4249 16.966C16.9228 16.8436 18.108 15.6841 18.2438 14.1807C18.3435 13.077 18.4375 11.6105 18.4375 10C18.4375 8.38948 18.3435 6.92296 18.2438 5.81931C18.108 4.31588 16.9228 3.15645 15.4249 3.03398C14.0868 2.92458 12.1835 2.8125 10 2.8125ZM12.1876 10.722C12.7431 10.4013 12.7431 9.59941 12.1876 9.27866L9.06133 7.47373C8.50577 7.15298 7.81133 7.55392 7.81133 8.19542V11.8053C7.81133 12.4468 8.50577 12.8477 9.06133 12.527L12.1876 10.722Z" fill="#9499A0"/></svg>`
            const likeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 36 36" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"></path></svg>`
            const coinIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 28 28" class="icon" style="fill:;"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.045 25.5454C7.69377 25.5454 2.54504 20.3967 2.54504 14.0454C2.54504 7.69413 7.69377 2.54541 14.045 2.54541C20.3963 2.54541 25.545 7.69413 25.545 14.0454C25.545 17.0954 24.3334 20.0205 22.1768 22.1771C20.0201 24.3338 17.095 25.5454 14.045 25.5454ZM9.66202 6.81624H18.2761C18.825 6.81624 19.27 7.22183 19.27 7.72216C19.27 8.22248 18.825 8.62807 18.2761 8.62807H14.95V10.2903C17.989 10.4444 20.3766 12.9487 20.3855 15.9916V17.1995C20.3854 17.6997 19.9799 18.1052 19.4796 18.1052C18.9793 18.1052 18.5738 17.6997 18.5737 17.1995V15.9916C18.5667 13.9478 16.9882 12.2535 14.95 12.1022V20.5574C14.95 21.0577 14.5444 21.4633 14.0441 21.4633C13.5437 21.4633 13.1382 21.0577 13.1382 20.5574V12.1022C11.1 12.2535 9.52148 13.9478 9.51448 15.9916V17.1995C9.5144 17.6997 9.10883 18.1052 8.60856 18.1052C8.1083 18.1052 7.70273 17.6997 7.70265 17.1995V15.9916C7.71158 12.9487 10.0992 10.4444 13.1382 10.2903V8.62807H9.66202C9.11309 8.62807 8.66809 8.22248 8.66809 7.72216C8.66809 7.22183 9.11309 6.81624 9.66202 6.81624Z"></path></svg>`
            
            let dom = document.getElementById('<%= item.bilibili %>')
            fetch('https://api.320.ink/api/b?id=<%= item.bilibili %>').then(res => res.json()).then(data => {
                dom.innerHTML = `
                    <div class="bilibili_cover">
                        <img src="https://s1.hdslb.com/bfs/static/player/img/play.svg" class="play_icon nolazyload">
                        <img src="${data.pic + '&h=300'}" class="nolazyload">
                    </div>
                    <div class="bilibili_info">
                        <div class="title">${data.title}</div>
                        <div class="stat">
                            <span>${playIcon}${data.view}</span>
                            <span>${likeIcon}${data.like}</span>
                            <span>${coinIcon}${data.coin}</span>
                        </div>
                            <div class="owner">
                            <span class="tip">视频</span>
                            <img src="${data.face + '&h=100'}" class="nolazyload">
                            <span>${data.owner}</span>
                        </div>
                    </div>`
            })
        </script>
    <% } %>
</div>

修改样式代码

样式文件位置 themes/Acrylic/source/css/custom.css

使用 IDE Ctrl+F 搜索 .bilibili_box

将原来的代码替换成下面 👇 的代码

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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
/* B站视频样式 */
#article-container .bilibili_box,
.bber-content .bilibili_box {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: var(--ruins-card-bg);
  border: var(--style-border-always);
  border-radius: 10px;
  overflow: hidden;
  color: var(--ruins-fontcolor) !important;
  text-decoration: none !important;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}

#article-container .bilibili_box:hover,
.bber-content .bilibili_box:hover {
  border-color: var(--ruins-theme);
}

@media screen and (max-width: 768px) {
  #article-container .bilibili_box,
  .bber-content .bilibili_box {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

#article-container .bilibili_box .bilibili_cover {
  width: 200px;
  position: relative;
}

.bber-content .bilibili_box .bilibili_cover {
  width: 100px;
  position: relative;
}

@media screen and (max-width: 768px) {
  #article-container .bilibili_box .bilibili_cover,
  .bber-content .bilibili_box .bilibili_cover {
    width: 100%;
  }
}

#article-container .bilibili_box .bilibili_cover img {
  width: 100%;
  filter: none;
  margin: 0 !important;
  border-radius: 0 !important;
}

.bber-content .bilibili_box .bilibili_cover img {
  height: 100%;
  filter: none;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0 !important;
}

#article-container .bilibili_box .bilibili_cover .play_icon,
.bber-content .bilibili_box .bilibili_cover .play_icon {
  position: absolute;
  width: 45px;
  height: 45px;
  opacity: 0.8;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#article-container .bilibili_box .bilibili_cover span,
.bber-content .bilibili_box .bilibili_cover span {
  position: absolute;
  bottom: 0;
  right: 5px;
  color: #fff;
}

#article-container .bilibili_box .bilibili_info,
.bber-content .bilibili_box .bilibili_info {
  padding: 10px 10px 10px 18px;
  width: calc(100% - 200px);
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: distribute;
  -moz-box-pack: distribute;
  -o-box-pack: distribute;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.bber-content .bilibili_box .bilibili_info {
  width: calc(100% - 100px);
}

@media screen and (max-width: 768px) {
  #article-container .bilibili_box .bilibili_info,
  .bber-content .bilibili_box .bilibili_info {
    width: 100%;
    padding-bottom: 25px;
  }
}

#article-container .bilibili_box .bilibili_info .title,
.bber-content .bilibili_box .bilibili_info .title {
  font-size: 1.2rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  line-height: 1.7;
}

.bber-content .bilibili_box .bilibili_info .title {
  font-size: 1rem;
}

#article-container .bilibili_box .bilibili_info .stat,
.bber-content .bilibili_box .bilibili_info .stat {
  font-size: 15px;
}

#article-container .bilibili_box .bilibili_info .stat svg,
.bber-content .bilibili_box .bilibili_info .stat svg {
  margin-right: 3px;
  font-size: 18px;
  vertical-align: -0.15em;
}

#article-container .bilibili_box .bilibili_info .stat svg path,
.bber-content .bilibili_box .bilibili_info .stat svg path {
  fill: #99a9bf;
}

#article-container .bilibili_box .bilibili_info .stat span,
.bber-content .bilibili_box .bilibili_info .stat span {
  margin-right: 10px;
}

#article-container .bilibili_box .bilibili_info .owner,
.bber-content .bilibili_box .bilibili_info .owner {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  line-height: 1;
  font-size: 15px;
  margin-top: 3px;
}

#article-container .bilibili_box .bilibili_info .owner .tip,
.bber-content .bilibili_box .bilibili_info .owner .tip {
  color: #f69;
  border: 1px solid;
  padding: 4px 7px;
  font-size: 13px;
  border-radius: 5px;
  margin-right: 10px;
}

#article-container .bilibili_box .bilibili_info .owner img,
.bber-content .bilibili_box .bilibili_info .owner img {
  width: 25px;
  height: 25px;
  border-radius: 50% !important;
  object-fit: cover;
  margin: 0 5px 0 0 !important;
}

#article-container .bilibili_box,
.bber-content .bilibili_box .bilibili_info .stat svg {
  opacity: 0.8;
}

实际效果参考 View Room