-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
141 lines (88 loc) · 169 KB
/
atom.xml
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>ZPC's Blog</title>
<link href="/blog/atom.xml" rel="self"/>
<link href="https://pczhao.top/blog/"/>
<updated>2018-04-05T12:50:05.504Z</updated>
<id>https://pczhao.top/blog/</id>
<author>
<name>赵鹏程 (Pengcheng Zhao)</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>Markdown 教程</title>
<link href="https://pczhao.top/blog/post/84c9aef3.html"/>
<id>https://pczhao.top/blog/post/84c9aef3.html</id>
<published>2018-04-04T16:00:00.000Z</published>
<updated>2018-04-05T12:50:05.504Z</updated>
<content type="html"><![CDATA[<p>Markdown 学习记录<br><a id="more"></a></p><h1 id="标题"><a href="#标题" class="headerlink" title="标题"></a>标题</h1><p>注:<code>#</code> 后面保持空格<br><figure class="highlight clean"><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></pre></td><td class="code"><pre><span class="line"># h1</span><br><span class="line">## h2</span><br><span class="line">### h3</span><br><span class="line">#### h4</span><br><span class="line">##### h5</span><br><span class="line">###### h6</span><br><span class="line">####### h7 <span class="comment">// 错误代码</span></span><br><span class="line">######## h8 <span class="comment">// 错误代码</span></span><br><span class="line">######### h9 <span class="comment">// 错误代码</span></span><br><span class="line">########## h10 <span class="comment">// 错误代码</span></span><br></pre></td></tr></table></figure></p><h1 id="分级标题"><a href="#分级标题" class="headerlink" title="分级标题"></a><os style="color: #AD5D0F">分级标题</os></h1><p>注:<code>= -</code> 最少可以只写一个,兼容性一般<br><figure class="highlight asciidoc"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">一级标题</span><br><span class="line">======================</span><br><span class="line">二级标题</span><br><span class="line">---------------------</span><br></pre></td></tr></table></figure></p><h1 id="TOC"><a href="#TOC" class="headerlink" title="TOC"></a><os style="color: #AD5D0F">TOC</os></h1><p>注:根据标题生成目录,兼容性一般<br><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[TOC]</span><br></pre></td></tr></table></figure></p><h1 id="引用"><a href="#引用" class="headerlink" title="引用"></a>引用</h1><p>注1:单行式<br><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">></span><span class="bash"> hello world!</span></span><br></pre></td></tr></table></figure></p><p>注2:多行式<br><figure class="highlight erlang-repl"><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">> hello world!</span><br><span class="line">hello world!</span><br><span class="line">hello world!</span><br></pre></td></tr></table></figure></p><p>注3:多层嵌套<br><figure class="highlight shell"><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></pre></td><td class="code"><pre><span class="line"><span class="meta">></span><span class="bash"> aaaaaaaaa</span></span><br><span class="line"><span class="meta">></span><span class="bash">> bbbbbbbbb</span></span><br><span class="line"><span class="meta">></span><span class="bash">>> cccccccccc</span></span><br><span class="line"><span class="meta">></span><span class="bash">></span></span><br><span class="line"><span class="meta">></span><span class="bash">> dddddddd</span></span><br><span class="line"><span class="meta">></span><span class="bash"></span></span><br><span class="line"><span class="meta">></span><span class="bash"> eeeeeeee</span></span><br></pre></td></tr></table></figure></p><h1 id="行内标记"><a href="#行内标记" class="headerlink" title="行内标记"></a>行内标记</h1><p>注:用 ` 标记代码块将变成一行<br><figure class="highlight autohotkey"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">标记之外`hello world`标记之外</span><br></pre></td></tr></table></figure></p><h1 id="代码块"><a href="#代码块" class="headerlink" title="代码块"></a>代码块</h1><p>注2:Tab<br><figure class="highlight applescript"><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></pre></td><td class="code"><pre><span class="line">我是文字……</span><br><span class="line"></span><br><span class="line"> <<span class="keyword">div</span>> </span><br><span class="line"> <<span class="keyword">div</span>></<span class="keyword">div</span>></span><br><span class="line"> <<span class="keyword">div</span>></<span class="keyword">div</span>></span><br><span class="line"> <<span class="keyword">div</span>></<span class="keyword">div</span>></span><br><span class="line"> </<span class="keyword">div</span>></span><br></pre></td></tr></table></figure></p><p>注3:自定义语法—根据不同的语言配置不同的代码着色</p><pre><code><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < <span class="number">5</span>; i++) {</span><br><span class="line"> num+=i;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(num);</span><br></pre></td></tr></table></figure></code></pre><h1 id="插入链接"><a href="#插入链接" class="headerlink" title="插入链接"></a>插入链接</h1><p>注1:内链式<br><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">百度</span>](<span class="link">http://www.baidu.com/</span>)</span><br></pre></td></tr></table></figure></p><p>注2:引用式<br><figure class="highlight markdown"><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">[<span class="string">百度</span>][<span class="symbol">2</span>]</span><br><span class="line"></span><br><span class="line">[<span class="symbol">2</span>]: <span class="link">(http://www.baidu.com/)</span></span><br></pre></td></tr></table></figure></p><h1 id="插入图片"><a href="#插入图片" class="headerlink" title="插入图片"></a>插入图片</h1><p>注1:内链式<br><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">!<span class="selector-attr">[]</span>(./test.png <span class="string">'描述信息'</span>)</span><br></pre></td></tr></table></figure></p><p>注2:引用式<br><figure class="highlight markdown"><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">![<span class="string">name</span>][<span class="symbol">01</span>]</span><br><span class="line"></span><br><span class="line">[<span class="symbol">01</span>]: <span class="link">http://p6i24hxpq.bkt.clouddn.com/blog/1.2.jpg '描述'</span></span><br></pre></td></tr></table></figure></p><h1 id="插入图片带有链接"><a href="#插入图片带有链接" class="headerlink" title="插入图片带有链接"></a>插入图片带有链接</h1><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">![</span>](<span class="link">./test.png '百度'</span>)](<span class="link">http://www.baidu.com</span>)</span><br><span class="line"></span><br><span class="line">[<span class="string">![</span>](<span class="link">./test.png '百度'</span>)][<span class="symbol">5</span>]</span><br><span class="line"></span><br><span class="line">[<span class="symbol">5</span>]: <span class="link">http://www.baidu.com</span></span><br></pre></td></tr></table></figure><h1 id="视频插入"><a href="#视频插入" class="headerlink" title="视频插入"></a>视频插入</h1><p>Markdown 语法是不支持直接插入视频的<br>注1:插入HTML的 iframe 框架,多数第三方平台不支持插入<code><iframe></code>视频 </p><iframe height="300" width="400" src="http://player.youku.com/embed/XMjgzNzM0NTYxNg==" frameborder="0" 'allowfullscreen'=""></iframe><p>注2:伪造播放界面,实质是插入视频图片,然后通过点击跳转到相关页面<br><a href="http://player.youku.com/embed/XMjgzNzM0NTYxNg==" target="_blank" rel="noopener"><img src="./video.png" alt=""></a></p><h1 id="序表"><a href="#序表" class="headerlink" title="序表"></a>序表</h1><p>注1:有序 — 序列.后 保持空格<br><figure class="highlight markdown"><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"><span class="bullet">1. </span>one</span><br><span class="line"><span class="bullet">2. </span>two</span><br><span class="line"><span class="bullet">3. </span>three</span><br></pre></td></tr></table></figure></p><p>注2:无序<br><figure class="highlight asciidoc"><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"><span class="bullet">* </span>one</span><br><span class="line"><span class="bullet">* </span>two</span><br><span class="line"><span class="bullet">* </span>three</span><br></pre></td></tr></table></figure></p><p>注3:序表嵌套<br><figure class="highlight lsl"><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"><span class="number">1.</span> one</span><br><span class="line"> <span class="number">1.</span> one<span class="number">-1</span></span><br><span class="line"> <span class="number">2.</span> two<span class="number">-2</span></span><br><span class="line"><span class="number">2.</span> two </span><br><span class="line"> * two<span class="number">-1</span></span><br><span class="line"> * two<span class="number">-2</span></span><br></pre></td></tr></table></figure></p><p>注4:序表嵌套代码块 — 换行+两个Tab<br><figure class="highlight mipsasm"><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">+ one</span><br><span class="line"></span><br><span class="line"> var a = <span class="number">10</span><span class="comment">; </span></span><br><span class="line"> var <span class="keyword">b </span>= <span class="number">10</span><span class="comment">;</span></span><br><span class="line">+ two</span><br><span class="line"></span><br><span class="line"> var a = <span class="number">10</span><span class="comment">; </span></span><br><span class="line"> var <span class="keyword">b </span>= <span class="number">10</span><span class="comment">;</span></span><br></pre></td></tr></table></figure></p><h1 id="任务列表"><a href="#任务列表" class="headerlink" title="任务列表"></a>任务列表</h1><p>注:兼容性一般,要隔开一行<br><figure class="highlight haml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">这是文字</span><br><span class="line"></span><br><span class="line">-<span class="ruby"> [x] 选项<span class="number">1</span></span></span><br><span class="line"><span class="ruby">- [ ] 选项<span class="number">2</span> </span></span><br><span class="line"><span class="ruby">- [ ] 选项<span class="number">3</span></span></span><br></pre></td></tr></table></figure></p><h1 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h1><p>: 代表对齐方式 ,<strong> : 与 | 之间不要有空格</strong>,否则对齐会有些不兼容<br>注1:写法<br><figure class="highlight gherkin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">|<span class="string"> a </span>|<span class="string"> b </span>|<span class="string"> c </span>|</span><br><span class="line">|<span class="string">:-:</span>|<span class="string">:- </span>|<span class="string"> -:</span>|</span><br><span class="line">|<span class="string"> 居中 </span>|<span class="string"> 左对齐 </span>|<span class="string"> 右对齐 </span>|</span><br><span class="line">|<span class="string">============</span>|<span class="string">=================</span>|<span class="string">=============</span>|</span><br></pre></td></tr></table></figure></p><p>注2:特殊表格<br>一般对合并单元格,以及其他特殊格式表格,markdown 是无能为力的所以常规的做法是使用HTML标签,但是这样的编写效率极低。但是有了在线生成HTML代码 <a href="http://www.tablesgenerator.com/" target="_blank" rel="noopener">Tables Generator</a> (国外的站),所有问题都迎刃而解。</p><h1 id="支持内嵌CSS样式"><a href="#支持内嵌CSS样式" class="headerlink" title="支持内嵌CSS样式"></a>支持内嵌CSS样式</h1><figure class="highlight xml"><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">p</span> <span class="attr">style</span>=<span class="string">"color: #AD5D0F;font-size: 30px; font-family: '宋体';"</span>></span>内联样式<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h1 id="语义标记"><a href="#语义标记" class="headerlink" title="语义标记"></a>语义标记</h1><div class="table-container"><table><thead><tr><th style="text-align:left">描述</th><th style="text-align:left">效果</th><th style="text-align:left">代码</th></tr></thead><tbody><tr><td style="text-align:left">斜体</td><td style="text-align:left"><em>斜体</em></td><td style="text-align:left">*斜体*</td></tr><tr><td style="text-align:left">斜体</td><td style="text-align:left"><em>斜体</em></td><td style="text-align:left">_斜体_</td></tr><tr><td style="text-align:left">加粗</td><td style="text-align:left"><strong>加粗</strong></td><td style="text-align:left"><code>**加粗**</code></td></tr><tr><td style="text-align:left">加粗+斜体</td><td style="text-align:left"><strong><em>加粗+斜体</em></strong></td><td style="text-align:left"><code>***加粗+斜体***</code></td></tr><tr><td style="text-align:left">删除线</td><td style="text-align:left"><del>删除线</del></td><td style="text-align:left"><code>~~删除线~~</code></td></tr></tbody></table></div><h1 id="语义标签"><a href="#语义标签" class="headerlink" title="语义标签"></a>语义标签</h1><div class="table-container"><table><thead><tr><th style="text-align:left">描述</th><th style="text-align:left">效果</th><th style="text-align:left">代码</th></tr></thead><tbody><tr><td style="text-align:left">斜体</td><td style="text-align:left"><i>斜体</i></td><td style="text-align:left"><code><i>斜体</i></code></td></tr><tr><td style="text-align:left">加粗</td><td style="text-align:left"><b>加粗</b></td><td style="text-align:left"><code><b>加粗</b></code></td></tr><tr><td style="text-align:left">强调</td><td style="text-align:left"><em>强调</em></td><td style="text-align:left"><code><em>强调</em></code></td></tr><tr><td style="text-align:left">上标</td><td style="text-align:left">Z<sup>a</sup></td><td style="text-align:left"><code>Z<sup>a</sup></code></td></tr><tr><td style="text-align:left">下标</td><td style="text-align:left">Z<sub>a</sub></td><td style="text-align:left"><code>Z<sub>a</sub></code></td></tr><tr><td style="text-align:left">键盘文本</td><td style="text-align:left"><kbd>Ctrl</kbd></td><td style="text-align:left"><code><kbd>Ctrl</kbd></code></td></tr><tr><td style="text-align:left">换行</td><td style="text-align:left"></td><td style="text-align:left"><code> </code></td></tr></tbody></table></div><h1 id="公式"><a href="#公式" class="headerlink" title="公式"></a>公式</h1><p>注:1个<code>$</code>左对齐,2个居中<br><figure class="highlight gams"><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><span class="meta-keyword">$x</span> = {-b \pm \sqrt{b^2-4ac} \over 2a}$</span></span><br><span class="line"></span><br><span class="line"><span class="symbol">$</span><span class="symbol">$</span>x = y^<span class="number">2</span> + <span class="number">1</span><span class="symbol">$</span><span class="symbol">$</span></span><br><span class="line"> </span><br><span class="line"><span class="symbol">$</span>\<span class="built-in">frac</span>{<span class="number">7</span>x+<span class="number">5</span>}{<span class="number">1</span>+y^<span class="number">2</span>}<span class="symbol">$</span></span><br><span class="line"></span><br><span class="line"><span class="symbol">$</span><span class="symbol">$</span>\sum_{i=<span class="number">0</span>}^N\int_{a}^{b}g(t,i)\text{d}t<span class="symbol">$</span><span class="symbol">$</span></span><br></pre></td></tr></table></figure></p><p>$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$</p><script type="math/tex; mode=display">x = y^2 + 1</script><p>$\frac{7x+5}{1+y^2}$</p><script type="math/tex; mode=display">\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t</script><h1 id="分隔符"><a href="#分隔符" class="headerlink" title="分隔符"></a>分隔符</h1><p>注:最少三个 <em>**或 —- 或 </em> <em> </em><br><figure class="highlight asciidoc"><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">**<span class="strong">*</span></span><br><span class="line"><span class="strong">---</span></span><br><span class="line"><span class="strong">*</span> * <span class="strong">*</span></span><br></pre></td></tr></table></figure></p><h1 id="脚注"><a href="#脚注" class="headerlink" title="脚注"></a><os style="color: #AD5D0F">脚注</os></h1><figure class="highlight markdown"><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">Markdown[^1]</span><br><span class="line"></span><br><span class="line">[<span class="symbol">^1</span>]: <span class="link">Markdown是一种纯文本标记语言</span></span><br></pre></td></tr></table></figure><h1 id="锚点"><a href="#锚点" class="headerlink" title="锚点"></a><os style="color: #AD5D0F">锚点</os></h1><figure class="highlight markdown"><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">[<span class="string">公式标题锚点</span>](<span class="link">#1</span>)</span><br><span class="line"></span><br><span class="line"><span class="section">### [需要跳转的目录] {#1}</span></span><br></pre></td></tr></table></figure><h1 id="自动邮箱链接"><a href="#自动邮箱链接" class="headerlink" title="自动邮箱链接"></a>自动邮箱链接</h1><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><<span class="selector-tag">xxx</span>@<span class="keyword">outlook</span>.<span class="keyword">com</span>></span><br></pre></td></tr></table></figure><h1 id="流程图"><a href="#流程图" class="headerlink" title="流程图"></a>流程图</h1><p>flow<br>st=>start: 开始<br>e=>end: 结束<br>c1=>condition: 条件1<br>c2=>condition: 条件2<br>c3=>condition: 条件3<br>io=>inputoutput: 输出</p><p>st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e<br>c1(no)->e<br>c2(no)->e<br>c3(no)->e</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">A->>B: 你好</span><br><span class="line">Note left of A: 我在左边 // 注释方向,只有左右,没有上下</span><br><span class="line">Note right of B: 我在右边</span><br><span class="line">B-->A: 很高兴认识你</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><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></pre></td><td class="code"><pre><span class="line">digraph finite_state_machine {</span><br><span class="line"> rankdir=LR;</span><br><span class="line"> size="8,5"</span><br><span class="line"></span><br><span class="line"> node [shape = doublecircle]; S;</span><br><span class="line"> node [shape = point ]; qi</span><br><span class="line"></span><br><span class="line"> node [shape = circle];</span><br><span class="line"> qi -> S;</span><br><span class="line"> S -> q1 [ label = "a" ];</span><br><span class="line"> S -> S [ label = "a" ];</span><br><span class="line"> q1 -> S [ label = "a" ];</span><br><span class="line"> q1 -> q2 [ label = "ddb" ];</span><br><span class="line"> q2 -> q1 [ label = "b" ];</span><br><span class="line"> q2 -> q2 [ label = "b" ];</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>Markdown 学习记录<br>
</summary>
<category term="Programmer" scheme="https://pczhao.top/blog/categories/Programmer/"/>
<category term="Markdown" scheme="https://pczhao.top/blog/tags/Markdown/"/>
</entry>
<entry>
<title>Git 教程</title>
<link href="https://pczhao.top/blog/post/2121b11b.html"/>
<id>https://pczhao.top/blog/post/2121b11b.html</id>
<published>2018-03-31T13:27:53.000Z</published>
<updated>2018-04-01T08:10:14.827Z</updated>
<content type="html"><![CDATA[<blockquote><p>个人 Git 学习记录<br><a id="more"></a></p></blockquote><h1 id="Git-简介"><a href="#Git-简介" class="headerlink" title="Git 简介"></a>Git 简介</h1><h2 id="Git-是什么"><a href="#Git-是什么" class="headerlink" title="Git 是什么"></a>Git 是什么</h2><blockquote><p>Git 是目前世界上最先进的分布式版本控制系统。<br>2005年,Linus为了管理Linux系统的源码,花了两周时间自己用C写了一个分布式版本控制系统,这就是Git!</p></blockquote><h2 id="集中式和分布式版本控制系统的区别"><a href="#集中式和分布式版本控制系统的区别" class="headerlink" title="集中式和分布式版本控制系统的区别"></a>集中式和分布式版本控制系统的区别</h2><blockquote><p>集中式版本控制系统(CVS,SVN…),版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所以要先从中央服务器取得最新的版本,然后开始干活,干完活了,再把自己的活推送给中央服务器。中央服务器就好比是一个图书馆,你要改一本书,必须先从图书馆借出来,然后回到家自己改,改完了,再放回图书馆。</p></blockquote><p><img src="https://cdn.liaoxuefeng.com/cdn/files/attachments/001384860735706fd4c70aa2ce24b45a8ade85109b0222b000/0" alt="image"></p><blockquote><p>分布式版本控制系统根本没有“中央服务器”,每个人的电脑上都是一个完整的版本库,这样,你工作的时候,就不需要联网了,因为版本库就在你自己的电脑上。分布式版本控制系统的安全性要高很多,因为每个人电脑里都有完整的版本库,某一个人的电脑坏掉了不要紧,随便从其他人那里复制一个就可以了。</p></blockquote><p><img src="https://cdn.liaoxuefeng.com/cdn/files/attachments/0013848607465969378d7e6d5e6452d8161cf472f835523000/0" width="50%" height="50%"></p><h2 id="Git-安装"><a href="#Git-安装" class="headerlink" title="Git 安装"></a>Git 安装</h2><p>在Linux上安装Git<br><figure class="highlight routeros"><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">$ sudo apt-<span class="builtin-name">get</span> install git</span><br><span class="line">$ git --version # 查看当前git的版本</span><br><span class="line">$ git --help # 查看git基本命令</span><br><span class="line">$ git<span class="built_in"> config </span>--global user.name <span class="string">"Your Name"</span></span><br><span class="line">$ git<span class="built_in"> config </span>--global user.email <span class="string">"[email protected]"</span></span><br></pre></td></tr></table></figure></p><h1 id="Git-创建版本库"><a href="#Git-创建版本库" class="headerlink" title="Git 创建版本库"></a>Git 创建版本库</h1><p>版本库又名仓库 <strong>repository</strong>,你可以简单理解成一个目录,这个目录里面的所有文件都可以被 Git 管理起来,每个文件的修改、删除,Git 都能跟踪,以便任何时刻都可以追踪历史,或者在将来某个时刻可以“还原”。<br>这里再明确一下,所有的版本控制系统,其实只能跟踪文本文件的改动,比如 TXT 文件,网页,所有的程序代码等等,Git 也不例外。版本控制系统可以告诉你每次的改动,比如在第 5 行加了一个单词 “Linux”,在第 8 行删了一个单词 “Windows”。而图片、视频这些二进制文件,虽然也能由版本控制系统管理,但没法跟踪文件的变化,只能把二进制文件每次改动串起来,也就是只知道图片从 100KB 改成了 120KB,但到底改了啥,版本控制系统不知道,也没法知道。</p><h2 id="初始化一个仓库"><a href="#初始化一个仓库" class="headerlink" title="初始化一个仓库"></a>初始化一个仓库</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> mkdir learngit</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">cd</span> learngit</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> git init</span></span><br><span class="line">Initialized empty Git repository in ~/learngit/.git/</span><br></pre></td></tr></table></figure><p>可以发现当前目录下多了一个 <code>.git</code> 的目录,这个目录是 Git 来跟踪管理版本库的,没事千万不要手动修改这个目录里面的文件,不然改乱了,就把 Git 仓库给破坏了。如果你没有看到 <code>.git</code> 目录,那是因为这个目录默认是隐藏的,用 <code>ls -ah</code> 命令就可以看见。</p><h2 id="把文件添加到版本库"><a href="#把文件添加到版本库" class="headerlink" title="把文件添加到版本库"></a>把文件添加到版本库</h2><p>把一个文件放到Git仓库只需要两步:<br>到 <code>learngit</code> 目录下(子目录也行)编写一个 <code>readme.txt</code> 文件<br><figure class="highlight vim"><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">Git <span class="keyword">is</span> <span class="keyword">a</span> <span class="keyword">version</span> control <span class="built_in">system</span>.</span><br><span class="line">Git <span class="keyword">is</span> free software.</span><br></pre></td></tr></table></figure></p><p>第一步,用命令 <code>git add</code> 告诉Git,把文件添加到仓库:<br><figure class="highlight dockerfile"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git <span class="keyword">add</span><span class="bash"> readme.txt</span></span><br></pre></td></tr></table></figure></p><p>执行上面的命令,没有任何显示,这就对了,Unix 的哲学是“没有消息就是好消息”,说明添加成功。<br>第二步,用命令<code>git commit</code>告诉Git,把文件提交到仓库:<br><figure class="highlight sql"><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">$ git <span class="keyword">commit</span> -m <span class="string">"wrote a readme file"</span></span><br><span class="line">[<span class="keyword">master</span> (root-<span class="keyword">commit</span>) cb926e7] wrote a readme <span class="keyword">file</span></span><br><span class="line"> <span class="number">1</span> <span class="keyword">file</span> <span class="keyword">changed</span>, <span class="number">2</span> insertions(+)</span><br><span class="line"> <span class="keyword">create</span> <span class="keyword">mode</span> <span class="number">100644</span> readme.txt</span><br></pre></td></tr></table></figure></p><p>简单解释一下<code>git commit</code>命令,<code>-m</code>后面输入的是本次提交的说明,可以输入任意内容,当然最好是有意义的,这样你就能从历史记录里方便地找到改动记录。<br><code>git commit</code>命令执行成功后会告诉你,1个文件被改动(我们新添加的readme.txt文件),插入了两行内容(readme.txt有两行内容)。</p><h1 id="版本管理"><a href="#版本管理" class="headerlink" title="版本管理"></a>版本管理</h1><p>我们已经成功地添加并提交了一个 readme.txt 文件,现在,是时候继续工作了,于是,我们继续修改 readme.txt 文件,改成如下内容:<br><figure class="highlight vim"><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">Git <span class="keyword">is</span> <span class="keyword">a</span> distributed <span class="keyword">version</span> control <span class="built_in">system</span>.</span><br><span class="line">Git <span class="keyword">is</span> free software.</span><br></pre></td></tr></table></figure></p><p>现在,运行 <code>git status</code> 命令看看结果:<br><figure class="highlight shell"><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"><span class="meta">$</span><span class="bash"> git status</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> On branch master</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> Changes not staged <span class="keyword">for</span> commit:</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> (use <span class="string">"git add ..."</span> to update what will be committed)</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> (use <span class="string">"git checkout -- ..."</span> to discard changes <span class="keyword">in</span> working directory)</span></span><br><span class="line"><span class="meta">#</span><span class="bash"></span></span><br><span class="line"><span class="meta">#</span><span class="bash"> modified: readme.txt</span></span><br><span class="line"><span class="meta">#</span><span class="bash"></span></span><br><span class="line">no changes added to commit (use "git add" and/or "git commit -a")</span><br></pre></td></tr></table></figure></p><p><code>git status</code> 命令可以让我们时刻掌握仓库当前的状态,上面的命令告诉我们,readme.txt 被修改过了,但还没有准备提交的修改。</p>]]></content>
<summary type="html">
<blockquote>
<p>个人 Git 学习记录<br>
</summary>
<category term="Programmer" scheme="https://pczhao.top/blog/categories/Programmer/"/>
<category term="Git" scheme="https://pczhao.top/blog/tags/Git/"/>
</entry>
<entry>
<title>women 的</title>
<link href="https://pczhao.top/blog/post/82be3ef7.html"/>
<id>https://pczhao.top/blog/post/82be3ef7.html</id>
<published>2018-03-31T05:55:30.000Z</published>
<updated>2018-03-31T08:59:42.351Z</updated>
<summary type="html">
</summary>
</entry>
<entry>
<title>中文路径 是否支持</title>
<link href="https://pczhao.top/blog/post/3b8193bb.html"/>
<id>https://pczhao.top/blog/post/3b8193bb.html</id>
<published>2018-03-31T05:35:00.000Z</published>
<updated>2018-03-31T08:59:42.347Z</updated>
<summary type="html">
</summary>
</entry>
<entry>
<title>前端学习笔记之js中apply()和call()方法详解</title>
<link href="https://pczhao.top/blog/post/52a7b22c.html"/>
<id>https://pczhao.top/blog/post/52a7b22c.html</id>
<published>2018-03-02T13:11:16.000Z</published>
<updated>2018-03-31T08:59:42.314Z</updated>
<content type="html"><![CDATA[<blockquote><p>经过网上的大量搜索,渐渐明白了apply()和call方法的使用,为此写一篇文章记录一下。</p></blockquote><a id="more"></a><h3 id="定义"><a href="#定义" class="headerlink" title="定义"></a><strong>定义</strong></h3><ul><li><p><strong>apply()方法</strong>:</p><blockquote><p>Function.apply(obj,args)<br>obj:这个对象将代替Function类里this对象<br>args:这个是数组,它将作为参数传给Function(args–>arguments)</p></blockquote></li><li><p><strong>call()方法</strong>:</p><blockquote><p>Function.call(obj,[param1[,param2[,…[,paramN]]]])<br>obj:这个对象将代替Function类里this对象<br>params:这个是一个参数列表</p></blockquote></li></ul><hr><h3 id="相同点与不同点"><a href="#相同点与不同点" class="headerlink" title="相同点与不同点"></a><strong>相同点与不同点</strong></h3><ol><li><p><strong>相同点</strong></p><p> 作用是一样的,call 和 apply 都是为了改变函数体内部 this 的指向,也就是把Function(即this)绑定到obj,这时候obj具备了Function的属性和方法,说白一点就是obj继承了Function的属性和方法。</p></li><li><p><strong>不同点</strong></p><p> 相信大家也已经发现了,他们唯一区别就是接受参数的方式不太一样,apply接受的是数组参数,call接受的是连续参数。</p></li></ol><hr><h3 id="方法使用"><a href="#方法使用" class="headerlink" title="方法使用"></a><strong>方法使用</strong></h3><p><strong>我们来看下面一个例子:</strong></p><p>定义一个函数mul</p><figure class="highlight actionscript"><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"><span class="function"><span class="keyword">function</span> <span class="title">mul</span><span class="params">(a,b)</span></span>{</span><br><span class="line"><span class="keyword">return</span> <span class="keyword">this</span>+(a*b);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>接着我们在控制台上打印出</p><figure class="highlight lsl"><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">console.log(mul.call(null,<span class="number">2</span>,<span class="number">3</span>));</span><br><span class="line">console.log(mul.call('s',<span class="number">2</span>,<span class="number">3</span>));</span><br><span class="line">console.log(mul.call(<span class="number">3</span>,<span class="number">2</span>,<span class="number">3</span>));</span><br><span class="line">console.log(mul.apply(null,[<span class="number">2</span>,<span class="number">5</span>]));</span><br><span class="line">console.log(mul.apply(<span class="number">2</span>,[<span class="number">2</span>,<span class="number">5</span>]));</span><br></pre></td></tr></table></figure><p>分别为:</p><blockquote><p>[object Window]6<br>s6<br>9<br>[object Window]10<br>12</p></blockquote><p>可能你会发现到,第一行 <strong>console.log(mul.call(null,2,3))</strong> 没什么变化,call()的第一个参数就是改变的 this 指向,如果为 null 则函数的 this 不变,注意,如果在严格模式下(函数体或全局的开头有这句话:’use strict’),this 会变成 null。如果函数本身有参数,则从 call 的第二个参数开始写起。<br>第二行 <strong>console.log(mul.call(‘s’,2,3))</strong> 将函数的 this 指向一个字符串 ‘s’. ===>> ‘s’+2 * 3=s6<br>第三行 <strong>console.log(mul.call(3,2,3))</strong> 将函数的this指向一个数字3<br> ===>> 3+2 * 3=9<br>以此类推。</p><p><strong>再举一个例子</strong></p><p>学js的都知道 <strong>Math.max()</strong> 方法,比如有三个参数2,3,4那么我们要找出最大值可以这么写 <strong>Math.max(2,3,4)</strong> 那要是有 100 个或更多参数呢?这时候就可以结合 apply 和数组轻松实现了。</p><p>比如定义一个数组</p><blockquote><p>var arr=[2,3,4,5,6,7,8,9,10,23,45,66,22,11];</p></blockquote><p>接着我们打印出</p><blockquote><p>console.log(Math.max.apply(null,arr));</p></blockquote><p>这样一来就很简洁明了。</p><p><strong>再举一个例子实现对象继承</strong></p><figure class="highlight actionscript"><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"><span class="function"><span class="keyword">function</span> <span class="title">Person</span><span class="params">(name,age)</span> </span>{</span><br><span class="line"><span class="keyword">this</span>.name=name;</span><br><span class="line"><span class="keyword">this</span>.age=age;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> Student=<span class="function"><span class="keyword">function</span><span class="params">(name,age,gender)</span> </span>{</span><br><span class="line">Person.call(<span class="keyword">this</span>,name,age);<span class="comment">//this继承了person的属性和方法</span></span><br><span class="line"><span class="keyword">this</span>.gender=gender;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> student=<span class="keyword">new</span> Student(<span class="string">"陈安东"</span>, <span class="number">20</span>, <span class="string">"男"</span>);</span><br><span class="line">alert(<span class="string">"姓名:"</span>+student.name+<span class="string">"\n"</span>+<span class="string">"年龄:"</span>+student.age+<span class="string">"\n"</span>+<span class="string">"性别:"</span>+student.gender);</span><br></pre></td></tr></table></figure><p>输出</p><blockquote><p>姓名:陈安东<br>年龄:20<br>性别:男</p></blockquote><p>这样用call就实现了继承(用apply也类似)</p>]]></content>
<summary type="html">
<blockquote>
<p>经过网上的大量搜索,渐渐明白了apply()和call方法的使用,为此写一篇文章记录一下。</p>
</blockquote>
</summary>
<category term="other" scheme="https://pczhao.top/blog/categories/other/"/>
<category term="test" scheme="https://pczhao.top/blog/tags/test/"/>
</entry>
<entry>
<title>hexo的next主题个性化教程:打造炫酷网站</title>
<link href="https://pczhao.top/blog/post/a46eab8c.html"/>
<id>https://pczhao.top/blog/post/a46eab8c.html</id>
<published>2017-05-24T13:34:52.000Z</published>
<updated>2018-03-31T08:59:42.342Z</updated>
<content type="html"><![CDATA[<hr><blockquote><p>看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果</p></blockquote><a id="more"></a><p>主要有以下33种:</p><ul><li>在右上角或者左上角实现fork me on github</li><li>添加RSS</li><li>添加动态背景</li><li>实现点击出现桃心效果</li><li>修改文章内链接文本样式</li><li>修改文章底部的那个带#号的标签</li><li>在每篇文章末尾统一添加“本文结束”标记</li><li>修改作者头像并旋转</li><li>博文压缩</li><li>修改<code></code>代码块自定义样式</li><li>侧边栏社交小图标设置</li><li>主页文章添加阴影效果</li><li>在网站底部加上访问量</li><li>添加热度</li><li>网站底部字数统计</li><li>添加 README.md 文件</li><li>设置网站的图标Favicon</li><li>实现统计功能</li><li>添加顶部加载条</li><li>在文章底部增加版权信息</li><li>添加网易云跟帖(跟帖关闭,已失效,改为来必力)</li><li>隐藏网页底部powered By Hexo / 强力驱动</li><li>修改网页底部的桃心</li><li>文章加密访问</li><li>添加jiathis分享</li><li>博文置顶</li><li>修改字体大小</li><li>修改打赏字体不闪动</li><li>侧边栏推荐阅读</li><li>自定义鼠标样式</li><li>为博客加上萌萌的宠物</li><li>DaoVoice 在线联系</li><li>点击爆炸效果</li></ul><hr><h1 id="1-在右上角或者左上角实现fork-me-on-github"><a href="#1-在右上角或者左上角实现fork-me-on-github" class="headerlink" title="1. 在右上角或者左上角实现fork me on github"></a>1. 在右上角或者左上角实现fork me on github</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-71cf61436fe2ef27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-733457ecd3fbe289.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p> <strong>具体实现方法</strong></p><p>点击<a href="https://github.com/blog/273-github-ribbons" target="_blank" rel="noopener">这里</a>或者<a href="http://tholman.com/github-corners/" target="_blank" rel="noopener">这里</a>挑选自己喜欢的样式,并复制代码。 例如,我是复制如下代码:<br><img src="http://upload-images.jianshu.io/upload_images/5308475-96b22eacbe43838c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""><br>然后粘贴刚才复制的代码到<code>themes/next/layout/_layout.swig</code>文件中(放在<code><div class="headband"></div></code>的下面),并把<code>href</code>改为你的github地址<br><img src="http://upload-images.jianshu.io/upload_images/5308475-d2601ad456db064b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><hr><h1 id="2-添加RSS"><a href="#2-添加RSS" class="headerlink" title="2.添加RSS"></a>2.添加RSS</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-a54daae937107550.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>具体实现方法</strong></p><p>切换到你的blog(我是取名blog,具体的看你们的取名是什么)的路径,例如我是在<code>/Users/chenzekun/Code/Hexo/blog</code>这个路径上,也就是在你的根目录下<br><img src="http://upload-images.jianshu.io/upload_images/5308475-e8356e1ca05f23a3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>然后安装 Hexo 插件:(这个插件会放在<code>node_modules</code>这个文件夹里)</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm install --save hexo-generator-feed</span></span><br></pre></td></tr></table></figure><p>接下来打开画红线的文件,如下图:</p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-55f034e749aa8e6c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>在里面的末尾添加:(<strong>请注意</strong>在冒号后面要加一个空格,不然会发生错误!)</p><figure class="highlight verilog"><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"># Extensions</span><br><span class="line">## Plugins: http:<span class="comment">//hexo.io/plugins/</span></span><br><span class="line">plugins: hexo-<span class="keyword">generate</span>-feed</span><br></pre></td></tr></table></figure><p>然后打开next主题文件夹里面的<code>_config.yml</code>,在里面配置为如下样子:(就是在<code>rss:</code>的后面加上<code>/atom.xml</code>,<strong>注意</strong>在冒号后面要加一个空格)</p><figure class="highlight vbscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># <span class="keyword">Set</span> rss <span class="keyword">to</span> <span class="literal">false</span> <span class="keyword">to</span> disable feed link.</span><br><span class="line"># Leave rss as <span class="literal">empty</span> <span class="keyword">to</span> use site<span class="comment">'s feed link.</span></span><br><span class="line"># <span class="keyword">Set</span> rss <span class="keyword">to</span> specific value <span class="keyword">if</span> you have burned your feed already.</span><br><span class="line">rss: /atom.xml</span><br></pre></td></tr></table></figure><p>配置完之后运行:</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> hexo g</span></span><br></pre></td></tr></table></figure><p>重新生成一次,你会在<code>./public</code> 文件夹中看到 <code>atom.xml</code> 文件。然后启动服务器查看是否有效,之后再部署到 Github 中。</p><hr><h1 id="3-添加动态背景"><a href="#3-添加动态背景" class="headerlink" title="3. 添加动态背景"></a>3. 添加动态背景</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-ef603580be708882.gif?imageMogr2/auto-orient/strip" alt=""></p><p><strong>具体实现方法</strong></p><p>这个我之前有一篇文章有讲过了,详情点击<a href="http://shenzekun.cn/hexo%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0%E5%8A%A8%E6%80%81%E8%83%8C%E6%99%AF.html" target="_blank" rel="noopener">我的博客</a></p><hr><h1 id="4-实现点击出现桃心效果"><a href="#4-实现点击出现桃心效果" class="headerlink" title="4. 实现点击出现桃心效果"></a>4. 实现点击出现桃心效果</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-78e64c0a80bb559e.gif?imageMogr2/auto-orient/strip" alt=""></p><p> <strong>具体实现方法</strong></p><p>在网址输入如下</p><figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">http:</span><span class="comment">//7u2ss1.com1.z0.glb.clouddn.com/love.js</span></span><br></pre></td></tr></table></figure><p>然后将里面的代码copy一下,新建<code>love.js</code>文件并且将代码复制进去,然后保存。将<code>love.js</code>文件放到路径<code>/themes/next/source/js/src</code>里面,然后打开<code>\themes\next\layout\_layout.swig</code>文件,在末尾(在前面引用会出现找不到的bug)添加以下代码:</p><figure class="highlight xml"><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="comment"><!-- 页面点击小红心 --></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"/js/src/love.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><hr><h1 id="5-修改文章内链接文本样式"><a href="#5-修改文章内链接文本样式" class="headerlink" title="5. 修改文章内链接文本样式"></a>5. 修改文章内链接文本样式</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-8cc4fc18c399af7e.gif?imageMogr2/auto-orient/strip" alt=""></p><p> <strong>具体实现方法</strong></p><p>修改文件 <code>themes\next\source\css\_common\components\post\post.styl</code>,在末尾添加如下css样式,:</p><figure class="highlight scss"><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"><span class="comment">// 文章内链接文本样式</span></span><br><span class="line"><span class="selector-class">.post-body</span> <span class="selector-tag">p</span> <span class="selector-tag">a</span>{</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#0593d3</span>;</span><br><span class="line"> <span class="attribute">border-bottom</span>: none;</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#0593d3</span>;</span><br><span class="line"> &:hover {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fc6423</span>;</span><br><span class="line"> <span class="attribute">border-bottom</span>: none;</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#fc6423</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>其中选择<code>.post-body</code> 是为了不影响标题,选择 <code>p</code> 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。</p><hr><h1 id="6-修改文章底部的那个带-号的标签"><a href="#6-修改文章底部的那个带-号的标签" class="headerlink" title="6. 修改文章底部的那个带#号的标签"></a>6. 修改文章底部的那个带#号的标签</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-9f1817d2d7627f7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>具体实现方法</strong></p><p>修改模板<code>/themes/next/layout/_macro/post.swig</code>,搜索 <code>rel="tag">#</code>,将 # 换成<code><i class="fa fa-tag"></i></code></p><hr><h1 id="7-在每篇文章末尾统一添加“本文结束”标记"><a href="#7-在每篇文章末尾统一添加“本文结束”标记" class="headerlink" title="7. 在每篇文章末尾统一添加“本文结束”标记"></a>7. 在每篇文章末尾统一添加“本文结束”标记</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-90be73acbc5f8a7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>具体实现方法</strong></p><p>在路径 <code>\themes\next\layout\_macro</code> 中新建 <code>passage-end-tag.swig</code> 文件,并添加以下内容:</p><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">if</span></span> not is_index %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"text-align:center;color: #ccc;font-size:14px;"</span>></span>-------------本文结束<span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-paw"</span>></span><span class="tag"></<span class="name">i</span>></span>感谢您的阅读-------------<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">endif</span></span> %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure><p>接着打开<code>\themes\next\layout\_macro\post.swig</code>文件,在<code>post-body</code> 之后, <code>post-footer</code> 之前添加如下画红色部分代码(post-footer之前两个DIV):</p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-865c7f94f89b907e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>代码如下:</p><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">if</span></span> not is_index %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">include</span></span> 'passage-end-tag.swig' %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">endif</span></span> %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure><p>然后打开主题配置文件(<code>_config.yml</code>),在末尾添加:</p><figure class="highlight yaml"><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"><span class="comment"># 文章末尾添加“本文结束”标记</span></span><br><span class="line"><span class="attr">passage_end_tag:</span></span><br><span class="line"><span class="attr"> enabled:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>完成以上设置之后,在每篇文章之后都会添加如上效果图的样子。</p><hr><h1 id="8-修改作者头像并旋转"><a href="#8-修改作者头像并旋转" class="headerlink" title="8. 修改作者头像并旋转"></a>8. 修改作者头像并旋转</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-e035ce8ac8ea0b5b.gif?imageMogr2/auto-orient/strip" alt=""></p><p><strong>具体实现方法</strong></p><p>打开<code>\themes\next\source\css\_common\components\sidebar\sidebar-author.styl</code>,在里面添加如下代码:</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><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><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.site-author-image</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line"> <span class="attribute">padding</span>: $site-author-image-padding;</span><br><span class="line"> <span class="attribute">max-width</span>: $site-author-image-width;</span><br><span class="line"> <span class="attribute">height</span>: $site-author-image-height;</span><br><span class="line"> <span class="attribute">border</span>: $site-author-image-border-width solid $site-author-image-border-color;</span><br><span class="line"></span><br><span class="line"> <span class="comment">/* 头像圆形 */</span></span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">80px</span>;</span><br><span class="line"> <span class="attribute">-webkit-border-radius</span>: <span class="number">80px</span>;</span><br><span class="line"> <span class="attribute">-moz-border-radius</span>: <span class="number">80px</span>;</span><br><span class="line"> <span class="attribute">box-shadow</span>: inset <span class="number">0</span> -<span class="number">1px</span> <span class="number">0</span> <span class="number">#333</span>sf;</span><br><span class="line"></span><br><span class="line"> <span class="comment">/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 </span></span><br><span class="line"><span class="comment"> (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/</span></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> <span class="comment">/* 鼠标经过头像旋转360度 */</span></span><br><span class="line"> <span class="attribute">-webkit-transition</span>: -webkit-transform <span class="number">1.0s</span> ease-out;</span><br><span class="line"> <span class="attribute">-moz-transition</span>: -moz-transform <span class="number">1.0s</span> ease-out;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="number">1.0s</span> ease-out;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">img</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="comment">/* 鼠标经过停止头像旋转 </span></span><br><span class="line"><span class="comment"> -webkit-animation-play-state:paused;</span></span><br><span class="line"><span class="comment"> animation-play-state:paused;*/</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">/* 鼠标经过头像旋转360度 */</span></span><br><span class="line"> <span class="attribute">-webkit-transform</span>: <span class="built_in">rotateZ</span>(360deg);</span><br><span class="line"> <span class="attribute">-moz-transform</span>: <span class="built_in">rotateZ</span>(360deg);</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(360deg);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Z 轴旋转动画 */</span></span><br><span class="line">@-<span class="keyword">webkit</span>-<span class="keyword">keyframes</span> play {</span><br><span class="line"> 0% {</span><br><span class="line"> <span class="attribute">-webkit-transform</span>: <span class="built_in">rotateZ</span>(0deg);</span><br><span class="line"> }</span><br><span class="line"> 100% {</span><br><span class="line"> <span class="attribute">-webkit-transform</span>: <span class="built_in">rotateZ</span>(-360deg);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">@-<span class="keyword">moz</span>-<span class="keyword">keyframes</span> play {</span><br><span class="line"> 0% {</span><br><span class="line"> <span class="attribute">-moz-transform</span>: <span class="built_in">rotateZ</span>(0deg);</span><br><span class="line"> }</span><br><span class="line"> 100% {</span><br><span class="line"> <span class="attribute">-moz-transform</span>: <span class="built_in">rotateZ</span>(-360deg);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">@<span class="keyword">keyframes</span> play {</span><br><span class="line"> 0% {</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(0deg);</span><br><span class="line"> }</span><br><span class="line"> 100% {</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(-360deg);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h1 id="9-博文压缩"><a href="#9-博文压缩" class="headerlink" title="9. 博文压缩"></a>9. 博文压缩</h1><p>在站点的根目录下执行以下命令:</p><figure class="highlight shell"><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="meta">$</span><span class="bash"> npm install gulp -g</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save</span></span><br></pre></td></tr></table></figure><p>在如下图所示,新建 <code>gulpfile.js</code> ,并填入以下内容:</p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-bb959c3fb610e69c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><figure class="highlight javascript"><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"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</span><br><span class="line"><span class="keyword">var</span> minifycss = <span class="built_in">require</span>(<span class="string">'gulp-minify-css'</span>);</span><br><span class="line"><span class="keyword">var</span> uglify = <span class="built_in">require</span>(<span class="string">'gulp-uglify'</span>);</span><br><span class="line"><span class="keyword">var</span> htmlmin = <span class="built_in">require</span>(<span class="string">'gulp-htmlmin'</span>);</span><br><span class="line"><span class="keyword">var</span> htmlclean = <span class="built_in">require</span>(<span class="string">'gulp-htmlclean'</span>);</span><br><span class="line"><span class="comment">// 压缩 public 目录 css</span></span><br><span class="line">gulp.task(<span class="string">'minify-css'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> gulp.src(<span class="string">'./public/**/*.css'</span>)</span><br><span class="line"> .pipe(minifycss())</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'./public'</span>));</span><br><span class="line">});</span><br><span class="line"><span class="comment">// 压缩 public 目录 html</span></span><br><span class="line">gulp.task(<span class="string">'minify-html'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> gulp.src(<span class="string">'./public/**/*.html'</span>)</span><br><span class="line"> .pipe(htmlclean())</span><br><span class="line"> .pipe(htmlmin({</span><br><span class="line"> removeComments: <span class="literal">true</span>,</span><br><span class="line"> minifyJS: <span class="literal">true</span>,</span><br><span class="line"> minifyCSS: <span class="literal">true</span>,</span><br><span class="line"> minifyURLs: <span class="literal">true</span>,</span><br><span class="line"> }))</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'./public'</span>))</span><br><span class="line">});</span><br><span class="line"><span class="comment">// 压缩 public/js 目录 js</span></span><br><span class="line">gulp.task(<span class="string">'minify-js'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> gulp.src(<span class="string">'./public/**/*.js'</span>)</span><br><span class="line"> .pipe(uglify())</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'./public'</span>));</span><br><span class="line">});</span><br><span class="line"><span class="comment">// 执行 gulp 命令时执行的任务</span></span><br><span class="line">gulp.task(<span class="string">'default'</span>, [</span><br><span class="line"> <span class="string">'minify-html'</span>,<span class="string">'minify-css'</span>,<span class="string">'minify-js'</span></span><br><span class="line">]);</span><br></pre></td></tr></table></figure><p>生成博文是执行 <code>hexo g && gulp</code> 就会根据 <code>gulpfile.js</code> 中的配置,对 public 目录中的静态资源文件进行压缩。</p><hr><h1 id="10-修改代码块自定义样式"><a href="#10-修改代码块自定义样式" class="headerlink" title="10. 修改代码块自定义样式"></a>10. 修改<code></code>代码块自定义样式</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-e83a6ac00d4d1db3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>具体实现方法</strong></p><p>打开<code>\themes\next\source\css\_custom\custom.styl</code>,向里面加入:(颜色可以自己定义)</p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Custom styles.</span></span><br><span class="line"><span class="selector-tag">code</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#ff7600</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#fbf7f8</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">2px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 大代码块的自定义样式</span></span><br><span class="line"><span class="selector-class">.highlight</span>, pre {</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.highlight</span>, <span class="selector-tag">code</span>, pre {</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#d6d6d6</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h1 id="11-侧边栏社交小图标设置"><a href="#11-侧边栏社交小图标设置" class="headerlink" title="11. 侧边栏社交小图标设置"></a>11. 侧边栏社交小图标设置</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-20e8bba1ad3b343f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>具体实现方法</strong></p><p>打开主题配置文件(<code>_config.yml</code>),搜索<code>social_icons:</code>,在<a href="http://fontawesome.io/icons/" target="_blank" rel="noopener">图标库</a>找自己喜欢的小图标,并将名字复制在如下位置,保存即可</p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-21e22b05edc57b5b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><hr><h1 id="12-主页文章添加阴影效果"><a href="#12-主页文章添加阴影效果" class="headerlink" title="12. 主页文章添加阴影效果"></a>12. 主页文章添加阴影效果</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-21046c442900bf3f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>具体实现方法</strong></p><p>打开<code>\themes\next\source\css\_custom\custom.styl</code>,向里面加入:</p><figure class="highlight scss"><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"><span class="comment">// 主页文章添加阴影效果</span></span><br><span class="line"> <span class="selector-class">.post</span> {</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">60px</span>;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">60px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">25px</span>;</span><br><span class="line"> -webkit-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> rgba(<span class="number">202</span>, <span class="number">203</span>, <span class="number">203</span>, .<span class="number">5</span>);</span><br><span class="line"> -moz-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> rgba(<span class="number">202</span>, <span class="number">203</span>, <span class="number">204</span>, .<span class="number">5</span>);</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><hr><h1 id="13-在网站底部加上访问量"><a href="#13-在网站底部加上访问量" class="headerlink" title="13. 在网站底部加上访问量"></a>13. 在网站底部加上访问量</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-3124557da2b9c75f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>具体实现方法</strong><br>打开<code>\themes\next\layout_partials\footer.swig</code>文件,在copyright前加上画红线这句话:<br><img src="http://upload-images.jianshu.io/upload_images/5308475-ef8a4643f33fbaa1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>代码如下:</p><figure class="highlight xml"><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">script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p>然后再合适的位置添加显示统计的代码,如图:<br><img src="http://upload-images.jianshu.io/upload_images/5308475-bd6fb55b6847d13a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""><br>代码如下:</p><figure class="highlight javascript"><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"><div <span class="class"><span class="keyword">class</span></span>=<span class="string">"powered-by"</span>></span><br><span class="line"><i <span class="class"><span class="keyword">class</span></span>=<span class="string">"fa fa-user-md"</span>><span class="xml"><span class="tag"></<span class="name">i</span>></span></span><span class="xml"><span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_uv"</span>></span></span></span><br><span class="line"><span class="xml"> 本站访客数:<span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_uv"</span>></span><span class="tag"></<span class="name">span</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">span</span>></span></span></span><br><span class="line"><<span class="regexp">/div></span></span><br></pre></td></tr></table></figure><p>在这里有两中不同计算方式的统计代码:</p><ol><li><strong>pv</strong>的方式,单个用户连续点击n篇文章,记录n次访问量</li></ol><figure class="highlight xml"><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"><span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_pv"</span>></span></span><br><span class="line"> 本站总访问量<span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_pv"</span>></span><span class="tag"></<span class="name">span</span>></span>次</span><br><span class="line"><span class="tag"></<span class="name">span</span>></span></span><br></pre></td></tr></table></figure><ol start="2"><li><strong>uv</strong>的方式,单个用户连续点击n篇文章,只记录1次访客数</li></ol><figure class="highlight xml"><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"><span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_uv"</span>></span></span><br><span class="line"> 本站总访问量<span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_uv"</span>></span><span class="tag"></<span class="name">span</span>></span>次</span><br><span class="line"><span class="tag"></<span class="name">span</span>></span></span><br></pre></td></tr></table></figure><p>添加之后再执行<code>hexo d -g</code>,然后再刷新页面就能看到效果</p><hr><h1 id="14-添加热度"><a href="#14-添加热度" class="headerlink" title="14. 添加热度"></a>14. 添加热度</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-9bc8a6587cd1a575.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>具体实现方法</strong></p><p><strong>next</strong>主题集成<strong>leanCloud</strong>,打开<code>/themes/next/layout/_macro/post.swig</code>,在画红线的区域添加<code>℃</code>:</p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-f5dbda6888a79dd4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>然后打开,<code>/themes/next/languages/zh-Hans.yml</code>,将画红框的改为热度就可以了<br><img src="http://upload-images.jianshu.io/upload_images/5308475-bd0e1ac5456a2f0c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><hr><h1 id="15-网站底部字数统计"><a href="#15-网站底部字数统计" class="headerlink" title="15. 网站底部字数统计"></a>15. 网站底部字数统计</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-f26f21e2f2b34e18.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>具体方法实现</strong><br>切换到根目录下,然后运行如下代码</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm install hexo-wordcount --save</span></span><br></pre></td></tr></table></figure><p>然后在<code>/themes/next/layout/_partials/footer.swig</code>文件尾部加上:</p><figure class="highlight applescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><<span class="keyword">div</span> <span class="built_in">class</span>=<span class="string">"theme-info"</span>></span><br><span class="line"> <<span class="keyword">div</span> <span class="built_in">class</span>=<span class="string">"powered-by"</span>></<span class="keyword">div</span>></span><br><span class="line"> <span <span class="built_in">class</span>=<span class="string">"post-count"</span>>博客全站共{{ totalcount(site) }}字</span></span><br><span class="line"></<span class="keyword">div</span>></span><br></pre></td></tr></table></figure><hr><h1 id="16-添加-README-md-文件"><a href="#16-添加-README-md-文件" class="headerlink" title="16. 添加 README.md 文件"></a>16. 添加 README.md 文件</h1><p>每个项目下一般都有一个 <code>README.md</code> 文件,但是使用 hexo 部署到仓库后,项目下是没有 <code>README.md</code> 文件的。</p><p>在 Hexo 目录下的 <code>source</code> 根目录下添加一个 <code>README.md</code> 文件,修改站点配置文件 _<code>config.yml</code>,将 <code>skip_render</code> 参数的值设置为<br><figure class="highlight avrasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">skip_render:</span> README.md</span><br></pre></td></tr></table></figure></p><p>保存退出即可。再次使用 <code>hexo d</code> 命令部署博客的时候就不会在渲染 README.md 这个文件了。</p><hr><h1 id="17-设置网站的图标Favicon"><a href="#17-设置网站的图标Favicon" class="headerlink" title="17. 设置网站的图标Favicon"></a>17. 设置网站的图标Favicon</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-da012d2c0586a1e7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>具体方法实现</strong></p><p>在<a href="http://www.easyicon.net/" target="_blank" rel="noopener">EasyIcon</a>中找一张(32*32)的<code>ico</code>图标,或者去别的网站下载或者制作,并将图标名称改为<code>favicon.ico</code>,然后把图标放在<code>/themes/next/source/images</code>里,并且修改主题配置文件:</p><figure class="highlight clean"><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"># Put your favicon.ico into `hexo-site/source/` directory.</span><br><span class="line">favicon: /favicon.ico</span><br></pre></td></tr></table></figure><hr><h1 id="18-实现统计功能"><a href="#18-实现统计功能" class="headerlink" title="18. 实现统计功能"></a>18. 实现统计功能</h1><p><strong>实现效果图</strong><br><img src="http://upload-images.jianshu.io/upload_images/5308475-11cf11fe888748a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>具体实现方法</strong></p><p>在根目录下安装 <code>hexo-wordcount</code>,运行:</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm install hexo-wordcount --save</span></span><br></pre></td></tr></table></figure><p>然后在主题的配置文件中,配置如下:</p><figure class="highlight yaml"><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"><span class="comment"># Post wordcount display settings</span></span><br><span class="line"><span class="comment"># Dependencies: https://github.com/willin/hexo-wordcount</span></span><br><span class="line"><span class="attr">post_wordcount:</span></span><br><span class="line"><span class="attr"> item_text:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr"> wordcount:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr"> min2read:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><hr><h1 id="19-添加顶部加载条"><a href="#19-添加顶部加载条" class="headerlink" title="19. 添加顶部加载条"></a>19. 添加顶部加载条</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-2f5051d9f0352b90.gif?imageMogr2/auto-orient/strip" alt=""></p><p><strong>具体实现方法</strong></p><p>打开<code>/themes/next/layout/_partials/head.swig</code>文件,添加红框上的代码<br><img src="http://upload-images.jianshu.io/upload_images/5308475-72a578a8e3eee672.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""><br>代码如下:</p><figure class="highlight xml"><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="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"//cdn.bootcss.com/pace/1.0.2/pace.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">href</span>=<span class="string">"//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>></span></span><br></pre></td></tr></table></figure><p>但是,默认的是粉色的,要改变颜色可以在<code>/themes/next/layout/_partials/head.swig</code>文件中添加如下代码(接在刚才link的后面)</p><figure class="highlight xml"><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"><span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></span><br><span class="line"><span class="css"> <span class="selector-class">.pace</span> <span class="selector-class">.pace-progress</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#1E92FB</span>; <span class="comment">/*进度条颜色*/</span></span></span><br><span class="line"><span class="undefined"> height: 3px;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.pace</span> <span class="selector-class">.pace-progress-inner</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">box-shadow</span>: 0 0 10<span class="selector-tag">px</span> <span class="selector-id">#1E92FB</span>, 0 0 5<span class="selector-tag">px</span> <span class="selector-id">#1E92FB</span>; <span class="comment">/*阴影颜色*/</span></span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.pace</span> <span class="selector-class">.pace-activity</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">border-top-color</span>: <span class="selector-id">#1E92FB</span>; <span class="comment">/*上边框颜色*/</span></span></span><br><span class="line"><span class="css"> <span class="selector-tag">border-left-color</span>: <span class="selector-id">#1E92FB</span>; <span class="comment">/*左边框颜色*/</span></span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure><blockquote><p>目前,博主的增加顶部加载条的pull request 已被Merge😀===><a href="https://github.com/iissnan/hexo-theme-next/pull/1689" target="_blank" rel="noopener">详情</a><br>现在升级最新版的next主题,升级后只需修改主题配置文件(_config.yml)将<code>pace: false</code>改为<code>pace: true</code>就行了,你还可以换不同样式的加载条,如下图:<br><img src="http://upload-images.jianshu.io/upload_images/5308475-6d44a78e76dbf950.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p></blockquote><hr><h1 id="20-在文章底部增加版权信息"><a href="#20-在文章底部增加版权信息" class="headerlink" title="20. 在文章底部增加版权信息"></a>20. 在文章底部增加版权信息</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-a264542f53665849.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>在目录 <code>next/layout/_macro/下</code>添加 <code>my-copyright.swig</code>:</p><figure class="highlight django"><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></pre></td><td class="code"><pre><span class="line"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="name">if</span></span> page.copyright %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"my_post_copyright"</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml"> </span></span><br><span class="line"><span class="xml"> <span class="comment"><!-- JS库 sweetalert 可修改路径 --></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://unpkg.com/sweetalert/dist/sweetalert.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">span</span>></span>本文标题:<span class="tag"></<span class="name">span</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"</span></span></span><span class="template-variable">{{ url_for(page.path) }}</span><span class="xml"><span class="tag"><span class="string">"</span>></span></span><span class="template-variable">{{ page.title }}</span><span class="xml"><span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">span</span>></span>文章作者:<span class="tag"></<span class="name">span</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/"</span> <span class="attr">title</span>=<span class="string">"访问 </span></span></span><span class="template-variable">{{ theme.author }}</span><span class="xml"><span class="tag"><span class="string"> 的个人博客"</span>></span></span><span class="template-variable">{{ theme.author }}</span><span class="xml"><span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">span</span>></span>发布时间:<span class="tag"></<span class="name">span</span>></span></span><span class="template-variable">{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</span><span class="xml"><span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">span</span>></span>最后更新:<span class="tag"></<span class="name">span</span>></span></span><span class="template-variable">{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</span><span class="xml"><span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">span</span>></span>原始链接:<span class="tag"></<span class="name">span</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"</span></span></span><span class="template-variable">{{ url_for(page.path) }}</span><span class="xml"><span class="tag"><span class="string">"</span> <span class="attr">title</span>=<span class="string">"</span></span></span><span class="template-variable">{{ page.title }}</span><span class="xml"><span class="tag"><span class="string">"</span>></span></span><span class="template-variable">{{ page.permalink }}</span><span class="xml"><span class="tag"></<span class="name">a</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"copy-path"</span> <span class="attr">title</span>=<span class="string">"点击复制文章链接"</span>></span><span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-clipboard"</span> <span class="attr">data-clipboard-text</span>=<span class="string">"</span></span></span><span class="template-variable">{{ page.permalink }}</span><span class="xml"><span class="tag"><span class="string">"</span> <span class="attr">aria-label</span>=<span class="string">"复制成功!"</span>></span><span class="tag"></<span class="name">i</span>></span><span class="tag"></<span class="name">span</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">span</span>></span>许可协议:<span class="tag"></<span class="name">span</span>></span><span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-creative-commons"</span>></span><span class="tag"></<span class="name">i</span>></span> <span class="tag"><<span class="name">a</span> <span class="attr">rel</span>=<span class="string">"license"</span> <span class="attr">href</span>=<span class="string">"https://creativecommons.org/licenses/by-nc-nd/4.0/"</span> <span class="attr">target</span>=<span class="string">"_blank"</span> <span class="attr">title</span>=<span class="string">"Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)"</span>></span>署名-非商业性使用-禁止演绎 4.0 国际<span class="tag"></<span class="name">a</span>></span> 转载请保留原文链接及作者。<span class="tag"></<span class="name">p</span>></span> </span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="undefined"> </span></span></span><br><span class="line"><span class="xml"> var clipboard = new Clipboard('.fa-clipboard');</span></span><br><span class="line"><span class="xml"> $(".fa-clipboard").click(function(){</span></span><br><span class="line"><span class="xml"> clipboard.on('success', function(){</span></span><br><span class="line"><span class="xml"> swal({ </span></span><br><span class="line"><span class="xml"> title: "", </span></span><br><span class="line"><span class="xml"> text: '复制成功',</span></span><br><span class="line"><span class="xml"> icon: "success", </span></span><br><span class="line"><span class="xml"> showConfirmButton: true</span></span><br><span class="line"><span class="xml"> });</span></span><br><span class="line"><span class="xml">});</span></span><br><span class="line"><span class="xml"> }); </span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="name">endif</span></span> %}</span><span class="xml"></span></span><br></pre></td></tr></table></figure><p>在目录<code>next/source/css/_common/components/post/</code>下添加<code>my-post-copyright.styl</code>:</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><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><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.my_post_copyright</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">85%</span>;</span><br><span class="line"> <span class="attribute">max-width</span>: <span class="number">45em</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">2.8em</span> auto <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0.5em</span> <span class="number">1.0em</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#d3d3d3</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">0.93rem</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.6em</span>;</span><br><span class="line"> <span class="attribute">word-break</span>: break-all;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(255,255,255,0.4);</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-tag">p</span>{<span class="attribute">margin</span>:<span class="number">0</span>;}</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-tag">span</span> {</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">5.2em</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#b5b5b5</span>;</span><br><span class="line"> <span class="attribute">font-weight</span>: bold;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-class">.raw</span> {</span><br><span class="line"> <span class="attribute">margin-left</span>: <span class="number">1em</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">5em</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-tag">a</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#808080</span>;</span><br><span class="line"> <span class="attribute">border-bottom</span>:<span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#a3d2a3</span>;</span><br><span class="line"> <span class="attribute">text-decoration</span>: underline;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.my_post_copyright</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.fa-clipboard</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-class">.post-url</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="attribute">font-weight</span>: normal;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-class">.copy-path</span> {</span><br><span class="line"> <span class="attribute">margin-left</span>: <span class="number">1em</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">1em</span>;</span><br><span class="line"> +mobile(){display:none;}</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-class">.copy-path</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#808080</span>;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>修改<code>next/layout/_macro/post.swig</code>,在代码</p><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">if</span></span> not is_index %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">include</span></span> 'wechat-subscriber.swig' %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">endif</span></span> %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure><p>之前添加增加如下代码:</p><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">if</span></span> not is_index %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">include</span></span> 'my-copyright.swig' %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">endif</span></span> %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure><p>如下:</p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-769a382b6c9ada3e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>修改<code>next/source/css/_common/components/post/post.styl</code>文件,在最后一行增加代码:</p><figure class="highlight xl"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@<span class="keyword">import</span> <span class="string">"my-post-copyright"</span></span><br></pre></td></tr></table></figure><p>保存重新生成即可。<br>如果要在该博文下面增加版权信息的显示,需要在 Markdown 中增加copyright: true的设置,类似:</p><blockquote><p><strong>小技巧</strong>:如果你觉得每次都要输入<code>copyright: true</code>很麻烦的话,那么在<code>/scaffolds/post.md</code>文件中添加:<br><img src="http://upload-images.jianshu.io/upload_images/5308475-51f087ce1f1903a6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""><br>这样每次<code>hexo new "你的内容"</code>之后,生成的md文件会自动把<code>copyright:</code>加到里面去<br>(<strong>注意</strong>:如果解析出来之后,你的原始链接有问题:如:<code>http://yoursite.com/前端小项目:使用canvas绘画哆啦A梦.html</code>,那么在根目录下<code>_config.yml</code>中写成类似这样:)<br><img src="http://upload-images.jianshu.io/upload_images/5308475-980129b36907d103.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">就行了。</p></blockquote><hr><h1 id="21-添加网易云跟帖-跟帖关闭,已失效,改为来必力"><a href="#21-添加网易云跟帖-跟帖关闭,已失效,改为来必力" class="headerlink" title="21. 添加网易云跟帖(跟帖关闭,已失效,改为来必力)"></a>21. 添加网易云跟帖(跟帖关闭,已失效,改为来必力)</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-86b212c1221292ca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p><strong>具体方法实现</strong><br>有两种实现方法:<br>①更新next主题,因为最新版本的主题已经支持这种评论。直接在主题配置文件<code>_config.yml</code> 文件中添加如下配置:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">gentie_productKey:</span> <span class="comment">#your-gentie-product-key</span></span><br></pre></td></tr></table></figure><p>②如果你不想更新的话,那么按下面步骤进行:<br>首先,还是在主题配置文件<code>_config.yml</code> 文件中添加如下配置:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">gentie_productKey:</span> <span class="comment">#your-gentie-product-key</span></span><br></pre></td></tr></table></figure><p>你的<code>productKey</code>就是下面画红线部分<br><img src="http://upload-images.jianshu.io/upload_images/5308475-2d1eeef55db50cfc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>然后在在<code>layout/_scripts/third-party/comments/</code> 目录中添加 <code>gentie.swig</code>,文件内容如下:</p><figure class="highlight twig"><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></pre></td><td class="code"><pre><span class="line"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="keyword">if</span></span> not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="keyword">if</span></span> theme.gentie_productKey %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="keyword">set</span></span> gentie_productKey = theme.gentie_productKey %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span></span><br><span class="line"><span class="xml"> var cloudTieConfig = {</span></span><br><span class="line"><span class="xml"> url: document.location.href, </span></span><br><span class="line"><span class="xml"> sourceId: "",</span></span><br><span class="line"><span class="xml"> productKey: "</span><span class="template-variable">{{gentie_productKey}}</span><span class="xml">",</span></span><br><span class="line"><span class="xml"> target: "cloud-tie-wrapper"</span></span><br><span class="line"><span class="xml"> };</span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://img1.ws.126.net/f2e/tie/yun/sdk/loader.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="keyword">endif</span></span> %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="keyword">endif</span></span> %}</span><span class="xml"></span></span><br></pre></td></tr></table></figure><p>然后在<code>layout/_scripts/third-party/comments.swig</code>文件中追加:</p><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="name">include</span></span> './comments/gentie.swig' %}</span><span class="xml"></span></span><br></pre></td></tr></table></figure><p>最后,在 <code>layout/_partials/comments.swig</code> 文件中条件最后追加网易云跟帖插件引用的判断逻辑:</p><figure class="highlight applescript"><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">{% elseif theme.gentie_productKey %}</span><br><span class="line"> <<span class="keyword">div</span> <span class="built_in">id</span>=<span class="string">"cloud-tie-wrapper"</span> <span class="built_in">class</span>=<span class="string">"cloud-tie-wrapper"</span>></span><br><span class="line"> </<span class="keyword">div</span>></span><br></pre></td></tr></table></figure><p>具体位置如下:<br><img src="http://upload-images.jianshu.io/upload_images/5308475-c9199439d2396989.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>可能你<code>hexo s</code>时可能看不到,直接<code>hexo d</code>就可以看到了</p><hr><blockquote><p>近日,我朋友发来消息,说网易云跟帖要关了,我网上查了一下,果然如此</p></blockquote><p><img src="https://ws3.sinaimg.cn/large/006tKfTcly1fhdq9vii8pj310k0iqjse.jpg" alt=""></p><blockquote><p>😭都是泪,上次用了多说,结果多说关了,接着是网易云跟帖😷,这次直接用国外的来必力,应该不会这么容易关吧😏</p></blockquote><p>方法其实还是跟上面差不多的</p><p>首先在 <code>_config.yml</code> 文件中添加如下配置:(<strong>注意!如果主题是最新版的,直接写你的liver_uid就行了</strong>)</p><figure class="highlight clean"><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"># Support for LiveRe comments <span class="keyword">system</span>.</span><br><span class="line"># You can get your uid <span class="keyword">from</span> https:<span class="comment">//livere.com/insight/myCode (General web site)</span></span><br><span class="line">livere_uid: your uid</span><br></pre></td></tr></table></figure><p>其中,<code>livere_uid</code>就是画红线的部分<br><img src="https://ws1.sinaimg.cn/large/006tKfTcly1fhdqgyeu2fj30ms02yglr.jpg" alt=""></p><p>然后在 <code>layout/_scripts/third-party/comments/</code> 目录中添加 livere.swig,文件内容如下:</p><figure class="highlight django"><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></pre></td><td class="code"><pre><span class="line"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="name">if</span></span> not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id and not theme.gentie_productKey %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">if</span></span> theme.livere_uid %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="undefined"></span></span></span><br><span class="line"><span class="xml"> (function(d, s) {</span></span><br><span class="line"><span class="xml"> var j, e = d.getElementsByTagName(s)[0];</span></span><br><span class="line"><span class="xml"> if (typeof LivereTower === 'function') { return; }</span></span><br><span class="line"><span class="xml"> j = d.createElement(s);</span></span><br><span class="line"><span class="xml"> j.src = 'https://cdn-city.livere.com/js/embed.dist.js';</span></span><br><span class="line"><span class="xml"> j.async = true;</span></span><br><span class="line"><span class="xml"> e.parentNode.insertBefore(j, e);</span></span><br><span class="line"><span class="xml"> })(document, 'script');</span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml"> </span><span class="template-tag">{% <span class="name"><span class="name">endif</span></span> %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="name">endif</span></span> %}</span><span class="xml"></span></span><br></pre></td></tr></table></figure><p>然后在 <code>layout/_scripts/third-party/comments.swig</code>文件中追加:</p><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="name">include</span></span> './comments/livere.swig' %}</span><span class="xml"></span></span><br></pre></td></tr></table></figure><p>最后,在 <code>layout/_partials/comments.swig</code> 文件中条件最后追加 LiveRe 插件是否引用的判断逻辑:</p><figure class="highlight django"><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"><span class="xml"></span><span class="template-tag">{% <span class="name">elseif</span> theme.livere_uid %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"lv-container"</span> <span class="attr">data-id</span>=<span class="string">"city"</span> <span class="attr">data-uid</span>=<span class="string">"</span></span></span><span class="template-variable">{{ theme.livere_uid }}</span><span class="xml"><span class="tag"><span class="string">"</span>></span><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="name">endif</span></span> %}</span><span class="xml"></span></span><br></pre></td></tr></table></figure><p>完</p><hr><h1 id="22-隐藏网页底部powered-By-Hexo-强力驱动"><a href="#22-隐藏网页底部powered-By-Hexo-强力驱动" class="headerlink" title="22. 隐藏网页底部powered By Hexo / 强力驱动"></a>22. 隐藏网页底部powered By Hexo / 强力驱动</h1><p>打开<code>themes/next/layout/_partials/footer.swig</code>,使用”<!-- -->”隐藏之间的代码即可,或者直接删除。位置如图:</p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-8e8340c7a0489bce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><hr><h1 id="23-修改网页底部的桃心"><a href="#23-修改网页底部的桃心" class="headerlink" title="23. 修改网页底部的桃心"></a>23. 修改网页底部的桃心</h1><p>还是打开<code>themes/next/layout/_partials/footer.swig</code>,找到:<br><img src="http://upload-images.jianshu.io/upload_images/5308475-f6355823aef7f723.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">,然后还是在<a href="http://fontawesome.io/icons/" target="_blank" rel="noopener">图标库</a>中找到你自己喜欢的图标,然后修改画红线的部分就可以了。</p><hr><h1 id="24-文章加密访问"><a href="#24-文章加密访问" class="headerlink" title="24. 文章加密访问"></a>24. 文章加密访问</h1><p><strong>实现效果图</strong></p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-0c7e5e61b78dc937.gif?imageMogr2/auto-orient/strip" alt=""></p><p><strong>具体实现方法</strong></p><p>打开<code>themes->next->layout->_partials->head.swig</code>文件,在以下位置插入这样一段代码:</p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-446793cd6d740b19.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>代码如下:<br><figure class="highlight xml"><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span><br><span class="line"><span class="actionscript"> (<span class="function"><span class="keyword">function</span><span class="params">()</span></span>{</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">if</span>(<span class="string">'{{ page.password }}'</span>){</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">if</span> (prompt(<span class="string">'请输入文章密码'</span>) !== <span class="string">'{{ page.password }}'</span>){</span></span><br><span class="line"><span class="actionscript"> alert(<span class="string">'密码错误!'</span>);</span></span><br><span class="line"><span class="undefined"> history.back();</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> })();</span></span><br><span class="line"><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></p><p>然后在文章上写成类似这样:</p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-e6c726a0152cb8ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><hr><h1 id="25-添加jiathis分享"><a href="#25-添加jiathis分享" class="headerlink" title="25. 添加jiathis分享"></a>25. 添加jiathis分享</h1><p>在<strong>主题配置文件</strong>中,jiathis为true,就行了,如下图</p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-f381bc9e7c73b1e6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>默认是这样子的:<br><img src="http://upload-images.jianshu.io/upload_images/5308475-a88228b9ea43ab2d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""><br>如果你想自定义话,打开<code>themes/next/layout/_partials/share/jiathis.swig</code>修改画红线部分就可以了<br><img src="http://upload-images.jianshu.io/upload_images/5308475-68c51498744e1636.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><hr><h1 id="26-博文置顶"><a href="#26-博文置顶" class="headerlink" title="26. 博文置顶"></a>26. 博文置顶</h1><p>修改 <code>hero-generator-index</code> 插件,把文件:<code>node_modules/hexo-generator-index/lib/generator.js</code> 内的代码替换为:</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="meta">'use strict'</span>;</span><br><span class="line"><span class="keyword">var</span> pagination = <span class="built_in">require</span>(<span class="string">'hexo-pagination'</span>);</span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span>(<span class="params">locals</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> config = <span class="keyword">this</span>.config;</span><br><span class="line"> <span class="keyword">var</span> posts = locals.posts;</span><br><span class="line"> posts.data = posts.data.sort(<span class="function"><span class="keyword">function</span>(<span class="params">a, b</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>(a.top && b.top) { <span class="comment">// 两篇文章top都有定义</span></span><br><span class="line"> <span class="keyword">if</span>(a.top == b.top) <span class="keyword">return</span> b.date - a.date; <span class="comment">// 若top值一样则按照文章日期降序排</span></span><br><span class="line"> <span class="keyword">else</span> <span class="keyword">return</span> b.top - a.top; <span class="comment">// 否则按照top值降序排</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">else</span> <span class="keyword">if</span>(a.top && !b.top) { <span class="comment">// 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)</span></span><br><span class="line"> <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">else</span> <span class="keyword">if</span>(!a.top && b.top) {</span><br><span class="line"> <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">else</span> <span class="keyword">return</span> b.date - a.date; <span class="comment">// 都没定义按照文章日期降序排</span></span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">var</span> paginationDir = config.pagination_dir || <span class="string">'page'</span>;</span><br><span class="line"> <span class="keyword">return</span> pagination(<span class="string">''</span>, posts, {</span><br><span class="line"> perPage: config.index_generator.per_page,</span><br><span class="line"> layout: [<span class="string">'index'</span>, <span class="string">'archive'</span>],</span><br><span class="line"> format: paginationDir + <span class="string">'/%d/'</span>,</span><br><span class="line"> data: {</span><br><span class="line"> __index: <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>在文章中添加 <code>top</code> 值,数值越大文章越靠前,如</p><figure class="highlight yaml"><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"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">解决Charles乱码问题</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2017</span><span class="bullet">-05</span><span class="bullet">-22</span> <span class="number">22</span><span class="string">:45:48</span></span><br><span class="line"><span class="attr">tags:</span> <span class="string">技巧</span></span><br><span class="line"><span class="attr">categories:</span> <span class="string">技巧</span></span><br><span class="line"><span class="attr">copyright:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">top:</span> <span class="number">100</span></span><br><span class="line"><span class="meta">---</span></span><br></pre></td></tr></table></figure><hr><h1 id="27-修改字体大小"><a href="#27-修改字体大小" class="headerlink" title="27. 修改字体大小"></a>27. 修改字体大小</h1><p>打开<code>\themes\next\source\css\ _variables\base.styl</code>文件,将<code>$font-size-base</code>改成<code>16px</code>,如下所示:</p><figure class="highlight gams"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><span class="meta-keyword">$font</span>-size-base =16px</span></span><br></pre></td></tr></table></figure><hr><h1 id="28-修改打赏字体不闪动"><a href="#28-修改打赏字体不闪动" class="headerlink" title="28. 修改打赏字体不闪动"></a>28. 修改打赏字体不闪动</h1><p>修改文件<code>next/source/css/_common/components/post/post-reward.styl</code>,然后注释其中的函数<code>wechat:hover</code>和<code>alipay:hover</code>,如下:</p><figure class="highlight haml"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 注释文字闪动函数</span></span><br><span class="line"> #wechat:hover p{</span><br><span class="line"> animation: roll 0.1s infinite linear;</span><br><span class="line"> -<span class="ruby">webkit-<span class="symbol">animation:</span> roll <span class="number">0</span>.<span class="number">1</span>s infinite linear;</span></span><br><span class="line"><span class="ruby"> -moz-<span class="symbol">animation:</span> roll <span class="number">0</span>.<span class="number">1</span>s infinite linear;</span></span><br><span class="line"><span class="ruby">}</span></span><br><span class="line"><span class="ruby"> <span class="comment">#alipay:hover p{</span></span></span><br><span class="line"><span class="ruby"> <span class="symbol">animation:</span> roll <span class="number">0</span>.<span class="number">1</span>s infinite linear;</span></span><br><span class="line"><span class="ruby"> -webkit-<span class="symbol">animation:</span> roll <span class="number">0</span>.<span class="number">1</span>s infinite linear;</span></span><br><span class="line"><span class="ruby"> -moz-<span class="symbol">animation:</span> roll <span class="number">0</span>.<span class="number">1</span>s infinite linear;</span></span><br><span class="line"><span class="ruby">}</span></span><br><span class="line"><span class="ruby">*<span class="regexp">/</span></span></span><br></pre></td></tr></table></figure><hr><h1 id="29-侧边栏推荐阅读"><a href="#29-侧边栏推荐阅读" class="headerlink" title="29. 侧边栏推荐阅读"></a>29. 侧边栏推荐阅读</h1><p>今天有位网友问推荐阅读是怎么弄,其实挺简单的,打开主题配置文件修改成这样就行了(links里面写你想要的链接):</p><figure class="highlight dts"><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"><span class="meta"># Blogrolls</span></span><br><span class="line"><span class="symbol">links_title:</span> 推荐阅读</span><br><span class="line"><span class="meta">#links_layout: block</span></span><br><span class="line"><span class="symbol">links_layout:</span> inline</span><br><span class="line"><span class="symbol">links:</span></span><br><span class="line"> 优设: http:<span class="comment">//www.uisdc.com/</span></span><br><span class="line"> 张鑫旭: http:<span class="comment">//www.zhangxinxu.com/</span></span><br><span class="line"> Web前端导航: http:<span class="comment">//www.alloyteam.com/nav/</span></span><br><span class="line"> 前端书籍资料: http:<span class="comment">//www.36zhen.com/t?id=3448</span></span><br><span class="line"> 百度前端技术学院: http:<span class="comment">//ife.baidu.com/</span></span><br><span class="line"> google前端开发基础: http:<span class="comment">//wf.uisdc.com/cn/</span></span><br></pre></td></tr></table></figure><h1 id="30-自定义鼠标样式"><a href="#30-自定义鼠标样式" class="headerlink" title="30. 自定义鼠标样式"></a>30. 自定义鼠标样式</h1><p>打开<code>themes/next/source/css/_custom/custom.styl</code>,在里面写下如下代码</p><figure class="highlight less"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 鼠标样式</span></span><br><span class="line"> * {</span><br><span class="line"> <span class="attribute">cursor</span>: url(<span class="string">"http://om8u46rmb.bkt.clouddn.com/sword2.ico"</span>),auto<span class="meta">!important</span></span><br><span class="line"> }</span><br><span class="line"> <span class="selector-pseudo">:active</span> {</span><br><span class="line"> <span class="attribute">cursor</span>: url(<span class="string">"http://om8u46rmb.bkt.clouddn.com/sword1.ico"</span>),auto<span class="meta">!important</span></span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p>其中 url 里面必须是 ico 图片,ico 图片可以上传到网上(我是使用七牛云图床),然后获取外链,复制到 url 里就行了</p><hr><h1 id="31-为博客加上萌萌的宠物"><a href="#31-为博客加上萌萌的宠物" class="headerlink" title="31.为博客加上萌萌的宠物"></a>31.为博客加上萌萌的宠物</h1><p><strong>实现效果图</strong><br><img src="http://ohggtqwxx.bkt.clouddn.com/15006365382590.jpg" alt=""></p><p><strong>具体实现方法</strong><br>在终端切换到你的博客的路径里,然后输入如下代码:</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm <span class="keyword">install</span> -<span class="keyword">save</span> hexo-helper-live2d</span><br></pre></td></tr></table></figure><p>然后打开<code>Hexo/blog/themes/next/layout</code><br>的<code>_layout.swig</code>,将下面代码放到<code></body></code>之前:</p><figure class="highlight clojure"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{{ live2d() }}</span><br></pre></td></tr></table></figure><p>然后在在 <code>hexo</code> 的 <code>_config.yml</code>中添加参数:</p><figure class="highlight dts"><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"><span class="symbol">live2d:</span></span><br><span class="line"><span class="symbol"> model:</span> wanko</span><br><span class="line"><span class="symbol"> bottom:</span> <span class="number">-30</span></span><br></pre></td></tr></table></figure><p>然后hexo clean ,hexo g ,hexo d 就可以看到了。</p><p><strong>下面是一些model,可以换不同的宠物</strong></p><ul><li>model 模型名称 默认值: z16<ul><li>Gantzert_Felixander</li><li>Epsilon2.1</li><li>haru</li><li>miku</li><li>ni-j</li><li>nico</li><li>nito</li><li>nipsilon</li><li>nietzsche</li><li>shizuku</li><li>tsumiki</li><li>wanko</li><li>z16</li><li>hibiki</li><li>koharu</li><li>haruto</li><li>Unitychan</li><li>tororo</li><li>hijiki</li></ul></li><li>width 宽度 默认值: 150</li><li>height 高度 默认值: 300</li><li>className <code><canvas></code>元素的类名 默认值: live2d</li><li>id <code><canvas></code> 元素的id 默认值: live2dcanvas</li><li>bottom <code><canvas></code> 元素的底部偏移 默认值: -20 如果嫌模型位置不正确 可以调整这个参数</li></ul><p><del><strong>用这个有缺点,如果是在手机上看的话,感觉不是很好,宠物一直挡着文字😂😂,还有就是加载有点慢</strong></del></p><p><img src="http://ohggtqwxx.bkt.clouddn.com/15006388832427.jpg" alt=""></p><blockquote><p>(感谢<a href="https://segmentfault.com/u/gengxuelei" target="_blank" rel="noopener">Layne</a>网友的提醒,目前手机上显示宠物的问题已经解决,如果不想在手机上显示宠物的话,修改主题配置文件,改为如下:)</p></blockquote><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">live2d:</span></span><br><span class="line"><span class="attr"> model:</span> <span class="string">wanko</span></span><br><span class="line"><span class="attr"> bottom:</span> <span class="bullet">-30</span></span><br><span class="line"><span class="attr"> mobileShow:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><blockquote><p>注意!如果你在 hexo d 的时候出现我下面这个问题<br><img src="https://ws2.sinaimg.cn/large/006tKfTcly1fhrqw92685j31dk0q4grl.jpg" alt=""><br>你可以这样,首先删除hexo 下面的.deploy_git文件夹,然后运行</p></blockquote><figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git<span class="built_in"> config </span>--global core.autocrlf <span class="literal">false</span></span><br></pre></td></tr></table></figure><blockquote><p>重新 hexo clean,hexo g,hexo d就行了</p></blockquote><hr><h1 id="32-DaoVoice-在线联系"><a href="#32-DaoVoice-在线联系" class="headerlink" title="32.DaoVoice 在线联系"></a>32.DaoVoice 在线联系</h1><p><strong>实现效果图</strong></p><p><img src="http://ohggtqwxx.bkt.clouddn.com/2017-12-18-053222.png" alt=""></p><p><strong>具体实现方法</strong></p><p>首先在 <a href="https://account.daocloud.io/signin" target="_blank" rel="noopener">daovoice</a> 注册账号,<a href="http://dashboard.daovoice.io/get-started?invite_code=0f81ff2f" target="_blank" rel="noopener">邀请码</a>是<code>0f81ff2f</code>,注册完成后会得到一个 app_id :</p><p><img src="http://ohggtqwxx.bkt.clouddn.com/2017-12-18-054308.png" alt=""><br>记下这个 app_id的值,然后打开<code>/themes/next/layout/_partials/head.swig</code>,写下如下代码:</p><figure class="highlight django"><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"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="name">if</span></span> theme.daovoice %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span></span><br><span class="line"><span class="xml"> (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")</span></span><br><span class="line"><span class="xml"> daovoice('init', {</span></span><br><span class="line"><span class="xml"> app_id: "</span><span class="template-variable">{{theme.daovoice_app_id}}</span><span class="xml">"</span></span><br><span class="line"><span class="xml"> });</span></span><br><span class="line"><span class="xml"> daovoice('update');</span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="name">endif</span></span> %}</span><span class="xml"></span></span><br></pre></td></tr></table></figure><p><img src="http://ohggtqwxx.bkt.clouddn.com/2017-12-18-054603.png" alt=""></p><p>接着打开<strong>主题配置文件</strong>,在最后写下如下代码:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Online contact </span></span><br><span class="line"><span class="attr">daovoice:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="attr">daovoice_app_id:</span> <span class="string">这里填你的刚才获得的</span> <span class="string">app_id</span></span><br></pre></td></tr></table></figure><p>重新 hexo g ,hexo s 就能看到效果了。</p><blockquote><p>安装成功后可以在DaoVoice 控制台上的聊天设置里设置聊天窗口样式,附上我的设置</p></blockquote><p><img src="http://ohggtqwxx.bkt.clouddn.com/2017-12-18-055639.png" alt=""></p><hr><h1 id="33-点击爆炸效果"><a href="#33-点击爆炸效果" class="headerlink" title="33.点击爆炸效果"></a>33.点击爆炸效果</h1><p><strong>实现效果图</strong></p><p><img src="http://ohggtqwxx.bkt.clouddn.com/2017-12-18-084649.png" alt=""></p><p><strong>实现方法</strong></p><p>跟那个红心是差不多的,首先在<code>themes/next/source/js/src</code>里面建一个叫fireworks.js的文件,代码如下:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">"use strict"</span>;<span class="function"><span class="keyword">function</span> <span class="title">updateCoords</span>(<span class="params">e</span>)</span>{pointerX=(e.clientX||e.touches[<span class="number">0</span>].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[<span class="number">0</span>].clientY-canvasEl.getBoundingClientRect().top}<span class="function"><span class="keyword">function</span> <span class="title">setParticuleDirection</span>(<span class="params">e</span>)</span>{<span class="keyword">var</span> t=anime.random(<span class="number">0</span>,<span class="number">360</span>)*<span class="built_in">Math</span>.PI/<span class="number">180</span>,a=anime.random(<span class="number">50</span>,<span class="number">180</span>),n=[<span class="number">-1</span>,<span class="number">1</span>][anime.random(<span class="number">0</span>,<span class="number">1</span>)]*a;<span class="keyword">return</span>{<span class="attr">x</span>:e.x+n*<span class="built_in">Math</span>.cos(t),<span class="attr">y</span>:e.y+n*<span class="built_in">Math</span>.sin(t)}}<span class="function"><span class="keyword">function</span> <span class="title">createParticule</span>(<span class="params">e,t</span>)</span>{<span class="keyword">var</span> a={};<span class="keyword">return</span> a.x=e,a.y=t,a.color=colors[anime.random(<span class="number">0</span>,colors.length<span class="number">-1</span>)],a.radius=anime.random(<span class="number">16</span>,<span class="number">32</span>),a.endPos=setParticuleDirection(a),a.draw=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,<span class="number">0</span>,<span class="number">2</span>*<span class="built_in">Math</span>.PI,!<span class="number">0</span>),ctx.fillStyle=a.color,ctx.fill()},a}<span class="function"><span class="keyword">function</span> <span class="title">createCircle</span>(<span class="params">e,t</span>)</span>{<span class="keyword">var</span> a={};<span class="keyword">return</span> a.x=e,a.y=t,a.color=<span class="string">"#F00"</span>,a.radius=<span class="number">0.1</span>,a.alpha=<span class="number">0.5</span>,a.lineWidth=<span class="number">6</span>,a.draw=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,<span class="number">0</span>,<span class="number">2</span>*<span class="built_in">Math</span>.PI,!<span class="number">0</span>),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=<span class="number">1</span>},a}<span class="function"><span class="keyword">function</span> <span class="title">renderParticule</span>(<span class="params">e</span>)</span>{<span class="keyword">for</span>(<span class="keyword">var</span> t=<span class="number">0</span>;t<e.animatables.length;t++){e.animatables[t].target.draw()}}<span class="function"><span class="keyword">function</span> <span class="title">animateParticules</span>(<span class="params">e,t</span>)</span>{<span class="keyword">for</span>(<span class="keyword">var</span> a=createCircle(e,t),n=[],i=<span class="number">0</span>;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({<span class="attr">targets</span>:n,<span class="attr">x</span>:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="keyword">return</span> e.endPos.x},<span class="attr">y</span>:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="keyword">return</span> e.endPos.y},<span class="attr">radius</span>:<span class="number">0.1</span>,<span class="attr">duration</span>:anime.random(<span class="number">1200</span>,<span class="number">1800</span>),<span class="attr">easing</span>:<span class="string">"easeOutExpo"</span>,<span class="attr">update</span>:renderParticule}).add({<span class="attr">targets</span>:a,<span class="attr">radius</span>:anime.random(<span class="number">80</span>,<span class="number">160</span>),<span class="attr">lineWidth</span>:<span class="number">0</span>,<span class="attr">alpha</span>:{<span class="attr">value</span>:<span class="number">0</span>,<span class="attr">easing</span>:<span class="string">"linear"</span>,<span class="attr">duration</span>:anime.random(<span class="number">600</span>,<span class="number">800</span>)},<span class="attr">duration</span>:anime.random(<span class="number">1200</span>,<span class="number">1800</span>),<span class="attr">easing</span>:<span class="string">"easeOutExpo"</span>,<span class="attr">update</span>:renderParticule,<span class="attr">offset</span>:<span class="number">0</span>})}<span class="function"><span class="keyword">function</span> <span class="title">debounce</span>(<span class="params">e,t</span>)</span>{<span class="keyword">var</span> a;<span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">var</span> n=<span class="keyword">this</span>,i=<span class="built_in">arguments</span>;clearTimeout(a),a=setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{e.apply(n,i)},t)}}<span class="keyword">var</span> canvasEl=<span class="built_in">document</span>.querySelector(<span class="string">".fireworks"</span>);<span class="keyword">if</span>(canvasEl){<span class="keyword">var</span> ctx=canvasEl.getContext(<span class="string">"2d"</span>),numberOfParticules=<span class="number">30</span>,pointerX=<span class="number">0</span>,pointerY=<span class="number">0</span>,tap=<span class="string">"mousedown"</span>,colors=[<span class="string">"#FF1461"</span>,<span class="string">"#18FF92"</span>,<span class="string">"#5A87FF"</span>,<span class="string">"#FBF38C"</span>],setCanvasSize=debounce(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{canvasEl.width=<span class="number">2</span>*<span class="built_in">window</span>.innerWidth,canvasEl.height=<span class="number">2</span>*<span class="built_in">window</span>.innerHeight,canvasEl.style.width=<span class="built_in">window</span>.innerWidth+<span class="string">"px"</span>,canvasEl.style.height=<span class="built_in">window</span>.innerHeight+<span class="string">"px"</span>,canvasEl.getContext(<span class="string">"2d"</span>).scale(<span class="number">2</span>,<span class="number">2</span>)},<span class="number">500</span>),render=anime({<span class="attr">duration</span>:<span class="number">1</span>/<span class="number">0</span>,<span class="attr">update</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ctx.clearRect(<span class="number">0</span>,<span class="number">0</span>,canvasEl.width,canvasEl.height)}});<span class="built_in">document</span>.addEventListener(tap,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="string">"sidebar"</span>!==e.target.id&&<span class="string">"toggle-sidebar"</span>!==e.target.id&&<span class="string">"A"</span>!==e.target.nodeName&&<span class="string">"IMG"</span>!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!<span class="number">1</span>),setCanvasSize(),<span class="built_in">window</span>.addEventListener(<span class="string">"resize"</span>,setCanvasSize,!<span class="number">1</span>)}<span class="string">"use strict"</span>;<span class="function"><span class="keyword">function</span> <span class="title">updateCoords</span>(<span class="params">e</span>)</span>{pointerX=(e.clientX||e.touches[<span class="number">0</span>].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[<span class="number">0</span>].clientY-canvasEl.getBoundingClientRect().top}<span class="function"><span class="keyword">function</span> <span class="title">setParticuleDirection</span>(<span class="params">e</span>)</span>{<span class="keyword">var</span> t=anime.random(<span class="number">0</span>,<span class="number">360</span>)*<span class="built_in">Math</span>.PI/<span class="number">180</span>,a=anime.random(<span class="number">50</span>,<span class="number">180</span>),n=[<span class="number">-1</span>,<span class="number">1</span>][anime.random(<span class="number">0</span>,<span class="number">1</span>)]*a;<span class="keyword">return</span>{<span class="attr">x</span>:e.x+n*<span class="built_in">Math</span>.cos(t),<span class="attr">y</span>:e.y+n*<span class="built_in">Math</span>.sin(t)}}<span class="function"><span class="keyword">function</span> <span class="title">createParticule</span>(<span class="params">e,t</span>)</span>{<span class="keyword">var</span> a={};<span class="keyword">return</span> a.x=e,a.y=t,a.color=colors[anime.random(<span class="number">0</span>,colors.length<span class="number">-1</span>)],a.radius=anime.random(<span class="number">16</span>,<span class="number">32</span>),a.endPos=setParticuleDirection(a),a.draw=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,<span class="number">0</span>,<span class="number">2</span>*<span class="built_in">Math</span>.PI,!<span class="number">0</span>),ctx.fillStyle=a.color,ctx.fill()},a}<span class="function"><span class="keyword">function</span> <span class="title">createCircle</span>(<span class="params">e,t</span>)</span>{<span class="keyword">var</span> a={};<span class="keyword">return</span> a.x=e,a.y=t,a.color=<span class="string">"#F00"</span>,a.radius=<span class="number">0.1</span>,a.alpha=<span class="number">0.5</span>,a.lineWidth=<span class="number">6</span>,a.draw=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,<span class="number">0</span>,<span class="number">2</span>*<span class="built_in">Math</span>.PI,!<span class="number">0</span>),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=<span class="number">1</span>},a}<span class="function"><span class="keyword">function</span> <span class="title">renderParticule</span>(<span class="params">e</span>)</span>{<span class="keyword">for</span>(<span class="keyword">var</span> t=<span class="number">0</span>;t<e.animatables.length;t++){e.animatables[t].target.draw()}}<span class="function"><span class="keyword">function</span> <span class="title">animateParticules</span>(<span class="params">e,t</span>)</span>{<span class="keyword">for</span>(<span class="keyword">var</span> a=createCircle(e,t),n=[],i=<span class="number">0</span>;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({<span class="attr">targets</span>:n,<span class="attr">x</span>:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="keyword">return</span> e.endPos.x},<span class="attr">y</span>:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="keyword">return</span> e.endPos.y},<span class="attr">radius</span>:<span class="number">0.1</span>,<span class="attr">duration</span>:anime.random(<span class="number">1200</span>,<span class="number">1800</span>),<span class="attr">easing</span>:<span class="string">"easeOutExpo"</span>,<span class="attr">update</span>:renderParticule}).add({<span class="attr">targets</span>:a,<span class="attr">radius</span>:anime.random(<span class="number">80</span>,<span class="number">160</span>),<span class="attr">lineWidth</span>:<span class="number">0</span>,<span class="attr">alpha</span>:{<span class="attr">value</span>:<span class="number">0</span>,<span class="attr">easing</span>:<span class="string">"linear"</span>,<span class="attr">duration</span>:anime.random(<span class="number">600</span>,<span class="number">800</span>)},<span class="attr">duration</span>:anime.random(<span class="number">1200</span>,<span class="number">1800</span>),<span class="attr">easing</span>:<span class="string">"easeOutExpo"</span>,<span class="attr">update</span>:renderParticule,<span class="attr">offset</span>:<span class="number">0</span>})}<span class="function"><span class="keyword">function</span> <span class="title">debounce</span>(<span class="params">e,t</span>)</span>{<span class="keyword">var</span> a;<span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">var</span> n=<span class="keyword">this</span>,i=<span class="built_in">arguments</span>;clearTimeout(a),a=setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{e.apply(n,i)},t)}}<span class="keyword">var</span> canvasEl=<span class="built_in">document</span>.querySelector(<span class="string">".fireworks"</span>);<span class="keyword">if</span>(canvasEl){<span class="keyword">var</span> ctx=canvasEl.getContext(<span class="string">"2d"</span>),numberOfParticules=<span class="number">30</span>,pointerX=<span class="number">0</span>,pointerY=<span class="number">0</span>,tap=<span class="string">"mousedown"</span>,colors=[<span class="string">"#FF1461"</span>,<span class="string">"#18FF92"</span>,<span class="string">"#5A87FF"</span>,<span class="string">"#FBF38C"</span>],setCanvasSize=debounce(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{canvasEl.width=<span class="number">2</span>*<span class="built_in">window</span>.innerWidth,canvasEl.height=<span class="number">2</span>*<span class="built_in">window</span>.innerHeight,canvasEl.style.width=<span class="built_in">window</span>.innerWidth+<span class="string">"px"</span>,canvasEl.style.height=<span class="built_in">window</span>.innerHeight+<span class="string">"px"</span>,canvasEl.getContext(<span class="string">"2d"</span>).scale(<span class="number">2</span>,<span class="number">2</span>)},<span class="number">500</span>),render=anime({<span class="attr">duration</span>:<span class="number">1</span>/<span class="number">0</span>,<span class="attr">update</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ctx.clearRect(<span class="number">0</span>,<span class="number">0</span>,canvasEl.width,canvasEl.height)}});<span class="built_in">document</span>.addEventListener(tap,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="string">"sidebar"</span>!==e.target.id&&<span class="string">"toggle-sidebar"</span>!==e.target.id&&<span class="string">"A"</span>!==e.target.nodeName&&<span class="string">"IMG"</span>!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!<span class="number">1</span>),setCanvasSize(),<span class="built_in">window</span>.addEventListener(<span class="string">"resize"</span>,setCanvasSize,!<span class="number">1</span>)};</span><br></pre></td></tr></table></figure><p>打开<code>themes/next/layout/_layout.swig</code>,在<code></body></code>上面写下如下代码:</p><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="name">if</span></span> theme.fireworks %}</span><span class="xml"></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">canvas</span> <span class="attr">class</span>=<span class="string">"fireworks"</span> <span class="attr">style</span>=<span class="string">"position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;"</span> ></span><span class="tag"></<span class="name">canvas</span>></span> </span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"//cdn.bootcss.com/animejs/2.2.0/anime.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span> </span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"/js/src/fireworks.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml"></span><span class="template-tag">{% <span class="name"><span class="name">endif</span></span> %}</span><span class="xml"></span></span><br></pre></td></tr></table></figure><p>打开主题配置文件,在里面最后写下:</p><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="comment"># Fireworks</span></span><br><span class="line"><span class="attr">fireworks:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>完😀</p><hr><h1 id="致谢"><a href="#致谢" class="headerlink" title="致谢"></a>致谢</h1><blockquote><p>感谢大神们的文章,真的学到了许多,有些忘了记录下来,在这里由衷的感谢。虽然比较折腾,但是确实满满的成就感,Road endless its long and far, I will seek up and down!</p></blockquote><p>欢迎访问<a href="http://shenzekun.cn/" target="_blank" rel="noopener">我的博客</a></p><hr><h4 id="参考的文章:"><a href="#参考的文章:" class="headerlink" title="参考的文章:"></a>参考的文章:</h4><ol><li><a href="http://blog.csdn.net/MasterAnt_D/article/details/56839222" target="_blank" rel="noopener">http://blog.csdn.net/MasterAnt_D/article/details/56839222</a></li><li><a href="http://zidingyi4qh.com/2017/04/27/NexT%E5%BA%95%E9%83%A8logo%E6%B7%BB%E5%8A%A0%E8%AE%BF%E9%97%AE%E9%87%8F/" target="_blank" rel="noopener">http://zidingyi4qh.com/2017/04/27/NexT%E5%BA%95%E9%83%A8logo%E6%B7%BB%E5%8A%A0%E8%AE%BF%E9%97%AE%E9%87%8F/</a></li><li><a href="https://fuyis.me/2017/01/25/Hexo-theme-next-and-optimized-configuration/" target="_blank" rel="noopener">https://fuyis.me/2017/01/25/Hexo-theme-next-and-optimized-configuration/</a></li><li><a href="http://www.vitah.net/posts/20f300cc/" target="_blank" rel="noopener">http://www.vitah.net/posts/20f300cc/</a></li><li><a href="http://thief.one/2017/03/03/Hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B/" target="_blank" rel="noopener">http://thief.one/2017/03/03/Hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B/</a></li><li><a href="https://chanshiyu.com/2017/11/24/%E5%8F%98%E5%BD%A2%E8%AE%B0%20%E2%97%8F%20NexT%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96/" target="_blank" rel="noopener">https://chanshiyu.com/2017/11/24/%E5%8F%98%E5%BD%A2%E8%AE%B0%20%E2%97%8F%20NexT%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96/</a></li></ol><hr>]]></content>
<summary type="html">
<hr>
<blockquote>
<p>看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果</p>
</blockquote>
</summary>
<category term="hexo" scheme="https://pczhao.top/blog/categories/hexo/"/>
<category term="hexo" scheme="https://pczhao.top/blog/tags/hexo/"/>
</entry>
</feed>