-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
263 lines (157 loc) · 162 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Leesin's Blog</title>
<subtitle>To be a better me</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://mmmmmm.me/"/>
<updated>2018-12-24T09:47:02.000Z</updated>
<id>http://mmmmmm.me/</id>
<author>
<name>Leesin.Dong</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>hexo next主题深度优化(十),博文加密,不需要插件,极简模式,相对安全,融合pjax</title>
<link href="http://mmmmmm.me/hexo_shi_jiami.html"/>
<id>http://mmmmmm.me/hexo_shi_jiami.html</id>
<published>2018-12-20T14:52:00.000Z</published>
<updated>2018-12-24T09:47:02.000Z</updated>
<content type="html"><![CDATA[<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440658156542.jpg" alt=""></p><blockquote><ul><li>关于next主题中加入博文加密功能的文章,我就是我不一样的烟火。</li></ul></blockquote><a id="more"></a><p>果想自定义功能样式的往下面看看也许会有点收获,为了避免读者不耐烦的看我的废话,所以移到了下面。<br>本人博客:mmmmmm.me</p><h1 id="效果:"><a href="#效果:" class="headerlink" title="效果:"></a>效果:</h1><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181220132452615.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535448;1545536348&q-key-time=1545535448;1545536348&q-header-list=&q-url-param-list=&q-signature=c2aa087c8bb6b965731682250761756d2479bf81" alt="upload successful"></p><h1 id="代码:"><a href="#代码:" class="headerlink" title="代码:"></a>代码:</h1><p>/blog/themes/next/layout/_layout.swig,找到main标签在吐下代码处添加自定义的swig<br>_layout.swig:<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><div id="pjax-container"></span><br><span class="line"> <main id="main" class="main"></span><br><span class="line"> <div class="main-inner"></span><br><span class="line"> <div class="content-wrap"></span><br><span class="line"> <div id="content" class="content"></span><br><span class="line"> {% block content %}{% endblock %}</span><br><span class="line"> </div></span><br><span class="line"> {% include '_third-party/duoshuo-hot-articles.swig' %}</span><br><span class="line"> {% include '_partials/comments.swig' %}</span><br><span class="line"> </div></span><br><span class="line"> {% if theme.sidebar.display !== 'remove' %}</span><br><span class="line"> {% block sidebar %}{% endblock %}</span><br><span class="line"> {% endif %}</span><br><span class="line"> </div></span><br><span class="line"> //这个是我自己写的swig,因为需要得到post的password参数,名字自己随便起。</span><br><span class="line"> //如果博客中加入了pjax需要放在pjax的container中,每次刷新会重新加载container中的内容,也就默认重新加载我们这个简单的js了,如果没有加入pjax的话,位置就不重要了</span><br><span class="line"> {% include 'password.swig' %}</span><br><span class="line"> </main></span><br><span class="line"></div></span><br></pre></td></tr></table></figure><p></p><p>新建swig,目录:themes/next/layout/password.swig(和上面的_layout.swig在同级目录,具体路径在上面的include中可以自定义的。)<br>password.swig:<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><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><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line">//暂时储存文章中的内容</span><br><span class="line">var div = $('.post-body');</span><br><span class="line">//暂时储存目录的内容</span><br><span class="line">var toc=$('.post-toc-wrap')</span><br><span class="line">function password() {</span><br><span class="line"> if('{{ page.password }}'){</span><br><span class="line"> //将文章内容删除</span><br><span class="line"> div.remove();</span><br><span class="line"> //将目录删除 </span><br><span class="line"> toc.remove();</span><br><span class="line"> //将文章删除后,向原来文章的地方添加,应该出现的提示用户输入密码的样式</span><br><span class="line"> //下面这里的第一个用textarea是因为如果在手机端的时候只能显示一部分文字,</span><br><span class="line"> //只是拓展:input里面的字只能显示一行,不会自动换行,目前上网搜索没有发现好的办法,所以用了textarea,右下角的小三角通过resize:none 去掉。</span><br><span class="line"> $('.post-header').after('<textarea class="description" value="Please enter your password and press enter to build" style="border: none;display: block;' +'width: 60%;margin: 0 auto;text-align: center;outline: none;margin-bottom: 50px;resize:none "></span><br><span class="line"> Please enter your password and press enter to build</textarea>' +</span><br><span class="line"> '<div class="qiang" style="height: 100px;width: 60%;margin:0 auto">' +</span><br><span class="line"> '<input class="password" type="text" value="" style="border: none;display: block;border-bottom: 1px solid #ccc;' +</span><br><span class="line"> 'margin: 0 auto;outline: none;width:95%"/>' +</span><br><span class="line"> '</div>')</span><br><span class="line"> //绑定点击事件,如果是点击的.password 这个div就改变样式,如果是document中除了div之外的其他任何元素,就变回原来的样式。</span><br><span class="line"> document.onclick = function (event) {</span><br><span class="line"> var e = event || window.event;</span><br><span class="line"> var elem = e.srcElement || e.target;</span><br><span class="line"></span><br><span class="line"> while (elem) {</span><br><span class="line"> if (elem != document) {</span><br><span class="line"> if (elem.className == "password") {</span><br><span class="line"> $(".password").animate({paddingTop:"30px",width:"100%",borderWidth:"2px"},300)</span><br><span class="line"> return;</span><br><span class="line"> }</span><br><span class="line"> elem = elem.parentNode;</span><br><span class="line"> } else {</span><br><span class="line"> $(".password").animate({paddingTop:"0px",width:"95%",borderWidth:"1px"},300)</span><br><span class="line"> return;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> //绑定enter键按下后离开的事件</span><br><span class="line"> $(document).keyup(function(event){</span><br><span class="line"> if(event.keyCode ==13&&$('.password').length>0){</span><br><span class="line"> //console.log($('.password').val())</span><br><span class="line"> //console.log('{{ page.password }}')</span><br><span class="line"> if ($('.password').val() == '{{ page.password }}') {</span><br><span class="line"> //恢复文章内容</span><br><span class="line"> (div).appendTo($(".post-header"))</span><br><span class="line"> //恢复目录</span><br><span class="line"> toc.appendTo($(".sidebar-inner"))</span><br><span class="line"> //删除本页面的输入密码组件</span><br><span class="line"> $(".description").remove();</span><br><span class="line"> $(".qiang").remove();</span><br><span class="line"> $(".password").remove();</span><br><span class="line"> //重新处理pjax事件,如果没有加pjax的从下面这行起到下面的else之间的代码需要去掉。</span><br><span class="line"> //图片懒加载,没有加入此功能的这个函数需要去掉</span><br><span class="line"> $('img').lazyload({</span><br><span class="line"> placeholder: '/images/loading.gif',</span><br><span class="line"> effect: 'fadeIn',</span><br><span class="line"> threshold : 100,</span><br><span class="line"> failure_limit : 20,</span><br><span class="line"> skip_invisible : false</span><br><span class="line"> });</span><br><span class="line"> //pjax后出现文章不显示,没有pjax的下面四行需要去掉</span><br><span class="line"> $(".post-block").css({opacity:1});</span><br><span class="line"> $(".post-header").css({opacity:1});</span><br><span class="line"> $(".post-body").css({opacity:1});</span><br><span class="line"> $(".pagination").css({opacity:1});</span><br><span class="line"> }else {</span><br><span class="line"> alert("Sorry, the password is wrong.")</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> //将document的keyup移除,防止在pjax的情况下会重复绑定事件</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">password();</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><p></p><p>新建一个test.md<br>test.md<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 测试</span><br><span class="line">date: 2019-03-30 21:18:02</span><br><span class="line">password: aaa</span><br><span class="line">---</span><br><span class="line"># aaaaaa</span><br><span class="line">我就很反感大家老是那么说我,</span><br><span class="line">## bbbbbb</span><br><span class="line">除了有才,就只剩下那无可比拟的颜值。</span><br></pre></td></tr></table></figure><p></p><p>上面的password后面的值自定义。</p><h1 id="注意:"><a href="#注意:" class="headerlink" title="注意:"></a>注意:</h1><p>如果自己的博客源码中的这篇文章上传到github,密码也就公诸于世了,可以再push到github的时候将这篇文章忽略。</p><h1 id="背景:"><a href="#背景:" class="headerlink" title="背景:"></a>背景:</h1><p>预给自己加入文章加密的功能。</p><h1 id="思路:"><a href="#思路:" class="headerlink" title="思路:"></a>思路:</h1><h2 id="https-www-jianshu-com-p-90c0a15c6f36"><a href="#https-www-jianshu-com-p-90c0a15c6f36" class="headerlink" title="https://www.jianshu.com/p/90c0a15c6f36"></a><a href="https://www.jianshu.com/p/90c0a15c6f36" target="_blank" rel="noopener">https://www.jianshu.com/p/90c0a15c6f36</a></h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><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"> <script></span><br><span class="line"> (<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(<span class="string">'{{ page.password }}'</span>){</span><br><span class="line"> <span class="keyword">if</span> (prompt(<span class="string">'请输入查看密码'</span>) !== <span class="string">'{{ page.password }}'</span>){</span><br><span class="line"> alert(<span class="string">'密码不正确,请询问主编大大'</span>);</span><br><span class="line"> history.back();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })();</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure><p>不用试看看也知道没问题,可是网上说这个容易被破解,因为只是在alert的时候不显示,但是懂编程的人只要打开审查工具就能看到了。pass</p><h2 id="http-zhailiange-com-2017-07-06-hexo-encrypt"><a href="#http-zhailiange-com-2017-07-06-hexo-encrypt" class="headerlink" title="http://zhailiange.com/2017/07/06/hexo-encrypt/"></a><a href="http://zhailiange.com/2017/07/06/hexo-encrypt/" target="_blank" rel="noopener">http://zhailiange.com/2017/07/06/hexo-encrypt/</a></h2><p>hexo-blog-encrypt插件和hexo-encrypt插件,同样尝试过,如果没有pjax肯定是没问题的,因为我加入了pjax在跳转页面的时候有的js会不加载,所以会报错,放弃</p><h2 id="自己写"><a href="#自己写" class="headerlink" title="自己写"></a>自己写</h2><p>一开始通过网_layout.swig里面引入 script的方式,可是在js文件中是的不到hexo自定义的page变量的(hexo中还有好多变量,比如site,theme等),所以在swig中能够得到这个变量,也就是我们文章中的password,当然你还可以自定义许多变量,比如在config文件中定义是否使用password功能,在文章中增加message(简称就是输入密码上方给用户说的话,或者文章的简单概要等,自定义即可)标签,然后通过js读到本篇文章的message,自定义的添加到页面中展示给用户,等等都可以通过来得到。<br>当然自己写的初衷就是因为自己的pjax,这下子,终于可以成功的完美融合到pjax中,还学到不少的只是呢。</p><h1 id="2018-12-23代码更新"><a href="#2018-12-23代码更新" class="headerlink" title="2018.12.23代码更新"></a>2018.12.23代码更新</h1><h2 id="问题一"><a href="#问题一" class="headerlink" title="问题一"></a>问题一</h2><p>发现输入密码成功之后,在页面的底部还有请输入密码的组件,在恢复文章的后面加下面三行(已在上面的代码中更新)<br></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">".description"</span>).remove();</span><br><span class="line">$(<span class="string">".qiang"</span>).remove();</span><br><span class="line">$(<span class="string">".password"</span>).remove();</span><br></pre></td></tr></table></figure><p></p><h2 id="问题二"><a href="#问题二" class="headerlink" title="问题二"></a>问题二</h2><p>因为博客中加入了pjax,在局部刷新的时候,$(document).keyup并没有移除,所以当点击某文章的时候第一次没问题,再不刷新页面的情况下,再次进入,第二次进入的时候是通过pjax进入的,这样就给$(document)绑定了两次keyup事件,第三次的话就会绑定三次,第四次绑定四次,如此往复,出现的现象是前几次报密码错误,最后一次进入正常,调试的时候前几次得到的password的value值都是undifined<br>解决:<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$(document).on('pjax:start',</span><br><span class="line"> function () {</span><br><span class="line"> $(document).unbind('keyup')</span><br><span class="line"> })</span><br></pre></td></tr></table></figure><p></p><p>在每次pjax发送请求开始就移除事件。</p><h2 id="问题三"><a href="#问题三" class="headerlink" title="问题三"></a>问题三</h2><p>当输入密码进入页面,按回车键会不断的alert 密码错误<br>加入判断(上面已经修改)<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&&$('.password').length>0</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440658156542.jpg" alt=""></p><blockquote><ul><li>关于next主题中加入博文加密功能的文章,我就是我不一样的烟火。</li></ul></blockquote>
</summary>
<category term="hexo" scheme="http://mmmmmm.me/categories/hexo/"/>
<category term="hexo" scheme="http://mmmmmm.me/tags/hexo/"/>
</entry>
<entry>
<title>hexo next主题深度优化(九),给博客加入主题,护眼主题,护眼色</title>
<link href="http://mmmmmm.me/hexo_jiu_eye.html"/>
<id>http://mmmmmm.me/hexo_jiu_eye.html</id>
<published>2018-12-18T12:37:00.000Z</published>
<updated>2018-12-24T09:47:02.000Z</updated>
<content type="html"><![CDATA[<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440640713958.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题中加入保护眼睛的护眼色的功能,做自己的贴心小棉袄吧。</li></ul></blockquote><a id="more"></a><h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>我从小爱打游戏,所以视力下降厉害,加上现在工作天天对着电脑,所以想给自己的博客加上护眼色。</p><h1 id="效果"><a href="#效果" class="headerlink" title="效果"></a>效果</h1><p>博客:mmmmmm.me<br><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181213141355426.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535391;1545536291&q-key-time=1545535391;1545536291&q-header-list=&q-url-param-list=&q-signature=16760fba351a21cceb4f33dd7e2d0d13fdd38495" alt="upload successful"></p><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181213141443732.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535411;1545536311&q-key-time=1545535411;1545536311&q-header-list=&q-url-param-list=&q-signature=c05bdef53a6a5baf0ef86cd43f334fc47094b395" alt="upload successful"></p><h1 id="码"><a href="#码" class="headerlink" title="码"></a>码</h1><h2 id="layout-swig"><a href="#layout-swig" class="headerlink" title="_layout.swig"></a>_layout.swig</h2><p>在body下面<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><div class="eye"></span><br><span class="line"> <div class="eye1"></span><br><span class="line"> <ul></span><br><span class="line"> <li style="background-color:#C7EDCC">豆沙绿</li></span><br><span class="line"> <li style="background-color:#FAF9DE">杏仁黄 </li></span><br><span class="line"> <li style="background-color:#FFFFFF">银河白</li></span><br><span class="line"> <li style="background-color:#000000">极光黑</li></span><br><span class="line"> </ul></span><br><span class="line"> </div></span><br><span class="line"> <div class="eye2">满天星</div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure><p></p><h2 id="custom-styl"><a href="#custom-styl" class="headerlink" title="custom.styl"></a>custom.styl</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><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></pre></td><td class="code"><pre><span class="line">.eye{</span><br><span class="line"> position: fixed;</span><br><span class="line"> bottom: 68px;</span><br><span class="line"></span><br><span class="line"> height: 66px;</span><br><span class="line"> //background-color:transparent;</span><br><span class="line"> font-size :12px;</span><br><span class="line">line-height :33px;</span><br><span class="line"> text-align :center;</span><br><span class="line"> z-index :99;</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line">.eye1{</span><br><span class="line"> float :left;</span><br><span class="line">display :none;</span><br><span class="line"> height :50px;</span><br><span class="line">}</span><br><span class="line">.eye1 ul {</span><br><span class="line"> height :50px;</span><br><span class="line"> list-style: none;</span><br><span class="line"> padding :0;</span><br><span class="line"> margin :0</span><br><span class="line">}</span><br><span class="line">.eye1 ul li{</span><br><span class="line"> float :left;</span><br><span class="line"> width :23px;</span><br><span class="line"> line-height :22px</span><br><span class="line"> text-align :center;</span><br><span class="line"> font-size :12px;</span><br><span class="line">}</span><br><span class="line">.eye1 ul li:hover {</span><br><span class="line"> border-bottom : 0 !important;</span><br><span class="line"> background-color: #fff;</span><br><span class="line"> -webkit-transform: scale(1.1);</span><br><span class="line"> -moz-transform: scale(1.1);</span><br><span class="line"> -ms-transform: scale(1.1);</span><br><span class="line"> -o-transform: scale(1.1);</span><br><span class="line"> transform: scale(1.1);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.eye2{</span><br><span class="line"> float :left;</span><br><span class="line"> width :18px;</span><br><span class="line"> line-height :22px</span><br><span class="line"> text-align :center;</span><br><span class="line"> font-size :12px;</span><br><span class="line"> background-color:#e6e6e6;</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"> .eye2:hover{</span><br><span class="line"> border-bottom : 0 !important;</span><br><span class="line"> background-color: #eee;</span><br><span class="line"> -webkit-transform: scale(1.1);</span><br><span class="line"> -moz-transform: scale(1.1);</span><br><span class="line"> -ms-transform: scale(1.1);</span><br><span class="line"> -o-transform: scale(1.1);</span><br><span class="line"> transform: scale(1.1);</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><h2 id="eye-js"><a href="#eye-js" class="headerlink" title="eye.js"></a>eye.js</h2><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></pre></td><td class="code"><pre><span class="line"> function eye(){</span><br><span class="line"> $(".eye .eye2").click(function () {</span><br><span class="line"> $(".eye .eye1").slideToggle();</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line"> $(".eye ul li").click(function () {</span><br><span class="line"> $(".eye .eye1").slideToggle();</span><br><span class="line"> $color=$(this).css("background-color")</span><br><span class="line"> console.log($color);</span><br><span class="line"> $(".eye .eye1").css("background",$color);</span><br><span class="line"> $("#canvas").css("background",$color);</span><br><span class="line"> $("article").css("background",$color);</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line">eye()</span><br></pre></td></tr></table></figure><h1 id="引用eye-js"><a href="#引用eye-js" class="headerlink" title="引用eye.js"></a>引用eye.js</h1><h2 id="直接引用"><a href="#直接引用" class="headerlink" title="直接引用"></a>直接引用</h2><p>在_layout.swig<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><script src="xxxxxxxxxx.eye.js"></span><br></pre></td></tr></table></figure><p></p><p>没有用到require.js和pjax的到这里就结束了,用了的往下看</p><hr><h2 id="main-js"><a href="#main-js" class="headerlink" title="main.js"></a>main.js</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">//</span><br><span class="line">require.config({</span><br><span class="line"> paths: {</span><br><span class="line"> "eye":"/js/src/pjax/eye",</span><br><span class="line"> },</span><br><span class="line">});</span><br><span class="line">require(['eye'], function (){</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h2 id="pjax的函数中重写"><a href="#pjax的函数中重写" class="headerlink" title="pjax的函数中重写"></a>pjax的函数中重写</h2><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">function eye_js() {</span><br><span class="line"> $color=$("#canvas").css("background");</span><br><span class="line"> $("article").css("background",$color);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440640713958.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题中加入保护眼睛的护眼色的功能,做自己的贴心小棉袄吧。</li></ul></blockquote>
</summary>
<category term="hexo" scheme="http://mmmmmm.me/categories/hexo/"/>
<category term="hexo" scheme="http://mmmmmm.me/tags/hexo/"/>
</entry>
<entry>
<title>hexo next主题深度优化(八),微加速</title>
<link href="http://mmmmmm.me/hexo_ba_jiasu.html"/>
<id>http://mmmmmm.me/hexo_ba_jiasu.html</id>
<published>2018-12-18T12:32:00.000Z</published>
<updated>2018-12-24T09:47:02.000Z</updated>
<content type="html"><![CDATA[<!-- build time:Mon Mar 04 2019 16:34:49 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440640487814.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题加速的小细节的文章,好吧我承认效果不是很明显。</li></ul></blockquote><a id="more"></a><p>通过不断地上网查资料,引用的js、css、图片文件,通过cdn的方式是比直接放到本地要慢的,所以将自己博客能找到的cdn全部换成本地文件。</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Mon Mar 04 2019 16:34:49 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440640487814.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题加速的小细节的文章,好吧我承认效果不是很明显。</li></ul></blockquote>
</summary>
<category term="hexo" scheme="http://mmmmmm.me/categories/hexo/"/>
<category term="hexo" scheme="http://mmmmmm.me/tags/hexo/"/>
</entry>
<entry>
<title>hexo next主题深度优化(七),cdn加速</title>
<link href="http://mmmmmm.me/hexo_qi_cdn.html"/>
<id>http://mmmmmm.me/hexo_qi_cdn.html</id>
<published>2018-12-18T12:27:00.000Z</published>
<updated>2018-12-24T09:47:02.000Z</updated>
<content type="html"><![CDATA[<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440640865506.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题中加入cdn的文章,千万别点开,别怪我没提醒你,噢。</li></ul></blockquote><a id="more"></a><h1 id="注:"><a href="#注:" class="headerlink" title="注:"></a>注:</h1><p>千万不要被我的标题迷惑,这不是一个给博客加cdn的博文。</p><h1 id="正题:"><a href="#正题:" class="headerlink" title="正题:"></a>正题:</h1><p>想给网站各种加速,终于到了cdn这块。</p><h2 id="免费cdn"><a href="#免费cdn" class="headerlink" title="免费cdn"></a>免费cdn</h2><p>“免费的都是最贵的”,百度的移动节点不能用,还有很多都是单节点,很多都是自己能访问,有的地区就访问不到,只有收费才能提供更好的服务,都是打着免费的幌子,变相的收费,遂放弃。</p><h2 id="收费cdn"><a href="#收费cdn" class="headerlink" title="收费cdn"></a>收费cdn</h2><p>有点贵,貌似100或者200 1Mb/s,对于我的小blog有点贵,以后流量多了肯定会接入的,经过前面的优化,感觉速度已经上升了一大截了,希望以后有机会搞大型网站,这样就可以不花自己的钱玩cdn了,坏坏哒~</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440640865506.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题中加入cdn的文章,千万别点开,别怪我没提醒你,噢。</li></ul></blockquote>
</summary>
<category term="hexo" scheme="http://mmmmmm.me/categories/hexo/"/>
<category term="hexo" scheme="http://mmmmmm.me/tags/hexo/"/>
</entry>
<entry>
<title>hexo next主题深度优化(六),使用hexo-neat插件压缩页面,大幅度提升页面性能和响应速度</title>
<link href="http://mmmmmm.me/hexo_liu_yasuo.html"/>
<id>http://mmmmmm.me/hexo_liu_yasuo.html</id>
<published>2018-12-18T12:20:00.000Z</published>
<updated>2018-12-24T09:47:02.000Z</updated>
<content type="html"><![CDATA[<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440657237551.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题中加入发布压缩的插件,是不是速度又上了一个台阶?还有sei?</li></ul></blockquote><a id="more"></a><h1 id="隆重感谢:"><a href="#隆重感谢:" class="headerlink" title="隆重感谢:"></a>隆重感谢:</h1><p><a href="https://blog.csdn.net/lewky_liu/article/details/82432003" target="_blank" rel="noopener">https://blog.csdn.net/lewky_liu/article/details/82432003</a><br><a href="https://blog.csdn.net/qq_21808961/article/details/84639472" target="_blank" rel="noopener">https://blog.csdn.net/qq_21808961/article/details/84639472</a></p><h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>hexo 的文章是通过md格式的文件经过swig转换成的html,生成的html会有很多空格,而且自己写的js以及css中会有很多的空格和注释。<br>js和java不一样,注释也会影响一部分的性能,空格同样是的。<br>经过上网查阅,发现hexo有自带的压缩插件。</p><h1 id="开始"><a href="#开始" class="headerlink" title="开始"></a>开始</h1><h2 id="试水"><a href="#试水" class="headerlink" title="试水"></a>试水</h2><p>gulp<br>上网查阅资料,自己尝试过。<br>npm下载插件都下载中断了,可能我操作有误,有兴趣的小伙伴可以试一试。</p><h2 id="成功的案例"><a href="#成功的案例" class="headerlink" title="成功的案例"></a>成功的案例</h2><h3 id="安装插件,执行命令。"><a href="#安装插件,执行命令。" class="headerlink" title="安装插件,执行命令。"></a>安装插件,执行命令。</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-neat --save</span><br></pre></td></tr></table></figure><h3 id="hexo-config-yml文件添加"><a href="#hexo-config-yml文件添加" class="headerlink" title="hexo _config.yml文件添加"></a>hexo _config.yml文件添加</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"># hexo-neat</span><br><span class="line"># 博文压缩</span><br><span class="line">neat_enable: true</span><br><span class="line"># 压缩html</span><br><span class="line">neat_html:</span><br><span class="line"> enable: true</span><br><span class="line"> exclude:</span><br><span class="line"># 压缩css </span><br><span class="line">neat_css:</span><br><span class="line"> enable: true</span><br><span class="line"> exclude:</span><br><span class="line"> - '**/*.min.css'</span><br><span class="line"># 压缩js</span><br><span class="line">neat_js:</span><br><span class="line"> enable: true</span><br><span class="line"> mangle: true</span><br><span class="line"> output:</span><br><span class="line"> compress:</span><br><span class="line"> exclude:</span><br><span class="line"> - '**/*.min.js'</span><br><span class="line"> - '**/jquery.fancybox.pack.js'</span><br><span class="line"> - '**/index.js'</span><br></pre></td></tr></table></figure><h3 id="坑"><a href="#坑" class="headerlink" title="坑"></a>坑</h3><h4 id="跳过压缩文件的正确配置方式"><a href="#跳过压缩文件的正确配置方式" class="headerlink" title="跳过压缩文件的正确配置方式"></a>跳过压缩文件的正确配置方式</h4><p>如果按照官方插件的文档说明来配置exclude,你会发现完全不起作用。这是因为配置的文件路径不对,压缩时找不到你配置的文件,自然也就无法跳过了。你需要给这些文件指定正确的路径,万能的配置方式如下:<br>neat_css:<br>enable: true<br>exclude:</p><pre><code>- '**/*.min.css'</code></pre><h4 id="压缩html时不要跳过-md文件"><a href="#压缩html时不要跳过-md文件" class="headerlink" title="压缩html时不要跳过.md文件"></a>压缩html时不要跳过.md文件</h4><p>.md文件就是我们写文章时的markdown文件,如果跳过压缩.md文件,而你又刚好在文章中使用到了NexT自带的tab标签,那么当hexo在生成静态页面时就会发生解析错误。这会导致使用到了tab标签的页面生成失败而无法访问。</p><h4 id="压缩html时不要跳过-swig文件"><a href="#压缩html时不要跳过-swig文件" class="headerlink" title="压缩html时不要跳过.swig文件"></a>压缩html时不要跳过.swig文件</h4><p>.swig文件是模板引擎文件,简单的说hexo可以通过这些文件来生成对应的页面。如果跳过这些文件,那么你将会发现,你的所有页面完全没有起到压缩的效果,页面源代码里依然存在着一大堆空白。</p><h4 id="点击的桃心效果消失"><a href="#点击的桃心效果消失" class="headerlink" title="点击的桃心效果消失"></a>点击的桃心效果消失</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><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"># 压缩js</span><br><span class="line">neat_js:</span><br><span class="line"> enable: true</span><br><span class="line"> mangle: true</span><br><span class="line"> output:</span><br><span class="line"> compress:</span><br><span class="line"> exclude:</span><br><span class="line"> - '**/*.min.js'</span><br><span class="line"> - '**/jquery.fancybox.pack.js'</span><br><span class="line"> - '**/index.js' </span><br><span class="line"> - '**/love.js'</span><br></pre></td></tr></table></figure><h4 id="gitalk-js文件报错"><a href="#gitalk-js文件报错" class="headerlink" title="gitalk js文件报错"></a>gitalk js文件报错</h4><p>在上面的代码底部加入如下代码</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">- '**/comments.gitalk.js'</span><br></pre></td></tr></table></figure><h4 id="jquery-pjax-min-js报错"><a href="#jquery-pjax-min-js报错" class="headerlink" title="jquery pjax min js报错"></a>jquery pjax min js报错</h4><p>我这里的 jquery pjax min js是指的加入pjax前需要以来的两个cdn文件,一个是jq,一个是它,我将它下载到了本地,不要在意这些细节~<br>同样加入如下代码<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">- '**/jquery_pjax_min_js.js'</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440657237551.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题中加入发布压缩的插件,是不是速度又上了一个台阶?还有sei?</li></ul></blockquote>
</summary>
<category term="hexo" scheme="http://mmmmmm.me/categories/hexo/"/>
<category term="hexo" scheme="http://mmmmmm.me/tags/hexo/"/>
</entry>
<entry>
<title>hexo next主题深度优化(五),评论系统换成gittalk</title>
<link href="http://mmmmmm.me/hexo_wu_gitalk.html"/>
<id>http://mmmmmm.me/hexo_wu_gitalk.html</id>
<published>2018-12-18T12:19:00.000Z</published>
<updated>2018-12-24T09:47:02.000Z</updated>
<content type="html"><![CDATA[<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440657994566.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题中加入gitalk评论系统的文章,让你的博客的来客如江水滔滔连绵不绝,又如黄河之水一发不可收拾。</li></ul></blockquote><a id="more"></a><h1 id="背景:"><a href="#背景:" class="headerlink" title="背景:"></a>背景:</h1><p>之前一直用的是来必力的评论系统,还不错,但是因为我加入了pjax,能力有限,虽然降来必力的js重现,但是每次返回到首页都会报错id notfound ,阅读了来必力的api,全是并没有找到很多好的答案。遂换成gittalk的评论系统。</p><h1 id="开始:"><a href="#开始:" class="headerlink" title="开始:"></a>开始:</h1><h2 id="新建comments-git-js"><a href="#新建comments-git-js" class="headerlink" title="新建comments_git.js"></a>新建comments_git.js</h2><p>注:配置文件中的详细,自己网上查查。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">if($('#gitalk-container').length>0){</span><br><span class="line"> var gitalk = new Gitalk({</span><br><span class="line"></span><br><span class="line"> // gitalk的主要参数</span><br><span class="line">clientID: `Github Application clientID`,</span><br><span class="line">clientSecret: `Github Application clientSecret`,</span><br><span class="line">repo: `Github 仓库名`,//存储你评论 issue 的 Github 仓库名(建议直接用 GitHub Page 的仓库名)</span><br><span class="line">owner: 'Github 用户名',</span><br><span class="line">admin: ['Github 用户名'], //这个仓库的管理员,可以有多个,用数组表示,一般写自己,</span><br><span class="line">id: 'window.location.pathname', //页面的唯一标识,gitalk 会根据这个标识自动创建的issue的标签,我们使用页面的相对路径作为标识</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> });</span><br><span class="line"> gitalk.render('gitalk-container');</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h2 id="找到comments-swig在最后一个endif之前"><a href="#找到comments-swig在最后一个endif之前" class="headerlink" title="找到comments.swig在最后一个endif之前"></a>找到comments.swig在最后一个endif之前</h2><p>(目录:themes/next/layout/_partials/comments.swig)<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><div id="gitalk-container"></div></span><br></pre></td></tr></table></figure><p></p><h2 id="引入代码"><a href="#引入代码" class="headerlink" title="引入代码"></a>引入代码</h2><p>_layour.swig<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><script src="/js/src/pjax/comments/comments.gitalk.js"></script></span><br></pre></td></tr></table></figure><p></p><p>在这里引入而不再require引入的原因,就像我的另一篇文章,define只能定义一次,引不进去。<br>main.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><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><br><span class="line">require.config({</span><br><span class="line"> paths: {</span><br><span class="line"></span><br><span class="line"> "music": "/dist/music",</span><br><span class="line"> "aplayer": "/js/src/aplayer",</span><br><span class="line"> "backgroudLine": "/js/src/backgroudLine",</span><br><span class="line"> "category": "/js/src/category",</span><br><span class="line"> "jquery.share.min":"/js/src/pjax/share/jquery.share.min",</span><br><span class="line"> /*不显示图标的话替换fonts*/</span><br><span class="line"> "share":"/js/src/pjax/share",</span><br><span class="line"> "css":"/js/src/pjax/css",</span><br><span class="line"> "comments":"/js/src/pjax/comments_git",</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> shim: {</span><br><span class="line"> 'share': {</span><br><span class="line"> deps: [</span><br><span class="line"> 'css!/js/src/pjax/share/share.min','jquery.share.min'</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> 'comments': {</span><br><span class="line"> deps: [</span><br><span class="line"> 'css!https://unpkg.com/gitalk/dist/gitalk'</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line">require(['backgroudLine','music','aplayer','category','jquery.share.min','share','css','comments'], function (){</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p></p><p>如果没有用require的直接在_layout.swig<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css"></span><br><span class="line"><script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script></span><br><span class="line">//再引入comments_git.js</span><br><span class="line"><script src="xxxxxxxxxx/comments_git.js"></span><br></pre></td></tr></table></figure><p></p><h1 id="pjax加入gitalk"><a href="#pjax加入gitalk" class="headerlink" title="pjax加入gitalk"></a>pjax加入gitalk</h1><p>同样重新调用comments_git.js即可</p><h1 id="遇到的问题"><a href="#遇到的问题" class="headerlink" title="遇到的问题"></a>遇到的问题</h1><h2 id="所有的页面共享的一个评论issue"><a href="#所有的页面共享的一个评论issue" class="headerlink" title="所有的页面共享的一个评论issue"></a>所有的页面共享的一个评论issue</h2><p>这个好像到现在的版本,人家已经优化的很好了。<br>注意上年的comments_git.js<br>中的配置id 改为location.pathname,即<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">id: location.pathname</span><br></pre></td></tr></table></figure><p></p><p>意思是,根据目录创建不同的iss</p><h2 id="本地4000启动报错401-没有权限"><a href="#本地4000启动报错401-没有权限" class="headerlink" title="本地4000启动报错401 没有权限"></a>本地4000启动报错401 没有权限</h2><p>push到远端就没问题了。</p><h2 id="未找到相关的Issues-进行评论,请联系xxx初始化创建"><a href="#未找到相关的Issues-进行评论,请联系xxx初始化创建" class="headerlink" title="未找到相关的Issues 进行评论,请联系xxx初始化创建"></a>未找到相关的Issues 进行评论,请联系xxx初始化创建</h2><p>这个issue每次需要管理员,即作者你创建,怎么创建呢?在你自己的博客进入评论,登录自己的github账号,访问没有创建issues的博客,就初始化了。<br>这样岂不是很麻烦?<br>解决博客:<a href="https://link.jianshu.com/?t=https%3A%2F%2Fdraveness.me%2Fgit-comments-initialize" target="_blank" rel="noopener">https://link.jianshu.com/?t=https%3A%2F%2Fdraveness.me%2Fgit-comments-initialize</a><br>这个方法,我试过,没有成功,时间有限,就不深追了~<br>tips:里面的sitmap地图,如果是next地图在网址:https://你的博客地址/sitemap.xml<br>以后有时间或者能力允许的话,可能会写一个类似爬虫的脚本,完成这一操作~</p><h3 id="发现自己的留言板明明评论了却不显示"><a href="#发现自己的留言板明明评论了却不显示" class="headerlink" title="发现自己的留言板明明评论了却不显示"></a>发现自己的留言板明明评论了却不显示</h3><p>原因:自己加入了pjax导致<br>手动刷新的地址是:<a href="https://mmmmmm.me/message/">https://mmmmmm.me/message/</a><br>pjax刷新的地址是:<a href="https://mmmmmm.me/message">https://mmmmmm.me/message</a><br>因为gitalk创建issues是根据地址来创建的,所以不同的地址当然issues是不一样的啊。</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440657994566.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题中加入gitalk评论系统的文章,让你的博客的来客如江水滔滔连绵不绝,又如黄河之水一发不可收拾。</li></ul></blockquote>
</summary>
<category term="hexo" scheme="http://mmmmmm.me/categories/hexo/"/>
<category term="hexo" scheme="http://mmmmmm.me/tags/hexo/"/>
</entry>
<entry>
<title>hexo next主题深度优化(四),自定义一个share功能,share.js</title>
<link href="http://mmmmmm.me/hexo_si_share.html"/>
<id>http://mmmmmm.me/hexo_si_share.html</id>
<published>2018-12-18T12:18:00.000Z</published>
<updated>2018-12-24T09:47:02.000Z</updated>
<content type="html"><![CDATA[<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440658156542.jpg" alt=""></p><blockquote><ul><li>关于next主题中加入自己喜欢的分享样式的文章,让你的博客如星空般璀璨。</li></ul></blockquote><a id="more"></a><h1 id="背景:"><a href="#背景:" class="headerlink" title="背景:"></a>背景:</h1><p>之前一直用的addthis或者百度分享,可是加入pjax后失效,相应的接口重写也不行,故自己重新加一个分享的功能。</p><h1 id="开始:"><a href="#开始:" class="headerlink" title="开始:"></a>开始:</h1><h2 id="引入资源:"><a href="#引入资源:" class="headerlink" title="引入资源:"></a>引入资源:</h2><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210191401118.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535263;1545536163&q-key-time=1545535263;1545536163&q-header-list=&q-url-param-list=&q-signature=2d92efcfb806b6b37d7c69659f995ee84cd9682b" alt="hexo next主题深度优化(三),引入require.js,适配pjax。"></p><h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><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></pre></td><td class="code"><pre><span class="line">var $config = {</span><br><span class="line"> sites : ['weibo','qq', 'wechat','tencent','qzone','douban', 'facebook', 'google','twitter'],</span><br><span class="line"> disabled: [ 'linkedin', 'diandian'],</span><br><span class="line"> wechatQrcodeTitle: "微信扫一扫",</span><br><span class="line"> wechatQrcodeHelper: '<p>微信扫一扫,右上角分享</p>',</span><br><span class="line"> source: 'Leesin Dong'</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">$('.post-spread').share($config);</span><br><span class="line"></span><br><span class="line">function pjaxshare() {</span><br><span class="line"> $('.post-spread').share($config);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="关键的一步"><a href="#关键的一步" class="headerlink" title="关键的一步"></a>关键的一步</h2><p>很多时候出现:<br><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181211131002632.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535300;1545536200&q-key-time=1545535300;1545536200&q-header-list=&q-url-param-list=&q-signature=06b30ba7733ea16bfcc0d566527f17e9b1259ddb" alt="upload successful"></p><p>这是什么鬼?<br>下载网上的demo发现了问题。缺少雪碧图把?(猜想)<br>通过对比,需要引入demo中的fonts目录。</p><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181211131144783.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535335;1545536235&q-key-time=1545535335;1545536235&q-header-list=&q-url-param-list=&q-signature=d74cf5003b134c8a41e21c4e18985bfe8488e9d9" alt="upload successful"></p><h2 id="附:方便学习的小demo"><a href="#附:方便学习的小demo" class="headerlink" title="附:方便学习的小demo"></a>附:方便学习的小demo</h2><p><a href="https://github.com/overtrue/share.js/zipball/master" target="_blank" rel="noopener">https://github.com/overtrue/share.js/zipball/master</a></p><h2 id="一次成功后还出现上面的bug"><a href="#一次成功后还出现上面的bug" class="headerlink" title="一次成功后还出现上面的bug"></a>一次成功后还出现上面的bug</h2><p>将fonts目录删掉,重新导入</p><h1 id="结束"><a href="#结束" class="headerlink" title="结束"></a>结束</h1><h1 id="2018-12-23发现bug(读者可忽略)"><a href="#2018-12-23发现bug(读者可忽略)" class="headerlink" title="2018.12.23发现bug(读者可忽略)"></a>2018.12.23发现bug(读者可忽略)</h1><p>里面的图标变成了灰色,因为在护眼的js中对a标签的颜色进行了重新定义,加a:not()</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440658156542.jpg" alt=""></p><blockquote><ul><li>关于next主题中加入自己喜欢的分享样式的文章,让你的博客如星空般璀璨。</li></ul></blockquote>
</summary>
<category term="hexo" scheme="http://mmmmmm.me/categories/hexo/"/>
<category term="hexo" scheme="http://mmmmmm.me/tags/hexo/"/>
</entry>
<entry>
<title>hexo next主题深度优化(三),引入require.js,适配pjax</title>
<link href="http://mmmmmm.me/hexo_san_require.html"/>
<id>http://mmmmmm.me/hexo_san_require.html</id>
<published>2018-12-18T12:16:00.000Z</published>
<updated>2018-12-24T09:47:02.000Z</updated>
<content type="html"><![CDATA[<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440641393722.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题中加入require.js的文章,让你的文章如闪电般迅捷。</li></ul></blockquote><a id="more"></a><h1 id="require-js的好处,"><a href="#require-js的好处," class="headerlink" title="require.js的好处,"></a>require.js的好处,</h1><p>总结一下就是:</p><ol><li>减少js文件之间的依赖关系</li><li>能够在页面呈现出来之后再加载js css等,提升系统性能</li><li>异步,跟第二步一个意思<h1 id="hexo-next中加入require-js"><a href="#hexo-next中加入require-js" class="headerlink" title="hexo next中加入require.js"></a>hexo next中加入require.js</h1><h2 id="新建一个main-js作为所有js的入口"><a href="#新建一个main-js作为所有js的入口" class="headerlink" title="新建一个main.js作为所有js的入口"></a>新建一个main.js作为所有js的入口</h2>这个我是用来加载首页的js的,因为加入了pjax<br>下面会弄pjax<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">//</span><br><span class="line">require.config({</span><br><span class="line"> paths: {</span><br><span class="line"></span><br><span class="line"> "music": "/dist/music",</span><br><span class="line"> "aplayer": "/js/src/aplayer",</span><br><span class="line"> "backgroudLine": "/js/src/backgroudLine",</span><br><span class="line"> "category": "/js/src/category",</span><br><span class="line"> "jquery.share.min":"/js/src/pjax/share/jquery.share.min",</span><br><span class="line"> "share":"/js/src/pjax/share",</span><br><span class="line"> "css":"/js/src/pjax/css"</span><br><span class="line"> },</span><br><span class="line">//为了动态的增加css,require js中并没有这个功能,github上有相关的插件和文档,自行google</span><br><span class="line"> shim: {</span><br><span class="line"> 'share': {</span><br><span class="line"> deps: [</span><br><span class="line"> 'css!/js/src/pjax/share/share.min','jquery.share.min'</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line">require(['backgroudLine','music','aplayer','category','jquery.share.min','share','css'], function (){</span><br><span class="line"> pjaxshare()</span><br><span class="line">});</span><br></pre></td></tr></table></figure></li></ol><p>_layout.swig<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{#require主函数#}</span><br><span class="line"></span><br><span class="line"><script src="/js/src/pjax/require.js" defer async="true" data-main="/js/src/pjax/main.js"></script></span><br></pre></td></tr></table></figure><p></p><p>网上说必须在相应的js文件中用define包住类似于<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">define(function(){</span><br><span class="line">原来的js</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p></p><p>可是我发现并不用呀</p><h2 id="pjax的require-js实现"><a href="#pjax的require-js实现" class="headerlink" title="pjax的require.js实现"></a>pjax的require.js实现</h2><p>_layout.swig<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><script src="/js/src/pjax/jquer_min_js.js"></script></span><br><span class="line"><script src="/js/src/pjax/jquery_pjax_min_js.js"></script></span><br><span class="line"><script src="/js/src/pjax/pjaxMain.js"></script></span><br></pre></td></tr></table></figure><p></p><p>pjaxmain.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><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><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><span class="line">$(document).pjax('a[target!=_blank]', '#pjax-container', {</span><br><span class="line"> fragment: '#pjax-container',</span><br><span class="line"> timeout: 5000,</span><br><span class="line">});</span><br><span class="line">//用户通过浏览器的前进后退按钮,需要加载的js</span><br><span class="line">$(window).on('popstate.pjax', function () {</span><br><span class="line"> /*原来不行后来加到complete中行了,后来又不行了*/</span><br><span class="line"> pjax();</span><br><span class="line">})</span><br><span class="line">$(document).on('pjax:start',</span><br><span class="line"> function () {</span><br><span class="line"> })</span><br><span class="line">$(document).on('pjax:complete',</span><br><span class="line"> function () {</span><br><span class="line"> require.config({</span><br><span class="line"> paths: {</span><br><span class="line"> // "category_js": "/js/src/pjax/category_js",</span><br><span class="line"> // "opacity_js":"/js/src/pjax/opacity_js",</span><br><span class="line"> // "motion_js":"/js/src/pjax/motion_js",</span><br><span class="line"> // "scrollspy_js":"/js/src/pjax/scrollspy_js",</span><br><span class="line"> // "post-details_js":"/js/src/pjax/post-details_js",</span><br><span class="line"> // "lean_analytics":"/js/src/pjax/lean_analytics",</span><br><span class="line"> // "baidutuisong":"/js/src/pjax/baidutuisong",</span><br><span class="line"> // "utils_js":"/js/src/pjax/utils_js",</span><br><span class="line"> //这个是单独的</span><br><span class="line"> "jquery.share.min":"/js/src/pjax/share/jquery.share.min",</span><br><span class="line"> // "share":"/js/src/pjax/share",</span><br><span class="line"> //这个也是单独的</span><br><span class="line"> "css":"/js/src/pjax/css",</span><br><span class="line"> "pjax_function_public":"/js/src/pjax/pjax_function_public"</span><br><span class="line"> },</span><br><span class="line"> shim: {</span><br><span class="line"> 'share': {</span><br><span class="line"> deps: [</span><br><span class="line"> 'css!/js/src/pjax/share/share.min','jquery.share.min'</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> require(['jquery.share.min','share','css','pjax_function_public'</span><br><span class="line"> ], function () {</span><br><span class="line"> pjax();</span><br><span class="line"> });</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line">function pjax() {</span><br><span class="line"></span><br><span class="line"> /*因为下面的postdetails_js中的有个判断空指针的,如果加上就不能左移,如果去掉会报错,所以把这个放在首行来执行。*/</span><br><span class="line"> /*现在已经解决,可以放在任意的位置*/</span><br><span class="line"> /*</span><br><span class="line"> 之前一直是好的突然有次就不好了,后来解决了右边sidebar滚轮效果消失的效果之后,突然又好了。</span><br><span class="line"> 原因是因为,之前放在detail js的下面,而detail的下面undfind的判断时报错的,所以不会往下走。</span><br><span class="line"> */</span><br><span class="line"> /*判断#lv-container是否为空,目前这是我找到最好的办法,因为不判断,进入首页或其他的页面会空指针异常。*/</span><br><span class="line"></span><br><span class="line"> if ($("#lv-container").length > 0 &&$('comments').length>0) {</span><br><span class="line"> $(".comments").css({opacity: 1});</span><br><span class="line"> $.getScript("https://cdn-city.livere.com/js/embed.dist.js");</span><br><span class="line"> }</span><br><span class="line"> //不蒜子js</span><br><span class="line"> $.getScript("https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");</span><br><span class="line"></span><br><span class="line"> //自己写的分享</span><br><span class="line"> pjaxshare();</span><br><span class="line"></span><br><span class="line">// 分类的js</span><br><span class="line"> category_js();</span><br><span class="line">// 局部刷新后文章内容不显示bug的js</span><br><span class="line"> opacity_js()</span><br><span class="line">//点击有目录的文章sidebar不显示的bug解决</span><br><span class="line"> motion_js()</span><br><span class="line"> scrollspy_js()</span><br><span class="line"> //utils_js()</span><br><span class="line"> postdetails_js()</span><br><span class="line">//lean数量统计的js,原来的js是在themes/next/layout/_third-party/analytics/lean-analytics.swig文件中</span><br><span class="line"> lean_analytics();</span><br><span class="line"> //百度推送js</span><br><span class="line"> baidutuisong();</span><br><span class="line">// //右边sidebar滚轮效果消失了。</span><br><span class="line"> initSidebarDimension()</span><br><span class="line"> //懒加载</span><br><span class="line"> lazyLoad();</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h1 id="关于require-js适配过程中报的错误"><a href="#关于require-js适配过程中报的错误" class="headerlink" title="关于require js适配过程中报的错误"></a>关于require js适配过程中报的错误</h1><h2 id="aplayer-min-js只能在——lauout加载"><a href="#aplayer-min-js只能在——lauout加载" class="headerlink" title="aplayer.min.js只能在——lauout加载"></a>aplayer.min.js只能在——lauout加载</h2><p>这个只能通过这里加载,因为RequireJS 介绍说一个JS文件里只能放一个Define,这个众所周知,不提</p><h2 id="一直报错:MISMATCHED-ANONYMOUS-DEFINE-MODULES-…"><a href="#一直报错:MISMATCHED-ANONYMOUS-DEFINE-MODULES-…" class="headerlink" title="一直报错:MISMATCHED ANONYMOUS DEFINE() MODULES …"></a>一直报错:MISMATCHED ANONYMOUS DEFINE() MODULES …</h2><p>解决:<a href="https://blog.csdn.net/u011558902/article/details/53691627" target="_blank" rel="noopener">https://blog.csdn.net/u011558902/article/details/53691627</a></p><p>pjaxrequire 解决<br>require([xxxxxxx]fuction(){<br>pjax<br>})</p><h2 id="在博客中加requre-js时候,关于aplayer的插件需要。"><a href="#在博客中加requre-js时候,关于aplayer的插件需要。" class="headerlink" title="在博客中加requre.js时候,关于aplayer的插件需要。"></a>在博客中加requre.js时候,关于aplayer的插件需要。</h2><p>define aplayer 可是里面还有一个define定义APlayer函数(重点记录 RequireJS 介绍说一个JS文件里只能放一个Define,这个众所周知,不提。)<br>解决方法:因为RequireJS 介绍说一个JS文件里只能放一个Define,这个众所周知,不提。,只能将这个插件不通过require来进行加载。让系统上来就加载。</p><h2 id="如图"><a href="#如图" class="headerlink" title="如图"></a>如图</h2><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190831817.png" alt="在这里插入图片描述"><br>这是因为我的apler 的js在requer和——layout中都进行了定义</p><h2 id="velocity函数报错"><a href="#velocity函数报错" class="headerlink" title="velocity函数报错"></a>velocity函数报错</h2><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190845283.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545534977;1545535877&q-key-time=1545534977;1545535877&q-header-list=&q-url-param-list=&q-signature=39cd77083658b10005182cb1a4fe924b96ee2229" alt="在这里插入图片描述"><br>解决:jquery从require中去掉,原因不详,好像有什么循环依赖。<br>解决:jquery从require中去掉,原因不详,好像有什么循环依赖。</p><h2 id="针对pjax的require,我用这个requre主要就是来安排pjax的,因为要之前吧pjax的函数在家在一边,浪费很大的加载时间"><a href="#针对pjax的require,我用这个requre主要就是来安排pjax的,因为要之前吧pjax的函数在家在一边,浪费很大的加载时间" class="headerlink" title="针对pjax的require,我用这个requre主要就是来安排pjax的,因为要之前吧pjax的函数在家在一边,浪费很大的加载时间"></a>针对pjax的require,我用这个requre主要就是来安排pjax的,因为要之前吧pjax的函数在家在一边,浪费很大的加载时间</h2><p>发现:<br>我很多模块并没有用define进行定定义,但是仍然成功了,说明并不是一定要define定义才能用的。(我通过实际经验总结的,结论不一定正确,有不对的地方还请指出)<br>解决:<br><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/2018121019091198.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535075;1545535975&q-key-time=1545535075;1545535975&q-header-list=&q-url-param-list=&q-signature=839f2843f52f20f681dd19a1a308d05deb85468a" alt="在这里插入图片描述"><br><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190918575.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535106;1545536006&q-key-time=1545535106;1545536006&q-header-list=&q-url-param-list=&q-signature=848c3852cca07fbb805b2cfbf95278b7176af5a1" alt="在这里插入图片描述"><br>在pjaxmin里面写require的东西,可以发现我并没有在——类中写</p><p>并没有按照require的方式引入pjaxmain这个函数,但还是成功了,<br>说明,项目中只需要引入一次require这个js,便可以处处使用(目前根据我的实际操作得出的结论,不一定正确。)</p><p>这样的话,每次pjax 的complite的函数执行完了之后才会加载需要的函数,也就是在首页,或者其他的页面,是不需要加载这个些个文件的,在首页的首次加载中大大节省了时间完美!!!!!</p><h2 id="报错"><a href="#报错" class="headerlink" title="报错"></a>报错</h2><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190933354.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535138;1545536038&q-key-time=1545535138;1545536038&q-header-list=&q-url-param-list=&q-signature=f7a45304bdcd1d92948a101fbd500cc2338a86ad" alt="upload successful"></p><p>官方解释</p><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190943444.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535164;1545536064&q-key-time=1545535164;1545536064&q-header-list=&q-url-param-list=&q-signature=b27f401a6a9a76711cd82cf031a2eaa3fd8367d9" alt="upload successful"></p><p>这里的脚本错误并不是我们引入的js脚本错误,而是对编写的config require函数的脚本错误,<br>比如我就是路径不会的</p><h2 id="pajx-返回失效"><a href="#pajx-返回失效" class="headerlink" title="pajx 返回失效"></a>pajx 返回失效</h2><p>$(window).on(‘popstate.pjax’, function () {<br>$(‘img’).lazyload({<br>placeholder: ‘/images/loading.gif’,<br>effect: ‘fadeIn’,<br>threshold : 100,<br>failure_limit : 20,<br>skip_invisible : false<br>});</p><pre><code>pjax();</code></pre><p>})<br>和complite同样的代码,通过打断点,发现我的if(xxx>0){}并没有执行,说明是在页面加载完之前就开始执行这段代码了,<br>解决:<br>$(window).on(‘popstate.pjax’, function () {<br>$(document).on(‘pjax:complete’,<br>function () {<br>//<br>$(‘img’).lazyload({<br>placeholder: ‘/images/loading.gif’,<br>effect: ‘fadeIn’,<br>threshold : 100,<br>failure_limit : 20,<br>skip_invisible : false<br>});</p><pre><code> pjax();})</code></pre><p>})</p><p>在之前加入,<br>$(document).on(‘pjax:complete’,)<br>意思是在pjax请求加载完了之后再进行如下的代码。</p><h2 id="pjaxshare函数(分享函数)老师报错pajaxshare()-not-defined"><a href="#pjaxshare函数(分享函数)老师报错pajaxshare()-not-defined" class="headerlink" title="pjaxshare函数(分享函数)老师报错pajaxshare() not defined"></a>pjaxshare函数(分享函数)老师报错pajaxshare() not defined</h2><p>解决:想着在pjaxshare函数上面加define(function(){}),按照网上的教程是这样的,可是我加上就是不行,去掉反而行了。</p><h2 id="require-css"><a href="#require-css" class="headerlink" title="require css"></a>require css</h2><p>从github上下载<br>deps:[‘css!libs/css/color.min’] 这里会优先加在css这个模块名下的文件(libs/js/css.min.js) 然后一个 “!”后面紧接着在基目录下加在libs/css/color.min.css<br>所以css.js文件下载下拉是不能改名的</p><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190943444.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535164;1545536064&q-key-time=1545535164;1545536064&q-header-list=&q-url-param-list=&q-signature=b27f401a6a9a76711cd82cf031a2eaa3fd8367d9" alt="upload successful"></p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440641393722.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题中加入require.js的文章,让你的文章如闪电般迅捷。</li></ul></blockquote>
</summary>
<category term="hexo" scheme="http://mmmmmm.me/categories/hexo/"/>
<category term="hexo" scheme="http://mmmmmm.me/tags/hexo/"/>
</entry>
<entry>
<title>hexo next主题深度优化(二),懒加载</title>
<link href="http://mmmmmm.me/hexo_er_lazy.html"/>
<id>http://mmmmmm.me/hexo_er_lazy.html</id>
<published>2018-12-18T12:15:00.000Z</published>
<updated>2018-12-24T09:47:02.000Z</updated>
<content type="html"><![CDATA[<!-- build time:Mon Mar 04 2019 16:34:49 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440658438054.jpg" alt=""></p><blockquote><ul><li>关于next注意中加入懒加载机制的文章,让你的博客如丝般顺滑。</li></ul></blockquote><a id="more"></a><h1 id="tip:没有耐心的可以直接看:正式在hexo-next中加入懒加载(最下面)"><a href="#tip:没有耐心的可以直接看:正式在hexo-next中加入懒加载(最下面)" class="headerlink" title="tip:没有耐心的可以直接看:正式在hexo next中加入懒加载(最下面)"></a>tip:没有耐心的可以直接看:正式在hexo next中加入懒加载(最下面)</h1><h1 id="废话"><a href="#废话" class="headerlink" title="废话"></a>废话</h1><p>本来想全部优化完,一起写博客的,大半夜的也不想太累,可是可能因为年纪大了吧(23了),怕隔天给忘记了,到时候回头找错误岂不是浪费更多的时间,索性,今天拖着疲惫的大脑,写下这篇博文吧~</p><h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>本人的博客mmmmmm.me (目前可能还是问题很多的,不介意的可以稍微看一下) pjax基本优化完了,目前我涉及到的,现在想优化一下网站的加载速度,因为我的网站刚进去的时候白屏大半天,然后浏览器的转盘转半天,(就是刷新那个标识了,不会表达),之后就是一堆查看通过浏览器的审查模式看network,发现首页的大图片占了很久的响应时间,之后发现我的hexo后台管理工具,hexo-admin(一个很方便的博客发布工具,有兴趣的看我另一篇博客,网上一搜一大堆),每次直接复制粘贴进去,它默认保存的是png格式的,关于jpg和png的区别,希望大家也了解一下,使得我的图片好几兆,我就手动复制成jpg格式的,但是还是不行的呀,这个时候,就上网查各种优化,发现,有个懒加载这个东东,客观往下看。</p><h1 id="懒加载简单介绍"><a href="#懒加载简单介绍" class="headerlink" title="懒加载简单介绍"></a>懒加载简单介绍</h1><blockquote><p>何为懒加载,简言之就是在html加载的时候,若果img标签的src是有内容的,在加载的过程中,img标签就回去请求这个图片,知道加载完,我们的浏览器的刷新那个图标才会停止转动,也就是才算请求玩,这个时候懒加载就应运而生。懒加载能够在你鼠标不懂得时候只加载目前电脑窗口内需要展示的图片,电脑屏幕内部需要展示的图片就暂时不加载,对于图片比较多的网站是不是很实用呢?</p></blockquote><p>关于懒加载的语法简单介绍一下:</p><h2 id="引入js"><a href="#引入js" class="headerlink" title="引入js"></a>引入js</h2><pre><code><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.lazyload.js"></script></code></pre><h2 id="重点!敲黑板了!!!"><a href="#重点!敲黑板了!!!" class="headerlink" title="重点!敲黑板了!!!"></a>重点!敲黑板了!!!</h2><p>修改图片属性(增加data-original属性,去掉src属性)</p><pre><code><img alt="" width="640" height="480" data-original="img/example.jpg" /></code></pre><h2 id="完善懒加载函数"><a href="#完善懒加载函数" class="headerlink" title="完善懒加载函数"></a>完善懒加载函数</h2><pre><code><script>$(function() { $("img").lazyload();});<script></code></pre><h2 id="懒加载函数可配置的参数"><a href="#懒加载函数可配置的参数" class="headerlink" title="懒加载函数可配置的参数"></a>懒加载函数可配置的参数</h2><p>备注:这里必须设置图片的width和height,否则插件可能无法正常工作。</p><p>上面是最简单的调用,但是一般而言,我们还有一些特殊的需求,比如想要提前一点点加载,避免网络过慢时加载缓慢,加载隐藏图片等等,lazyload都为我们提供相应的参数。</p><p>1.设置临界点</p><p>默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 如:设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.</p><pre><code>$("img").lazyload({ threshold : 200});</code></pre><p>2.使用特效</p><p>默认情况下,图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn (淡入效果)</p><pre><code>$("img").lazyload({ effect : "fadeIn"});</code></pre><p>3.当图片不连续时</p><p>滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.</p><pre><code>$("img").lazyload({ failure_limit : 20}); </code></pre><p>将 failurelimit 设为 20 ,当插件找到 20 个不在可见区域的图片时停止搜索.</p><p>4.加载隐藏图片</p><p>当界面有很多隐藏图片的时候并希望加载他们的时候则使用kip_invisible 属性,将其设置为false</p><pre><code>$("img").lazyload({ skip_invisible : false});</code></pre><p>到这里,上面的方法已经基本满足常规的懒加载使用了,还有特殊的使用,可查看官网API。</p><h1 id="正式在hexo-next中加入懒加载"><a href="#正式在hexo-next中加入懒加载" class="headerlink" title="正式在hexo next中加入懒加载"></a>正式在hexo next中加入懒加载</h1><p>之前尝试过很多方法:</p><h2 id="1:"><a href="#1:" class="headerlink" title="1:"></a>1:</h2><p>如上查看相关的懒加载api文档,自定义懒加载函数,但是忽略了,img中需要data-original,并且去掉src属性,之后发现然后弥补,想要通过js的方式动态的给我的img加入这个属性,然后去掉src属性,但是js加入的前提是加载完dom模型,加载完dom模型的前提是src中的内容已经加载了,所以是不行的,故尝试修改html,next主题中没有html事swig文件,img中的内容是通过js渲染出来的。故放弃。</p><h2 id="2:"><a href="#2:" class="headerlink" title="2:"></a>2:</h2><p>上谷歌查看,发现可以:</p><pre><code>npm install hexo-lazyload --save</code></pre><p>然后修改_config.yml文件</p><pre><code>lazyload: enable: true # className: #可选 e.g. .J-lazyload-img # loadingImg: #可选 eg. ./images/loading.png</code></pre><p>可是我发现貌似是不行的,反正报各种错,网上好像是有人成功的。这个方法待定,附上原博客地址,感兴趣的可以研究。<br><a href="http://www.zhaojun.im/hexo-lazyload/" target="_blank" rel="noopener">http://www.zhaojun.im/hexo-lazyload/</a></p><h2 id="3:按我的步骤来,不要问为什么。"><a href="#3:按我的步骤来,不要问为什么。" class="headerlink" title="3:按我的步骤来,不要问为什么。"></a>3:按我的步骤来,不要问为什么。</h2><p>我自己成功的方法:<br>在主题文件夹下的scripts文件夹里,写一个 js 文件,名字不限,xxxx.js,比如wohaoshuai.js</p><pre><code>use strict';var cheerio = require('cheerio'); function lazyloadImg(source) { var LZ= cheerio.load(source, { decodeEntities: false }); //遍历所有 img 标签,添加data-original属性 LZ('img').each(function(index, element) { var oldsrc = LZ(element).attr('src'); if (oldsrc) { LZ(element).removeAttr('src'); LZ(element).attr({ 'data-original': oldsrc }); } }); return LZ.html();}//在渲染之前,更改 img 标签hexo.extend.filter.register('after_render:html', lazyloadImg);</code></pre><p>然后网上是说在header或者footer中引入js</p><pre><code> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> //也可替换其他的lazyload源<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script> <script type="text/javascript"> $(function() { //对所有 img 标签进行懒加载 $("img").lazyload({ //设置占位图,我这里选用了一个 loading 的加载动画 placeholder:"/img/loading.gif", //加载效果 effect:"fadeIn" }); }); </script></code></pre><p>但是我发现hexo next主题中有个themes/next/source/js/src/utils.js文件。<br>找到这个方法:</p><pre><code>lazyLoadPostsImages: function () { // $('#posts').find('img').lazyload({ // placeholder: '/images/loading.gif', // effect: 'fadeIn', // threshold : 0 // }); $('img').lazyload({ placeholder: '/images/loading.gif', effect: 'fadeIn', threshold : 100, failure_limit : 20, skip_invisible : false }); },</code></pre><p>修改内容即可,之前是注释掉的内容,意思是只对article中的内容进行懒加载,可是我需要的是全局的都懒加载,因为上面的scripts中的js已经将全局的img都替换了标签内容,不全局懒加载的话会有的不显示,<br>然后就是这两个配置:</p><pre><code>threshold : 100, ailure_limit : 20,</code></pre><p>意思上面有关懒加载的说的很清楚了,为了解决有的图片可能会不显示。</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Mon Mar 04 2019 16:34:49 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440658438054.jpg" alt=""></p><blockquote><ul><li>关于next注意中加入懒加载机制的文章,让你的博客如丝般顺滑。</li></ul></blockquote>
</summary>
<category term="hexo" scheme="http://mmmmmm.me/categories/hexo/"/>
<category term="hexo" scheme="http://mmmmmm.me/tags/hexo/"/>
</entry>
<entry>
<title>hexo next主题深度优化(一),加入pjax功能</title>
<link href="http://mmmmmm.me/hexo_yi_pjax.html"/>
<id>http://mmmmmm.me/hexo_yi_pjax.html</id>
<published>2018-12-18T11:20:00.000Z</published>
<updated>2018-12-24T09:47:02.000Z</updated>
<content type="html"><![CDATA[<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440658632431.jpg" alt=""></p><blockquote><ul><li>一篇关于在next主题中加入pjax的文章,让你的文章如钻石般夺目。</li></ul></blockquote><a id="more"></a><p>特别声明:<br><strong>看不懂没关系,往下读,因为我写的逻辑可能不是很清晰~<br>本人源码在github上实在不懂的 git clone自己扣一扣,github在博客中有连接<br>本人博客mmmmmm.me</strong></p><h1 id="背景:"><a href="#背景:" class="headerlink" title="背景:"></a>背景:</h1><p>我有强迫症,遇到好的东西就想给自己整上去,在这里想忠诚的奉劝大家一句,不要再搭建自己的博客了,这是一个无底洞,就跟打游戏一样,当你到达六十级之后,你发现版本更新了,顶级变成了八十级,而且,目前看来你自己只有三级,只是自己感觉自己是六十级<del>~~ 就像我,这个东西我足足花了一周多,当然也有我经常加班的原因吧,好了不吐槽了</del></p><h1 id="进入正题"><a href="#进入正题" class="headerlink" title="进入正题"></a>进入正题</h1><h2 id="pjax初体验–instantclick"><a href="#pjax初体验–instantclick" class="headerlink" title="pjax初体验–instantclick"></a>pjax初体验–instantclick</h2><p>首先本人加了一个不蒜子的群,看到有人说instantclick能够实现自己的博客实现不中断的播放(大家都知道博客一刷新,一换页,播放的歌曲插件肯定也会刷新,歌也就断了),看到这里是不是有感觉了~~,这个时候我就开始拼命的往里面加,大概花了两天放弃了,可是无奈中文文档也比较少,而且,bug巨多,最大的原因也是bug巨多,适配起来十分麻烦,比如多说评论系统等等。但是速度确实蛮快的,因为可以1鼠标放到标签上实现预加载2鼠标点下去的瞬间实现预加载,而且可以自己设定预加载的时间。(好像是这么回事,时间太久远了)<br>下面贴出我找到的几个教程,对于bug多这点不介意,喜欢钻研的同学可以看看:<br><a href="https://www.ihewro.com/archives/515/" target="_blank" rel="noopener">https://www.ihewro.com/archives/515/</a><br><a href="https://qqdie.com/archives/instantclick.html" target="_blank" rel="noopener">https://qqdie.com/archives/instantclick.html</a><br><a href="https://www.jianshu.com/p/c306360e4270" target="_blank" rel="noopener">https://www.jianshu.com/p/c306360e4270</a><br><a href="https://www.songhaifeng.com/razt/32.html" target="_blank" rel="noopener">https://www.songhaifeng.com/razt/32.html</a><br>好了就先这么多,google上也有好多,赶紧让我们进入正题吧~</p><h2 id="真正的pjax"><a href="#真正的pjax" class="headerlink" title="真正的pjax"></a>真正的pjax</h2><p>官方介绍:pushState + ajax = pjax 带来最直观的效果是整个网站变成单页应用。这样的效果将会极大的提升用户体验,并且可以减少https的请求的次数和内容。使用github上面的一个开源项目defunkt/jquery-pjax 可以很轻松的帮助我们实现pjax。</p><p>这样可以实现,刷新的时候只加载局部的html和css js 大大加快速度。<br>真诚提醒:如果对前端一点点基础都没有的话,要不就放弃吧。</p><h3 id="第一步"><a href="#第一步" class="headerlink" title="第一步"></a>第一步</h3><p>找到theme->next->layout->_layout.swig文件<br>在开头加入以下代码:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script></span><br><span class="line"><script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script></span><br><span class="line"><script src="/js/src/pjax/pjaxBase.js"></script></span><br></pre></td></tr></table></figure><blockquote><p>解释一下:前两行是引入jq文件和pjax的js文件,jq文件必须在pjax文件前面引入,第三行是引入我自己的文件,这个文件是我自己diy的目录如图。在第二行下面<script></script>中间加入内容是一样的效果。</p></blockquote><h3 id="第二步"><a href="#第二步" class="headerlink" title="第二步"></a>第二步</h3><p>还是在这个文件中在底部加入</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><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">{# 在这里依次加载pjax需要的js文件 #}//swig文件中的注释是这样子的</span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/category_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/opacity_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/motion_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/velocity.ui_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/velocity_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/bootstrap_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/scrollspy_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/utils_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/post-details_js.js" ></script></span><br></pre></td></tr></table></figure><p>注意这里的文件是有顺序的,具体的我会在下文详细讲述。</p><h3 id="第三步"><a href="#第三步" class="headerlink" title="第三步"></a>第三步</h3><p>第二步中的这些文件都是我自己加入的,原因是因为(划重点了!!!)<br><strong>在pjax中是局部刷新的也就是局部加载的,而以上的文件,next主题中本身是没有的,原来的文件名称没有我的_js后缀,在目录next->source->js->src下面,<br>源文件大部分都是$(document).ready()的,这个函数,大家可以上网好好查查,是加载完整个dom结构后进行加载的,当然了和js中的Window.onload是不一样的,后者是在图片等全部加载完之后才会加载js,好了不闲扯了,注意将这些文件复制到我上面的目录下并且重命名例如:/js/src/pjax/bootstrap_js.js然后将所有的文件都把$(document).ready()去掉,然后用function xxx包住,这样就可以外部调用了,我会在下面讲到,很有用哦。</strong></p><blockquote><p>为什么这么麻烦,因为next的js是相互调用的,本人比较懒,实在没有时间阅读全部的源码。</p></blockquote><p>目录:</p><h3 id="第四步"><a href="#第四步" class="headerlink" title="第四步"></a>第四步</h3><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181209223504210.png" alt="upload successful"></p><p>如上面的目录,这些有的是我复制的系统核心的,因为在p我单独还建了一个/js/src/pjax/pjaxBase.js,你可能就懂了第一步了。这个js是pjax的核心,下面贴出源码:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><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><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">// define(['jquery','jquery_pjax_min_js'],function () {</span><br><span class="line">$(document).pjax('a[target!=_blank]', '#pjax-container', {</span><br><span class="line"> fragment: '#pjax-container',</span><br><span class="line"> timeout: 5000,</span><br><span class="line">});</span><br><span class="line">//用户通过浏览器的前进后退按钮,需要加载的js</span><br><span class="line">$(window).on('popstate.pjax', function () {</span><br><span class="line"> $(document).on('pjax:complete',</span><br><span class="line"> function () {</span><br><span class="line"> $('img').lazyload({</span><br><span class="line"> placeholder: '/images/loading.gif',</span><br><span class="line"> effect: 'fadeIn',</span><br><span class="line"> threshold : 100,</span><br><span class="line"> failure_limit : 20,</span><br><span class="line"> skip_invisible : false</span><br><span class="line"> });</span><br><span class="line"> pjax();</span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line">$(document).on('pjax:start',</span><br><span class="line"> function () {</span><br><span class="line"> })</span><br><span class="line">$(document).on('pjax:complete',</span><br><span class="line"> function () {</span><br><span class="line"> require.config({</span><br><span class="line"> paths: {</span><br><span class="line"> //下面注释的这几个js是之前的版本,因为给主题加入了require.js提升性能,所以将他们整合到了下面pjax_function_public文件中,效果是一样的。</span><br><span class="line"> // "category_js": "/js/src/pjax/category_js",</span><br><span class="line"> // "opacity_js":"/js/src/pjax/opacity_js",</span><br><span class="line"> // "motion_js":"/js/src/pjax/motion_js",</span><br><span class="line"> // "scrollspy_js":"/js/src/pjax/scrollspy_js",</span><br><span class="line"> // "post-details_js":"/js/src/pjax/post-details_js",</span><br><span class="line"> // "lean_analytics":"/js/src/pjax/lean_analytics",</span><br><span class="line"> // "baidutuisong":"/js/src/pjax/baidutuisong",</span><br><span class="line"> // "utils_js":"/js/src/pjax/utils_js",</span><br><span class="line"> //这个是单独的</span><br><span class="line"> "jquery.share.min":"/js/src/pjax/share/jquery.share.min",</span><br><span class="line"> // "share":"/js/src/pjax/share",</span><br><span class="line"> //这个也是单独的</span><br><span class="line"> "css":"/js/src/pjax/css",</span><br><span class="line"> //我将上面注释的内容整合到了这个js中,为了更好的提升性能,因为虽然一样的内容,多次读取文件,和读一个文件,效率还是有很大的差距的。</span><br><span class="line"> "pjax_function_public":"/js/src/pjax/pjax_function_public"</span><br><span class="line"> },</span><br><span class="line"> shim: {</span><br><span class="line"> 'share': {</span><br><span class="line"> deps: [</span><br><span class="line"> 'css!/js/src/pjax/share/share.min','jquery.share.min'</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> require(['jquery.share.min','share','css','pjax_function_public'</span><br><span class="line"> ], function () {</span><br><span class="line"> $('img').lazyload({</span><br><span class="line"> placeholder: '/images/loading.gif',</span><br><span class="line"> effect: 'fadeIn',</span><br><span class="line"> threshold : 100,</span><br><span class="line"> failure_limit : 20,</span><br><span class="line"> skip_invisible : false</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> pjax();</span><br><span class="line"> });</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line">function pjax() {</span><br><span class="line"> /*因为下面的postdetails_js中的有个判断空指针的,如果加上就不能左移,如果去掉会报错,所以把这个放在首行来执行。*/</span><br><span class="line"> /*现在已经解决,可以放在任意的位置*/</span><br><span class="line"> /*</span><br><span class="line"> 之前一直是好的突然有次就不好了,后来解决了右边sidebar滚轮效果消失的效果之后,突然又好了。</span><br><span class="line"> 原因是因为,之前放在detail js的下面,而detail的下面undfind的判断时报错的,所以不会往下走。</span><br><span class="line"> */</span><br><span class="line"> /*判断#lv-container是否为空,目前这是我找到最好的办法,因为不判断,进入首页或其他的页面会空指针异常。*/</span><br><span class="line"> if ($("#lv-container").length > 0 ) {</span><br><span class="line"> $(".comments").css({opacity: 1});</span><br><span class="line"> $.getScript("https://cdn-city.livere.com/js/embed.dist.js");</span><br><span class="line"> }</span><br><span class="line"> //不蒜子js</span><br><span class="line"> $.getScript("https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");</span><br><span class="line"></span><br><span class="line"> //自己写的分享</span><br><span class="line"> pjaxshare();</span><br><span class="line"></span><br><span class="line">// 分类的js</span><br><span class="line"> category_js();</span><br><span class="line">// 局部刷新后文章内容不显示bug的js</span><br><span class="line"> opacity_js()</span><br><span class="line">//点击有目录的文章sidebar不显示的bug解决</span><br><span class="line"> motion_js()</span><br><span class="line"> scrollspy_js()</span><br><span class="line"> //utils_js()</span><br><span class="line"> postdetails_js()</span><br><span class="line">//lean数量统计的js,原来的js是在themes/next/layout/_third-party/analytics/lean-analytics.swig文件中</span><br><span class="line"> lean_analytics();</span><br><span class="line"> //百度推送js</span><br><span class="line"> baidutuisong();</span><br><span class="line">// //右边sidebar滚轮效果消失了。</span><br><span class="line"> initSidebarDimension()</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>解释一下:<br>$(document).pjax(‘a[target!=_blank]’ ‘#main’, {<br>fragment: ‘#main’,<br>timeout: 5000,<br>});<br>这个函数是pjax的核心,<br>‘a[target!=_blank]’是你将会点击的标签[target!=_blank],是当你的标签是blank的时候就是需要点击出现一个新的窗口,比如友链之类的,这个时候就不进行局部加载了,没有类似a标签的可以省略。<br>‘#main’是你将会刷新的地方<br>fragment: ‘#main’,是把那个地方的代码刷新然后放到’#main’中<br>timeout,懂js得都懂就不解释了。</p><p>$(document).on(‘pjax:complete’,<br>function() {}<br>划重点了:这个函数是在局部加载完之后自己需要DIY的js,因为pjax是局部加载我已经强调了很多遍了,这个时候有的js会失效比如说评论功能。<br>这个时候引入我们之前定义好的函数。完成!</p><p>贴几个对我很有帮助的博文和hexo next的博客和一个github,实在不懂得可以扒一扒别人的github源码,有很大的帮助。<br><a href="https://www.ihewro.com/archives/354/comment-page-3#comments" target="_blank" rel="noopener">https://www.ihewro.com/archives/354/comment-page-3#comments</a><br><a href="https://www.jimoe.cn/archives/typecho-add-pjax.html" target="_blank" rel="noopener">https://www.jimoe.cn/archives/typecho-add-pjax.html</a><br><a href="http://yelog.org/2017/02/08/pjax/" target="_blank" rel="noopener">http://yelog.org/2017/02/08/pjax/</a><br><a href="https://www.jianshu.com/p/808a647dc324" target="_blank" rel="noopener">https://www.jianshu.com/p/808a647dc324</a><br><a href="https://blog.dyboy.cn/" target="_blank" rel="noopener">https://blog.dyboy.cn/</a><br><a href="https://blog.flysay.com/" target="_blank" rel="noopener">https://blog.flysay.com/</a><br><a href="https://github.com/DIYgod/hexo-theme-sagiri" target="_blank" rel="noopener">https://github.com/DIYgod/hexo-theme-sagiri</a><br><a href="http://www.qingpingshan.com/m/view.php?aid=355579" target="_blank" rel="noopener">http://www.qingpingshan.com/m/view.php?aid=355579</a><br><a href="https://diygod.me/" target="_blank" rel="noopener">https://diygod.me/</a><br>中间有个小技巧:chrom的审查元素里面的内容是可以移动和删除的,更利于我们的检查。</p><h1 id="专门基于hexo-next主题的pjax(将丢失的js效果重现)"><a href="#专门基于hexo-next主题的pjax(将丢失的js效果重现)" class="headerlink" title="专门基于hexo next主题的pjax(将丢失的js效果重现)"></a>专门基于hexo next主题的pjax(将丢失的js效果重现)</h1><h2 id="将下面讲到的提取出来"><a href="#将下面讲到的提取出来" class="headerlink" title="将下面讲到的提取出来"></a>将下面讲到的提取出来</h2><p><strong>因为很多事被包装在$(documnent).ready(function(){})里面的,所以pjax不能加载的原因就在这里。自己提取出来,封装成函数自己调用即可</strong><br><strong>下面的需要前端基础,会通过断点进行审查</strong></p><h2 id="点击右边的sidebar,sidebar不出现"><a href="#点击右边的sidebar,sidebar不出现" class="headerlink" title="点击右边的sidebar,sidebar不出现"></a>点击右边的sidebar,sidebar不出现</h2><p>经过阅读源码,点击事件在motion.js中,将相应的代码提取出来<br>motion.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"> this.toggleEl.on('click', this.clickHandler.bind(this));</span><br><span class="line"> this.dimmerEl.on('click', this.clickHandler.bind(this));</span><br><span class="line"> this.toggleEl.on('mouseenter', this.mouseEnterHandler.bind(this));</span><br><span class="line"> this.toggleEl.on('mouseleave', this.mouseLeaveHandler.bind(this));</span><br><span class="line"> this.sidebarEl.on('touchstart', this.touchstartHandler.bind(this));</span><br><span class="line"> this.sidebarEl.on('touchend', this.touchendHandler.bind(this));</span><br><span class="line"> this.sidebarEl.on('touchmove', function(e){e.preventDefault();});</span><br><span class="line">`</span><br></pre></td></tr></table></figure><p></p><p>post_detail.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">// TOC item animation navigate & prevent #item selector in adress bar.</span><br><span class="line"> $('.post-toc a').on('click', function (e) {</span><br><span class="line"> e.preventDefault();</span><br><span class="line"> var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href'));</span><br><span class="line"> var offset = $(targetSelector).offset().top;</span><br><span class="line"></span><br><span class="line"> hasVelocity ?</span><br><span class="line"> html.velocity('stop').velocity('scroll', {</span><br><span class="line"> offset: offset + 'px',</span><br><span class="line"> mobileHA: false</span><br><span class="line"> }) :</span><br><span class="line"> $('html, body').stop().animate({</span><br><span class="line"> scrollTop: offset</span><br><span class="line"> }, 500);</span><br><span class="line"> });</span><br></pre></td></tr></table></figure><p></p><p>这是线索,像java一样点到自己需要的地方,展开逻辑。</p><h3 id="sidebar自动隐藏,自动显示,点击出现,点击隐藏,回到首页,回到中间等操作"><a href="#sidebar自动隐藏,自动显示,点击出现,点击隐藏,回到首页,回到中间等操作" class="headerlink" title="sidebar自动隐藏,自动显示,点击出现,点击隐藏,回到首页,回到中间等操作"></a>sidebar自动隐藏,自动显示,点击出现,点击隐藏,回到首页,回到中间等操作</h3><p>里面如果遇到不认识的函数,可能是hexo自己封装的比如toc,<br>hexo自己的辅助函数:<a href="https://hexo.io/zh-cn/docs/helpers.html" target="_blank" rel="noopener">https://hexo.io/zh-cn/docs/helpers.html</a><br></p><figure class="highlight java"><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><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">下面这段代码是关于右边的sidebar的js的核心包括:</span></span><br><span class="line"><span class="comment"> 自动隐藏,自动显示,点击出现,点击隐藏,回到首页,回到中间等操作*/</span></span><br><span class="line"> <span class="comment">// Expand sidebar on post detail page by default, when post has a toc.</span></span><br><span class="line"> <span class="keyword">var</span> $tocContent = $(<span class="string">'.post-toc-content'</span>);</span><br><span class="line"> <span class="keyword">var</span> isSidebarCouldDisplay = CONFIG.sidebar.display === <span class="string">'post'</span> ||</span><br><span class="line"> CONFIG.sidebar.display === <span class="string">'always'</span>;</span><br><span class="line"> <span class="keyword">var</span> hasTOC = $tocContent.length > <span class="number">0</span> && $tocContent.html().trim().length > <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">if</span> (isSidebarCouldDisplay && hasTOC) {</span><br><span class="line"></span><br><span class="line"> NexT.utils.displaySidebar();</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"><span class="comment">/*判断this.sidebarEl是否为null,因为从首页进入留言板的时候并没有this.sidebarEl这个属性,回报类似于空指针的异常。</span></span><br><span class="line"><span class="comment"> 下面这个空指针的判断暂时注释掉因为,如果打开的,返回到首页的时候并没有this.sidebarEl,</span></span><br><span class="line"><span class="comment">下面的代码不会进行,下面的,文章在左面没回去的bug就无法得到解决。*/</span></span><br><span class="line"><span class="comment">/*已经将空指针异常的判断打开,因为下面的源码是this.sidebar,这里的this可能并不是element,所以会导致未定义,其实在element中是定义了的</span></span><br><span class="line"><span class="comment">* 在这里将this去掉就解决了*/</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">* 下面这段源码在motion.js中的hideSidebar方法。*/</span></span><br><span class="line"> <span class="keyword">var</span> sidebarEl=$(<span class="string">'.sidebar'</span>)</span><br><span class="line"> <span class="keyword">if</span> (typeof(sidebarEl)!= <span class="string">"undefined"</span>) {</span><br><span class="line"> NexT.utils.isDesktop() && $(<span class="string">'body'</span>).velocity(<span class="string">'stop'</span>).velocity({paddingRight: <span class="number">0</span>});</span><br><span class="line"> sidebarEl.find(<span class="string">'.motion-element'</span>).velocity(<span class="string">'stop'</span>).css(<span class="string">'display'</span>, <span class="string">'none'</span>);</span><br><span class="line"> sidebarEl.velocity(<span class="string">'stop'</span>).velocity({width: <span class="number">0</span>}, {display: <span class="string">'none'</span>});</span><br><span class="line"> <span class="comment">/*sidebarToggleLines是在motion js里面的,在这里回报错,在下面进行了引用*/</span></span><br><span class="line"> sidebarToggleLines.init();</span><br><span class="line"> sidebarEl.removeClass(<span class="string">'sidebar-active'</span>);</span><br><span class="line"> sidebarEl.trigger(<span class="string">'sidebar.isHiding'</span>);</span><br><span class="line"> <span class="comment">// Prevent adding TOC to Overview if Overview was selected when close & open sidebar.</span></span><br><span class="line"> <span class="comment">/*下面的else的js是我自己加的因为,点击有目录的文章后右侧sidebar会自动出来,文章会自动往左面走,因为margin是0 auto的。这个时候点击主页,</span></span><br><span class="line"><span class="comment"> 文章还是在左面的没有回去,为了解决这个bug*/</span></span><br><span class="line"> <span class="keyword">if</span> (!!$(<span class="string">'.post-toc-wrap'</span>)) {</span><br><span class="line"> <span class="keyword">if</span> ($(<span class="string">'.site-overview-wrap'</span>).css(<span class="string">'display'</span>) === <span class="string">'block'</span>) {</span><br><span class="line"> $(<span class="string">'.post-toc-wrap'</span>).removeClass(<span class="string">'motion-element'</span>);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> $(<span class="string">'.post-toc-wrap'</span>).addClass(<span class="string">'motion-element'</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> sidebarToggleLines = {</span><br><span class="line"> lines: [],</span><br><span class="line"> push: function (line) {</span><br><span class="line"> <span class="keyword">this</span>.lines.push(line);</span><br><span class="line"> },</span><br><span class="line"> init: function () {</span><br><span class="line"> <span class="keyword">this</span>.lines.forEach(function (line) {</span><br><span class="line"> line.init();</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> arrow: function () {</span><br><span class="line"> <span class="keyword">this</span>.lines.forEach(function (line) {</span><br><span class="line"> line.arrow();</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> close: function () {</span><br><span class="line"> <span class="keyword">this</span>.lines.forEach(function (line) {</span><br><span class="line"> line.close();</span><br><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></p><h3 id="添加bootstrp出现闪屏的现象"><a href="#添加bootstrp出现闪屏的现象" class="headerlink" title="添加bootstrp出现闪屏的现象"></a>添加bootstrp出现闪屏的现象</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">// .add(NexT.motion.middleWares.menu)已经注释掉了</span><br></pre></td></tr></table></figure><p>貌似bootstrp不加也行,没有发现太需要重写的函数</p><h3 id="右边的sidebar鼠标滚动目录滑动事件没了"><a href="#右边的sidebar鼠标滚动目录滑动事件没了" class="headerlink" title="右边的sidebar鼠标滚动目录滑动事件没了"></a>右边的sidebar鼠标滚动目录滑动事件没了</h3><p>核心代码是utils.js中的initSidebarDimension()函数<br>直接调用即可。<br>**强烈建议用有道词典看看那些个函数的注释,这个注释就写的很清楚,一开始我找了好久没有跟到相关的代码,最后,偶尔看到了,还好有点英语基础。<br>utils.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">/**</span><br><span class="line"> * Init Sidebar & TOC inner dimensions on all pages and for all schemes.</span><br><span class="line"> * Need for Sidebar/TOC inner scrolling if content taller then viewport.</span><br><span class="line"> */</span><br><span class="line"> function initSidebarDimension () {</span><br><span class="line"> var updateSidebarHeightTimer;</span><br><span class="line"> $(window).on('resize', function () {</span><br><span class="line"> updateSidebarHeightTimer && clearTimeout(updateSidebarHeightTimer);</span><br><span class="line"> updateSidebarHeightTimer = setTimeout(function () {</span><br><span class="line"> var sidebarWrapperHeight = document.body.clientHeight - NexT.utils.getSidebarSchemePadding();</span><br><span class="line"> updateSidebarHeight(sidebarWrapperHeight);</span><br><span class="line"> }, 0);</span><br><span class="line"> });</span><br></pre></td></tr></table></figure><p></p><h3 id="局部刷新文章不显示了,文章那里是空白的。"><a href="#局部刷新文章不显示了,文章那里是空白的。" class="headerlink" title="局部刷新文章不显示了,文章那里是空白的。"></a>局部刷新文章不显示了,文章那里是空白的。</h3><p>经过审查,是opacity变成了0,我自定义了一个回调函数。<br>opacity.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> opacity_js() {</span><br><span class="line"> // $(".post-block").css({visibility: 'visible',opacity:1});</span><br><span class="line"> // $(".post-header").css({visibility: 'visible',opacity:1});</span><br><span class="line"> // $(".post-body").css({visibility: 'visible',opacity:1});</span><br><span class="line"></span><br><span class="line"> $(".post-block").css({opacity:1});</span><br><span class="line"> $(".post-header").css({opacity:1});</span><br><span class="line"> $(".post-body").css({opacity:1});</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h3 id="评论没了"><a href="#评论没了" class="headerlink" title="评论没了"></a>评论没了</h3><p>我用的是来必力,其他的评论系统都是一样的操作,去评论系统的官网,或者阅读源码,跟到调用的api重新调用即可。<br><strong>注:下面紧跟着这个是之前错误的仅供记录,下面提供了正确的做法</strong><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">/*判断#lv-container、comments是否为空,目前这是我找到最好的办法,因为不判断,进入首页或其他的页面会空指针异常。*/</span><br><span class="line"> if ($("#lv-container").length > 0 &&$('.comments').length>0) {</span><br><span class="line"> $(".comments").css({opacity: 1});</span><br><span class="line"> $.getScript("https://cdn-city.livere.com/js/embed.dist.js");</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p></p><p><strong>注:上面的版本是之前错误的,经过阅读源码</strong><br></p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> ($(<span class="string">"#lv-container"</span>).length > <span class="number">0</span> &&$(<span class="string">'.comments'</span>).length><span class="number">0</span>)</span><br></pre></td></tr></table></figure><p></p><p>这句话是没用的,因为每个页面里面易经理加入了这个,并且js是没有重写完整的<br><strong>正确做法:</strong><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">(function(d, s) {</span><br><span class="line"> var j, e = d.getElementsByTagName(s)[0];</span><br><span class="line"> if (typeof LivereTower === 'function') { return; }</span><br><span class="line"> j = d.createElement(s);</span><br><span class="line"> j.src = 'https://cdn-city.livere.com/js/embed.dist.js';</span><br><span class="line"> j.async = true;</span><br><span class="line"> e.parentNode.insertBefore(j, e);</span><br><span class="line"> })(document, 'script');</span><br></pre></td></tr></table></figure><p></p><p>403的错误是localhost的原因,通过域名访问就没事了<br>不报错401就没问题<br>更新,虽然现实没问题,可是每次到首页总是会报错,id notfound,才疏学浅久久不能解决,决定换成gittalk评论。<br>参看我的另一篇文章。</p><h3 id="局部会闪一下"><a href="#局部会闪一下" class="headerlink" title="局部会闪一下"></a>局部会闪一下</h3><p>boostrap.js bootstrap是必须注释掉的</p><h3 id="阅读数没了"><a href="#阅读数没了" class="headerlink" title="阅读数没了"></a>阅读数没了</h3><p>自定义了一个js<br><strong>注意我第一行的注释</strong><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><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><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br></pre></td><td class="code"><pre><span class="line">function lean_analytics() {</span><br><span class="line"> /*里面的参数原来是{{}},可能会出现问题,所以在这里我直接将appid和key粘贴过来,具体问题是什么不详*/</span><br><span class="line"> AV.initialize("6og9b7lpddMqazBCDe8z4HqL-gzGzoHsz", "faKN7dalSdXLmYYJTRq98B1f");</span><br><span class="line"> $.getScript("https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js");</span><br><span class="line"> function showTime(Counter) {</span><br><span class="line"> var query = new AV.Query(Counter);</span><br><span class="line"> var entries = [];</span><br><span class="line"> var $visitors = $(".leancloud_visitors");</span><br><span class="line"></span><br><span class="line"> $visitors.each(function () {</span><br><span class="line"> entries.push( $(this).attr("id").trim() );</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> query.containedIn('url', entries);</span><br><span class="line"> query.find()</span><br><span class="line"> .done(function (results) {</span><br><span class="line"> var COUNT_CONTAINER_REF = '.leancloud-visitors-count';</span><br><span class="line"> if (results.length === 0) {</span><br><span class="line"> $visitors.find(COUNT_CONTAINER_REF).text(0);</span><br><span class="line"> return;</span><br><span class="line"> }</span><br><span class="line"> for (var i = 0; i < results.length; i++) {</span><br><span class="line"> var item = results[i];</span><br><span class="line"> var url = item.get('url');</span><br><span class="line"> var time = item.get('time');</span><br><span class="line"> var element = document.getElementById(url);</span><br><span class="line"> $(element).find(COUNT_CONTAINER_REF).text(time);</span><br><span class="line"> }</span><br><span class="line"> for(var i = 0; i < entries.length; i++) {</span><br><span class="line"> var url = entries[i];</span><br><span class="line"> var element = document.getElementById(url);</span><br><span class="line"> var countSpan = $(element).find(COUNT_CONTAINER_REF);</span><br><span class="line"> if( countSpan.text() == '') {</span><br><span class="line"> countSpan.text(0);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> .fail(function (object, error) {</span><br><span class="line"> console.log("Error: " + error.code + " " + error.message);</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> function addCount(Counter) {</span><br><span class="line"> var $visitors = $(".leancloud_visitors");</span><br><span class="line"> var url = $visitors.attr('id').trim();</span><br><span class="line"> var title = $visitors.attr('data-flag-title').trim();</span><br><span class="line"> var query = new AV.Query(Counter);</span><br><span class="line"></span><br><span class="line"> query.equalTo("url", url);</span><br><span class="line"> query.find({</span><br><span class="line"> success: function(results) {</span><br><span class="line"> if (results.length > 0) {</span><br><span class="line"> var counter = results[0];</span><br><span class="line"> counter.fetchWhenSave(true);</span><br><span class="line"> counter.increment("time");</span><br><span class="line"> counter.save(null, {</span><br><span class="line"> success: function(counter) {</span><br><span class="line"> var $element = $(document.getElementById(url));</span><br><span class="line"> $element.find('.leancloud-visitors-count').text(counter.get('time'));</span><br><span class="line"> },</span><br><span class="line"> error: function(counter, error) {</span><br><span class="line"> console.log('Failed to save Visitor num, with error message: ' + error.message);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> } else {</span><br><span class="line"> var newcounter = new Counter();</span><br><span class="line"> /* Set ACL */</span><br><span class="line"> var acl = new AV.ACL();</span><br><span class="line"> acl.setPublicReadAccess(true);</span><br><span class="line"> acl.setPublicWriteAccess(true);</span><br><span class="line"> newcounter.setACL(acl);</span><br><span class="line"> /* End Set ACL */</span><br><span class="line"> newcounter.set("title", title);</span><br><span class="line"> newcounter.set("url", url);</span><br><span class="line"> newcounter.set("time", 1);</span><br><span class="line"> newcounter.save(null, {</span><br><span class="line"> success: function(newcounter) {</span><br><span class="line"> var $element = $(document.getElementById(url));</span><br><span class="line"> $element.find('.leancloud-visitors-count').text(newcounter.get('time'));</span><br><span class="line"> },</span><br><span class="line"> error: function(newcounter, error) {</span><br><span class="line"> console.log('Failed to create');</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> error: function(error) {</span><br><span class="line"> console.log('Error:' + error.code + " " + error.message);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> var Counter = AV.Object.extend("Counter");</span><br><span class="line"> if ($('.leancloud_visitors').length == 1) {</span><br><span class="line"> addCount(Counter);</span><br><span class="line"> } else if ($('.post-title-link').length > 1) {</span><br><span class="line"> showTime(Counter);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h3 id="百度统计-解决了footer自动推送"><a href="#百度统计-解决了footer自动推送" class="headerlink" title="百度统计(解决了footer自动推送)"></a>百度统计(解决了footer自动推送)</h3><p>baidutuisong.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">function baidutuisong() {</span><br><span class="line"> var bp = document.createElement('script');</span><br><span class="line"> var curProtocol = window.location.protocol.split(':')[0];</span><br><span class="line"> if (curProtocol === 'https') {</span><br><span class="line"> bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';</span><br><span class="line"> }</span><br><span class="line"> else {</span><br><span class="line"> bp.src = 'http://push.zhanzhang.baidu.com/push.js';</span><br><span class="line"> }</span><br><span class="line"> var s = document.getElementsByTagName("script")[0];</span><br><span class="line"> s.parentNode.insertBefore(bp, s);</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h3 id="不蒜子阅读次数失效-解决"><a href="#不蒜子阅读次数失效-解决" class="headerlink" title="不蒜子阅读次数失效(解决)"></a>不蒜子阅读次数失效(解决)</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$.getScript("https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");</span><br></pre></td></tr></table></figure><h3 id="分类动态(css样式,js不行)"><a href="#分类动态(css样式,js不行)" class="headerlink" title="分类动态(css样式,js不行)"></a>分类动态(css样式,js不行)</h3><p>category.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><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></pre></td><td class="code"><pre><span class="line">function category_js () {</span><br><span class="line"> //在a标签前面加个></span><br><span class="line"> if ($(".jiantou").length==0) {</span><br><span class="line"> $("<div class='jiantou' style='float: left'> &nbsp>&nbsp </div>").prependTo(".category-list-item");</span><br><span class="line"> }</span><br><span class="line"> //首相将子元素ul隐藏</span><br><span class="line"> $(".category-list-child").css("display","none");</span><br><span class="line"> //改变a标签的样式,"display":"inline-block"同时拥有块元素和行元素的两种特性。</span><br><span class="line"> //放到了css中</span><br><span class="line"> // $(".category-list-link").css({"width":"1000px","display":"inline-block"});</span><br><span class="line"></span><br><span class="line"> //加入过滤器功能,因为if貌似不支持this功能,a标签如果有同级元素ul的话会使跳转功能失效,没有同级元素ul的话继续跳转</span><br><span class="line"> $(".category-list-link").filter(function () {</span><br><span class="line"> return $(this).siblings(".category-list-child").length>0</span><br><span class="line"> }).attr("href","javascript:void(0)").css({"font-weight":"bold"});</span><br><span class="line"> //点击出现隐藏功能,a标签如果有同级元素ul的话会使跳转功能失效,没有同级元素ul的话继续跳转,上面已经做了处理。</span><br><span class="line"> $(".category-list-link").click(function () {</span><br><span class="line"> $(this).siblings(".category-list-child").slideToggle();</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> $(".posts-expand .post-body ul li ").css("list-style-type", "none");</span><br><span class="line"> //去掉下划线</span><br><span class="line"> $(".category-list-link ").css("border-bottom", "none");</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h3 id="分享失败"><a href="#分享失败" class="headerlink" title="分享失败"></a>分享失败</h3><p>原来用的addthis,不行,又换百度,还是不行,干脆自己整了一个<br>网上有share.js(有兴趣的自己学习一下)<br>share.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">// define(['jquery.share.min'],function () {</span><br><span class="line">var $config = {</span><br><span class="line"> sites : ['weibo','qq', 'wechat','tencent','qzone','douban', 'facebook', 'google','twitter'],</span><br><span class="line"> disabled: [ 'linkedin', 'diandian'],</span><br><span class="line"> wechatQrcodeTitle: "微信扫一扫",</span><br><span class="line"> wechatQrcodeHelper: '<p>微信扫一扫,右上角分享</p>',</span><br><span class="line"> source: 'Leesin Dong'</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">$('.post-spread').share($config);</span><br><span class="line"></span><br><span class="line">function pjaxshare() {</span><br><span class="line"> $('.post-spread').share($config);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h3 id="评分系统(已经舍弃,感觉无用)"><a href="#评分系统(已经舍弃,感觉无用)" class="headerlink" title="评分系统(已经舍弃,感觉无用)"></a>评分系统(已经舍弃,感觉无用)</h3><h3 id="懒加载函数"><a href="#懒加载函数" class="headerlink" title="懒加载函数"></a>懒加载函数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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">$('img').lazyload({</span><br><span class="line"> placeholder: '/images/loading.gif',</span><br><span class="line"> effect: 'fadeIn',</span><br><span class="line"> threshold : 100,</span><br><span class="line"> failure_limit : 20,</span><br><span class="line"> skip_invisible : false</span><br><span class="line"> });</span><br></pre></td></tr></table></figure><h1 id="忘了最后最重要的一点一点,点击浏览器的返回前进按钮,特效还是失败了"><a href="#忘了最后最重要的一点一点,点击浏览器的返回前进按钮,特效还是失败了" class="headerlink" title="忘了最后最重要的一点一点,点击浏览器的返回前进按钮,特效还是失败了"></a>忘了最后最重要的一点一点,点击浏览器的返回前进按钮,特效还是失败了</h1><p>辛辛苦苦google了三天的结果。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(window).on('popstate.pjax', function () {</span><br><span class="line"> pjax();</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p></p><p>暂时先这么多吧~<br>喜欢的点个星星,加个关注。</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Mon Mar 04 2019 16:34:50 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440658632431.jpg" alt=""></p><blockquote><ul><li>一篇关于在next主题中加入pjax的文章,让你的文章如钻石般夺目。</li></ul></blockquote>
</summary>
<category term="hexo" scheme="http://mmmmmm.me/categories/hexo/"/>
<category term="hexo" scheme="http://mmmmmm.me/tags/hexo/"/>
</entry>
<entry>
<title>To myself</title>
<link href="http://mmmmmm.me/To_myself.html"/>
<id>http://mmmmmm.me/To_myself.html</id>
<published>2018-10-15T06:57:00.000Z</published>
<updated>2018-12-24T09:47:02.000Z</updated>
<content type="html"><![CDATA[<!-- build time:Mon Mar 04 2019 16:34:49 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440638435859.jpg" alt=""></p><blockquote><ul><li>Life is a journey, we’ve gone through several cycles, just for the journey, the journey is very short, so might as well bold, might as<br>well bold to love a person, go to climb a mountain, chasing a dream…… there are a lot of things I don’t understand, but I believe one<br>thing, god let us come to this world, is in order to let us create miracle. – big fish and begonia</li></ul></blockquote><a id="more"></a><h1 id="短暂的一生"><a href="#短暂的一生" class="headerlink" title="短暂的一生"></a>短暂的一生</h1><blockquote><ul><li>人这一辈子除了死,什么都不宜迟,不要再去等永远,再久的永远也是有限的,四月,趁阳光正好,趁微风不噪, 趁繁花还未开至荼蘼,好好的去爱,尽情的去做,<br>不要等到老了,才发觉,该说的话还没说,该做的事还没做,该见的人还没见,该牵的手,还没有牵…</li></ul></blockquote><blockquote><ul><li>如果一个人只是度过一天算一天,什么希望也没有,他的生命实际上也就停止了。</li></ul></blockquote><blockquote><ul><li>人生一世不就是为了化短暂的事物为永久的吗?要做到这一步,就须懂得如何珍视这短暂和永久。</li></ul></blockquote><blockquote><ul><li>一个人如果碌碌无为,只为自己渺小的生存而虚度一生,那么,即使他高寿活到一百岁,又有什么价值和意义呢?</li></ul></blockquote><blockquote><ul><li>人生就像一本书,傻瓜们走马看花似地随手翻阅它,聪明的人用心地阅读它。因为他知道这本书只能读一次。</li></ul></blockquote><blockquote><ul><li>做自己喜欢的事情吧!去接触新的事物吧!去做时间的朋友吧!</li></ul></blockquote><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Mon Mar 04 2019 16:34:49 GMT+0800 (CST) --><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440638435859.jpg" alt=""></p><blockquote><ul><li>Life is a journey, we’ve gone through several cycles, just for the journey, the journey is very short, so might as well bold, might as<br>well bold to love a person, go to climb a mountain, chasing a dream…… there are a lot of things I don’t understand, but I believe one<br>thing, god let us come to this world, is in order to let us create miracle. – big fish and begonia</li></ul></blockquote>
</summary>
<category term="short life" scheme="http://mmmmmm.me/categories/short-life/"/>
<category term="short life" scheme="http://mmmmmm.me/categories/short-life/short-life/"/>
<category term="人生" scheme="http://mmmmmm.me/tags/%E4%BA%BA%E7%94%9F/"/>
</entry>
</feed>