那是我第一次遇到那座山，自然听不得好言相劝 ；这世间都是空手而还，意兴阑珊 ；我失去的每一份月亮，都是我该失去的亦心甘情愿；此去经年，山是山，我是我
鲁迅《药》
前言
Hexo标签外挂制作流程主要分为创建插件文件、编写插件代码、注册插件等
- 创建插件文件：在 Hexo 项目的插件目录下创建一个新的 JavaScript 文件，用于编写你的插件代码。通常，插件文件的命名约定是
xxx.js，其中 xxx 是你给插件起的名字
- 编写插件代码：在插件文件中编写你的插件代码。根据需求，可以使用 Hexo 提供的 API 来扩展 Hexo 的功能，或者执行其他自定义的操作。也可以使用 JavaScript 语言的特性和库来实现你的功能
- 注册插件：在插件文件的末尾，使用 Hexo 的插件注册方法将插件注册到 Hexo 中。通常，需要使用
hexo.extend.tag.register 方法来注册一个自定义标签，或者使用 hexo.extend.filter.register 方法来注册一个过滤器。这样 Hexo 就能够识别并使用插件了
- 在Hexo主题的tags目录下新建一个download.js文件
- 在download.js文件中写入以下代码：
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
| 'use strict'
let downContentBg='<svg class="download-content-bg" width="879" height="205" viewBox="0 45 820 160" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient x1="100%" y1="23.013%" x2="9.11%" y2="68.305%" id="la"><stop stop-color="var(--member-color, #0072FF)" stop-opacity=".01" offset=".533%"></stop><stop stop-color="var(--member-color, #0072FF)" stop-opacity=".15" offset="100%"></stop></linearGradient> <linearGradient x1="81.006%" y1="27.662%" x2=".899%" y2="69.383%" id="lb"><stop stop-color="var(--member-color, #0072FF)" stop-opacity=".15" offset="0%"></stop><stop stop-color="var(--member-color, #0072FF)" stop-opacity=".01" offset="100%"></stop></linearGradient> </defs> <g fill="none" fill-rule="evenodd"><path d="M9.871 124.063c7.9 9.12 28.19 21.598 46.66 5.41 19.19-16.818 27.986-42.87 15.531-51.971-12.454-9.102-37.594-6.819-59.32 1.62-21.727 8.44-10.77 35.822-2.87 44.941z" fill="url(#la)" transform="translate(67.938 .937)"></path><path d="M610.783 44.063c-25.145 39.42-47.054 78.134-30.12 105.532 16.932 27.398 74.377 30.672 171.4 6.468 97.021-24.203 52.5-112.016 17.794-141.793-34.705-29.777-133.929-9.626-159.074 29.793z" fill="url(#lb)" transform="translate(67.938 .937)"></path><path fill-opacity=".06" fill="var(--member-color, #0072FF)" d="M325.477 101.51l-11.132 16.084-1.86-1.118L323.96 100.2z"></path><path fill-opacity=".06" fill="var(--member-color, #0072FF)" d="M363.904 94.28l-1.494 1.24 8.566 10.255 1.487-1.383z"></path><path fill-opacity=".06" fill="var(--member-color, #0072FF)" d="M215.386 150.719v.88l14.355 2.179v-.821z"></path><path fill-opacity=".06" fill="var(--member-color, #0072FF)" d="M144.006 125.22l.63.83 11.67-6.978-.569-.758-11.38 6.686"></path><path fill-opacity=".06" fill="var(--member-color, #0072FF)" d="M530.724 87.128l-.41.92 13.227 4.995.396-.942z"></path><path fill-opacity=".06" fill="var(--member-color, #0072FF)" d="M613.697 99.184l.65.711 13.93-15.484-.8-.593z"></path><path fill-opacity=".06" fill="var(--member-color, #0072FF)" d="M605.186 140.762l-.794.433 6.098 17.285.821-.419z"></path></g> </svg>';
function download(args, content){
const attributes = {};
args.forEach(arg => {
const [key, value] = arg.split('=');
attributes[key.trim()] = value.trim();
});
const title = attributes.title ? attributes.title : '资源下载';
const thumb = attributes.thumb ? attributes.thumb : '/images/down-thum.svg';
const format = attributes.format ? attributes.format : 'Zip';
const size = attributes.size ? attributes.size : '未定义';
const source = attributes.source ? attributes.source : '未知';
const time = attributes.time ? attributes.time : '未知';
const downloadLink = attributes.downurl1;
const baiduLink = attributes.downurl2 ? attributes.downurl2 : '#';
return `
<div class="hexo-download">
${downContentBg}
<div class="download-body">
<div class="download-thumb">
<img decoding="async" src="${thumb}" alt="${title}">
</div>
<div class="download-content">
<h3 class="download-title">${title}</h3>
<div class="download-info">
<span class="download-info-label">格式</span>
<span class="download-info-value">${format}</span>
<span class="download-info-label">大小</span>
<span class="download-info-value">${size}</span>
<span class="download-info-label">来源</span>
<span class="download-info-value">${source}</span>
<span class="download-info-label">更新</span>
<span class="download-info-value">${time}</span>
</div>
</div><!-- download-content -->
<div class="download-action">
<a class="btn-primary" href="${downloadLink}" target="_blank">立即下载</a>
<a class="btn-primary" href="${baiduLink}" target="_blank">网盘下载</a>
</div>
</div><!-- download-body -->
</div>
`;
}
hexo.extend.tag.register('download',download, { ends: false })
|
- 自定义标签外挂的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
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
| .hexo-download {
position: relative;
z-index: 0;
width: 100%;
height: 200px;
margin: 1rem 0;
text-align: center;
box-shadow: 0 0 1px 0 hsla(0, 0%, 15%, .2);
}
.hexo-download::before {
position: absolute;
z-index: -1;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #206be7;
content: "";
opacity: .05;
}
.download-content-bg {
position: absolute;
z-index: -1;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.download-body {
display: grid;
text-align: left;
grid-template-columns: 2.8fr 57% 2fr 0;
}
.download-thumb {
min-width: 100px;
padding: 20px 0 20px 20px;
}
@media (max-width: 767px) {
.download-body{
display: flex;
}
.download-thumb {
padding: 15px 0 15px 10px
}
}
.download-thumb img {
display: block;
width: 100%;
height: auto;
min-height: 80px;
max-height: 220px;
border-radius: 3px;
max-width: 100%;
vertical-align: top;
}
@media (max-width: 767px) {
.download-thumb img {
min-height: 10vw;
max-height: 25vw
}
}
@media (max-width: 460px) {
.download-thumb img {
min-height: 15vw;
max-height: 35vw
}
}
.download-content {
padding: 20px min(6%, 25px);
}
@media (max-width: 767px) {
.download-content {
padding-left: 15px;
padding-right: 15px
}
}
@media (max-width: 580px) {
.download-content {
padding: 15px 10px;
width: calc(100% - 120px)
}
}
@media (max-width: 400px) {
.download-content {
display: none;
}
}
.download-title {
margin: 0 0 12px;
font-size: 18px;
line-height: 1.47;
font-weight: 500
}
@media (max-width: 767px) {
.download-title {
margin: 0 0 8px;
font-size: 15px;
line-height: 1.3;
font-weight: 600
}
}
.download-info {
display: grid;
font-size: 14px;
line-height: 30px;
color: var(--text-highlight-color);
grid-template-columns: min-content auto min-content auto;
column-gap: 15px;
white-space: nowrap;
padding: 1rem 0;
}
@media (max-width: 767px) {
.download-info {
column-gap: 8px;
font-size: 11px;
line-height: 2
}
}
.download-info-label,
.download-info-value {
overflow: hidden;
text-overflow: ellipsis
}
.download-info-label {
color: var(--text-highlight-color);
}
.download-action {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 145px;
padding: 20px min(15%, 20px);
flex-wrap: wrap;
box-sizing: border-box;
height: 200px;
}
@media (max-width: 580px) {
.download-action {
width: 100%
}
}
.download-action:before {
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
content: "";
background: #206be7;
opacity: .1
}
.download-action .btn-primary {
display: block;
width: 100%;
height: auto;
box-sizing: border-box;
text-decoration: none;
transition: all .1s ease-out 0s;
outline: 0;
background-color: #0072FF !important;
color: #fff !important;
border-radius: 4px;
padding: 8px 15px !important;
font-size: 12px;
line-height: 14px;
margin-bottom: 1rem;
font-weight: 400 !important;
text-align: center;
touch-action: manipulation;
cursor: pointer;
white-space: nowrap;
}
|
至于这里为什么不用Stylus 的预编译，因为css更直接。
标签使用
1
| {% download thumb='https://img0.baidu.com/it/u=3184215777,3694310732&fm=253&fmt=auto&app=138&f=JPG?w=658&h=494' title='测试下载' format='JPG' size='25KB' source='Unsplash' time='2023-07-24' downurl1='blog.qiaoxiao.top' downurl2='blog.qiaoxiao.top' %}
|
| 参数 |
说明 |
参数忽略 |
| thumb |
下载缩略图 |
√ |
| title |
文件名称 |
√ |
| format |
文件格式 |
√ |
| size |
文件大小 |
√ |
| source |
文件来源 |
√ |
| time |
更新时间 |
√ |
| downurl1 |
下载地址一 |
× |
| downurl2 |
下载地址二 |
√ |
效果演示
测试下载
格式
JPG
大小
25KB
来源
Auth
更新
2023-07-24
