-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
436 lines (375 loc) · 61.5 KB
/
index.html
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
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
<!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>橘子的小站</title><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 property="og:type" content="website">
<meta property="og:title" content="橘子的小站">
<meta property="og:url" content="https://lavender-z.github.io/index.html">
<meta property="og:site_name" content="橘子的小站">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://lavender-z.github.io/img/avatar.jpg">
<meta property="article:author" content="橘子">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://lavender-z.github.io/img/avatar.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://lavender-z.github.io/"><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" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: 'ca-pub-7118049209890590',
enable_page_level_ads: 'true'
});</script><script>var GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
translate: {"defaultEncoding":1,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
noticeOutdate: {"limitDay":50,"position":"top","messagePrev":"读者请注意，本文章更新于","messageNext":"天前，文中某些信息可能已经过时，如有任何问题，请在文章末尾评论处留言！"},
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":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
lightbox: 'fancybox',
Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"bottom-left"},
source: {
jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
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'
},
fancybox: {
js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
}
},
isPhotoFigcaption: true,
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
}
}
// https://stackoverflow.com/questions/16839698/jquery-getscript-alternative-in-native-javascript
const getScript = url => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
document.head.appendChild(script)
})</script><script id="config_change">var GLOBAL_CONFIG_SITE = {
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2021-02-04 18:42:03'
}</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 = 'false'
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')
}
}const fontSizeVal = saveToLocal.get('global-font-size')
if (fontSizeVal !== undefined) {
document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
}})()</script><style type="text/css">#toggle-sidebar {bottom: 80px}</style><link rel="stylesheet" href="/css/gundong.css"/><link rel="stylesheet" href="/css/flower.css"/><link rel="stylesheet" href="/css/font.css"/><link rel="stylesheet" href="/css/Upjiang.css"/><link rel="stylesheet" href="/css/mouse.css"/><link rel="stylesheet" href="/css/card_botui.css" /><link rel="stylesheet" href="/css/fish.css"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/font-awesome-animation.min.css"/><link rel="stylesheet" href="/gitcalendar/css/gitcalendar.css"/><meta name="generator" content="Hexo 5.3.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="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="/img/avatar.jpg" 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">10</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">6</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">1</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="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li><li><a class="site-page" href="/gallery/"><i class="fa-fw fas fa-images"></i><span> 相册</span></a></li><li><a class="site-page" href="/artitalk/"><i class="fa-fw fas fa-comment"></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="/talk/"><i class="fa-fw fas fa-calendar"></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 class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url(/img/banner/index_img/topimage.jpg)"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">橘子的小站</a></span><div 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="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li><li><a class="site-page" href="/gallery/"><i class="fa-fw fas fa-images"></i><span> 相册</span></a></li><li><a class="site-page" href="/artitalk/"><i class="fa-fw fas fa-comment"></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="/talk/"><i class="fa-fw fas fa-calendar"></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 id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">橘子的小站</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/Lavender-z" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:[email protected]" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="/857153784" target="_blank" title="QQ"><i class="fab fa-qq"></i></a><a class="social-icon" href="https://weibo.com/u/6256299883/home?wvr=5" target="_blank" title="Weibo"><i class="fab fa-weibo"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item" style="width:100%"><div class="gitcalendar" id="gitcalendar"><div id="gitmessage" :style="{top:y+px,left:x+px,position: fixed,zIndex:9999}"><div class="angle-wrapper"><span>{{span1}} </span><span>{{span2}} 次上传</span></div></div><div class="position-relative"><div class="border py-2 graph-before-activity-overview"><div class="js-gitcalendar-graph mx-md-2 mx-3 d-flex flex-column flex-items-end flex-xl-items-center overflow-hidden pt-1 is-graph-loading graph-canvas gitcalendar-graph height-full text-center" data-graph-url="/users/Zfour/contributions?to=2020-10-29" data-url="/Zfour" data-from="2019-10-27 00:00:00 UTC" data-to="2020-10-29 23:59:59 UTC" data-org><div id="gitcalendarcanvasbox" v-if="simplemode"><canvas id="gitcanvas" style="animation: none;"></canvas></div><svg class="js-gitcalendar-graph-svg" width="100%" viewBox="0 0 770 128" v-if="!simplemode"><text class="month" :x="32 + monthindex*64" y="20" v-for="(month,monthindex) in monthchange">{{month}}</text><text class="wday" text-anchor="start" dx="0" dy="40"> 日</text><text class="wday" text-anchor="start" dx="0" dy="65"> 二</text><text class="wday" text-anchor="start" dx="0" dy="90"> 四</text><text class="wday" text-anchor="start" dx="0" dy="115">六</text><g v-for="(weekitem,weekIndex) in data" :transform="'translate('+ (16 + weekIndex*14) + ',' + '0)'"><rect @mouseover="selectStyle(dayitem,$event)" @mouseleave="outStyle()" v-for="(dayitem,dayIndex) in weekitem" :style="{fill:thiscolor(dayitem.count),shapeRendering:crispedges}" :data-score="dayitem.count" :data-date="dayitem.date" x="0" :y=" 30 + dayIndex*13 " width="11" height="11"></rect></g></svg></div><div class="contrib-footer clearfix mt-1 mx-3 px-3 pb-1"><div class="float-left text-gray">数据来源 <a :href="'https://github.com/'+ user " target="blank">@{{user}}</a></div><div class="contrib-legend text-gray" title="A summary of pull requests, issues opened, and commits to the default and gh-pages branches.">Less<ul class="legend"><li :style="{backgroundColor:color[0]}"></li><li :style="{backgroundColor:color[2]}"></li><li :style="{backgroundColor:color[4]}"></li><li :style="{backgroundColor:color[6]}"></li><li :style="{backgroundColor:color[8]}"></li></ul>More</div></div></div></div><div class="contrib-column contrib-column-first table-column"><span class="text-muted">过去一年提交</span><span class="contrib-number">{{total}}</span><span class="text-muted">{{oneyearbeforeday}} - {{thisday}}</span></div><div class="contrib-column table-column"><span class="text-muted">最近一月提交</span><span class="contrib-number">{{thisweekdatacore}}</span><span class="text-muted">{{amonthago}} - {{thisday}}</span></div><div class="contrib-column table-column"><span class="text-muted">最近一周提交</span><span class="contrib-number">{{weekdatacore}}</span><span class="text-muted">{{aweekago}} - {{thisday}}</span></div></div></div><div class="recent-post-item" style="height:auto;width:100%;"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="/_posts/Blog/32921.md" alt=""><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/slider/1.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt=""/></a><div class="blog-slider__content"><span class="blog-slider__code">2020-12-20</span><a class="blog-slider__title" href="/_posts/Blog/32921.md" alt="">🦋利用 Hexo 和 Github 搭建一个属于自己的个人博客(基础)</a><div class="blog-slider__text">对本站的 Hexo 搭建路线做了个归纳.</div><a class="blog-slider__button" href="/_posts/Blog/32921.md" alt="">🍡详情</a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="/_posts/Blog/56687.md" alt=""><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/slider/2.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt=""/></a><div class="blog-slider__content"><span class="blog-slider__code">2020-12-22</span><a class="blog-slider__title" href="/_posts/Blog/56687.md" alt="">🦋使用 Butterfly 主题继续完成博客的搭建</a><div class="blog-slider__text">基于 Butterfly 的搭建.</div><a class="blog-slider__button" href="/_posts/Blog/56687.md" alt="">🍡详情</a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="/_posts/Blog/50478.md" alt=""><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/slider/3.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt=""/></a><div class="blog-slider__content"><span class="blog-slider__code">2020-12-24</span><a class="blog-slider__title" href="/_posts/Blog/50478.md" alt="">🦋使用 Matery 主题继续完成博客的搭建</a><div class="blog-slider__text">基于 Matery 的搭建.</div><a class="blog-slider__button" href="/_posts/Blog/50478.md" alt="">🍡详情</a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="/_posts/Blog/64697.md" alt=""><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/slider/4.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt=""/></a><div class="blog-slider__content"><span class="blog-slider__code">2020-12-26</span><a class="blog-slider__title" href="/_posts/Blog/64697.md" alt="">🦋关于博客主题的一些美化与魔改</a><div class="blog-slider__text">基于 Matery 的搭建.</div><a class="blog-slider__button" href="/_posts/Blog/64697.md" alt="">🍡详情</a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div><script defer="defer" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"></script><script defer="defer" data-pjax="data-pjax" src="/js/swiper_init.js"></script></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/12/30/Blog/32894/" title="添加豆瓣书单电影页面"> <img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/5/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="添加豆瓣书单电影页面"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/12/30/Blog/32894/" title="添加豆瓣书单电影页面">添加豆瓣书单电影页面</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-12-30T03:30:45.000Z" title="发表于 2020-12-30 11:30:45">2020-12-30</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/hexo/">hexo</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Matery/">Matery</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E7%BE%8E%E5%8C%96%E4%B8%8E%E9%AD%94%E6%94%B9/">美化与魔改</a></span></div><div class="content"> 豆瓣书单电影页面
首先需要检查 hexo 的版本，在博客的根目录下执行 hexo -v 命令就可以检查版本，这个豆瓣插件需要的版本 < 4.2.0，否则会出现 bug。解决办法为降低 hexo 的版本，先卸载当前 hexo 版本，再安装低于 4.2.0 的版本即可。
$ npm uninstall hexo$ npm install [email protected] -g
首先在博客站点目录执行下面的命令安装豆瓣插件：
$ npm install hexo-douban --save
接着在博客根目录的配置文件_config.yml下，添加如下配置：
douban: user: 252345665 #这个需要修改为你个人的id builtin: false #如果想生成豆瓣页面，这个需要设置为true book: title: 'This is my book title' quote: 'This is my book quote' movie: title: ' ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/12/30/Blog/7086/" title="添加天气小插件"> <img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/5/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="添加天气小插件"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/12/30/Blog/7086/" title="添加天气小插件">添加天气小插件</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-12-30T02:56:24.000Z" title="发表于 2020-12-30 10:56:24">2020-12-30</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/hexo/">hexo</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Matery/">Matery</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E7%BE%8E%E5%8C%96%E4%B8%8E%E9%AD%94%E6%94%B9/">美化与魔改</a></span></div><div class="content"> 添加天气小插件
首先去和风天气官网，注册完成后，配置自己的插件，选择自定义插件 ——> 自定义样式 ——> 生成代码，然后会生成一段代码，复制粘贴到themes/matery/layout/layout.ejs即可。
</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/12/28/Blog/58148/" title="鼠标点击文字特效"> <img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/5/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="鼠标点击文字特效"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/12/28/Blog/58148/" title="鼠标点击文字特效">鼠标点击文字特效</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-12-28T05:25:13.000Z" title="发表于 2020-12-28 13:25:13">2020-12-28</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/hexo/">hexo</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Matery/">Matery</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E7%BE%8E%E5%8C%96%E4%B8%8E%E9%AD%94%E6%94%B9/">美化与魔改</a></span></div><div class="content"> 鼠标点击文字特效
实现方法，引入 js 文件，在主题文件下的/source/js/下新建click_show_text.js，其代码如下：
var a_idx = 0;jQuery(document).ready(function ($) { $("body").click(function (e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/12/28/Blog/7087/" title="添加动态诗词"> <img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/5/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="添加动态诗词"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/12/28/Blog/7087/" title="添加动态诗词">添加动态诗词</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-12-28T03:12:51.000Z" title="发表于 2020-12-28 11:12:51">2020-12-28</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/hexo/">hexo</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Matery/">Matery</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E7%BE%8E%E5%8C%96%E4%B8%8E%E9%AD%94%E6%94%B9/">美化与魔改</a></span></div><div class="content"> 添加动态诗词
采用的是今日诗词，每次返回一句诗词，根据时间、地点、天气、事件智能推荐。官网有API 文档，可以去看一下，有多种安装方式，最简单的方式就是从官网获取代码，在/themes/matery/layout/_partial/head.ejs添加下面的一行代码：
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
然后再将/themes/matery/layout/_partial/bg-cover-content.ejs中的<%= config.description %>修改为<span id="jinrishici-sentence">正在加载今日诗词....</span>' %>，这个使用前提是将主题配置文件的subtit ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/12/28/Blog/56936/" title="修改导航栏颜色以及透明效果"> <img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/5/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="修改导航栏颜色以及透明效果"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/12/28/Blog/56936/" title="修改导航栏颜色以及透明效果">修改导航栏颜色以及透明效果</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-12-28T02:56:24.000Z" title="发表于 2020-12-28 10:56:24">2020-12-28</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/hexo/">hexo</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Matery/">Matery</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E7%BE%8E%E5%8C%96%E4%B8%8E%E9%AD%94%E6%94%B9/">美化与魔改</a></span></div><div class="content"> 修改导航栏颜色以及透明效果
打开themes/matery/source/css/matery.css文件，大约在 250 行，有一个.bg-color属性，修改其属性值即可，代码如下：
.bg-color { background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值 opacity: 0.8; //透明效果 值范围 0~1，看情况自己修改}</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/12/28/Blog/32645/" title="动态标题的设置"> <img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/5/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="动态标题的设置"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/12/28/Blog/32645/" title="动态标题的设置">动态标题的设置</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-12-28T02:14:37.000Z" title="发表于 2020-12-28 10:14:37">2020-12-28</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/hexo/">hexo</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Matery/">Matery</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E7%BE%8E%E5%8C%96%E4%B8%8E%E9%AD%94%E6%94%B9/">美化与魔改</a></span></div><div class="content"> 动态标题
效果图如下：
实现方法，引入 js 文件，在主题文件下的/source/js/下新建FunnyTitle.js，然后在添加到themes/matery/layout/layout.ejs或者添加到themes/matery/layout/_partial/head.ejs，其代码如下：
<!--浏览器搞笑标题--> var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/[email protected]/source/f ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/12/26/Blog/64697/" title="关于博客主题的一些美化与魔改"> <img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/4/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="关于博客主题的一些美化与魔改"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/12/26/Blog/64697/" title="关于博客主题的一些美化与魔改">关于博客主题的一些美化与魔改</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-12-26T02:30:42.000Z" title="发表于 2020-12-26 10:30:42">2020-12-26</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/hexo/">hexo</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E7%BE%8E%E5%8C%96%E4%B8%8E%E9%AD%94%E6%94%B9/">美化与魔改</a></span></div><div class="content"> 写在最前面
本帖的主要目的是用最简单的语言描述博客美化的进程，同时在每个章节为可能涉及的知识点提供相应的工具网站以供读者学习。当然，最重要的是给我自己留个魔改的日记。这样升级主题玩崩了也能找到回家的路。
Matery 主题美化
主题美化会涉及到 js 文件和 css 文件等的修改，个人建议新增的 js 文件放在themes/matery/layout/layout.ejs这个文件下，这样会稍微加快博客访问的速度。不想花钱最好的方式是使用 cdn.jsdeliver。
动态标题
动态标题https://lavender-z.github.io/2020/12/28/Blog/32645/
修改导航栏颜色以及透明效果
修改导航栏颜色以及透明效果https://lavender-z.github.io/2020/12/28/Blog/56936/
添加动态诗词
添加动态诗词https://lavender-z.github.io/2020/12/28/Blog/7087/
鼠标点击文字特效
添加动态诗词https://lavender-z.github.io/2020/1 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/12/24/Blog/50478/" title="使用 Matery 主题继续完成博客的搭建"> <img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/3/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="使用 Matery 主题继续完成博客的搭建"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/12/24/Blog/50478/" title="使用 Matery 主题继续完成博客的搭建">使用 Matery 主题继续完成博客的搭建</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-12-24T08:12:03.000Z" title="发表于 2020-12-24 16:12:03">2020-12-24</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/hexo/">hexo</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Matery/">Matery</a></span></div><div class="content">本篇文章仅介绍简单的使用，详情请参照官方文档
写在最前面
在利用 hexo 和 Github Page 搭建好博客后，会发现系统提供的主题都是一样的，看着感觉不太舒服，这时候我们可以选择自己利用 JavaScript、css 等对博客的板块进行设计（自己做别人眼中的大佬~），也可以在 Github上搜索一些大佬们设计的主题，然后 clone 下来进行使用。
下面就来介绍一下利用 Matery 主题来继续完成博客的搭建。
安装
点击 传送门 下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到你 Hexo 的 themes 文件夹中即可。
当然你也可以在你的站点目录文件夹下使用git clone命令来下载：直接在站点根目录下执行下面的命令，即可进行主题的下载，主题有两个版本，稳定版本和最新版本 (不定期更新优化)，自主选择版本。
git clone https://github.com/blinkfox/hexo-theme-matery themes/matery # 稳定版git clone -b devel ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/12/22/Blog/56687/" title="使用 Butterfly 主题继续完成博客的搭建"> <img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="使用 Butterfly 主题继续完成博客的搭建"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/12/22/Blog/56687/" title="使用 Butterfly 主题继续完成博客的搭建">使用 Butterfly 主题继续完成博客的搭建</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-12-22T08:12:03.000Z" title="发表于 2020-12-22 16:12:03">2020-12-22</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/hexo/">hexo</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Butterfly/">Butterfly</a></span></div><div class="content">本篇文章仅介绍简单的使用，详情请参照官方文档
写在最前面
在利用 hexo 和 Github Page 搭建好博客后，会发现系统提供的主题都是一样的，看着感觉不太舒服，这时候我们可以选择自己利用 JavaScript、css 等对博客的板块进行设计（自己做别人眼中的大佬~），也可以在 Github上搜索一些大佬们设计的主题，然后 clone 下来进行使用。
下面就来介绍一下利用 Butterfly 主题来继续完成博客的搭建。
安装
Github安装Gitee安装npm安装稳定版【建议】
在博客根目录里
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
测试版
测试版可能存在 Bugs
最新的内容可在这里下载
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
升级方法：在主题目录下，运行git pull
稳定版【建议】 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/12/20/Blog/32921/" title="利用 Hexo 和 Github 搭建一个属于自己的个人博客(基础)"> <img class="post_bg" data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/1/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="利用 Hexo 和 Github 搭建一个属于自己的个人博客(基础)"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/12/20/Blog/32921/" title="利用 Hexo 和 Github 搭建一个属于自己的个人博客(基础)">利用 Hexo 和 Github 搭建一个属于自己的个人博客(基础)</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-12-20T07:24:37.000Z" title="发表于 2020-12-20 15:24:37">2020-12-20</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox article-meta__icon"></i><a class="article-meta__categories" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a></span><span class="article-meta tags"><span class="article-meta__separator">|</span><i class="fas fa-tag article-meta__icon"></i><a class="article-meta__tags" href="/tags/hexo/">hexo</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a><span class="article-meta__link">•</span><a class="article-meta__tags" href="/tags/Github/">Github</a></span></div><div class="content"> 写在最前面
博客的搭建有很多种，可以利用第三方平台，也可以自建。比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、SegmentFault、简书、掘金、知乎专栏、Github Page 等等。
这次我要介绍的就是利用 Github Page 和 Hexo 搭建个人博客的方式。Github Page 是 Github 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源，这次我们的主角就是 Hexo 了，具体的内容下面在文章内介绍。下面就开始吧~
准备工作
Node.js 和 Git 的安装是搭建个人博客的第一步。下面我会详细的介绍如何安装 Node.js 和 Git。
点击查看
Node.js安装与配置Git安装与配置Github注册以及Github Pages创建配置Git用户名和邮箱首先去Node.js官网，下载 node.js 的安装程序，根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤。
下载好与电脑系 ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav><div class="recent-post-item photo-tag" style="width:100%;height:auto;float:left;padding:5px;flex-wrap:wrap;justify-content : center;flex-direction: row;"><div id="catalogMagnet"><figure class="gallery-group color-card"><img class="gallery-group-img loaded" src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/beiyong/1.jpeg" alt="" data-ll-status="loaded"/><figcaption><div class="gallery-group-name magnetname"><span>|</span><a href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a></div><li class="category-list-item"><span class="category-list-count"><i class="fas fa-book"></i><span>4</span></span></li><p>教程</p><a href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/"></a></figcaption></figure><figure class="gallery-group color-card"><img class="gallery-group-img loaded" src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/beiyong/2.jpeg" alt="" data-ll-status="loaded"/><figcaption><div class="gallery-group-name magnetname"><span>|</span><a href="/categories/%F0%9F%8D%A1Akilar%E3%81%AE%E7%B3%96%E8%91%AB%E8%8A%A6/">天方夜“谈”</a></div><li class="category-list-item"><span class="category-list-count"><i class="fas fa-book"></i><span>45</span></span></li><p>杂谈</p><a href="/categories/%F0%9F%8D%A1Akilar%E3%81%AE%E7%B3%96%E8%91%AB%E8%8A%A6/"></a></figcaption></figure></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="/img/avatar.jpg" 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">10</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">6</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">1</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/Lavender-z"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/Lavender-z" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:[email protected]" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="/857153784" target="_blank" title="QQ"><i class="fab fa-qq"></i></a><a class="social-icon" href="https://weibo.com/u/6256299883/home?wvr=5" target="_blank" title="Weibo"><i class="fab fa-weibo"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">欢迎来到橘子的小站~<img src="https://cdn.jsdelivr.net/gh/lete114/CDN/Use/my_bg.gif"></div></div><div class="sticky_layout"><div class="card-widget card-botui"><div class="card-content" style="height:320px;"><div class="item-headline"><i class="fas fa-comments"></i><span>聊天窗</span></div><div class="botui-app-container" id="hello-akilar" style="width:100%;padding:0.5px"><bot-ui><div class="facemain"><figure><div><span class="face">要来和我聊聊么？</span><span class="face"><a href="javascript:void(0);" onclick="botui_init()">欢迎光临橘子小站</a></span></div></figure></div></bot-ui></div></div></div><div class="card-widget card-recent-post"><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="/2020/12/30/Blog/32894/" title="添加豆瓣书单电影页面"><img data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/5/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="添加豆瓣书单电影页面"/></a><div class="content"><a class="title" href="/2020/12/30/Blog/32894/" title="添加豆瓣书单电影页面">添加豆瓣书单电影页面</a><time datetime="2020-12-30T03:30:45.000Z" title="发表于 2020-12-30 11:30:45">2020-12-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2020/12/30/Blog/7086/" title="添加天气小插件"><img data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/5/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="添加天气小插件"/></a><div class="content"><a class="title" href="/2020/12/30/Blog/7086/" title="添加天气小插件">添加天气小插件</a><time datetime="2020-12-30T02:56:24.000Z" title="发表于 2020-12-30 10:56:24">2020-12-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2020/12/28/Blog/58148/" title="鼠标点击文字特效"><img data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/5/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="鼠标点击文字特效"/></a><div class="content"><a class="title" href="/2020/12/28/Blog/58148/" title="鼠标点击文字特效">鼠标点击文字特效</a><time datetime="2020-12-28T05:25:13.000Z" title="发表于 2020-12-28 13:25:13">2020-12-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2020/12/28/Blog/7087/" title="添加动态诗词"><img data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/5/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="添加动态诗词"/></a><div class="content"><a class="title" href="/2020/12/28/Blog/7087/" title="添加动态诗词">添加动态诗词</a><time datetime="2020-12-28T03:12:51.000Z" title="发表于 2020-12-28 11:12:51">2020-12-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2020/12/28/Blog/56936/" title="修改导航栏颜色以及透明效果"><img data-lazy-src="https://cdn.jsdelivr.net/gh/Lavender-z/Lavender-z.github.io/img/blog/5/TopImge/topimage.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="修改导航栏颜色以及透明效果"/></a><div class="content"><a class="title" href="/2020/12/28/Blog/56936/" title="修改导航栏颜色以及透明效果">修改导航栏颜色以及透明效果</a><time datetime="2020-12-28T02:56:24.000Z" title="发表于 2020-12-28 10:56:24">2020-12-28</time></div></div></div></div><div class="card-widget" id="card-newest-comments"><div class="item-headline"><i class="fas fa-bolt"></i><span>最新评论</span></div><div class="aside-list"><span>正在加载中...</span></div></div><div class="card-widget card-categories"><div class="item-headline"><i class="fas fa-folder-open"></i><span>分类</span></div><ul class="card-category-list" id="aside-cat-list">
<li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/"><span class="card-category-list-name">博客搭建</span><span class="card-category-list-count">10</span></a></li>
</ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Butterfly/" style="font-size: 1.1em; color: #999">Butterfly</a> <a href="/tags/Github/" style="font-size: 1.1em; color: #999">Github</a> <a href="/tags/Matery/" style="font-size: 1.3em; color: #99a1ac">Matery</a> <a href="/tags/hexo/" style="font-size: 1.5em; color: #99a9bf">hexo</a> <a href="/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 1.5em; color: #99a9bf">博客</a> <a href="/tags/%E7%BE%8E%E5%8C%96%E4%B8%8E%E9%AD%94%E6%94%B9/" style="font-size: 1.3em; color: #99a1ac">美化与魔改</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/12/"><span class="card-archive-list-date">十二月 2020</span><span class="card-archive-list-count">10</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">10</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2020-12-19T16:00:00.000Z"></div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">9.2k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2021-02-04T10:42:02.958Z"></div></div></div></div></div></div></main><footer id="footer" style="background-image: url(/img/banner/index_img/topimage.jpg)"><div id="footer-wrap"><div class="copyright">©2020 - 2021 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 class="footer_custom_text"><span id="runtime"></span> </br> ~o( =∩ω∩= )m , 欢迎来到橘子的小屋~走过路过不要错过哦~😎😎😎</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="translateLink" type="button" title="简繁转换">简</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><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 fa-spin"></i></button><button id="chat_btn" type="button" title="rightside.chat_btn"><i class="fas fa-sms"></i></button><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><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.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')
.then(() => {
pangu.spacingElementById('content-inner')
})
}
}
function panguInit () {
if (true){
GLOBAL_CONFIG_SITE.isPost && panguFn()
} else {
panguFn()
}
}
document.addEventListener('DOMContentLoaded', panguInit)</script><script 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>function subtitleType () {
if (true) {
var typed = new Typed("#subtitle", {
strings: "今日事,今日毕,Never put off till tomorrow what you can do today".split(","),
startDelay: 300,
typeSpeed: 150,
loop: true,
backSpeed: 50
})
} else {
document.getElementById("subtitle").innerHTML = '今日事,今日毕'
}
}
if (true) {
if (typeof Typed === 'function') {
subtitleType()
} else {
getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
}
} else {
subtitleType()
}</script><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script src="https://cdn.jsdelivr.net/npm/[email protected]/js/md5.min.js"></script><script>window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content
content = content.replace(/<[^>]+>/g,"") // remove html tag
content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url
if (content.length > 150) {
content = content.substring(0,150) + '...'
}
return content
}
const getIcon = (icon, mail) => {
if (icon) return icon
let defaultIcon = '?d=monsterid'
let iconUrl = `https://gravatar.loli.net/avatar/${md5(mail.toLowerCase()) + defaultIcon}`
return iconUrl
}
const generateHtml = array => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (true) {
let name = 'src'
if(true) {
name = 'data-lazy-src'
}
result += `<a href='${array[i].url}' class="thumbnail"><img ${name}='${getIcon(array[i].avatar, array[i].mail)}' alt='${array[i].nick}'></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
}
} else {
result += '没有评论'
}
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}
const getComment = () => {
let serverURL = ''
if (false) {
serverURL = ''
} else {
serverURL = 'https://plBmn7xD.api.lncldglobal.com'
}
var settings = {
"method": "GET",
"headers": {
"X-LC-Id": 'plBmn7xD7H3jQaRVlvDlQB9e-MdYXbMMI',
"X-LC-Key": 'tc5je3hBFSp5UJQffC43gLYr',
"Content-Type": "application/json"
},
}
fetch(`${serverURL}/1.1/classes/Comment?limit=6&order=-createdAt`,settings)
.then(response => response.json())
.then(data => {
const valineArray = data.results.map(function (e) {
return {
'avatar': e.QQAvatar,
'content': changeContent(e.comment),
'mail': e.mail,
'nick': e.nick,
'url': e.url + '#' + e.objectId,
'date': e.createdAt,
}
})
saveToLocal.set('leancloud-newest-comments', JSON.stringify(valineArray), 10/(60*24))
generateHtml(valineArray)
}).catch(e => {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= "无法获取评论，请确认相关配置是否正确"
})
}
const newestCommentInit = () => {
if (document.querySelector('#card-newest-comments .aside-list')) {
const data = saveToLocal.get('leancloud-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getComment()
}
}
}
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})</script><div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div><script defer src="/live2d-widget/autoload.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><script src="/js/Upjiang.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><script src="/js/botui.js"></script><script data-pjax src="/js/botui_init.js"></script><script async src="/js/runtime.js"></script><script src="/js/title.js"></script><script src="/js/fish.js"></script><script src="/js/bubble.js"></script><script src="/gitcalendar/js/gitcalendar.js"></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="false"></script><script id="canvas_nest" defer="defer" color="0,0,200" 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="//code.tidio.co/8e0ah5hvexgslrysucu8nbq9d247lwp9.js" async="async"></script><script>function onTidioChatApiReady() {
window.tidioChatApi.hide();
window.tidioChatApi.on("close", function() {
window.tidioChatApi.hide();
});
}
if (window.tidioChatApi) {
window.tidioChatApi.on("ready", onTidioChatApiReady);
} else {
document.addEventListener("tidioChat-ready", onTidioChatApiReady);
}
var chatBtnFn = () => {
document.getElementById("chat_btn").addEventListener("click", function(){
window.tidioChatApi.show();
window.tidioChatApi.open();
});
}
chatBtnFn()
</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/[email protected]/dist/Meting.min.js"></script></div></body></html>