-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path8.html
More file actions
353 lines (330 loc) · 54.5 KB
/
8.html
File metadata and controls
353 lines (330 loc) · 54.5 KB
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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>butterfly教程（三）进阶美化 | 天泽岁月</title><meta name="keywords" content="hexo,butterfly"><meta name="author" content="天泽"><meta name="copyright" content="天泽"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="description" content="前言博客框架都弄好了，接下来本篇内容就是一些美化方面的内容，以及MD书写的进阶操作。进阶美化这块，不需要添加新的pug文件，只需要添加js或css即可完成得修改。 第三篇 进阶+美化 进阶使用阿里图标学习参考：https://www.antmoe.com/posts/80c43671/index.html 效果图 注册登入：阿里巴巴矢量图标库搜索你要使用的图标，点击加入购物车，加入自己新建的项目">
<meta property="og:type" content="article">
<meta property="og:title" content="butterfly教程（三）进阶美化">
<meta property="og:url" content="http://jayonli.github.io/8.html">
<meta property="og:site_name" content="天泽岁月">
<meta property="og:description" content="前言博客框架都弄好了，接下来本篇内容就是一些美化方面的内容，以及MD书写的进阶操作。进阶美化这块，不需要添加新的pug文件，只需要添加js或css即可完成得修改。 第三篇 进阶+美化 进阶使用阿里图标学习参考：https://www.antmoe.com/posts/80c43671/index.html 效果图 注册登入：阿里巴巴矢量图标库搜索你要使用的图标，点击加入购物车，加入自己新建的项目">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://tva1.sinaimg.cn/large/9bd9b167gy1fwrsrp5uvrj21hc0u0b2b.jpg">
<meta property="article:published_time" content="2020-10-18T05:45:30.554Z">
<meta property="article:modified_time" content="2020-11-21T02:59:43.063Z">
<meta property="article:author" content="天泽">
<meta property="article:tag" content="hexo">
<meta property="article:tag" content="butterfly">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://tva1.sinaimg.cn/large/9bd9b167gy1fwrsrp5uvrj21hc0u0b2b.jpg"><link rel="shortcut icon" href="/style/img/favicon.ico"><link rel="canonical" href="http://jayonli.github.io/8"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css"><script>var GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
translate: undefined,
noticeOutdate: {"limitDay":500,"position":"top","messagePrev":"It has been","messageNext":"days since the last update, the content of the article may be outdated."},
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: {"limitCount":50,"languages":{"author":"作者: 天泽","link":"链接: ","source":"来源: 天泽岁月","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
ClickShowText: undefined,
lightbox: 'fancybox',
Snackbar: undefined,
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
},
isPhotoFigcaption: false,
islazyload: true,
isanchor: false
};
var saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}</script><script id="config_change">var GLOBAL_CONFIG_SITE = {
isPost: true,
isHome: false,
isHighlightShrink: false,
isToc: true,
postUpdate: '2020-11-21 10:59:43'
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(function () { window.activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
window.activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const autoChangeMode = '1'
const t = saveToLocal.get('theme')
if (autoChangeMode === '1') {
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
if (t === undefined) {
if (isLightMode) activateLightMode()
else if (isDarkMode) activateDarkMode()
else if (isNotSpecified || hasNoSupport) {
const now = new Date()
const hour = now.getHours()
const isNight = hour <= 6 || hour >= 18
isNight ? activateDarkMode() : activateLightMode()
}
window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
if (saveToLocal.get('theme') === undefined) {
e.matches ? activateDarkMode() : activateLightMode()
}
})
} else if (t === 'light') activateLightMode()
else activateDarkMode()
} else if (autoChangeMode === '2') {
const now = new Date()
const hour = now.getHours()
const isNight = hour <= 6 || hour >= 18
if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
else if (t === 'light') activateLightMode()
else activateDarkMode()
} else {
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
}const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}})()</script><link rel="stylesheet" href="/style/css/mystyle.css" media="defer" onload="this.media='all'"/><link rel="stylesheet" href="/style/css/iconfont.css" media="defer" onload="this.media='all'"/><link rel="stylesheet" href="/style/gitcalendar/css/gitcalendar.css" media="defer" onload="this.media='all'"/><link rel="stylesheet" href="/style/clock/css/clock.css" media="defer" onload="this.media='all'"/><link rel="stylesheet" href="/style/card/css/cardlist.css" media="defer" onload="this.media='all'"/><link rel="stylesheet" href="/style/css/mouse.css" media="defer" onload="this.media='all'"/><link rel="stylesheet" href="/swiper/css/swiper.min.css" media="defer" onload="this.media='all'"/><link rel="stylesheet" href="/swiper/css/swiperstyle.css" media="defer" onload="this.media='all'"/><meta name="generator" content="Hexo 5.2.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="https://s.gravatar.com/avatar/d8fdf908ef4641679f024dcc89be406b?s=80&r=g" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">18</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">19</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">4</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa fa-tasks"></i><span> 文章</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/archives/"><i class="fa-fw fa fa-inbox"></i><span> 归档</span></a></li><li><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/reward/"><i class="fa-fw fas fa-credit-card"></i><span> 打赏</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url(https://tva1.sinaimg.cn/large/9bd9b167gy1fwrsrp5uvrj21hc0u0b2b.jpg)"><nav id="nav"><span id="blog_name"><img src="/style/img/favicon.ico" alt="LOGO"/><a id="site-name" href="/">天泽岁月</a></span><span id="weather-v2-plugin-simple"></span><span id="menus"><div id="search_button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa fa-tasks"></i><span> 文章</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/archives/"><i class="fa-fw fa fa-inbox"></i><span> 归档</span></a></li><li><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/reward/"><i class="fa-fw fas fa-credit-card"></i><span> 打赏</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><span class="close" id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></span></span></nav><div id="post-info"><h1 class="post-title">butterfly教程（三）进阶美化</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2020-10-18T05:45:30.554Z" title="发表于 2020-10-18 13:45:30">2020-10-18</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2020-11-21T02:59:43.063Z" title="更新于 2020-11-21 10:59:43">2020-11-21</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/site/">site</a></span></div><div class="meta-secondline"> <span class="post-meta-separator">|</span><span class="post-meta-pv-cv"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>博客框架都弄好了，接下来本篇内容就是一些美化方面的内容，以及MD书写的进阶操作。进阶美化这块，不需要添加新的pug文件，只需要添加js或css即可完成得修改。</p>
<h1 id="第三篇-进阶-美化"><a href="#第三篇-进阶-美化" class="headerlink" title="第三篇 进阶+美化"></a>第三篇 进阶+美化</h1><p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116201408.png" alt="20201116201408"></p>
<h2 id="进阶"><a href="#进阶" class="headerlink" title="进阶"></a>进阶</h2><h3 id="使用阿里图标"><a href="#使用阿里图标" class="headerlink" title="使用阿里图标"></a>使用阿里图标</h3><p>学习参考：<a target="_blank" rel="noopener" href="https://www.antmoe.com/posts/80c43671/index.html">https://www.antmoe.com/posts/80c43671/index.html</a></p>
<p>效果图</p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201119195841.png" alt="20201119195841"></p>
<p>注册登入：<a target="_blank" rel="noopener" href="https://www.iconfont.cn/">阿里巴巴矢量图标库</a><br>搜索你要使用的图标，点击加入购物车，加入自己新建的项目中，<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201028103214.png#img-radius" alt="20201028103214"><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201028103320.png" alt="20201028103320"><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201028103406.png" alt="20201028103406"></p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201028104125.png" alt="20201028104125"></p>
<p>然后复制显示的代码到浏览器的地址中，回车显示，然后右键另存为css文件（iconfont.css），保存到自己css文件夹，便于使用<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201028104259.png" alt="20201028104259"></p>
<p>注意：这个css需要修改,不改的话好像无法显示图标…<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201028105904.png" alt="20201028105904"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-attr">[class^=<span class="string">"icon-"</span>]</span>, <span class="selector-attr">[class*=<span class="string">" icon-"</span>]</span> {</span><br><span class="line"> <span class="comment">/* use !important to prevent issues with browser extensions that change fonts */</span></span><br><span class="line"> <span class="attribute">font-family</span>: <span class="string">'iconfont'</span> <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">speak</span>: none;</span><br><span class="line"> <span class="attribute">font-style</span>: normal;</span><br><span class="line"> <span class="attribute">font-weight</span>: normal;</span><br><span class="line"> <span class="attribute">font-variant</span>: normal;</span><br><span class="line"> <span class="attribute">text-transform</span>: none;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">/* Better Font Rendering =========== */</span></span><br><span class="line"> <span class="attribute">-webkit-font-smoothing</span>: antialiased;</span><br><span class="line"> <span class="attribute">-moz-osx-font-smoothing</span>: grayscale;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>接下来把选的阿里图标引入自己的博客中</p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201028105739.png" alt="20201028105739"></p>
<p>然后就可以在你需要的地方直接使用图标了<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201028110102.png" alt="20201028110102"></p>
<ul>
<li>图标旋转</li>
</ul>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116174237.png"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">display</span>: <span class="selector-tag">inline-block</span>;</span><br><span class="line"><span class="selector-tag">transform</span>: <span class="selector-tag">rotate</span>(1440<span class="selector-tag">deg</span>);</span><br></pre></td></tr></table></figure>
<h3 id="使用JsDeliver加速文件"><a href="#使用JsDeliver加速文件" class="headerlink" title="使用JsDeliver加速文件"></a>使用JsDeliver加速文件</h3><p>参考：<a target="_blank" rel="noopener" href="https://blog.csdn.net/u012208219/article/details/106883075?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param">优雅使用JsDeliver加速文件</a></p>
<ul>
<li>JsDeliver拓展学习 </li>
</ul>
<p>官网：<a target="_blank" rel="noopener" href="https://www.jsdelivr.com/?docs=gh">JsDeliver</a></p>
<p>是一个免费、开放原始码的公有 CDN 服务，托管了许多大大小小的 JavaScript、CSS 等 libraries。</p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201031222119.png" alt="20201031222119"></p>
<ul>
<li><p>JsDeliver使用 </p>
<ul>
<li>直接引用 </li>
</ul>
</li>
</ul>
<blockquote>
<p>格式为：<br><a target="_blank" rel="noopener" href="https://cdn.jsdelivr.net/gh/">https://cdn.jsdelivr.net/gh/</a><用户名>/<仓库名>/<文件及路径></p>
</blockquote>
<p>这里不做过多的介绍，直接用。 </p>
<ul>
<li>分支/版本号引用 </li>
</ul>
<p>优点在于：这个链接仅停留在发布版本号的时刻，无论仓库如何变化，这个版本号的文件都不会受到影响。同时可以避免JSD缓存问题。 </p>
<p>默认你已经创建好GitHub仓库，仓库是公开。进入你的项目仓库中，选择右侧的[create a new release]</p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgsSnipaste_2020-10-31_21-41-18.jpg" alt="Snipaste_2020-10-31_21-41-18"> </p>
<p>填写好release的版本号<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgsSnipaste_2020-10-31_21-42-38.jpg" alt="Snipaste_2020-10-31_21-42-38"> </p>
<p>这里可以看到发布的代码压缩包 </p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgsSnipaste_2020-10-31_21-43-011.jpg"></p>
<p>做完以上工作后，就可以到code界面，选择一个文件打开进入 </p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201031215937.png" alt="20201031215937"> </p>
<p>接下来正式食用格式： </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>@[分支/版本号]/<文件及路径> </span><br></pre></td></tr></table></figure>
<p>如： </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">图中文件地址： </span><br><span class="line">https://github.com/Jayonli/Jayonli.github.io/blob/v1.0/css/index.css </span><br><span class="line"></span><br><span class="line">用jsdelivr来访问: </span><br><span class="line">https://cdn.jsdelivr.net/gh/Jayonli/@v1.0/css/index.css</span><br></pre></td></tr></table></figure>
<p>合并多个文件: jsdelivr的组合端点允许您在一个请求中从npm和GitHub端点加载多个文件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://cdn.jsdelivr.net/combine/url1,url2,url3</span><br></pre></td></tr></table></figure>
<p>适用于单个文件的所有功能（版本范围，缩小等）也适用于此处。所有组合文件都带有源映射，可以在开发过程中轻松使用。 </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">https://cdn.jsdelivr.net/combine/gh/jquery/jquery@3.2/dist/jquery.min.js,gh/twbs/bootstrap@3.3/dist/js/bootstrap.min.js</span><br><span class="line">https://cdn.jsdelivr.net/combine/npm/bootstrap@3.3/dist/css/bootstrap.min.css,npm/bootstrap@3.3/dist/css/bootstrap-theme.min.css</span><br></pre></td></tr></table></figure>
<ul>
<li>刷新Jsdelivr缓存 </li>
</ul>
<blockquote>
<p>手动刷新：<a target="_blank" rel="noopener" href="https://cdn.jsdelivr.net/">https://cdn.jsdelivr.net</a><br>事实刷新：<a target="_blank" rel="noopener" href="https://purge.jsdelivr.net/">https://purge.jsdelivr.net</a></p>
</blockquote>
<h3 id="文章永久链接"><a href="#文章永久链接" class="headerlink" title="文章永久链接"></a>文章永久链接</h3><p>Hexo 默认的永久链接格式层度太深，也不利于搜索引擎蜘蛛的爬虫。<br>效果图<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201119200009.png" alt="20201119200009"></p>
<ul>
<li>安装插件 </li>
</ul>
<p><a target="_blank" rel="noopener" href="https://github.com/rozbo/hexo-abbrlink">github说明使用</a></p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-abbrlink --save</span><br></pre></td></tr></table></figure>
<p>在根目录的_config.yml 文件，添加 abbrlink 的配置： </p>
<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#abbrlink配置</span></span><br><span class="line"><span class="attr">abbrlink:</span></span><br><span class="line"> <span class="attr">alg:</span> <span class="string">crc32</span> <span class="comment"># suanfa：crc16(default) and crc32</span></span><br><span class="line"> <span class="attr">rep:</span> <span class="string">dec</span> <span class="comment"># jinzhi：dec(default) and hex</span></span><br></pre></td></tr></table></figure>
<p>在根目录的_config.yml 文件里找到 permalinnk 并修改，比如我想要 xx.com/xx.html 的格式就修改如下</p>
<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">permalink:</span> <span class="string">:abbrlink.html</span></span><br></pre></td></tr></table></figure>
<p>注意：如果新的文章没有定义头部的 abbrlink 的话，文章永久链接就是 crc32 生成的字符串永久链接，之前的文章打开后会自动补充加上 abbrlink 的定义。</p>
<h3 id="新建文章自动打开编辑器"><a href="#新建文章自动打开编辑器" class="headerlink" title="新建文章自动打开编辑器"></a>新建文章自动打开编辑器</h3><p>Q:hexo 写新文章时，需要控制台执行 hexo new “文章名字”，这样就会在_posts 下生成一篇新文章，但需要手动打开.<br>S:在站点根目录下新建 <kbd>scripts</kbd> 目录，然后在新建<kbd> auto_open.js </kbd> ，在文件填入内容： </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> spawn = <span class="built_in">require</span>(<span class="string">'child_process'</span>).exec;</span><br><span class="line">hexo.on(<span class="string">'new'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>{</span><br><span class="line"> spawn(<span class="string">'start "E: \Program Files\IDE\Microsoft VS Code\Code.exe" '</span> + data.path);</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p><strong>注意</strong>：<kbd>E: \Program Files\IDE\Microsoft VS Code\Code.exe</kbd>是编辑器的路径，只需要改为你本地编辑器的路径即可，以后在发布文章就会自动打开编辑器。 </p>
<h3 id="文章计数"><a href="#文章计数" class="headerlink" title="文章计数"></a>文章计数</h3><p>效果图<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201119200053.png" alt="20201119200053"></p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-wordcount --save</span><br></pre></td></tr></table></figure>
<p>安装好计数插件，主题配置文件中，搜索：<kbd># wordcount (字數統計)</kbd>，开启计数功能即可。 </p>
<h3 id="标签外挂"><a href="#标签外挂" class="headerlink" title="标签外挂"></a><a target="_blank" rel="noopener" href="https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89">标签外挂</a></h3><p>个人感觉flat模式好看。</p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201102173045.png" alt="20201102173045"></p>
<h3 id="标签隐藏"><a href="#标签隐藏" class="headerlink" title="标签隐藏"></a><a target="_blank" rel="noopener" href="https://butterfly.js.org/posts/4aa8abbe/#tag-hide">标签隐藏</a></h3><h3 id="使用Vercel来加速博客"><a href="#使用Vercel来加速博客" class="headerlink" title="使用Vercel来加速博客"></a>使用Vercel来加速博客</h3><p>vercel加速对电信友好，移动联通不行。 </p>
<p>参考学习：<a target="_blank" rel="noopener" href="https://akilar.top/posts/812734f8/">https://akilar.top/posts/812734f8/</a></p>
<p>进入vercel官网点击sign up进行注册：<a target="_blank" rel="noopener" href="https://vercel.com/">https://vercel.com</a> </p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116104606.png" alt="20201116104606"><br>使用github登入 ： </p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116104635.png" alt="20201116104635"></p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116104902.png" alt="20201116104902"></p>
<p>导入项目： </p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116105022.png" alt="20201116105022"></p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgsSnipaste_2020-10-30_15-13-01.jpg" alt="Snipaste_2020-10-30_15-13-01"></p>
<p>此时显示是否为自己的仓库： </p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgsSnipaste_2020-10-30_15-12-52.jpg" alt="Snipaste_2020-10-30_15-12-52"></p>
<p>如果是就选yes，如果是别人的仓库，那就选No，Vercel会自动帮你fork这个仓库到你的Github账号里。 </p>
<p>然后会自动跳转到你的GitHub页面，安装Vercel：<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgsSnipaste_2020-10-30_15-56-42.jpg" alt="Snipaste_2020-10-30_15-56-42"></p>
<p>此处建议选择All repositories，意为为所有仓库安装，当然，你也可以选择只为当前仓库安装，也就是Only select repositories。 </p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116105846.png" alt="20201116105846"></p>
<p>点击continue： </p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116110418.png" alt="20201116110418"><br>以上都可以不用修改直接点击deploy即可。 </p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116110628.png" alt="20201116110628"></p>
<p>到这就部署完成了。但是此时的域名是vercel提供的：<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116110924.png" alt="20201116110924"></p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116111709.png" alt="20201116111709"></p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116111824.png" alt="20201116111824"><br>此时可以看到域名已经添加进来了：<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116114237.png" alt="20201116114237"><br>点击这个域名进入添加记录：</p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201116114957.png" alt="20201116114957"></p>
<h2 id="卡片空白跳转"><a href="#卡片空白跳转" class="headerlink" title="卡片空白跳转"></a>卡片空白跳转</h2><ul>
<li>替换代码 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"> .recent-post-info(onclick=`window.open('` + (link) + `','_self')` class=no_cover)</span><br><span class="line">//或者</span><br><span class="line"> .recent-post-info(onclick=`window.location.href='`+ url_for(link) + `'` class=no_cover)</span><br></pre></td></tr></table></figure></li>
<li>替换位置<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201119200640.png" alt="20201119200640"></li>
</ul>
<h2 id="异步加载"><a href="#异步加载" class="headerlink" title="异步加载"></a>异步加载</h2><p>参考学习：<a target="_blank" rel="noopener" href="https://akilar.top/posts/615d5ede/#%E9%80%82%E7%94%A8%E5%86%85%E5%AE%B9">Hexo异步加载方案</a></p>
<p>一张图解释缩短的时间哪里去了： </p>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/awelife/imgbed/imgs20201119201713.png" alt="20201119201713"></p>
<h3 id="Valine添加自定义表情"><a href="#Valine添加自定义表情" class="headerlink" title="Valine添加自定义表情"></a><a target="_blank" rel="noopener" href="https://www.antmoe.com/posts/284f2e1c/index.html">Valine添加自定义表情</a></h3><h3 id="思维导图"><a href="#思维导图" class="headerlink" title="思维导图"></a><a target="_blank" rel="noopener" href="https://zhangxiaocai.cn/posts/5a2c12e2.html">思维导图</a></h3><h3 id="hexo访客统计并改为热度"><a href="#hexo访客统计并改为热度" class="headerlink" title="hexo访客统计并改为热度"></a><a target="_blank" rel="noopener" href="https://www.jianshu.com/p/04b89d8424b3">hexo访客统计并改为热度</a></h3><h3 id="Hexo不渲染-md或者-html"><a href="#Hexo不渲染-md或者-html" class="headerlink" title="Hexo不渲染.md或者.html"></a><a target="_blank" rel="noopener" href="https://blog.csdn.net/ganzhilin520/article/details/79057774">Hexo不渲染.md或者.html</a></h3><h3 id="访客地图"><a href="#访客地图" class="headerlink" title="访客地图"></a><a target="_blank" rel="noopener" href="https://blog.csdn.net/sch0120/article/details/99649555?spm=1000.2123.3001.4430">访客地图</a></h3><h3 id="博客订阅文章通知功能"><a href="#博客订阅文章通知功能" class="headerlink" title="博客订阅文章通知功能"></a><a target="_blank" rel="noopener" href="https://yafine-blog.cn/posts/ebb2.html">博客订阅文章通知功能</a></h3><h2 id="美化"><a href="#美化" class="headerlink" title="美化"></a>美化</h2></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">天泽</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://jayonli.github.io/8.html">http://jayonli.github.io/8.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://jayonli.github.io" target="_blank">天泽岁月</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/hexo/">hexo</a><a class="post-meta__tags" href="/tags/butterfly/">butterfly</a></div><div class="post_share"><div class="social-share" data-image="https://tva1.sinaimg.cn/large/9bd9b167gy1fwrsrp5uvrj21hc0u0b2b.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏<div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/style/img/wechat.jpg" target="_blank"><img class="post-qr-code-img" data-lazy-src="/style/img/wechat.jpg" alt="wechat"/></a><div class="post-qr-code-desc">wechat</div></li><li class="reward-item"><a href="/style/img/alipay.jpg" target="_blank"><img class="post-qr-code-img" data-lazy-src="/style/img/alipay.jpg" alt="alipay"/></a><div class="post-qr-code-desc">alipay</div></li></ul></div></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/75507639.html"><img class="prev-cover" data-lazy-src="https://tva4.sinaimg.cn/large/9bd9b167gy1g4lj2q1a5ej21hc0xc7wi.jpg" onerror="onerror=null;src='/img/404.jpg'"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">butterfly教程（二）基本功能</div></div></a></div><div class="next-post pull-right"><a href="/3178170368.html"><img class="next-cover" data-lazy-src="https://tva2.sinaimg.cn/large/9bd9b167gy1g4lhzzv9vfj21hc0xc4qp.jpg" onerror="onerror=null;src='/img/404.jpg'"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">butterfly教程（四）魔改适配</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/1733019837.html" title="butterfly教程（一）入门安装"><img class="cover" data-lazy-src="https://tva3.sinaimg.cn/large/9bd9b167gy1fwrt2nr1hxj21hc0u0wqk.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-10-19</div><div class="title">butterfly教程（一）入门安装</div></div></a></div><div><a href="/75507639.html" title="butterfly教程（二）基本功能"><img class="cover" data-lazy-src="https://tva4.sinaimg.cn/large/9bd9b167gy1g4lj2q1a5ej21hc0xc7wi.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-10-18</div><div class="title">butterfly教程（二）基本功能</div></div></a></div><div><a href="/3178170368.html" title="butterfly教程（四）魔改适配"><img class="cover" data-lazy-src="https://tva2.sinaimg.cn/large/9bd9b167gy1g4lhzzv9vfj21hc0xc4qp.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-10-15</div><div class="title">butterfly教程（四）魔改适配</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside_content" id="aside_content"><div class="card-widget card-info"><div class="card-content"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="https://s.gravatar.com/avatar/d8fdf908ef4641679f024dcc89be406b?s=80&r=g" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">天泽</div><div class="author-info__description">宁静以致远！</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">18</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">19</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">4</div></a></div></div><a class="button--animated" id="card-info-btn" href="atom.xml"><i class="fa fa-rss"></i><span>订阅RSS</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="mailto:gg2296582473@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://mp.weixin.qq.com/" target="_blank" title="weixin"><i class="iconfont icon-weixin"></i></a><a class="social-icon" href="https://weibo.com/u/6747699297" target="_blank" title="weibo"><i class="iconfont icon-weibo"></i></a><a class="social-icon" href="https://www.bilibili.com" target="_blank" title="bilibili"><i class="iconfont icon-CN_bilibili"></i></a><a class="social-icon" href="https://www.zhihu.com/people/shi-tian-46-8" target="_blank" title="知乎"><i class="iconfont icon-29"></i></a><a class="social-icon" href="https://blog.csdn.net/qq_36292543" target="_blank" title="csdn"><i class="iconfont icon-CN_csdnnet"></i></a><a class="social-icon" href="https://www.jianshu.com/u/68c856adffa5" target="_blank" title="简书"><i class="iconfont icon-jianshuzuan"></i></a></div></div></div><div class="card-widget card-announcement"><div class="card-content"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">天泽岁月，时间会记住一切！</div><timing></timing></div></div><div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="clock"><img v-if="!clockshow" src="/images/loading.gif" style="height:120px;width:100%"/><table class="clock" v-if="clockshow"><tbody><tr><td class="clockdate">{{date}}</td><td class="weatherimg" align="center" valign="middle"><img id="weatherimg" :src="weatherimg"/></td><td class="temperature" align="center" valign="middle">{{temperature+ "*C"}}</td><td class="humidityimg"><img id="humidityimg" :src="humidityimg"/></td><td class="humidity">{{humidity + "%"}}</td></tr><tr class="time"><td colspan="5">{{time}}</td></tr><tr><td class="usaqi" colspan="1">{{usaqi + ' ' + 'US' + ' ' +'AQI' }}</td><td class="city" colspan="3">{{city}}</td><td class="daylight" colspan="1">{{daylight}}</td></tr></tbody></table></div></div></div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="card-content"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%AC%AC%E4%B8%89%E7%AF%87-%E8%BF%9B%E9%98%B6-%E7%BE%8E%E5%8C%96"><span class="toc-number">2.</span> <span class="toc-text">第三篇 进阶+美化</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%9B%E9%98%B6"><span class="toc-number">2.1.</span> <span class="toc-text">进阶</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E9%98%BF%E9%87%8C%E5%9B%BE%E6%A0%87"><span class="toc-number">2.1.1.</span> <span class="toc-text">使用阿里图标</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8JsDeliver%E5%8A%A0%E9%80%9F%E6%96%87%E4%BB%B6"><span class="toc-number">2.1.2.</span> <span class="toc-text">使用JsDeliver加速文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E6%B0%B8%E4%B9%85%E9%93%BE%E6%8E%A5"><span class="toc-number">2.1.3.</span> <span class="toc-text">文章永久链接</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B0%E5%BB%BA%E6%96%87%E7%AB%A0%E8%87%AA%E5%8A%A8%E6%89%93%E5%BC%80%E7%BC%96%E8%BE%91%E5%99%A8"><span class="toc-number">2.1.4.</span> <span class="toc-text">新建文章自动打开编辑器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E8%AE%A1%E6%95%B0"><span class="toc-number">2.1.5.</span> <span class="toc-text">文章计数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E5%A4%96%E6%8C%82"><span class="toc-number">2.1.6.</span> <span class="toc-text">标签外挂</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E9%9A%90%E8%97%8F"><span class="toc-number">2.1.7.</span> <span class="toc-text">标签隐藏</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8Vercel%E6%9D%A5%E5%8A%A0%E9%80%9F%E5%8D%9A%E5%AE%A2"><span class="toc-number">2.1.8.</span> <span class="toc-text">使用Vercel来加速博客</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%A1%E7%89%87%E7%A9%BA%E7%99%BD%E8%B7%B3%E8%BD%AC"><span class="toc-number">2.2.</span> <span class="toc-text">卡片空白跳转</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD"><span class="toc-number">2.3.</span> <span class="toc-text">异步加载</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Valine%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A1%A8%E6%83%85"><span class="toc-number">2.3.1.</span> <span class="toc-text">Valine添加自定义表情</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE"><span class="toc-number">2.3.2.</span> <span class="toc-text">思维导图</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#hexo%E8%AE%BF%E5%AE%A2%E7%BB%9F%E8%AE%A1%E5%B9%B6%E6%94%B9%E4%B8%BA%E7%83%AD%E5%BA%A6"><span class="toc-number">2.3.3.</span> <span class="toc-text">hexo访客统计并改为热度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Hexo%E4%B8%8D%E6%B8%B2%E6%9F%93-md%E6%88%96%E8%80%85-html"><span class="toc-number">2.3.4.</span> <span class="toc-text">Hexo不渲染.md或者.html</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BF%E5%AE%A2%E5%9C%B0%E5%9B%BE"><span class="toc-number">2.3.5.</span> <span class="toc-text">访客地图</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%9A%E5%AE%A2%E8%AE%A2%E9%98%85%E6%96%87%E7%AB%A0%E9%80%9A%E7%9F%A5%E5%8A%9F%E8%83%BD"><span class="toc-number">2.3.6.</span> <span class="toc-text">博客订阅文章通知功能</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BE%8E%E5%8C%96"><span class="toc-number">2.4.</span> <span class="toc-text">美化</span></a></li></ol></li></ol></div></div></div><div class="card-widget card-recent-post"><div class="card-content"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/541541915.html" title="PC效率神器+美化+优化"><img data-lazy-src="https://tva4.sinaimg.cn/large/9bd9b167gy1fwrssbuyokj21hc0u0dl4.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="PC效率神器+美化+优化"/></a><div class="content"><a class="title" href="/541541915.html" title="PC效率神器+美化+优化">PC效率神器+美化+优化</a><time datetime="2020-11-22T01:27:57.000Z" title="发表于 2020-11-22 09:27:57">2020-11-22</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2148397210.html" title="Auto.js学习"><img data-lazy-src="https://tva3.sinaimg.cn/large/9bd9b167gy1fwrt4nfk4aj21hc0u0dti.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Auto.js学习"/></a><div class="content"><a class="title" href="/2148397210.html" title="Auto.js学习">Auto.js学习</a><time datetime="2020-11-04T08:00:33.000Z" title="发表于 2020-11-04 16:00:33">2020-11-04</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2360238627.html" title="Valine 底部出现Code 403"><img data-lazy-src="https://tva3.sinaimg.cn/large/9bd9b167gy1fwrt2nr1hxj21hc0u0wqk.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Valine 底部出现Code 403"/></a><div class="content"><a class="title" href="/2360238627.html" title="Valine 底部出现Code 403">Valine 底部出现Code 403</a><time datetime="2020-10-24T01:37:27.000Z" title="发表于 2020-10-24 09:37:27">2020-10-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/372674368.html" title="GitHub出现Commit failed"><img data-lazy-src="https://tva3.sinaimg.cn/large/9bd9b167gy1g4liadb82gj21hc0xcb29.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="GitHub出现Commit failed"/></a><div class="content"><a class="title" href="/372674368.html" title="GitHub出现Commit failed">GitHub出现Commit failed</a><time datetime="2020-10-23T08:51:00.000Z" title="发表于 2020-10-23 16:51:00">2020-10-23</time></div></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">©2020 By 天泽</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
<span>提供支持</span></div></div></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="/js/utils.js"></script><script src="/js/main.js"></script><script defer src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module" defer></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script>function panguFn () {
if (typeof pangu === 'object') pangu.spacingElementById('content-inner')
else {
$.getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js', () => {
pangu.spacingElementById('content-inner')
})
}
}
function panguInit () {
if (false){
GLOBAL_CONFIG_SITE.isPost && panguFn()
} else {
panguFn()
}
}
document.addEventListener('DOMContentLoaded', panguFn)</script><script defer src="/js/search/local-search.js"></script><script>var preloader = {
endLoading: () => {
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load',()=> {preloader.endLoading()})</script><div class="js-pjax"><script>if (document.getElementsByClassName('mermaid').length) {
if (window.mermaidJsLoad) mermaid.init()
else {
$.getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js', function () {
window.mermaidJsLoad = true
mermaid.initialize({
theme: 'default',
})
false && mermaid.init()
})
}
}</script><script>function loadValine () {
function initValine () {
let initData = {
el: '#vcomment',
appId: 'wlAC0uI29B3TpdoVcM6uMXRc-MdYXbMMI',
appKey: '5sfwHUVqDNt9mQYj59RC52bf',
placeholder: 'Please leave your footprints',
avatar: 'monsterid',
meta: 'nick,mail,link'.split(','),
pageSize: '10',
lang: 'zh_CN',
recordIP: false,
serverURLs: '',
emojiCDN: '',
emojiMaps: "",
enableQQ: false,
path: window.location.pathname,
}
if (true) {
initData.requiredFields= ('nick,mail'.split(','))
}
if (false) {
const otherData = false
initData = Object.assign({}, initData, otherData)
}
const valine = new Valine(initData)
}
if (typeof Valine === 'function') initValine()
else $.getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js', initValine)
}
if ('Valine' === 'Valine' || !false) {
if (false) btf.loadComment(document.querySelector('#vcomment'),loadValine)
else setTimeout(() => loadValine(), 0)
} else {
function loadOtherComment () {
loadValine()
}
}</script><script defer src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><div id="hans-bolang"></div><script defer src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script><script defer src="https://api.vvhan.com/api/bolang"></script><script defer src="https://apip.weatherdt.com/simple/static/js/weather-simple-common.js?v=2.0"></script><script async src="/style/js/weather.js"></script><script async src="/style/js/mystyle.js"></script><script defer src="/style/gitcalendar/js/gitcalendar.js"></script><script defer src="/style/clock/js/clock.js"></script><script async src="/style/js/timing.js"></script><script defer src="/swiper/js/swiper.min.js"></script><script defer src="/swiper/js/swiperindex.js"></script><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script></div><script async>window.onload=function(){var a=document.createElement('script'),b=document.getElementsByTagName('script')[0];a.type='text/javascript',a.async=!0,a.src='/sw-register.js?v='+Date.now(),b.parentNode.insertBefore(a,b)};</script></body></html>