/
nextplugin.html
350 lines (316 loc) · 102 KB
/
nextplugin.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
<!DOCTYPE html><html class="theme-next pisces use-motion" lang="zh-CN"><head><meta name="generator" content="Hexo 3.9.0"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#222"><link rel="apple-touch-icon" sizes="180x180" href="/images/icons/favicon-48.png?v=6.7.0"><link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32.png?v=6.7.0"><link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16.png?v=6.7.0"><link rel="mask-icon" href="/images/icons/logo.svg?v=6.7.0" color="#222"><link rel="alternate" href="/atom.xml" title="菠菜眾長" type="application/atom+xml"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/lib/fancybox/source/jquery.fancybox.css" rel="stylesheet" type="text/css"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=6.7.0" rel="stylesheet" type="text/css"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Pisces",version:"6.7.0",sidebar:{position:"left",display:"always",offset:12,b2t:!1,scrollpercent:!0,onmobile:!0},fancybox:!0,fastclick:!0,lazyload:!0,tabs:!0,motion:{enable:!0,async:!0,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}},algolia:{applicationID:"",apiKey:"",indexName:"",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}}}</script><meta name="baidu-site-verification" content="B2fOjPkYa7"><meta name="google-site-verification" content="OhdtVOx5uwpZ_mMm0AZJXzw-dY1PPpAAkdavmmQhIL4"><meta name="360-site-verification" content="5b1c9d7574859ca6e460dd687667d5dc"><meta name="shenma-site-verification" content="933461d02e7b7c40e5293ee90085127c_1569650330"><meta name="description" content="&#x8BA9;&#x6587;&#x7AE0;&#x5199;&#x7684;&#x597D;&#x770B;&#x53C8;&#x7B80;&#x6D01;&#x53C8;&#x597D;&#x7528;&#x7684;&#x63D2;&#x4EF6;&#xFF01;hexo&#x5B8C;&#x6574;&#x7684;&#x6807;&#x7B7E;&#x5217;&#x8868;&#xF"><meta name="keywords" content="hexo,Frontend"><meta property="og:type" content="article"><meta property="og:title" content="hexo插件及next内置样式集"><meta property="og:url" content="https://lruihao.cn/posts/nextplugin.html"><meta property="og:site_name" content="菠菜眾長"><meta property="og:description" content="&#x8BA9;&#x6587;&#x7AE0;&#x5199;&#x7684;&#x597D;&#x770B;&#x53C8;&#x7B80;&#x6D01;&#x53C8;&#x597D;&#x7528;&#x7684;&#x63D2;&#x4EF6;&#xFF01;hexo&#x5B8C;&#x6574;&#x7684;&#x6807;&#x7B7E;&#x5217;&#x8868;&#xF"><meta property="og:locale" content="zh-CN"><meta property="og:updated_time" content="2019-11-23T12:00:38.532Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="hexo插件及next内置样式集"><meta name="twitter:description" content="&#x8BA9;&#x6587;&#x7AE0;&#x5199;&#x7684;&#x597D;&#x770B;&#x53C8;&#x7B80;&#x6D01;&#x53C8;&#x597D;&#x7528;&#x7684;&#x63D2;&#x4EF6;&#xFF01;hexo&#x5B8C;&#x6574;&#x7684;&#x6807;&#x7B7E;&#x5217;&#x8868;&#xF"><link rel="alternate" href="/atom.xml" title="菠菜眾長" type="application/atom+xml"><link rel="canonical" href="https://lruihao.cn/posts/nextplugin.html"><script type="text/javascript" id="page.configurations">CONFIG.page={sidebar:""}</script><title>hexo插件及next内置样式集 | 菠菜眾長</title><script type="text/javascript">var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?d25f1e053205bf07562f33365fef04d7";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script><noscript><style type="text/css">.sidebar-inner,.use-motion .brand,.use-motion .collection-title,.use-motion .comments,.use-motion .menu-item,.use-motion .motion-element,.use-motion .pagination,.use-motion .post-block,.use-motion .post-body,.use-motion .post-header{opacity:initial}.use-motion .logo,.use-motion .site-subtitle,.use-motion .site-title{opacity:initial;top:initial}.logo-line-after i{right:initial}</style></noscript><style type="text/css">span.spoiler{color:transparent;background-color:rgba(0,0,0,0);text-shadow:grey 0 0 10px;cursor:pointer;-webkit-transition:text-shadow .5s ease;-moz-transition:text-shadow .5s ease;transition:text-shadow .5s ease}span.spoiler:hover{text-shadow:grey 0 0 5px}span.spoiler.revealed{text-shadow:grey 0 0 0}</style><script type="text/javascript">window.addEventListener("load",function(){for(var e=document.getElementsByClassName("spoiler"),t=0;t<e.length;++t)e[t].addEventListener("click",function(){this.classList.toggle("revealed")})})</script><link rel="stylesheet" href="\assets\css\APlayer.min.css" class="aplayer-style-marker">
<script src="\assets\js\APlayer.min.js" class="aplayer-script-marker"></script>
<link rel="stylesheet" type="text/css" href="/assets/css/DPlayer.min.css"><script src="/assets/js/DPlayer.min.js"></script></head><body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN"><div class="container sidebar-position-left page-post-detail"><div class="headband"></div><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">菠菜众长</span> <span class="logo-line-after"><i></i></span></a></div><h1 class="site-subtitle" itemprop="description">李瑞豪的博客</h1></div><div class="site-nav-toggle"><button aria-label="切换导航栏"><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档<span class="badge">173</span></a></li><li class="menu-item menu-item-docs"><a href="/docs/" rel="section"><i class="menu-item-icon fa fa-fw fa-book"></i><br>综合</a></li><li class="menu-item menu-item-album"><a href="https://img.lruihao.cn" rel="external nofollow noopener noreferrer" target="_blank"><i class="menu-item-icon fa fa-fw fa-image"></i><br>相册</a></li><li class="menu-item menu-item-guestbook"><a href="/guestbook/" rel="section"><i class="menu-item-icon fa fa-fw fa-comments"></i><br>留言</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="menu-item-icon fa fa-fw fa-address-card"></i><br>关于</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i> </span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"><input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"><div style="text-align:center;padding:3px 0 0"><div style="margin-top:20px;font-size:18px;font-weight:600;border-bottom:1px solid #ccc"><i class="fa fa-history" aria-hidden="true"></i> 近期文章</div><ul style="margin:0;padding:0;list-style:none"><li><a href="/posts/year-2019.html" title="2019年度总结" target="_blank">2019年度总结</a></li><li><a href="/posts/sql.html" title="SQL总结" target="_blank">SQL总结</a></li><li><a href="/posts/cos-album.html" title="利用腾讯云为静态页面添加“动态”相册" target="_blank">利用腾讯云为静态页面添加“动态”相册</a></li><li><a href="/posts/restful.html" title="RESTful" target="_blank">RESTful</a></li><li><a href="/posts/phpPushUrl.html" title="php同时主动推送链接到百度，神马等站长平台" target="_blank">php同时主动推送链接到百度，神马等站长平台</a></li><li><a href="/posts/phpfile.html" title="php按行读取文件信息" target="_blank">php按行读取文件信息</a></li><li><a href="/posts/site-time.html" title="设置网站运行时间" target="_blank">设置网站运行时间</a></li><li><a href="/posts/async-defer.html" title="script的三种加载方式（async、defer）" target="_blank">script的三种加载方式（async、defer）</a></li><li><a href="/posts/Sublime-Text3.html" title="Sublime Text3快捷键大全" target="_blank">Sublime Text3快捷键大全</a></li><li><a href="/posts/netBeans.html" title="netBeans IDE开发设置" target="_blank">netBeans IDE开发设置</a></li><li><a href="/posts/dev-rules.html" title="web开发规则，代码规范" target="_blank">web开发规则，代码规范</a></li><li><a href="/posts/phpform.html" title="简单评论模块--php表单练习" target="_blank">简单评论模块--php表单练习</a></li><li><a href="/posts/phpfunc.html" title="php函数学习" target="_blank">php函数学习</a></li><li><a href="/posts/wamproot.html" title="WAMPServer自定义网站根目录等设置" target="_blank">WAMPServer自定义网站根目录等设置</a></li><li><a href="/posts/pysx2.html" title="python实训总结Ⅱ" target="_blank">python实训总结Ⅱ</a></li></ul></div></div></div></div></nav></div></header><a href="https://github.com/Lruihao/lruihao.github.io" class="github-corner" target="_blank" title="万水千山总是情,给个star行不行！" aria-label="万水千山总是情,给个star行不行！" rel="external nofollow noopener noreferrer"><svg width="80" height="80" viewbox="0 0 250 250" style="fill:#222;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><div class="reading-progress-bar"></div><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://lruihao.cn/posts/nextplugin.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="李瑞豪"><meta itemprop="description" content="从ACM到Web，分享程序、技巧、干货，记录心情、学习、成长！"><meta itemprop="image" content="/images/avatar.png"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="菠菜眾長"></span><header class="post-header"><h2 class="post-title" itemprop="name headline"><span class="post-delicate-flag" title="精品"><i class="fa fa-newspaper-o"></i> </span>hexo插件及next内置样式集<a href="https://github.com/Lruihao/lruihao.github.io/tree/hexo/source/_posts/nextplugin.md" class="post-edit-link" title="编辑" rel="external nofollow noopener noreferrer" target="_blank"><i class="fa fa-pencil"></i></a></h2><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2018-11-24 16:54:09" itemprop="dateCreated datePublished" datetime="2018-11-24T16:54:09+08:00">2018-11-24</time> </span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/hexo/" itemprop="url" rel="index"><span itemprop="name">hexo</span></a></span> </span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><span class="post-meta-item-text">评论数： </span><a href="/posts/nextplugin.html#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/posts/nextplugin.html" itemprop="commentCount"></span> </a></span><span id="/posts/nextplugin.html" class="leancloud_visitors" data-flag-title="hexo插件及next内置样式集"><span class="post-meta-divider">|</span> <span title="阅读次数"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span></span></span><div class="post-symbolscount"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">本文字数：</span> <span title="本文字数">2,415</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span title="阅读时长">17 分钟</span></div></div></header><div class="post-body" itemprop="articleBody"><div class="note info"><p>让文章写的好看又简洁又好用的插件！<a href="https://hexo.io/zh-cn/docs/tag-plugins.html" rel="external nofollow noopener noreferrer" target="_blank">hexo完整的标签列表</a>，<a href="https://theme-next.org/docs/tag-plugins/" rel="external nofollow noopener noreferrer" target="_blank">next插件列表</a></p></div><a id="more"></a><h3 id="hexo插件"><a href="#hexo插件" class="headerlink" title="hexo插件"></a>hexo插件</h3><h4 id="hexo-lazyload-image"><a href="#hexo-lazyload-image" class="headerlink" title="hexo-lazyload-image"></a><a href="https://github.com/Troy-Yang/hexo-lazyload-image" rel="external nofollow noopener noreferrer" target="_blank">hexo-lazyload-image</a></h4><figure class="highlight bash"><figcaption><span>安装</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-lazyload-image --save</span><br></pre></td></tr></table></figure><p>First add configuration in <code>_config.yml</code> from your hexo project.<br></p><figure class="highlight xml"><figcaption><span>使用</span></figcaption><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">lazyload:</span><br><span class="line"> enable: true </span><br><span class="line"> onlypost: false</span><br><span class="line"> loadingImg: # eg ./images/loading.gif</span><br></pre></td></tr></table></figure><p></p><h4 id="hexo-ruby-marks"><a href="#hexo-ruby-marks" class="headerlink" title="hexo-ruby-marks"></a>hexo-ruby-marks</h4><blockquote><p>不支持<code>ruby</code>新标签的浏览器将显示<code>rp</code>中的内容。</p></blockquote><figure class="highlight xml"><figcaption><span>HTML5写法</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ruby</span>></span>博採眾長<span class="tag"><<span class="name">rp</span>></span>（<span class="tag"></<span class="name">rp</span>></span> <span class="tag"><<span class="name">rt</span>></span>lruihao.cn<span class="tag"></<span class="name">rt</span>></span><span class="tag"><<span class="name">rp</span>></span>）<span class="tag"></<span class="name">rp</span>></span><span class="tag"></<span class="name">ruby</span>></span></span><br></pre></td></tr></table></figure><p><ruby>博採眾長<rp>（</rp> <rt>lruihao.cn</rt><rp>）</rp></ruby></p><p><strong>插件使用</strong><br></p><figure class="highlight bash"><figcaption><span>安装</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i hexo-ruby-marks</span><br></pre></td></tr></table></figure><p></p><figure class="highlight xml"><figcaption><span>使用</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% ruby _**base**_|_**top text**_ %}</span><br></pre></td></tr></table></figure><ruby><rb>博採眾長</rb><rp>(</rp><rt>lruihao.cn</rt><rp>)</rp></ruby><h4 id="hexo-pwa"><a href="#hexo-pwa" class="headerlink" title="hexo-pwa"></a><a href="https://github.com/lavas-project/hexo-pwa" rel="external nofollow noopener noreferrer" target="_blank">hexo-pwa</a></h4><figure class="highlight plain"><figcaption><span>安装</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save hexo-pwa</span><br></pre></td></tr></table></figure><blockquote><p>You can configure this plugin in <code>_config.yml</code>.(配置完即可使用不许单独设置<code>manifest.json</code>文件及配置，插件生成)</p></blockquote><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><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><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">pwa:</span><br><span class="line"> manifest:</span><br><span class="line"> path: /manifest.json</span><br><span class="line"> body:</span><br><span class="line"> name: hexo</span><br><span class="line"> short_name: hexo</span><br><span class="line"> icons:</span><br><span class="line"> - src: /images/android-chrome-192x192.png</span><br><span class="line"> sizes: 192x192</span><br><span class="line"> type: image/png</span><br><span class="line"> - src: /images/android-chrome-512x512.png</span><br><span class="line"> sizes: 512x512</span><br><span class="line"> type: image/png</span><br><span class="line"> start_url: /index.html</span><br><span class="line"> theme_color: '#ffffff'</span><br><span class="line"> background_color: '#ffffff'</span><br><span class="line"> display: standalone</span><br><span class="line"> serviceWorker:</span><br><span class="line"> path: /sw.js</span><br><span class="line"> preload:</span><br><span class="line"> urls:</span><br><span class="line"> - /</span><br><span class="line"> posts: 5</span><br><span class="line"> opts:</span><br><span class="line"> networkTimeoutSeconds: 5</span><br><span class="line"> routes:</span><br><span class="line"> - pattern: !!js/regexp /hm.baidu.com/</span><br><span class="line"> strategy: networkOnly</span><br><span class="line"> - pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/</span><br><span class="line"> strategy: cacheFirst</span><br><span class="line"> - pattern: !!js/regexp /\//</span><br><span class="line"> strategy: networkFirst</span><br><span class="line"> priority: 5</span><br></pre></td></tr></table></figure><h4 id="hexo-tag-dplayer"><a href="#hexo-tag-dplayer" class="headerlink" title="hexo-tag-dplayer"></a>hexo-tag-dplayer</h4><p><a href="https://github.com/MoePlayer/hexo-tag-dplayer" rel="external nofollow noopener noreferrer" target="_blank">hexo-tag-dplayer</a></p><figure class="highlight bash"><figcaption><span>install</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-tag-dplayer --save</span><br></pre></td></tr></table></figure><figure class="highlight xml"><figcaption><span>Usage</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% dplayer key=value ... %}</span><br></pre></td></tr></table></figure><p>key can be<br></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><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">dplayer options:</span><br><span class="line"> 'autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited' : bool options, use "yes" "y" "true" "1" "on" or just without value to enable</span><br><span class="line"> 'preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser' : string arguments</span><br><span class="line"> 'volume', 'maximum' : number arguments</span><br><span class="line">container options:</span><br><span class="line"> 'width', 'height' : string, used in container element style</span><br><span class="line">other:</span><br><span class="line"> 'code' : value of this key will be append to script tag</span><br></pre></td></tr></table></figure><p></p><figure class="highlight xml"><figcaption><span>example</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% dplayer "url=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=https://api.prprpr.me/dplayer/" "pic=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}</span><br></pre></td></tr></table></figure><div id="dplayer1" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom:20px;width:100%;height:400px"></div><script>!function(){var e=new DPlayer({container:document.getElementById("dplayer1"),video:{url:"https://cdn.lruihao.cn/files/hey.mp4"}});window.dplayers||(window.dplayers=[]),window.dplayers.push(e)}()</script><h4 id="hexo-tag-aplayer"><a href="#hexo-tag-aplayer" class="headerlink" title="hexo-tag-aplayer"></a>hexo-tag-aplayer</h4><p><a href="https://github.com/MoePlayer/hexo-tag-aplayer" rel="external nofollow noopener noreferrer" target="_blank">more</a><br></p><figure class="highlight bash"><figcaption><span>安装</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save hexo-tag-aplayer</span><br></pre></td></tr></table></figure><p></p><figure class="highlight xml"><figcaption><span>使用</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}</span><br></pre></td></tr></table></figure><p><strong>标签参数</strong></p><ul><li><code>title</code> : 曲目标题</li><li><code>author</code>: 曲目作者</li><li><code>url</code>: 音乐文件 URL 地址</li><li><code>picture_url</code>: (可选) 音乐对应的图片地址</li><li><code>narrow</code>: （可选）播放器袖珍风格</li><li><code>autoplay</code>: (可选) 自动播放，移动端浏览器暂时不支持此功能</li><li><code>width:xxx</code>: (可选) 播放器宽度 (默认: 100%)</li><li><code>lrc:xxx</code>: （可选）歌词文件 URL 地址</li></ul><p>当开启 Hexo 的 <a href="https://hexo.io/zh-cn/docs/asset-folders.html#%E6%96%87%E7%AB%A0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6%E5%A4%B9" rel="external nofollow noopener noreferrer" target="_blank">文章资源文件夹</a> 功能时，可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中，然后直接引用：</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></pre></td><td class="code"><pre><span class="line">{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}</span><br><span class="line"></span><br><span class="line">{% aplayer "你离开了南京，从此没人和我说话" "李志" "https://ziyuan.lruihao.cn/public/nanjing.mp3" "https://p2.music.126.net/UuSe-Vc6rS7JtRJSQgDU2g==/2323268069553116.jpg?param=300x300" %}</span><br></pre></td></tr></table></figure><div id="aplayer-neZcYJUx" class="aplayer aplayer-tag-marker" style="margin-bottom:20px"><pre class="aplayer-lrc-content"></pre></div><script>var ap=new APlayer({element:document.getElementById("aplayer-neZcYJUx"),narrow:!1,autoplay:!1,showlrc:!1,music:{title:"你离开了南京，从此没人和我说话",author:"李志",url:"https://cdn.lruihao.cn/files/nanjing.mp3",pic:"https://p2.music.126.net/UuSe-Vc6rS7JtRJSQgDU2g==/2323268069553116.jpg?param=300x300",lrc:""}});window.aplayers||(window.aplayers=[]),window.aplayers.push(ap)</script><h4 id="hexo-pdf"><a href="#hexo-pdf" class="headerlink" title="hexo-pdf"></a>hexo-pdf</h4><p><a href="https://lruihao.cn/posts/next-pdf.html">pdf传送门</a></p><h4 id="hexo-filter-flowchart-流程图"><a href="#hexo-filter-flowchart-流程图" class="headerlink" title="hexo-filter-flowchart(流程图)"></a>hexo-filter-flowchart(流程图)</h4><p><a href="https://flowchart.js.org" rel="external nofollow noopener noreferrer" target="_blank">语法</a><br></p><figure class="highlight bash"><figcaption><span>install</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save hexo-filter-flowchart</span><br></pre></td></tr></table></figure><p></p><figure class="highlight xml"><figcaption><span>Usage</span></figcaption><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><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">```%flow #去掉%号</span><br><span class="line">st=>start: Start|past:>https://lruihao.cn[blank]</span><br><span class="line">e=>end: End:>https://www.lruihao.cn[blank]</span><br><span class="line">op1=>operation: My Operation|past</span><br><span class="line">op2=>operation: Stuff|current</span><br><span class="line">sub1=>subroutine: My Subroutine|invalid</span><br><span class="line">cond=>condition: Yes</span><br><span class="line">or No?|approved:>/hexo/nextplugin.html</span><br><span class="line">c2=>condition: Good idea|rejected</span><br><span class="line">io=>inputoutput: catch something...|request</span><br><span class="line"></span><br><span class="line">st->op1(right)->cond</span><br><span class="line">cond(yes, right)->c2</span><br><span class="line">cond(no)->sub1(left)->op1</span><br><span class="line">c2(yes)->io->e</span><br><span class="line">c2(no)->op2->e</span><br><span class="line">```</span><br></pre></td></tr></table></figure><div id="flowchart-0" class="flow-chart"></div><h4 id="hexo-spoiler"><a href="#hexo-spoiler" class="headerlink" title="hexo-spoiler"></a>hexo-spoiler</h4><figure class="highlight bash"><figcaption><span>Install</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-spoiler --save</span><br></pre></td></tr></table></figure><blockquote><p>If hexo can’t detect this plugin automatically, you need to modify the <code>plugins</code> section of <code>[path_to_your_site]/_config.yml</code> manually, like:</p></blockquote><figure class="highlight yaml"><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="attr">plugins:</span></span><br><span class="line"><span class="bullet"> -</span> <span class="string">hexo-spoiler</span></span><br></pre></td></tr></table></figure><figure class="highlight plain"><figcaption><span>Syntax</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% spoiler [text] %}</span><br></pre></td></tr></table></figure><blockquote><p>It will pixelate your text, and click to reveal. Click again to hide your text again.<br>But you need to add <code><br></code> manually if you want line breaks after/before it.</p></blockquote><p>When you writes:<br></p><figure class="highlight plain"><figcaption><span>Preview</span></figcaption><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">{% spoiler text %}</span><br><span class="line">{% spoiler ~~text~~ %}</span><br><span class="line">{% spoiler *text* %}</span><br><span class="line">{% spoiler **text** %}<br></span><br><span class="line">{% spoiler **hello welcome to 博採眾長！** %}</span><br></pre></td></tr></table></figure><p></p><span class="spoiler">text</span> <span class="spoiler"><del>text</del></span> <span class="spoiler"><em>text</em></span> <span class="spoiler"><strong>text</strong></span><br><br><span class="spoiler"><strong>hello welcome to 博採眾長！</strong></span><h3 id="宅音乐侧栏播放器插件"><a href="#宅音乐侧栏播放器插件" class="headerlink" title="宅音乐侧栏播放器插件"></a>宅音乐侧栏播放器插件</h3><p><a href="https://player.lruihao.cn" target="_blank" rel="noopener">体验</a></p><blockquote><p>目前在next中可能引起部分css冲突，建议在next中使用在单个页面中。<br>依赖于jQuery，一行js可以引入播放器插件。</p></blockquote><h3 id="caniuse"><a href="#caniuse" class="headerlink" title="caniuse"></a>caniuse</h3><h4 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h4><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><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">{% caniuse feature @ periods %}</span><br><span class="line"><!-- Tag Alias --></span><br><span class="line">{% can feature @ periods %}</span><br><span class="line"></span><br><span class="line">feature : Search for the feature you want on https://caniuse.com, then click on the hash sign to the left of the search result heading and you will get the unique name of this feature.</span><br><span class="line">periods : Select the browser versions to display. Supported values: past_1, past_2, past_3, past_4, past_5, current, future_3, future_2, future_1. If this value is empty, the default value 'current' will be used.</span><br></pre></td></tr></table></figure><h4 id="栗子"><a href="#栗子" class="headerlink" title="栗子"></a>栗子</h4><p><strong>Caniuse without periods</strong><br></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">{% caniuse fetch %}</span><br></pre></td></tr></table></figure><p></p><iframe data-feature="fetch" src="https://caniuse.bitsofco.de/embed/index.html?feat=fetch&periods=current&accessible-colours=false" frameborder="0" width="100%" height="400px"></iframe><p><strong>Caniuse with current period</strong><br></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">{% can sharedarraybuffer @ current %}</span><br></pre></td></tr></table></figure><p></p><iframe data-feature="sharedarraybuffer" src="https://caniuse.bitsofco.de/embed/index.html?feat=sharedarraybuffer&periods=current&accessible-colours=false" frameborder="0" width="100%" height="400px"></iframe><p><strong>Caniuse with future periods</strong><br></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">{% caniuse loading-lazy-attr @ future_3,future_2,future_1 %}</span><br></pre></td></tr></table></figure><p></p><iframe data-feature="loading-lazy-attr" src="https://caniuse.bitsofco.de/embed/index.html?feat=loading-lazy-attr&periods=future_3,future_2,future_1&accessible-colours=false" frameborder="0" width="100%" height="400px"></iframe><p><strong>Caniuse with past periods</strong><br></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">{% caniuse link-rel-modulepreload @ past_1,past_2,past_3,past_4,past_5 %}</span><br></pre></td></tr></table></figure><p></p><iframe data-feature="link-rel-modulepreload" src="https://caniuse.bitsofco.de/embed/index.html?feat=link-rel-modulepreload&periods=past_1,past_2,past_3,past_4,past_5&accessible-colours=false" frameborder="0" width="100%" height="400px"></iframe><h3 id="Include-Raw"><a href="#Include-Raw" class="headerlink" title="Include Raw"></a>Include Raw</h3><p>This tag include any raw content into your posts. Path is relative to your site source directory.<br></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">{% include_raw '_data/path/to/file.html' %}</span><br></pre></td></tr></table></figure><p></p><p>Let’s create include-raw.html file in <code>_data</code> directory under site root directory with following content:<br></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">Any <strong>raw content</strong> may be included with this tag.</span><br></pre></td></tr></table></figure><p></p><p>Then in any post we can use this content with include_raw tag:<br></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">{% include_raw '_data/path/to/include-raw.html' %}</span><br></pre></td></tr></table></figure><p></p><p>Any <strong>raw content</strong> may be included with this tag.</p><h3 id="button"><a href="#button" class="headerlink" title="button"></a>button</h3><p><a href="https://theme-next.org/docs/tag-plugins/button" rel="external nofollow noopener noreferrer" target="_blank">more info</a><br></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><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></pre></td><td class="code"><pre><span class="line">{% button url, text, icon [class], [title] %}</span><br><span class="line"><!-- Tag Alias --></span><br><span class="line">{% btn url, text, icon [class], [title] %}</span><br><span class="line"></span><br><span class="line">url : Absolute or relative path to URL.</span><br><span class="line">text : Button text. Required if no icon specified.</span><br><span class="line">icon : FontAwesome icon name (without 'fa-' at the begining). Required if no text specified.</span><br><span class="line">[class] : FontAwesome class(es): fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x</span><br><span class="line"> Optional parameter.</span><br><span class="line">[title] : Tooltip at mouseover.</span><br><span class="line"> Optional parameter.</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></pre></td><td class="code"><pre><span class="line"><div class="text-center">{% btn #, Text & Large Icon & Title, home fa-fw fa-lg, Title %}</div></span><br></pre></td></tr></table></figure><div class="text-center"><a class="btn" href="#" title="Title"><i class="fa fa-home fa-fw fa-lg"></i>Text & Large Icon & Title</a></div><h3 id="Mermaid"><a href="#Mermaid" class="headerlink" title="Mermaid"></a>Mermaid</h3><p><a href="https://theme-next.org/docs/tag-plugins/mermaid" rel="external nofollow noopener noreferrer" target="_blank">more info</a></p><p>example<br></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><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><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">{% mermaid gitGraph: %}</span><br><span class="line">options</span><br><span class="line">{</span><br><span class="line"> "nodeSpacing": 150,</span><br><span class="line"> "nodeRadius": 10</span><br><span class="line">}</span><br><span class="line">end</span><br><span class="line">commit</span><br><span class="line">branch newbranch</span><br><span class="line">checkout newbranch</span><br><span class="line">commit</span><br><span class="line">commit</span><br><span class="line">checkout master</span><br><span class="line">commit</span><br><span class="line">commit</span><br><span class="line">merge newbranch</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure><p></p><pre class="mermaid" style="text-align:center">
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
</pre><h3 id="video"><a href="#video" class="headerlink" title="video"></a>video</h3><h4 id="Usage"><a href="#Usage" class="headerlink" title="Usage"></a>Usage</h4><figure class="highlight xml"><figcaption><span>video.js</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% video url %}</span><br></pre></td></tr></table></figure><h4 id="Examples"><a href="#Examples" class="headerlink" title="Examples"></a>Examples</h4><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">{% video https://example.com/sample.mp4 %}</span><br><span class="line">{% video /path/to/your/video.mp4 %}</span><br></pre></td></tr></table></figure><h3 id="tab选项卡"><a href="#tab选项卡" class="headerlink" title="tab选项卡"></a>tab选项卡</h3><blockquote><p>“tab”为选项卡的名称，可以自定义，数字是几表示从第几个选项卡开始。非必须，若数值为-1则隐藏选项卡内容。<br><a href="https://theme-next.org/docs/tag-plugins/tabs" rel="external nofollow noopener noreferrer" target="_blank">查看更多</a></p></blockquote><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><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><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">{% tabs Unique name, [index] %}</span><br><span class="line"><!-- tab [Tab caption] [@icon] --></span><br><span class="line">Any content (support inline tags too).</span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br><span class="line"></span><br><span class="line">Unique name : Unique name of tabs block tag without comma.</span><br><span class="line"> Will be used in #id's as prefix for each tab with their index numbers.</span><br><span class="line"> If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.</span><br><span class="line"> Only for current url of post/page must be unique!</span><br><span class="line">[index] : Index number of active tab.</span><br><span class="line"> If not specified, first tab (1) will be selected.</span><br><span class="line"> If index is -1, no tab will be selected. It's will be something like spoiler.</span><br><span class="line"> Optional parameter.</span><br><span class="line">[Tab caption] : Caption of current tab.</span><br><span class="line"> If not caption specified, unique name with tab index suffix will be used as caption of tab.</span><br><span class="line"> If not caption specified, but specified icon, caption will empty.</span><br><span class="line"> Optional parameter.</span><br><span class="line">[@icon] : FontAwesome icon name (without 'fa-' at the begining).</span><br><span class="line"> Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.</span><br><span class="line"> Optional parameter.</span><br></pre></td></tr></table></figure><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><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></pre></td><td class="code"><pre><span class="line">{% tabs tab,2 %}</span><br><span class="line"><!-- tab --></span><br><span class="line">this is tab1</span><br><span class="line"><!-- endtab --></span><br><span class="line"><!-- tab --></span><br><span class="line">this is tab2</span><br><span class="line"><!-- endtab --></span><br><span class="line"><!-- tab --></span><br><span class="line">this is tab3</span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure><div class="tabs" id="tab"><ul class="nav-tabs"><li class="tab"><a href="#tab-1">tab 1</a></li><li class="tab active"><a href="#tab-2">tab 2</a></li><li class="tab"><a href="#tab-3">tab 3</a></li></ul><div class="tab-content"><div class="tab-pane" id="tab-1"><p>this is tab1</p></div><div class="tab-pane active" id="tab-2"><p>this is tab2</p></div><div class="tab-pane" id="tab-3"><p>this is tab3</p></div></div></div><blockquote><p>数值为-1</p></blockquote><div class="tabs" id="选项"><ul class="nav-tabs"><li class="tab"><a href="#选项-1">选项 1</a></li><li class="tab"><a href="#选项-2">选项 2</a></li><li class="tab"><a href="#选项-3">选项 3</a></li></ul><div class="tab-content"><div class="tab-pane" id="选项-1"><p><strong>选项1</strong></p></div><div class="tab-pane" id="选项-2"><p><strong>选项2</strong></p></div><div class="tab-pane" id="选项-3"><p><strong>选项3</strong></p></div></div></div><blockquote><p>名字写在选项里面</p></blockquote><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><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></pre></td><td class="code"><pre><span class="line">{% tabs Fourth unique name %}</span><br><span class="line"><!-- tab Solution 1 --></span><br><span class="line">**This is Tab 1.**</span><br><span class="line"><!-- endtab --></span><br><span class="line"><!-- tab Solution 2 --></span><br><span class="line">**This is Tab 2.**</span><br><span class="line"><!-- endtab --></span><br><span class="line"><!-- tab Solution 3 --></span><br><span class="line">**This is Tab 3.**</span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure><div class="tabs" id="fourth-unique-name"><ul class="nav-tabs"><li class="tab active"><a href="#fourth-unique-name-1">Solution 1</a></li><li class="tab"><a href="#fourth-unique-name-2">Solution 2</a></li><li class="tab"><a href="#fourth-unique-name-3">Solution 3</a></li></ul><div class="tab-content"><div class="tab-pane active" id="fourth-unique-name-1"><p><strong>This is Tab 1.</strong></p></div><div class="tab-pane" id="fourth-unique-name-2"><p><strong>This is Tab 2.</strong></p></div><div class="tab-pane" id="fourth-unique-name-3"><p><strong>This is Tab 3.</strong></p></div></div></div><h3 id="note便签"><a href="#note便签" class="headerlink" title="note便签"></a>note便签</h3><blockquote><p>主题配置文件搜索note,可设置风格和图标是否显示。</p></blockquote><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><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></pre></td><td class="code"><pre><span class="line"># Note tag (bs-callout).</span><br><span class="line">note:</span><br><span class="line"> # Note tag style values:</span><br><span class="line"> # - simple bs-callout old alert style. Default.</span><br><span class="line"> # - modern bs-callout new (v2-v3) alert style.</span><br><span class="line"> # - flat flat callout style with background, like on Mozilla or StackOverflow.</span><br><span class="line"> # - disabled disable all CSS styles import of note tag.</span><br><span class="line"> style: flat</span><br><span class="line"> icons: true</span><br><span class="line"> border_radius: 15</span><br><span class="line"> # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span><br><span class="line"> # Offset also applied to label tag variables. This option can work with disabled note tag.</span><br><span class="line"> light_bg_offset: 0</span><br></pre></td></tr></table></figure><p>写法<br></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></pre></td><td class="code"><pre><span class="line">{% note default %}</span><br><span class="line">#### default</span><br><span class="line">是类型还有以下几种</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure><p></p><div class="note default"><h4 id="default"><a href="#default" class="headerlink" title="default"></a>default</h4><p>类型还有以下几种</p></div><div class="note primary"><h4 id="primary"><a href="#primary" class="headerlink" title="primary"></a>primary</h4><p>内容</p></div><div class="note success"><h4 id="success"><a href="#success" class="headerlink" title="success"></a>success</h4><p>内容</p></div><div class="note info"><h4 id="info"><a href="#info" class="headerlink" title="info"></a>info</h4><p>内容</p></div><div class="note warning"><h4 id="warning"><a href="#warning" class="headerlink" title="warning"></a>warning</h4><p>内容</p></div><div class="note danger"><h4 id="danger"><a href="#danger" class="headerlink" title="danger"></a>danger</h4><p>内容</p></div><div class="note"><h4 id="不填"><a href="#不填" class="headerlink" title="不填"></a>不填</h4><p>内容</p></div><div class="note danger no-icon"><h4 id="danger-no-icon"><a href="#danger-no-icon" class="headerlink" title="danger no-icon"></a>danger no-icon</h4><p>内容</p></div><h3 id="引用-文本居中"><a href="#引用-文本居中" class="headerlink" title="引用(文本居中)"></a>引用(文本居中)</h3><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">{% cq %}</span><br><span class="line">**there are test words**</span><br><span class="line">{% endcq %}</span><br></pre></td></tr></table></figure><blockquote class="blockquote-center"><p><strong>there are test words</strong></p></blockquote><h3 id="Font-Awesome图标"><a href="#Font-Awesome图标" class="headerlink" title="Font Awesome图标"></a><a href="https://www.runoob.com/font-awesome/fontawesome-tutorial.html" rel="external nofollow noopener noreferrer" target="_blank">Font Awesome图标</a></h3><blockquote><p>Font Awesome 是一套绝佳的图标字体库和CSS框架。<br>Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。<br>要使用Font Awesome图标，请在HTML页面的 部分中添加以下行：</p></blockquote><h4 id="1、国内推荐-CDN"><a href="#1、国内推荐-CDN" class="headerlink" title="1、国内推荐 CDN"></a>1、国内推荐 CDN</h4><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"><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"></span><br></pre></td></tr></table></figure><h4 id="2、海外推荐-CDN"><a href="#2、海外推荐-CDN" class="headerlink" title="2、海外推荐 CDN"></a>2、海外推荐 CDN</h4><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"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></span><br></pre></td></tr></table></figure><p>next已经引用了，可以直接用，比如：<br></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><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><i class="fa fa-car"></i></span><br><span class="line"><i class="fa fa-car" style="font-size:48px;"></i></span><br><span class="line"><i class="fa fa-car" style="font-size:60px;color:red;"></i></span><br><span class="line"><i class="fa fa-car fa-lg"></i></span><br><span class="line"><i class="fa fa-car fa-2x"></i></span><br><span class="line"><i class="fa fa-car fa-3x"></i></span><br><span class="line"><i class="fa fa-car fa-4x"></i></span><br><span class="line"><i class="fa fa-car fa-5x"></i></span><br></pre></td></tr></table></figure><p></p><p><i class="fa fa-car"></i> <i class="fa fa-car" style="font-size:48px"></i> <i class="fa fa-car" style="font-size:60px;color:red"></i> <i class="fa fa-car fa-lg"></i> <i class="fa fa-car fa-2x"></i> <i class="fa fa-car fa-3x"></i> <i class="fa fa-car fa-4x"></i> <i class="fa fa-car fa-5x"></i></p><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"><i class="fa fa-spinner fa-spin"></i></span><br><span class="line"><i class="fa fa-circle-o-notch fa-spin"></i></span><br><span class="line"><i class="fa fa-refresh fa-spin"></i></span><br><span class="line"><i class="fa fa-cog fa-spin"></i></span><br><span class="line"><i class="fa fa-spinner fa-pulse"></i></span><br></pre></td></tr></table></figure><p><i class="fa fa-spinner fa-spin"></i> <i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i> <i class="fa fa-spinner fa-pulse"></i></p><h3 id="代码块等"><a href="#代码块等" class="headerlink" title="代码块等"></a>代码块等</h3><figure class="highlight cpp"><figcaption><span>三个点后面的参数</span><a href="https://lruihao.cn">lruihao.cn</a></figcaption><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">[language] [title] [url] [link text]</span><br><span class="line"></span><br><span class="line">code snippet</span><br></pre></td></tr></table></figure><figure class="highlight diff"><figcaption><span>diff</span></figcaption><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="deletion">- printf("Hello World!");</span></span><br><span class="line"><span class="addition">+ printf("Hello_World!");</span></span><br></pre></td></tr></table></figure><p><strong>iframe</strong><br>在文章中插入 iframe。<br></p><figure class="highlight plain"><figcaption><span>iframe</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% iframe url [width] [height] %}</span><br></pre></td></tr></table></figure><p></p><iframe src="https://weibo.com/liahao" width="100%" height="400" frameborder="0" allowfullscreen></iframe><h3 id="Todo-list"><a href="#Todo-list" class="headerlink" title="Todo list"></a>Todo list</h3><ul><li><i class="fa fa-check-square"></i> 已完成</li><li><i class="fa fa-square"></i> 未完成</li></ul><figure class="highlight"><figcaption><span>Todo list</span></figcaption><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></pre></td><td class="code"><pre><span class="line"><ul></span><br><span class="line"><li><i class="fa fa-check-square"></i> 已完成</li></span><br><span class="line"><li><i class="fa fa-square"></i> 未完成</li></span><br><span class="line"></ul></span><br><span class="line"></span><br><span class="line"><!--或者--></span><br><span class="line"></span><br><span class="line">- <i class="fa fa-check-square"></i> 已完成</span><br><span class="line">- <i class="fa fa-square"></i> 未完成</span><br></pre></td></tr></table></figure><h3 id="Label"><a href="#Label" class="headerlink" title="Label"></a>Label</h3><p>主题配置文件中打开<br></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"># Label tag.</span><br><span class="line">label: true</span><br></pre></td></tr></table></figure><p></p><p><code>@</code>前面的是label的名字，后面的是要显示的文字<br><span class="label default">default</span> <span class="label primary">primary</span> <span class="label success">success</span> <span class="label info">info</span> <span class="label warning">warning</span> <span class="label danger">danger</span><br></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></pre></td><td class="code"><pre><span class="line">{% label default@default %}</span><br><span class="line"></span><br><span class="line">primary success info warning danger</span><br></pre></td></tr></table></figure><p></p><h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a><a href="http://www.mykernel.cn/my-hexo-next-1.html" rel="external nofollow noopener noreferrer" target="_blank">其他</a></h3><blockquote><p>包括小色块、左侧色条、右侧色条、上方色条、数字色块（需要自定义样式）<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js"></script><textarea id="flowchart-0-code" style="display:none">st=>start: Start|past:>https://lruihao.cn[blank]
e=>end: End:>https://www.lruihao.cn[blank]
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>/hexo/nextplugin.html
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e</textarea><textarea id="flowchart-0-options" style="display:none">{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12}</textarea><script>var code=document.getElementById("flowchart-0-code").value,options=JSON.parse(decodeURIComponent(document.getElementById("flowchart-0-options").value)),diagram=flowchart.parse(code);diagram.drawSVG("flowchart-0",options)</script></p></blockquote></div><div class="popular-posts-header"><i class="fa fa-link"></i> 相关文章</div><!--[if !IE]><!--><details><summary style="cursor:pointer">点击查看</summary><!--<![endif]--><ul class="popular-posts"><li class="popular-posts-item"><div class="popular-posts-title"><a href="\posts\hexo-theme-next.html" rel="bookmark">hexo-theme-next @modified LRH</a></div></li><li class="popular-posts-item"><div class="popular-posts-title"><a href="\posts\crash-cheat.html" rel="bookmark">网页离开时改变标题“崩溃欺骗”</a></div></li><li class="popular-posts-item"><div class="popular-posts-title"><a href="\posts\dongtaisub.html" rel="bookmark">hexo个性化-next主题动态显示subtitle</a></div></li><li class="popular-posts-item"><div class="popular-posts-title"><a href="\posts\console-log.html" rel="bookmark">hexo博客自定义console log</a></div></li><li class="popular-posts-item"><div class="popular-posts-title"><a href="\posts\hexobuild.html" rel="bookmark">hexo+github搭建个人博客及美化</a></div></li><li class="popular-posts-item"><div class="popular-posts-title"><a href="\posts\linkcard.html" rel="bookmark">模仿知乎卡片式链接</a></div></li></ul><!--[if IE]><!--></details><!--<![endif]--><div><div style="padding:10px 0;margin:20px auto;width:90%;text-align:center"><div>欢迎关注公众号，感谢支持 ！</div><button id="rewardButton" disable="enable" onclick="var qr = document.getElementById("QR"); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}"><span>赞赏</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/images/wechatpay.gif" alt="李瑞豪 微信支付"><p>微信支付</p></div><div id="alipay" style="display:inline-block"><img id="alipay_qr" src="/images/alipay.gif" alt="李瑞豪 支付宝"><p>支付宝</p></div></div></div></div><div class="copyright-box"><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者： </strong>李瑞豪</li><li><strong>修改时间： </strong>2019-11-23 20:00:38</li><li class="post-copyright-link"><strong>本文链接：</strong> <a href="https://lruihao.cn/posts/nextplugin.html" title="hexo插件及next内置样式集">https://lruihao.cn/posts/nextplugin.html</a></li><li class="post-copyright-license"><strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow noopener noreferrer" target="_blank"><i class="fa fa-fw fa-creative-commons"></i> BY-NC-SA 4.0</a> 许可协议。转载请注明出处！</li></ul></div><div class="post-tags"><a href="/tags/hexo/" rel="tag"><i class="fa fa-tag"></i> hexo</a> <a href="/tags/Frontend/" rel="tag"><i class="fa fa-tag"></i> Frontend</a></div><footer class="post-footer"><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/posts/commit-bat.html" rel="next" title="通过bat批处理文件自动提交博客代码"><i class="fa fa-chevron-left"></i> 通过bat批处理文件自动提交博客代码</a></div><span class="post-nav-divider"></span><div class="post-nav-prev post-nav-item"><a href="/posts/inversion-1.html" rel="prev" title="英语语法--部分倒装">英语语法--部分倒装 <i class="fa fa-chevron-right"></i></a></div></div></footer></div></article></div></div><div class="comments" id="comments"></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div id="sidebar-dimmer"></div><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">文章目录</li><li class="sidebar-nav-overview" data-target="site-overview-wrap">站点概览</li></ul><div class="site-overview-wrap sidebar-panel"><div class="site-overview"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" src="/images/avatar.png" alt="李瑞豪"><p class="site-author-name" itemprop="name">李瑞豪</p><p class="site-description motion-element" itemprop="description">从ACM到Web，分享程序、技巧、干货，记录心情、学习、成长！</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives/"><span class="site-state-item-count">173</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/docs/categories/index.html"><span class="site-state-item-count">25</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/docs/tags/index.html"><span class="site-state-item-count">122</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="feed-link motion-element"><a href="/atom.xml" rel="alternate"><i class="fa fa-rss"></i> RSS</a></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/Lruihao" title="GitHub → https://github.com/Lruihao" rel="external nofollow noopener noreferrer" target="_blank"><i class="fa fa-fw fa-github"></i></a> </span><span class="links-of-author-item"><a href="https://blog.csdn.net/qq_39520417" title="CSDN → https://blog.csdn.net/qq_39520417" rel="external nofollow noopener noreferrer" target="_blank"><i class="fa fa-fw fa-contao"></i></a> </span><span class="links-of-author-item"><a href="https://weibo.com/liahao" title="微博 → https://weibo.com/liahao" rel="external nofollow noopener noreferrer" target="_blank"><i class="fa fa-fw fa-weibo"></i></a> </span><span class="links-of-author-item"><a href="/images/qq.jpg" title="QQ → /images/qq.jpg"><i class="fa fa-fw fa-qq"></i></a> </span><span class="links-of-author-item"><a href="mailto:1074627678@qq.com" title="E-Mail → mailto:1074627678@qq.com" rel="external nofollow noopener noreferrer" target="_blank"><i class="fa fa-fw fa-envelope"></i></a></span></div><div class="cc-license motion-element" itemprop="license"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="external nofollow noopener noreferrer" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a></div><div class="links-of-blogroll motion-element links-of-blogroll-inline"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-globe"></i> 书签</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="/docs/donators/" title="/docs/donators/">赞助记录</a> </li><li class="links-of-blogroll-item"><a href="/docs/friends/" title="/docs/friends/">友情链接</a> </li><li class="links-of-blogroll-item"><a href="/posts/links.html" title="/posts/links.html">收藏夹</a> </li><li class="links-of-blogroll-item"><a href="/posts/font-mmt.html" title="/posts/font-mmt.html">MMT</a> </li><li class="links-of-blogroll-item"><a href="http://md.lruihao.cn" title="http://md.lruihao.cn" rel="external nofollow noopener noreferrer" target="_blank">WXMD</a> </li><li class="links-of-blogroll-item"><a href="/posts/webbiji.html" title="/posts/webbiji.html">WEB</a> </li></ul></div><iframe scrolling="no" src="https://tianqiapi.com/api.php?appid=72515596&appsecret=XDyzr75j&style=ta&skin=grape&align=center&fontsize=10&paddingtop=5&color=2f4f4f" frameborder="0" width="100%" height="20px" allowtransparency="true"></iframe></div></div><div class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#hexo插件"><span class="nav-number">1.</span> <span class="nav-text">hexo插件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#hexo-lazyload-image"><span class="nav-number">1.1.</span> <span class="nav-text">hexo-lazyload-image</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#hexo-ruby-marks"><span class="nav-number">1.2.</span> <span class="nav-text">hexo-ruby-marks</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#hexo-pwa"><span class="nav-number">1.3.</span> <span class="nav-text">hexo-pwa</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#hexo-tag-dplayer"><span class="nav-number">1.4.</span> <span class="nav-text">hexo-tag-dplayer</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#hexo-tag-aplayer"><span class="nav-number">1.5.</span> <span class="nav-text">hexo-tag-aplayer</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#hexo-pdf"><span class="nav-number">1.6.</span> <span class="nav-text">hexo-pdf</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#hexo-filter-flowchart-流程图"><span class="nav-number">1.7.</span> <span class="nav-text">hexo-filter-flowchart(流程图)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#hexo-spoiler"><span class="nav-number">1.8.</span> <span class="nav-text">hexo-spoiler</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#宅音乐侧栏播放器插件"><span class="nav-number">2.</span> <span class="nav-text">宅音乐侧栏播放器插件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#caniuse"><span class="nav-number">3.</span> <span class="nav-text">caniuse</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#使用"><span class="nav-number">3.1.</span> <span class="nav-text">使用</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#栗子"><span class="nav-number">3.2.</span> <span class="nav-text">栗子</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Include-Raw"><span class="nav-number">4.</span> <span class="nav-text">Include Raw</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#button"><span class="nav-number">5.</span> <span class="nav-text">button</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Mermaid"><span class="nav-number">6.</span> <span class="nav-text">Mermaid</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#video"><span class="nav-number">7.</span> <span class="nav-text">video</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Usage"><span class="nav-number">7.1.</span> <span class="nav-text">Usage</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Examples"><span class="nav-number">7.2.</span> <span class="nav-text">Examples</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#tab选项卡"><span class="nav-number">8.</span> <span class="nav-text">tab选项卡</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#note便签"><span class="nav-number">9.</span> <span class="nav-text">note便签</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#default"><span class="nav-number">9.1.</span> <span class="nav-text">default</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#primary"><span class="nav-number">9.2.</span> <span class="nav-text">primary</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#success"><span class="nav-number">9.3.</span> <span class="nav-text">success</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#info"><span class="nav-number">9.4.</span> <span class="nav-text">info</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#warning"><span class="nav-number">9.5.</span> <span class="nav-text">warning</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#danger"><span class="nav-number">9.6.</span> <span class="nav-text">danger</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#不填"><span class="nav-number">9.7.</span> <span class="nav-text">不填</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#danger-no-icon"><span class="nav-number">9.8.</span> <span class="nav-text">danger no-icon</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#引用-文本居中"><span class="nav-number">10.</span> <span class="nav-text">引用(文本居中)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Font-Awesome图标"><span class="nav-number">11.</span> <span class="nav-text">Font Awesome图标</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1、国内推荐-CDN"><span class="nav-number">11.1.</span> <span class="nav-text">1、国内推荐 CDN</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2、海外推荐-CDN"><span class="nav-number">11.2.</span> <span class="nav-text">2、海外推荐 CDN</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#代码块等"><span class="nav-number">12.</span> <span class="nav-text">代码块等</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Todo-list"><span class="nav-number">13.</span> <span class="nav-text">Todo list</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Label"><span class="nav-number">14.</span> <span class="nav-text">Label</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#其他"><span class="nav-number">15.</span> <span class="nav-text">其他</span></a></li></ol></div></div></div></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">Copyright © 2018 – <span itemprop="copyrightYear">2020</span> <span class="with-love" id="animate"><i class="fa fa-heartbeat"></i> </span><span class="author" itemprop="copyrightHolder">LRH. </span> <span title="博客总字数"><i class="fa fa-edit"></i> <span class="post-count">114.4k</span>字</span></div><div class="busuanzi-count"><script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span class="post-meta-item-icon"><i class="fa fa-user"></i> </span><span class="site-uv" title="总访客量"><span class="busuanzi-value" id="busuanzi_value_site_uv"><i class="fa fa-spinner fa-spin"></i></span> 人次 </span><span class="post-meta-divider">|</span> <span class="run-times" title="网站运行时间">载入天数时分秒...</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="site-pv" title="总访问量"><span class="busuanzi-value" id="busuanzi_value_site_pv"><i class="fa fa-spinner fa-spin"></i></span> 次</span></div><div class="weixin-box"><div class="weixin-menu"><div class="weixin-hover"><div class="weixin-description">微信扫一扫，订阅本博客</div></div></div></div><div class="beian" style="display:inline-block;height:20px;line-height:20px"><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=43030402000254" rel="external nofollow noopener noreferrer"><img src="/images/gov.png" style="float:left" alt="公安">湘公网安备43030402000254号</a> <span class="post-meta-divider" style="color:#555">|</span> <span><a href="http://www.beian.miit.gov.cn" target="_blank" rel="external nofollow noopener noreferrer">湘ICP备18020535号</a></span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i> <span id="scrollpercent"><span>0</span>%</span></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js"></script><script type="text/javascript" src="/lib/reading_progress/reading_progress.js"></script><script type="text/javascript" src="/js/src/utils.js?v=6.7.0"></script><script type="text/javascript" src="/js/src/motion.js?v=6.7.0"></script><script type="text/javascript" src="/js/src/affix.js?v=6.7.0"></script><script type="text/javascript" src="/js/src/schemes/pisces.js?v=6.7.0"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=6.7.0"></script><script type="text/javascript" src="/js/src/post-details.js?v=6.7.0"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=6.7.0"></script><script>$(".highlight").each(function(t,e){var n=$("<div>").addClass("highlight-wrap");$(e).after(n),n.append($("<button>").addClass("copy-btn").append("复制").on("click",function(t){var e=$(this).parent().find(".code").find(".line").map(function(t,e){return $(e).text()}).toArray().join("\n"),n=document.createElement("textarea");document.body.appendChild(n),n.style.position="absolute",n.style.top="0px",n.style.left="0px",n.value=e,n.select(),n.focus();var o=document.execCommand("copy");document.body.removeChild(n),o?$(this).text("复制成功"):$(this).text("复制失败"),$(this).blur()})).on("mouseleave",function(t){var e=$(this).find(".copy-btn");setTimeout(function(){e.text("复制")},300)}).append(e)})</script><script>$("body").find("pre.mermaid").length&&$.ajax({type:"GET",url:"//cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js",dataType:"script",cache:!0,success:function(){mermaid.initialize({theme:"forest",logLevel:3,flowchart:{curve:"linear"},gantt:{axisFormat:"%m/%d/%Y"},sequence:{actorMargin:50}})}})</script><script>function createTime(){var e=new Date,t=new Date("05/28/2018 20:01:01"),n=(e-t)/1e3,i=Math.floor(n/60/60/24),r=Math.floor(n/60/60-24*i),h=Math.floor(n/60-1440*i-60*r),a=Math.floor((e-t)/1e3-86400*i-3600*r-60*h);1===String(r).length&&(r="0"+r),1===String(h).length&&(h="0"+h),1===String(a).length&&(a="0"+a),document.querySelector(".run-times").innerHTML=i+" 天 "+r+" 时 "+h+" 分 "+a+" 秒"}if(document.hidden)clearInterval(siteTime);else var siteTime=setInterval("createTime()",500)</script><script type="text/javascript" src="/js/src/console.js"></script><script async type="text/javascript" src="/js/src/night.js"></script><div class="cover"></div><script async type="text/javascript" src="/js/src/crash-cheat.js"></script><script src="/js/src/activate-power-mode.js"></script><script>POWERMODE.colorful=!0,POWERMODE.shake=!1,document.body.addEventListener("input",POWERMODE)</script><script type="text/javascript" src="/js/src/love.js"></script><script type="text/javascript" src="/js/src/link-card.js" defer></script><script type="text/javascript" src="/js/src/pageQRcode.js" defer></script><script src="//cdn1.lncld.net/static/js/3.11.1/av-min.js"></script><script src="//unpkg.com/valine/dist/Valine.min.js"></script><script>var GUEST=["nick","mail","link"],guest="nick,mail,link";guest=guest.split(",").filter(function(e){return-1<GUEST.indexOf(e)}),new Valine({el:"#comments",verify:!1,notify:!1,appId:"7HwTRT0Q0Tfrat6ugrT6P67c-gzGzoHsz",appKey:"mhTY1kuUmviCtQwkwOASfsfD",placeholder:"ヾﾉ≧∀≦)o~ 有事请留言！\n评论功能以邮件作为通知方式！\n如有必要请填写正确邮箱！",avatar:"wavatar",meta:guest,pageSize:"10",visitor:!0,lang:"zh-cn"})</script><script type="text/javascript">// Popup Window;
var isfetched = false;
var isXml = true;
// Search DB path;
var search_path = "search.xml";
if (search_path.length === 0) {
search_path = "search.xml";
} else if (/json$/i.test(search_path)) {
isXml = false;
}
var path = "/" + search_path;
// monitor main search box;
var onPopupClose = function (e) {
$('.popup').hide();
$('#local-search-input').val('');
$('.search-result-list').remove();
$('#no-result').remove();
$(".local-search-pop-overlay").remove();
$('body').css('overflow', '');
}
function proceedsearch() {
$("body")
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
.css('overflow', 'hidden');
$('.search-popup-overlay').click(onPopupClose);
$('.popup').toggle();
var $localSearchInput = $('#local-search-input');
$localSearchInput.attr("autocapitalize", "none");
$localSearchInput.attr("autocorrect", "off");
$localSearchInput.focus();
}
// search function;
var searchFunc = function(path, search_id, content_id) {
'use strict';
// start loading animation
$("body")
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
'<div id="search-loading-icon">' +
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
'</div>' +
'</div>')
.css('overflow', 'hidden');
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
$.ajax({
url: path,
dataType: isXml ? "xml" : "json",
async: true,
success: function(res) {
// get the contents from search data
isfetched = true;
$('.popup').detach().appendTo('.header-inner');
var datas = isXml ? $("entry", res).map(function() {
return {
title: $("title", this).text(),
content: $("content",this).text(),
url: $("url" , this).text()
};
}).get() : res;
var input = document.getElementById(search_id);
var resultContent = document.getElementById(content_id);
var inputEventFunction = function() {
var searchText = input.value.trim().toLowerCase();
var keywords = searchText.split(/[\s\-]+/);
if (keywords.length > 1) {
keywords.push(searchText);
}
var resultItems = [];
if (searchText.length > 0) {
// perform local searching
datas.forEach(function(data) {
var isMatch = false;
var hitCount = 0;
var searchTextCount = 0;
var title = data.title.trim();
var titleInLowerCase = title.toLowerCase();
var content = data.content.trim().replace(/<[^>]+>/g,"");
var contentInLowerCase = content.toLowerCase();
var articleUrl = decodeURIComponent(data.url);
var indexOfTitle = [];
var indexOfContent = [];
// only match articles with not empty titles
if(title != '') {
keywords.forEach(function(keyword) {
function getIndexByWord(word, text, caseSensitive) {
var wordLen = word.length;
if (wordLen === 0) {
return [];
}
var startPosition = 0, position = [], index = [];
if (!caseSensitive) {
text = text.toLowerCase();
word = word.toLowerCase();
}
while ((position = text.indexOf(word, startPosition)) > -1) {
index.push({position: position, word: word});
startPosition = position + wordLen;
}
return index;
}
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
});
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
isMatch = true;
hitCount = indexOfTitle.length + indexOfContent.length;
}
}
// show search results
if (isMatch) {
// sort index by position of keyword
[indexOfTitle, indexOfContent].forEach(function (index) {
index.sort(function (itemLeft, itemRight) {
if (itemRight.position !== itemLeft.position) {
return itemRight.position - itemLeft.position;
} else {
return itemLeft.word.length - itemRight.word.length;
}
});
});
// merge hits into slices
function mergeIntoSlice(text, start, end, index) {
var item = index[index.length - 1];
var position = item.position;
var word = item.word;
var hits = [];
var searchTextCountInSlice = 0;
while (position + word.length <= end && index.length != 0) {
if (word === searchText) {
searchTextCountInSlice++;
}
hits.push({position: position, length: word.length});
var wordEnd = position + word.length;
// move to next position of hit
index.pop();
while (index.length != 0) {
item = index[index.length - 1];
position = item.position;
word = item.word;
if (wordEnd > position) {
index.pop();
} else {
break;
}
}
}
searchTextCount += searchTextCountInSlice;
return {
hits: hits,
start: start,
end: end,
searchTextCount: searchTextCountInSlice
};
}
var slicesOfTitle = [];
if (indexOfTitle.length != 0) {
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
}
var slicesOfContent = [];
while (indexOfContent.length != 0) {
var item = indexOfContent[indexOfContent.length - 1];
var position = item.position;
var word = item.word;
// cut out 100 characters
var start = position - 20;
var end = position + 80;
if(start < 0){
start = 0;
}
if (end < position + word.length) {
end = position + word.length;
}
if(end > content.length){
end = content.length;
}
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
}
// sort slices in content by search text's count and hits' count
slicesOfContent.sort(function (sliceLeft, sliceRight) {
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
return sliceRight.hits.length - sliceLeft.hits.length;
} else {
return sliceLeft.start - sliceRight.start;
}
});
// select top N slices in content
var upperBound = parseInt('1');
if (upperBound >= 0) {
slicesOfContent = slicesOfContent.slice(0, upperBound);
}
// highlight title and content
function highlightKeyword(text, slice) {
var result = '';
var prevEnd = slice.start;
slice.hits.forEach(function (hit) {
result += text.substring(prevEnd, hit.position);
var end = hit.position + hit.length;
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
prevEnd = end;
});
result += text.substring(prevEnd, slice.end);
return result;
}
var resultItem = '';
if (slicesOfTitle.length != 0) {
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
} else {
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
}
slicesOfContent.forEach(function (slice) {
resultItem += "<a href='" + articleUrl + "'>" +
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
"...</p>" + "</a>";
});
resultItem += "</li>";
resultItems.push({
item: resultItem,
searchTextCount: searchTextCount,
hitCount: hitCount,
id: resultItems.length
});
}
})
};
if (keywords.length === 1 && keywords[0] === "") {
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
} else if (resultItems.length === 0) {
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
} else {
resultItems.sort(function (resultLeft, resultRight) {
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
return resultRight.searchTextCount - resultLeft.searchTextCount;
} else if (resultLeft.hitCount !== resultRight.hitCount) {
return resultRight.hitCount - resultLeft.hitCount;
} else {
return resultRight.id - resultLeft.id;
}
});
var searchResultList = '<ul class=\"search-result-list\">';
resultItems.forEach(function (result) {
searchResultList += result.item;
})
searchResultList += "</ul>";
resultContent.innerHTML = searchResultList;
}
}
if ('auto' === 'auto') {
input.addEventListener('input', inputEventFunction);
} else {
$('.search-icon').click(inputEventFunction);
input.addEventListener('keypress', function (event) {
if (event.keyCode === 13) {
inputEventFunction();
}
});
}
// remove loading animation
$(".local-search-pop-overlay").remove();
$('body').css('overflow', '');
proceedsearch();
}
});
}
// handle and trigger popup window;
$('.popup-trigger').click(function(e) {
e.stopPropagation();
if (isfetched === false) {
searchFunc(path, 'local-search-input', 'local-search-result');
} else {
proceedsearch();
};
});
$('.popup-btn-close').click(onPopupClose);
$('.popup').click(function(e){
e.stopPropagation();
});
$(document).on('keyup', function (event) {
var shouldDismissSearchPopup = event.which === 27 &&
$('.search-popup').is(':visible');
if (shouldDismissSearchPopup) {
onPopupClose();
}
});</script><script>!function(){var t=document.createElement("script"),e=window.location.protocol.split(":")[0];t.src="https"===e?"https://zz.bdstatic.com/linksubmit/push.js":"http://push.zhanzhang.baidu.com/push.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}()</script><script src="/lib/pangu/dist/pangu.min.js?v=3.3"></script><script type="text/javascript">pangu.spacingPage()</script><script src="/lib/bookmark/bookmark.min.js?v=1.0"></script><script type="text/javascript">bookmark.scrollToMark("manual","#更多")</script><script>!function(e){var r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function t(){for(var c=0;c<r.length;c++)t=r[c],void 0,0<=(n=t.getBoundingClientRect()).top&&0<=n.left&&n.top<=(e.innerHeight||document.documentElement.clientHeight)&&function(){var t,n,e,i,o=r[c];t=o,n=function(){r=r.filter(function(t){return o!==t})},e=new Image,i=t.getAttribute("data-original"),e.onload=function(){t.src=i,n&&n()},e.src=i}();var t,n}t(),e.addEventListener("scroll",function(){!function(t,n){clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(n)},500)}(t,e)})}(this);</script></body></html>