💡 参考文章见Ref，感谢提供思路！
🗺️当前这篇博文地址：https://myoontyee.github.io/article/cb001f78.html
⚠️警告：博客文章禁止一切形式的非授权非法转载！
⚠️Attention: All forms of unauthorized illegal reposts are prohibited !

创建时间：2022年3月30日20:09:00
最新更新：2022年3月30日20:09:07

核心思路：

  • 设样式

  • 设逻辑

  • 引用样式

设置样式

  • 在themes\Chic\layout\_page\post.ejs内的对应位置，如<section class="post-tags">的如下代码块下方
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div>

<span>标签:</span>

<span class="tag">

<% if(page.tags.length!==0){%>

<% page.tags.forEach(item=>{ %>

<!-- <a href="<%- url_for(item.path) %>"># <%- item.name %></a> -->

<a href="<%- url_for(item.path) %>">🏷️<%- item.name %></a>

<% }) %>

<% } %>

</span>

</div>
  • 添加如下代码
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

<!-- 支持一下的按钮与图片 -->

<div class="reward" id="reward">

<div class="sponser">

<div class="sponser_btn">放松一下</div>

<div class="sponser_img">

<div class="sponser_container">

<div class="sponser_header">请你看猫！</div>

<div class="sponser_body">

<div class="alipay">

<span class="sponser_alipay_title">猫咪摔倒了！</span>

<div>

<img class="sponser_alipay" src="/image/MeowSlidding.jpg">

</div>

</div>

</div>

</div>

</div>

</div>

</div>

  • 完成设置后，整块<section class="post-tags">代码如下
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

<section class="post-tags">

<div>

<span>标签:</span>

<span class="tag">

<% if(page.tags.length!==0){%>

<% page.tags.forEach(item=>{ %>

<!-- <a href="<%- url_for(item.path) %>"># <%- item.name %></a> -->

<a href="<%- url_for(item.path) %>">🏷️<%- item.name %></a>

<% }) %>

<% } %>

</span>

</div>

<!-- 支持一下的按钮与图片 -->

<div class="reward" id="reward">

<div class="sponser">

<div class="sponser_btn">放松一下</div>

<div class="sponser_img">

<div class="sponser_container">

<div class="sponser_header">请你看猫！</div>

<div class="sponser_body">

<div class="alipay">

<span class="sponser_alipay_title">猫咪摔倒了！</span>

<div>

<img class="sponser_alipay" src="/image/MeowSlidding.jpg">

</div>

</div>

</div>

</div>

</div>

</div>

</div>

 

<div>

<a href="javascript:window.history.back();">返回</a>

<span>· </span>

<a href="<%- config.root %>">主页</a>

</div>

</section>

  • 记得要在themes\Chic\source\image文件夹下放置对应的图片

设置CSS样式

  • 打开themes\Chic\source\css\_lib\，创建reward.css，写入以下内容
    • 其中/* border-style: solid; */这一句要注释掉，因为会影响别的布局，并最终导致无法对齐
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

.sponser_btn{

 width: 120px;

 height: 30px;

 color:#000000;

 background: rgb(255, 255, 255);

 border-radius:13px;

 border-color: rgb(228, 228, 228);

 border-width: 1.2px;

 border-style: solid;

 box-shadow: 0 1px 1px 0px rgba(0,0,0,0.1);

 text-align: center;

 position: absolute;

 top: auto;

 left: 43%;

} 

  

.sponser_img{

 display: none;

 width: 0px;

 height: 0px;

 /* border-style: solid; */

 float: none;

 position: relative;

 top: -380px;

  
  

}

  
  
  

.sponser_container{

 text-align: center;

 background: rgb(255, 255, 255);

 width: 380px;

 height: 380px;

 border-radius:13px;

 border-color: rgb(228, 228, 228);

 border-width: 1.2px;

 border-style: solid;

 position: absolute;

 float: none;

 left: 210px;

  

}

  

/* 用于鼠标移过以后显示窗口 */

.sponser_btn:hover + .sponser_img{

 display: block;

}

  

.sponser_header{

 width: auto;

 height: auto;

 text-align: center;

 font-size: large;

 border-bottom: solid rgb(228, 228, 228) 1.2px;

 background: rgb(255, 255, 255);

}

.sponser_body{

 width: auto;

 height: auto;

 text-align: center;

 background: rgb(255, 255, 255);

}

.alipay{

 width: auto;

 height: auto;

 text-align: center;

 background: rgb(255, 255, 255);

}

.sponser_alipay_title{

 width: auto;

 height: auto;

 text-align: center;

 font-size: medium;

 background: rgb(255, 255, 255);

}

.sponser_alipay{

 width: 300px;

 height: 300px;

 text-align: center;

 background: rgb(255, 255, 255);

}

  • 其中用于唤出新窗口的操作在于如下两点，默认display:none;不显示，鼠标移过.sponser_btn:hover + .sponser_img，给你显示一下display: block;
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

.sponser_img{

 display: none;

 width: 0px;

 height: 0px;

 background: rgb(255, 255, 255);

 border-radius:13px;

 border-color: rgb(228, 228, 228);

 border-width: 1.2px;

 border-style: solid;

 float: none;

 position: relative;

 top: -400px;

 /* left: -250px; */

  

}
1
2
3
4
5
6
7
/* 用于鼠标移过以后显示窗口 */

.sponser_btn:hover + .sponser_img{

 display: block;

}

调用样式

  • 打开themes\Chic\source\css\style.styl，在最下方添加
1
2
3
4

// 赞助
@import "_lib/reward.css"

效果

Ref