atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>SARIAY-Blog</title>
  
  
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://yoursite.com/"/>
  <updated>2020-04-18T16:48:15.409Z</updated>
  <id>http://yoursite.com/</id>
  
  <author>
    <name>Sariay</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>第十四封信·琼萼</title>
    <link href="http://yoursite.com/2020/04/19/%E7%AC%AC%E5%8D%81%E5%9B%9B%E5%B0%81%E4%BF%A1%C2%B7%E7%90%BC%E8%90%BC/"/>
    <id>http://yoursite.com/2020/04/19/第十四封信·琼萼/</id>
    <published>2020-04-18T16:27:24.000Z</published>
    <updated>2020-04-18T16:48:15.409Z</updated>
    
    <content type="html"><![CDATA[<p>碧云之下，</p><p>一分春意，</p><p>二分意中人。</p><blockquote class="colorquote info"><p>App：一言  / 作者：冰野</p></blockquote>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;碧云之下，&lt;/p&gt;
&lt;p&gt;一分春意，&lt;/p&gt;
&lt;p&gt;二分意中人。&lt;/p&gt;
&lt;blockquote class=&quot;colorquote info&quot;&gt;&lt;p&gt;App：一言  / 作者：冰野&lt;/p&gt;&lt;/blockquote&gt;
      
    
    </summary>
    
      <category term="个人闲笔" scheme="http://yoursite.com/categories/%E4%B8%AA%E4%BA%BA%E9%97%B2%E7%AC%94/"/>
    
    
      <category term="九十九封信" scheme="http://yoursite.com/tags/%E4%B9%9D%E5%8D%81%E4%B9%9D%E5%B0%81%E4%BF%A1/"/>
    
  </entry>
  
  <entry>
    <title>绝色/余光中</title>
    <link href="http://yoursite.com/2020/04/19/%E7%BB%9D%E8%89%B2-%E4%BD%99%E5%85%89%E4%B8%AD/"/>
    <id>http://yoursite.com/2020/04/19/绝色-余光中/</id>
    <published>2020-04-18T16:25:40.000Z</published>
    <updated>2020-04-18T16:47:05.016Z</updated>
    
    <content type="html"><![CDATA[<blockquote class="colorquote info"><p>月色与雪色之间，<br>你是第三种绝色。</p></blockquote><p>美丽而善变的巫娘，那月亮<br>翻译是她的特长<br>却把世界译走了样<br>把太阳的鎔金译成了流银<br>把烈火译成了冰<br>而且带点薄荷的风味<br>凡尝过的人都说<br>译文是全不可靠<br>但比起原文来呢<br>却更加神秘，更加美<br>雪是另一位唯美的译者<br>存心把世界译错<br>或者译对，诗人说<br>只因原文本来就多误<br>所以每当雪姑<br>乘著六瓣的降落伞<br>在风里飞旋地降临<br>这世界一夜之间<br>比革命更彻底<br>竟变得如此白净<br>若逢新雪初霁，满月当空<br>下面平铺着皓影<br>上面流转着亮银<br>而你带笑地向我步来<br>月色与雪色之间<br>你是第三种绝色<br>不知月色加反光的雪色<br>该如何将你的本色<br>——已经够出色的了<br>合译成更绝的艳色？</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;blockquote class=&quot;colorquote info&quot;&gt;&lt;p&gt;月色与雪色之间，&lt;br&gt;你是第三种绝色。&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;美丽而善变的巫娘，那月亮&lt;br&gt;翻译是她的特长&lt;br&gt;却把世界译走了样&lt;br&gt;把太阳的鎔金译成了流银&lt;br&gt;把烈火译成了
      
    
    </summary>
    
      <category term="文学阅读" scheme="http://yoursite.com/categories/%E6%96%87%E5%AD%A6%E9%98%85%E8%AF%BB/"/>
    
    
      <category term="文学摘抄" scheme="http://yoursite.com/tags/%E6%96%87%E5%AD%A6%E6%91%98%E6%8A%84/"/>
    
      <category term="余光中" scheme="http://yoursite.com/tags/%E4%BD%99%E5%85%89%E4%B8%AD/"/>
    
  </entry>
  
  <entry>
    <title>选调和选韵</title>
    <link href="http://yoursite.com/2020/01/05/%E9%80%89%E8%B0%83%E5%92%8C%E9%80%89%E9%9F%B5/"/>
    <id>http://yoursite.com/2020/01/05/选调和选韵/</id>
    <published>2020-01-04T21:31:55.000Z</published>
    <updated>2020-04-18T16:41:25.417Z</updated>
    
    <content type="html"><![CDATA[<p><span class="first-letter-sink">填</span>  词既称倚声之学，不但它的<a href="http://longyusheng.org/cixueshijiang/lecture4.html" target="_blank" rel="noopener">句度长短</a>，<a href="http://longyusheng.org/cixueshijiang/lecture5.html" target="_blank" rel="noopener">韵位疏密</a>，必须与所用曲调（一般叫做词牌）的节拍恰相适应，就是歌词所要表达的喜、怒、哀、乐，起伏变化的不同情感，也得与每一曲调的声情恰相谐会，这样才能取得音乐与语言、内容与形式的紧密结合，使听者受其感染，获致“能移我情”的效果。北宋音乐理论家沈括就曾说过：“唐人填曲，多咏其曲名，所以哀乐与声，尚相谐会。今人则不复知有声矣！哀声而歌乐词，乐声而歌怨词，故语虽切而不能感动人情，由声与意不相谐故也。”（《梦溪笔谈》卷五《乐律》）“声与意不相谐”，由于填词者对每一曲调的声容不曾作过深入的体味，尤其在词体逐渐脱离音乐而不复可歌之后，学者只知按着一定格式任意“填”词，尽管平仄声韵一点儿不差，但最主要的各个曲调原有的声情却被弄反了，那当然是很难感动人心的。譬如《<a href="http://longyusheng.org/cipai/cipai53.html" target="_blank" rel="noopener">六州歌头</a>》，只适宜于抒写苍凉激越的豪迈感情，如果拿来填上缠绵哀婉、抒写儿女柔情的歌词，那就必然要导致“声与意不相谐”的结果。南宋初期的程大昌就曾提到：“《六州歌头》，本鼓吹曲也。近世好事者倚其声为吊古词，音调悲壮，又以古兴亡事实文之。闻其歌，使人慷慨，良不与艳词同科，诚可喜也。”（《词林纪事》卷九引《演繁露》）这就说明此一曲调的声情是只适宜于表达激越怀抱的。现存宋人作品以<a href="http://longyusheng.org/ciren/hezhu.html" target="_blank" rel="noopener">贺铸</a>为最早。南宋初期此词填的最多，也恰恰反映了时代特点。兹举贺铸和<a href="http://longyusheng.org/ciren/zhangxiaoxiang.html" target="_blank" rel="noopener">张孝祥</a>所作各一阕为例。</p><blockquote><p>（一）<a href="http://longyusheng.org/ci/hezhu/22.html" target="_blank" rel="noopener">贺作</a>：<br>少年侠气，交结五都雄。<br>肝胆洞，毛发耸。<br>立谈中，死生同，一诺千金重。<br>推翘勇，矜豪纵，轻盖拥，联飞鞚，斗城东。<br>轰饮酒垆，春色浮寒瓮。<br>吸海垂虹。<br>闲呼鹰嗾犬，白羽摘雕弓，狡穴俄空，乐匆匆。</p><p><br></p><p>似黄梁梦，辞丹凤；明月共，漾孤篷。<br>官冗从，怀倥偬，落尘笼，簿书丛。<br>鹖弁如云众，供粗用，忽奇功。<br>笳鼓动，渔阳弄，思悲翁，不请长缨，系取天骄种。<br>剑吼西风。<br>恨登山临水，手寄七弦桐，目送归鸿。<br>——《东山乐府》</p></blockquote><blockquote><p>（二）<a href="http://longyusheng.org/ci/zhangxiaoxiang/1.html" target="_blank" rel="noopener">张作</a>：<br>长淮望断，关塞莽然平。<br>征尘暗，霜风劲，悄边声，黯销凝。<br>追想当年事，殆天数，非人力，洙泗上，弦歌地，亦膻腥。<br>隔水毡乡，落日牛羊下，区脱纵横。<br>看名王宵猎，骑火一川明，笳鼓悲鸣，遣人惊。</p><p><br></p><p>念腰间箭，匣中剑，空埃蠹，竟何成！<br>时易失，心徒壮，岁将零，渺神京。<br>干羽方怀远，静烽燧，且休兵。<br>冠盖使，纷驰骛，若为情。<br>闻道中原遗老，常南望、翠葆霓旌。<br>使行人到此，忠愤气填膺，有泪如倾。<br>——《于湖居士长短句》</p></blockquote><p>从这个词牌的声韵安排上来谈，它连用了大量的三言短句，一气驱使，旋折而下，构成了它的“繁音促节”，恰宜表达紧张急迫激昂慷慨的壮烈情绪。贺铸掌握了这一特点，选用了音色洪亮的“东钟”韵部，更以平、上、去三声互协，几乎句句押韵，增加了它那“繁音促节”的声容之美，恰与作者所要发抒的奇情壮采相称，烘托出一种苍凉郁勃的不平之鸣，和元杂剧家关汉卿《不伏老》北曲散套的气派差相仿佛，是值得我们深入探讨的。张孝祥把这词牌用来抒写个人对南宋初期强敌压境而统治阶级却一味屈辱求和的悲愤感情，改用了清劲的“庚青”韵部，也能显示出本曲的激壮情调，具有强烈的感染力。但他忽略了仄韵部分，对“繁音促节”的声容之美是较欠缺的。和<a href="http://longyusheng.org/ciren/xinqiji.html" target="_blank" rel="noopener">辛弃疾</a>同时的<a href="http://longyusheng.org/ciren/hanyuanji.html" target="_blank" rel="noopener">韩元吉</a>，也曾选用过这一词牌来表达个人的柔情别绪：</p><blockquote><p>东风着意，先上小桃枝。<br>红粉腻，娇如醉，倚朱扉。<br>记年时，隐映新妆面，临水岸，春将半，云日暖，斜桥转，夹城西。<br>草软莎平，跋马垂杨渡，玉勒争嘶。<br>认蛾眉凝笑，脸薄拂胭脂。<br>绣户曾窥，恨依依。</p><p><br></p><p>共携手处，香如雾，红随步，怨春迟。<br>销瘦损，凭谁问？<br>只花知，泪空垂。<br>旧日堂前燕，和烟雨，又双飞。<br>人自老，春长好，梦佳期。<br>前度刘郎，几许风流地，花也应悲。<br>但茫茫暮霭，目断武陵溪，往事难追。<br>——《南涧诗馀》</p></blockquote><p>作者只体会到“繁音促节”适宜表现紧促心情的一面，同时也了解到兼协仄韵是可以增加本调的声容之美，他却选用了“萎而不振”的“支思”和“齐微”两部韵，虽然和他所要表达的感情是颇相适应的，但和本调的原有声情确是截然两回事了。</p><blockquote><p>选调须声意相谐，摘自<a href="http://longyusheng.org/cixueshijiang/lecture3-1.html" target="_blank" rel="noopener">龙榆生/选调和选韵</a></p></blockquote>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;&lt;span class=&quot;first-letter-sink&quot;&gt;填&lt;/span&gt;  词既称倚声之学，不但它的&lt;a href=&quot;http://longyusheng.org/cixueshijiang/lecture4.html&quot; target=&quot;_blank&quot; rel=&quot;n
      
    
    </summary>
    
      <category term="文学阅读" scheme="http://yoursite.com/categories/%E6%96%87%E5%AD%A6%E9%98%85%E8%AF%BB/"/>
    
    
      <category term="宋词词论" scheme="http://yoursite.com/tags/%E5%AE%8B%E8%AF%8D%E8%AF%8D%E8%AE%BA/"/>
    
  </entry>
  
  <entry>
    <title>QiXi（七夕）：一些诗句</title>
    <link href="http://yoursite.com/2019/08/09/QiXi%EF%BC%9A%E4%B8%80%E4%BA%9B%E8%AF%97%E5%8F%A5/"/>
    <id>http://yoursite.com/2019/08/09/QiXi：一些诗句/</id>
    <published>2019-08-09T14:05:33.000Z</published>
    <updated>2020-04-18T16:36:44.726Z</updated>
    
    <content type="html"><![CDATA[<p><img src="qixi.jpg" alt="That girl"></p><p><em>I thought I would be the last <u>shadow</u> in your eyes.</em></p><p>一眼认定你，余生皆是你。</p><p><em>Between the moon and the snow, <u>lies</u> the beauty of you.</em></p><p>月色与雪色之间，你是第三种绝色。</p><p><em>My heart is <u>busy</u>  beating for you.</em></p><p>因为你，我的心脏总是忙个不停。</p><p><em>I was determed to <u>travel</u> all over the world until I met you.</em></p><p>我本来是要行走江湖的，但是遇到你，我觉得可以先停一停。</p><p><em>Repost the phrase “<u>lucky dog</u>”， and you‘ll be in a relationship.</em></p><p>转发“幸运儿“这个短语，你就会脱单。</p><p><em>Nothing important <u>lingered</u> in my mind until you appeared.</em></p><p>在你之前，我没有一件像样的心事。</p><p><em>“You are the lovelist”, said I by <u>impulse</u>, and I said again upon consideration.</em></p><p>“你最可爱”，我说时来不及思索，而思索之后，还是这样说。</p><p><em>I have written you name with every <u>pen</u> of mine.</em></p><p>我的每一支笔都知道你的名字。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;&lt;img src=&quot;qixi.jpg&quot; alt=&quot;That girl&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;I thought I would be the last &lt;u&gt;shadow&lt;/u&gt; in your eyes.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;一眼认定你，余生皆是你。&lt;/p&gt;
&lt;p
      
    
    </summary>
    
      <category term="文学阅读" scheme="http://yoursite.com/categories/%E6%96%87%E5%AD%A6%E9%98%85%E8%AF%BB/"/>
    
    
      <category term="七夕" scheme="http://yoursite.com/tags/%E4%B8%83%E5%A4%95/"/>
    
      <category term="文学摘抄" scheme="http://yoursite.com/tags/%E6%96%87%E5%AD%A6%E6%91%98%E6%8A%84/"/>
    
  </entry>
  
  <entry>
    <title>Annie主题使用Hexo-Tag-Plugins</title>
    <link href="http://yoursite.com/2019/04/30/Annie%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8Hexo-Tag-Plugins/"/>
    <id>http://yoursite.com/2019/04/30/Annie主题使用Hexo-Tag-Plugins/</id>
    <published>2019-04-30T15:28:29.000Z</published>
    <updated>2019-05-01T09:11:17.050Z</updated>
    
    <content type="html"><![CDATA[<h3 id="一、块引用Block-Quote-tag"><a href="#一、块引用Block-Quote-tag" class="headerlink" title="一、块引用Block Quote tag"></a>一、块引用Block Quote tag</h3><p>语法</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% blockquote [author[, source]] [link] [source<span class="emphasis">_link_</span>title] %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endblockquote %&#125;</span><br></pre></td></tr></table></figure><h4 id="1-1普通的引用"><a href="#1-1普通的引用" class="headerlink" title="1.1普通的引用"></a>1.1普通的引用</h4><ol><li>例子</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% blockquote %&#125;</span><br><span class="line">这是一个普通的引用！</span><br><span class="line">我說不清楚爲什麽，你遇見過千百個人，而他們隻不過是匆匆過客。</span><br><span class="line">&#123;% endblockquote %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>输出</li></ol><blockquote><p>这是一个普通的引用！</p><p>我說不清楚爲什麽，你遇見過千百個人，而他們隻不過是匆匆過客。</p></blockquote><h4 id="1-2书上句子的引用"><a href="#1-2书上句子的引用" class="headerlink" title="1.2书上句子的引用"></a>1.2书上句子的引用</h4><ol><li>例子</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% blockquote 崔护, 《唐诗鉴赏辞典》 %&#125;</span><br><span class="line">这是一个书上句子的引用！</span><br><span class="line">人面不知何处去，桃花依旧笑春风。</span><br><span class="line">&#123;% endblockquote %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>输出</li></ol><blockquote><p>这是一个书上句子的引用！</p><p>人面不知何处去，桃花依旧笑春风。</p><footer><strong>崔护</strong><cite>《唐诗鉴赏辞典》</cite></footer></blockquote><h4 id="1-3Twitter的引用"><a href="#1-3Twitter的引用" class="headerlink" title="1.3Twitter的引用"></a>1.3Twitter的引用</h4><ol><li>例子</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %&#125;</span><br><span class="line">这是一个Twitter的引用！ </span><br><span class="line">NEW: DevDocs now comes with syntax highlighting. http://devdocs.io</span><br><span class="line">&#123;% endblockquote %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>输出</li></ol><blockquote><p>这是一个Twitter的引用！</p><p>NEW: DevDocs now comes with syntax highlighting.</p><footer><strong>@DevDocs</strong><cite><a href="https://twitter.com/devdocs/status/356095192085962752" target="_blank" rel="noopener">twitter.com/devdocs/status/356095192085962752</a></cite></footer></blockquote><h4 id="1-4网络文章的引用"><a href="#1-4网络文章的引用" class="headerlink" title="1.4网络文章的引用"></a>1.4网络文章的引用</h4><ol><li>例子</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %&#125;</span><br><span class="line">这是一个网络文章的引用！</span><br><span class="line">Every interaction is both precious and an opportunity to delight.</span><br><span class="line">&#123;% endblockquote %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>输出</li></ol><blockquote><p>这是一个网络文章的引用！</p><p>Every interaction is both precious and an opportunity to delight.</p><footer><strong>Seth Godin</strong><cite><a href="http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html" target="_blank" rel="noopener">Welcome to Island Marketing</a></cite></footer></blockquote><h3 id="二、信息提示Color-Quote-tag"><a href="#二、信息提示Color-Quote-tag" class="headerlink" title="二、信息提示Color Quote tag"></a>二、信息提示Color Quote tag</h3><p>语法</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123; colorquote [type] %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endcolorquote %&#125;</span><br></pre></td></tr></table></figure><h4 id="2-1普通信息"><a href="#2-1普通信息" class="headerlink" title="2.1普通信息"></a>2.1普通信息</h4><ol><li>例子</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% colorquote info %&#125;</span><br><span class="line">这是一条普通信息!</span><br><span class="line">&#123;% endcolorquote %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>输出</li></ol><blockquote class="colorquote info"><p>这是一条普通信息!</p></blockquote><h4 id="2-2成功信息"><a href="#2-2成功信息" class="headerlink" title="2.2成功信息"></a>2.2成功信息</h4><ol><li>例子</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% colorquote success %&#125;</span><br><span class="line">这是一条成功信息!</span><br><span class="line">&#123;% endcolorquote %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>输出</li></ol><blockquote class="colorquote success"><p>这是一条成功信息!</p></blockquote><h4 id="2-3警告信息"><a href="#2-3警告信息" class="headerlink" title="2.3警告信息"></a>2.3警告信息</h4><ol><li>例子</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% colorquote warning %&#125;</span><br><span class="line">这是一条警告信息!</span><br><span class="line">&#123;% endcolorquote %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>输出</li></ol><blockquote class="colorquote warning"><p>这是一条警告信息!</p></blockquote><h4 id="2-4危险信息"><a href="#2-4危险信息" class="headerlink" title="2.4危险信息"></a>2.4危险信息</h4><ol><li>例子</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% colorquote danger %&#125;</span><br><span class="line">这是一条危险信息!</span><br><span class="line">&#123;% endcolorquote %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>输出</li></ol><blockquote class="colorquote danger"><p>这是一条危险信息!</p></blockquote><h3 id="三、代码块Code-Block-tag"><a href="#三、代码块Code-Block-tag" class="headerlink" title="三、代码块Code Block tag"></a>三、代码块Code Block tag</h3><ol><li>语法1</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% codeblock [title] [lang:language] [url] [link text] %&#125;</span><br><span class="line">code snippetmar</span><br><span class="line">&#123;% endcodeblock %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>语法2</li></ol><p>使用三个反引号来包裹代码块。</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">三个反引号 language url code snippet </span><br><span class="line">code snippetmar</span><br><span class="line">三个反引号</span><br></pre></td></tr></table></figure><h4 id="3-1普通代码块"><a href="#3-1普通代码块" class="headerlink" title="3.1普通代码块"></a>3.1普通代码块</h4><ol><li>例子</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% codeblock %&#125;</span><br><span class="line">alert('Hello World!');</span><br><span class="line">&#123;% endcodeblock %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>输出</li></ol><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">alert(&apos;Hello World!&apos;);</span><br></pre></td></tr></table></figure><h4 id="3-2指定语言的代码块"><a href="#3-2指定语言的代码块" class="headerlink" title="3.2指定语言的代码块"></a>3.2指定语言的代码块</h4><ol><li>例子</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% codeblock lang:objc %&#125;</span><br><span class="line">[rectangle setX: 10 y: 10 width: 20 height: 20];</span><br><span class="line">&#123;% endcodeblock %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>输出</li></ol><figure class="highlight objc"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[rectangle setX: <span class="number">10</span> y: <span class="number">10</span> width: <span class="number">20</span> height: <span class="number">20</span>];</span><br></pre></td></tr></table></figure><h4 id="3-3带附加说明的代码块"><a href="#3-3带附加说明的代码块" class="headerlink" title="3.3带附加说明的代码块"></a>3.3带附加说明的代码块</h4><ol><li>例子</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% codeblock Array.map %&#125;</span><br><span class="line">array.map(callback[, thisArg])</span><br><span class="line">&#123;% endcodeblock %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>输出</li></ol><figure class="highlight plain"><figcaption><span>Array.map</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">array.map(callback[, thisArg])</span><br></pre></td></tr></table></figure><h4 id="3-4带附加说明和网址的代码块"><a href="#3-4带附加说明和网址的代码块" class="headerlink" title="3.4带附加说明和网址的代码块"></a>3.4带附加说明和网址的代码块</h4><ol><li>例子</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% codeblock _.compact http://underscorejs.org/#compact Underscore.js %&#125;</span><br><span class="line">_.compact([0, 1, false, 2, '', 3]);</span><br><span class="line">=&gt; [1, 2, 3]</span><br><span class="line">&#123;% endcodeblock %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>输出</li></ol><figure class="highlight plain"><figcaption><span>_.compact</span><a href="http://underscorejs.org/#compact" target="_blank" rel="noopener">Underscore.js</a></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">_.compact([0, 1, false, 2, &apos;&apos;, 3]);</span><br><span class="line">=&gt; [1, 2, 3]</span><br></pre></td></tr></table></figure><h3 id="四、其他标签Other-tags"><a href="#四、其他标签Other-tags" class="headerlink" title="四、其他标签Other tags"></a>四、其他标签Other tags</h3><p>见于<a href="<https://hexo.io/zh-cn/docs/tag-plugins>">hexo标签插件</a></p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;h3 id=&quot;一、块引用Block-Quote-tag&quot;&gt;&lt;a href=&quot;#一、块引用Block-Quote-tag&quot; class=&quot;headerlink&quot; title=&quot;一、块引用Block Quote tag&quot;&gt;&lt;/a&gt;一、块引用Block Quote tag&lt;/h3&gt;&lt;
      
    
    </summary>
    
      <category term="HEXO博客" scheme="http://yoursite.com/categories/HEXO%E5%8D%9A%E5%AE%A2/"/>
    
    
      <category term="说明" scheme="http://yoursite.com/tags/%E8%AF%B4%E6%98%8E/"/>
    
  </entry>
  
  <entry>
    <title>webpack网站开发入门</title>
    <link href="http://yoursite.com/2019/04/12/webpack%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91%E5%85%A5%E9%97%A8/"/>
    <id>http://yoursite.com/2019/04/12/webpack网站开发入门/</id>
    <published>2019-04-12T14:30:58.000Z</published>
    <updated>2019-04-28T10:40:23.613Z</updated>
    
    <content type="html"><![CDATA[<h1 id="预先准备"><a href="#预先准备" class="headerlink" title="预先准备"></a>预先准备</h1><p><strong>安装node.js：</strong>项目开始之前，确保安装了<a href="https://nodejs.org/en/" target="_blank" rel="noopener">nodejs</a>工具。原则上，你应使用最新的稳定版本（LTS），点击<u>LTS的下载按钮</u>即可。</p><p><strong>开发工具：</strong>Sublime Text 3，Visual Studio Code， Atom，Hbuilder。选择任意一款工具即可，你也可以使用普通的文本编辑器。</p><p><strong>实验环境：</strong></p><table><thead><tr><th style="text-align:center">序号</th><th style="text-align:left">名称</th><th style="text-align:left">说明</th></tr></thead><tbody><tr><td style="text-align:center">1</td><td style="text-align:left">操作系统</td><td style="text-align:left">Window 10</td></tr><tr><td style="text-align:center">2</td><td style="text-align:left">nodejs版本</td><td style="text-align:left">10.15.3 LTS</td></tr><tr><td style="text-align:center">3</td><td style="text-align:left">开发工具</td><td style="text-align:left">Hbuilder</td></tr></tbody></table><h1 id="概念简析"><a href="#概念简析" class="headerlink" title="概念简析"></a>概念简析</h1><p>webpack是一个JavaScript应用程序的静态模块打包工具，其工作时，html、js、css、image、font等文件被视为资源，每个资源文件被视为一个模块，webpack根据各模块之间的直接或间接依赖关系构建出一个<u>依赖图</u>，最后根据依赖图进行项目文件的打包。</p><p>webpack的核心概念有entry、output、loader、plugin、mode等，这些概念的简要说明如下表：</p><table><thead><tr><th style="text-align:left">名称</th><th style="text-align:left">解释</th><th style="text-align:left">说明</th></tr></thead><tbody><tr><td style="text-align:left">entry</td><td style="text-align:left">入口</td><td style="text-align:left"><strong>入口起点(entry point)</strong>指示 webpack 应该使用哪个模块，来作为构建其内部<u>依赖图</u>的开始。进入入口起点后，webpack 会找出与入口起点有直接或间接依赖关系的所有模块（库）。</td></tr><tr><td style="text-align:left">output</td><td style="text-align:left">输出</td><td style="text-align:left"><strong>output</strong> 属性告诉 webpack 在哪里输出它所创建的 <em>bundle</em>，以及如何命名这些文件。</td></tr><tr><td style="text-align:left">loader</td><td style="text-align:left">加载器</td><td style="text-align:left">webpack 只能理解 JavaScript 和 JSON 文件。<strong>loader</strong> 让 webpack 能够处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用。</td></tr><tr><td style="text-align:left">plugin</td><td style="text-align:left">插件</td><td style="text-align:left">loader 用于转换某些类型的模块，而<strong>plugin</strong>可以用于执行范围更广的任务，包括：打包优化，资源管理，注入环境变量。</td></tr><tr><td style="text-align:left">mode</td><td style="text-align:left">模式</td><td style="text-align:left">设置<strong>mode</strong>参数，以启用webpack在相应环境下的优化处理。其中，参数值为development、production或none。</td></tr></tbody></table><p>你可以通过配置文件webpack.config.js来配置所有的参数。配置文件实例：</p><figure class="highlight js"><figcaption><span>webpack.config.js</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="keyword">const</span> htmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> cleanWebpackPlugin = <span class="built_in">require</span>(<span class="string">'clean-webpack-plugin'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//定义文件夹路径</span></span><br><span class="line"><span class="keyword">const</span> ROOT_PATH = path.resolve(__dirname);</span><br><span class="line"><span class="keyword">const</span> SRC_PATH = path.resolve(ROOT_PATH, <span class="string">'src'</span>);</span><br><span class="line"><span class="keyword">const</span> DIST_PATH = path.resolve(ROOT_PATH, <span class="string">'dist'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    optimization: &#123;</span><br><span class="line"><span class="comment">//初始化  </span></span><br><span class="line">    &#125;,</span><br><span class="line">    entry: &#123;</span><br><span class="line">    <span class="comment">//入口</span></span><br><span class="line">    &#125;,</span><br><span class="line">    output: &#123;</span><br><span class="line"><span class="comment">//输出</span></span><br><span class="line">    &#125;,</span><br><span class="line">    mode: <span class="string">'development'</span>,<span class="comment">//模式</span></span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line"><span class="comment">//加载器</span></span><br><span class="line">    &#125;,  </span><br><span class="line">    plugins: [</span><br><span class="line"><span class="comment">//插件</span></span><br><span class="line">    ],</span><br><span class="line">    devServer: &#123;</span><br><span class="line">        contentBase: DIST_PATH,</span><br><span class="line">        historyApiFallback: <span class="literal">true</span>,</span><br><span class="line">        hot: <span class="literal">true</span>,</span><br><span class="line">        inline: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h1 id="安装webpack"><a href="#安装webpack" class="headerlink" title="安装webpack"></a>安装webpack</h1><p>新建一个项目目录，进入该目录，初始化npm。在本地安装webpack（即在该目录下安装，删除该目录后，安装的webpack便不再存在），安装webpack-cli：</p><figure class="highlight bash"><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">mkdir webpack-demo  </span><br><span class="line"><span class="built_in">cd</span> webpack-demo</span><br><span class="line">npm init -y</span><br><span class="line">npm install webpack webpack-cli --save-dev</span><br></pre></td></tr></table></figure><h1 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h1><p>安装生产环境依赖</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install jquery --save</span><br></pre></td></tr></table></figure><p>安装开发环境依赖</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack-dev-server --save-dev</span><br></pre></td></tr></table></figure><blockquote><p>安装一个 package时，若此 package 要打包到生产环境 bundle 中，你应该使用 <code>npm install --save</code>。若此 package 只用于开发环境中时（例如linter、 测试等开发过程），你应该使用 <code>npm install --save-dev</code>。</p></blockquote><table><thead><tr><th style="text-align:left">依赖</th><th style="text-align:left">说明</th></tr></thead><tbody><tr><td style="text-align:left">jquery</td><td style="text-align:left">提供jquery函数库</td></tr><tr><td style="text-align:left">webpack-dev-server</td><td style="text-align:left">提供web server，提供 live reloading(实时重新加载) 功能，包括自动刷新浏览器页面。</td></tr></tbody></table><p>此时的package.json，及各依赖的版本</p><figure class="highlight json"><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></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"webpack-demo"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span>,</span><br><span class="line">    <span class="attr">"start"</span>: <span class="string">"webpack --config webpack.config.js"</span>,</span><br><span class="line"><span class="attr">"dev"</span>: <span class="string">"webpack-dev-server"</span>,</span><br><span class="line"><span class="attr">"build"</span>: <span class="string">"webpack"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"devDependencies"</span>: &#123;</span><br><span class="line">    <span class="attr">"webpack"</span>: <span class="string">"^4.30.0"</span>,</span><br><span class="line">    <span class="attr">"webpack-cli"</span>: <span class="string">"^3.3.0"</span>,</span><br><span class="line">    <span class="attr">"webpack-dev-server"</span>: <span class="string">"^3.3.1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">    <span class="attr">"jquery"</span>: <span class="string">"^3.4.0"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="完善项目目录"><a href="#完善项目目录" class="headerlink" title="完善项目目录"></a>完善项目目录</h1><p>在webpack-demo 目录下新建dist、src目录，webpack.config.js等文件</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></pre></td><td class="code"><pre><span class="line">webpack-demo</span><br><span class="line">dist</span><br><span class="line">    index.html</span><br><span class="line">src</span><br><span class="line">index.js</span><br><span class="line">webpack.config.js</span><br></pre></td></tr></table></figure><p><strong>新建文件index.html</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!doctype html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>webpack-demo<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"app.bundle.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>新建文件index.js</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">'jquery'</span>;</span><br><span class="line">$(<span class="string">'body'</span>).append(<span class="string">'Hello webpack-demo!'</span>);</span><br></pre></td></tr></table></figure><p><strong>新建文件webpack.config.js</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//定义文件夹路径</span></span><br><span class="line"><span class="keyword">const</span> ROOT_PATH = path.resolve(__dirname);</span><br><span class="line"><span class="keyword">const</span> SRC_PATH = path.resolve(ROOT_PATH, <span class="string">'src'</span>);</span><br><span class="line"><span class="keyword">const</span> DIST_PATH = path.resolve(ROOT_PATH, <span class="string">'dist'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    optimization: &#123;</span><br><span class="line">        concatenateModules: <span class="literal">false</span>     </span><br><span class="line">    &#125;,</span><br><span class="line">    entry: &#123;</span><br><span class="line">        app: SRC_PATH + <span class="string">'/index.js'</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: DIST_PATH,</span><br><span class="line">        filename: <span class="string">'[name].bundle.js'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    devServer: &#123;</span><br><span class="line">        contentBase: DIST_PATH,</span><br><span class="line">        port: <span class="number">9800</span>,</span><br><span class="line">        host: <span class="string">"localhost"</span>,</span><br><span class="line">        historyApiFallback: <span class="literal">true</span>,</span><br><span class="line">        hot: <span class="literal">true</span>,</span><br><span class="line">        inline: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p><strong>添加npm自定义命令</strong></p><p>打开package.json文件，修改scripts部分</p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"> "scripts": &#123;</span><br><span class="line">   "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",</span><br><span class="line">   "start": "webpack --config webpack.config.js",</span><br><span class="line">"dev": "webpack-dev-server",</span><br><span class="line">"build": "webpack"</span><br><span class="line"> &#125;,</span><br></pre></td></tr></table></figure><p>之后，你可以使用以下命令</p><figure class="highlight bash"><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">npm run <span class="built_in">test</span></span><br><span class="line">npm run start</span><br><span class="line">npm run dev</span><br><span class="line">npm run build</span><br></pre></td></tr></table></figure><h1 id="运行项目"><a href="#运行项目" class="headerlink" title="运行项目"></a>运行项目</h1><p><strong>启动实时服务器dev-server</strong></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dev</span><br></pre></td></tr></table></figure><p>此时命令行窗口的输出应该如下</p><figure class="highlight bash"><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></pre></td><td class="code"><pre><span class="line">$ npm run dev</span><br><span class="line"></span><br><span class="line">&gt; webpack-demo@1.0.0 dev C:\Users\水煮鱼肠面\Desktop\webpack-demo</span><br><span class="line">&gt; webpack-dev-server</span><br><span class="line"></span><br><span class="line">i ｢wds｣: Project is running at http://localhost:9800/</span><br><span class="line"></span><br><span class="line">......</span><br><span class="line"></span><br><span class="line">Built at: 2019-04-13 23:14:57</span><br><span class="line">        Asset     Size  Chunks             Chunk Names</span><br><span class="line">app.bundle.js  687 KiB     app  [emitted]  app</span><br><span class="line">Entrypoint app = app.bundle.js</span><br><span class="line"></span><br><span class="line">......</span><br><span class="line"></span><br><span class="line">    + 14 hidden modules</span><br><span class="line">i ｢wdm｣: Compiled successfully.</span><br></pre></td></tr></table></figure><p>你应该关注此条输出</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+ i ｢wds｣: Project is running at http://localhost:9800/</span></span><br></pre></td></tr></table></figure><p>在浏览器中打开<u>localhost:9800</u>，你应该看到<u>Hello webpack-demo!</u></p><p><strong>测试实时服务器dev-server</strong></p><p>修改index.js</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">'jquery'</span>;</span><br><span class="line">$(<span class="string">'body'</span>).append(<span class="string">'Hello webpack-demo!'</span>);</span><br><span class="line">$(<span class="string">'body'</span>).append(<span class="string">'&lt;br/&gt;'</span>);</span><br><span class="line">$(<span class="string">'body'</span>).append(<span class="string">'Test dev-server!'</span>);</span><br></pre></td></tr></table></figure><p>保存后，浏览器内的页面将自动刷新！</p><h1 id="打包项目文件"><a href="#打包项目文件" class="headerlink" title="打包项目文件"></a>打包项目文件</h1><p>此时打开dist目录，你将发现index.html中引用的<strong>app.bundle.js</strong>并不存在！其实未编译打包项目前，app.bundle.js只存在于dev-server的内存中。</p><p><strong>运行命令，打包项目</strong></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure><p>此时命令行窗口的输出应该如下，dist目录下将生成app.bundle.js文件</p><figure class="highlight bash"><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">$ npm run build</span><br><span class="line"></span><br><span class="line">&gt; webpack-demo@1.0.0 build C:\Users\水煮鱼肠面\Desktop\webpack-demo</span><br><span class="line">&gt; webpack</span><br><span class="line"></span><br><span class="line">Hash: a2dd1fb50e1fd723cb1c</span><br><span class="line">Version: webpack 4.30.0</span><br><span class="line">Time: 986ms</span><br><span class="line">Built at: 2019-04-13 23:57:05</span><br><span class="line">        Asset     Size  Chunks             Chunk Names</span><br><span class="line">app.bundle.js  314 KiB     app  [emitted]  app</span><br><span class="line">Entrypoint app = app.bundle.js</span><br><span class="line">[./src/index.js] 132 bytes &#123;app&#125; [built]</span><br><span class="line">    + 1 hidden module</span><br></pre></td></tr></table></figure><h1 id="问题记录"><a href="#问题记录" class="headerlink" title="问题记录"></a>问题记录</h1><table><thead><tr><th style="text-align:center">序号</th><th style="text-align:left">问题</th><th>解决方法</th></tr></thead><tbody><tr><td style="text-align:center">1</td><td style="text-align:left">启动实时服务器dev-server，并打开localhost:9800/页面，浏览器页面空白。再打开浏览器console，将发现错误提示： <code>Uncaught TypeError: Cannot read property &#39;call&#39; of undefined</code></td><td>安装最新版本的webpack(&gt;=4.30.0）</td></tr><tr><td style="text-align:center">2</td><td style="text-align:left">安装依赖的过程中报错</td><td>检查网络状况、检查命令是否正确……</td></tr></tbody></table><p>问题1的<a href="https://github.com/webpack/webpack/issues/8996" target="_blank" rel="noopener">项目issue8996</a></p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;h1 id=&quot;预先准备&quot;&gt;&lt;a href=&quot;#预先准备&quot; class=&quot;headerlink&quot; title=&quot;预先准备&quot;&gt;&lt;/a&gt;预先准备&lt;/h1&gt;&lt;p&gt;&lt;strong&gt;安装node.js：&lt;/strong&gt;项目开始之前，确保安装了&lt;a href=&quot;https://nodejs
      
    
    </summary>
    
      <category term="前端学习" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/"/>
    
    
      <category term="开发实践" scheme="http://yoursite.com/tags/%E5%BC%80%E5%8F%91%E5%AE%9E%E8%B7%B5/"/>
    
      <category term="webpack" scheme="http://yoursite.com/tags/webpack/"/>
    
  </entry>
  
  <entry>
    <title>相册主题Dream介绍</title>
    <link href="http://yoursite.com/2019/03/12/%E7%9B%B8%E5%86%8C%E4%B8%BB%E9%A2%98Dream%E4%BB%8B%E7%BB%8D/"/>
    <id>http://yoursite.com/2019/03/12/相册主题Dream介绍/</id>
    <published>2019-03-12T06:54:15.000Z</published>
    <updated>2019-04-16T11:17:25.133Z</updated>
    
    <content type="html"><![CDATA[<p>新的HEXO主题，主要用于建立<strong>相册博客</strong>。目前已完成主页、归档页、标签页、分类页等常用页面，主题支持搜索、点赞、浏览人数统计、评论、分享、图片打包下载、图片fancybox浏览。主题演示站点：<a href="http://gallery.sariay.me/" target="_blank" rel="noopener">PREVIEW</a></p><p><img src="SARIAY-gallery2.jpg" alt="相册主页"></p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;新的HEXO主题，主要用于建立&lt;strong&gt;相册博客&lt;/strong&gt;。目前已完成主页、归档页、标签页、分类页等常用页面，主题支持搜索、点赞、浏览人数统计、评论、分享、图片打包下载、图片fancybox浏览。主题演示站点：&lt;a href=&quot;http://gallery.s
      
    
    </summary>
    
      <category term="HEXO博客" scheme="http://yoursite.com/categories/HEXO%E5%8D%9A%E5%AE%A2/"/>
    
    
      <category term="说明" scheme="http://yoursite.com/tags/%E8%AF%B4%E6%98%8E/"/>
    
      <category term="相册" scheme="http://yoursite.com/tags/%E7%9B%B8%E5%86%8C/"/>
    
      <category term="主题" scheme="http://yoursite.com/tags/%E4%B8%BB%E9%A2%98/"/>
    
  </entry>
  
  <entry>
    <title>《人间失格》抄录1</title>
    <link href="http://yoursite.com/2019/02/26/%E3%80%8A%E4%BA%BA%E9%97%B4%E5%A4%B1%E6%A0%BC%E3%80%8B%E6%8A%84%E5%BD%951/"/>
    <id>http://yoursite.com/2019/02/26/《人间失格》抄录1/</id>
    <published>2019-02-26T13:40:34.000Z</published>
    <updated>2020-04-18T16:39:37.424Z</updated>
    
    <content type="html"><![CDATA[<blockquote class="colorquote info"><p>手记之三 1</p></blockquote><p>竹一的两大预言，兑现了一个，落空了一个。“被女人迷恋上“这一并不光彩的预言化作了现实，而”肯定会成为一个伟大的画家“的这一祝福性的预言却归于泡影。</p><p>我仅仅当上了给粗俗杂志投稿的无名的蹩脚漫画家而已。</p><p>由于镰仓的殉情自杀事件，我遭到了学校的除名。于是，我不得不在“比目鱼“家二楼上一间三铺席大的房子里起居生活。每月从家里寄来极少金额的一点钱，并且不是直接寄给我，而是悄悄寄到“比目鱼”这儿来的。（好像是老家的哥哥们瞒着父亲寄来的）。除此之外，我与老家之间便被断绝了所有联系。而“比目鱼”也总是老大不高兴的样子，无论我怎样对着他讨好地笑，他也一笑也不笑，使我不得不怀疑：人怎么能如此轻易地变得面目全非呢？这令我感到可耻，不，毋宁说是滑稽。“比目鱼”一改过去的殷勤，只是对我反复絮叨着这样一句话：</p><p>“不准出去。总之，请你不要出去。”</p><p>看来，“比目鱼”认为我有自杀的嫌疑，换言之，存在着我跟随女人再度跳进大海的危险性，所以对我的外出严加禁止。我既不能喝酒，也不能抽烟，而只能从早到晚地蛰伏在二楼三铺席房间的被炉里翻一翻旧杂志，过着傻瓜一样的生活，甚至于连自杀的力气也丧失殆尽了。</p><p>“比目鱼”的家位于大久保医专的附近，尽管招牌上堂而皇之地写着“书画古董商”、“青龙园”等等，可毕竟只占了这一栋房子两家住户中的一户。而且，店铺的门面也相当狭窄，店内落满了尘埃，堆放着很多的破烂货（本来“比目鱼”就不是靠着店里的破烂货在做生意，而是大肆活动于另一些场合，比如将某个所谓老板的珍藏品的所有权出让给另一个所谓的“老板”从中渔利）。他几乎从不呆坐在店里，而一清晨就扳起个脸，急匆匆地走出店门去了，只留下一个十七八岁的小伙计守店。当然他也是负责看守我的人了。一有闲工夫，他就跑到外面去，和邻近的孩子一起玩投球游戏，俨然把我这个二楼上的食客当作了傻瓜或是疯子，甚至有时像大人一样对我说教。这小伙计是涩田的私生子，只是其间有一些蹊跷的内幕，使得涩田和他没有父子相称。而且，涩田一直独身未娶，似乎与此也不无关系。我记得过去也从自己家里人那儿听到过一些有关的传闻，但我对别人的事情本来就没有太大的兴趣，所以对其中的详情一概不知。但那小伙计的眼神确实让人联想起那些鱼的眼睛来，所以，或许真的是“比目鱼”的私生子……倘若果然如此，他们俩倒也的确算得上一对凄凉的父子。夜深人静之时，他们常常瞒着二楼的我，一声不响地偷吃荞麦面什么的。</p><p>在“比目鱼”家里，一直是由这个小伙计负责主厨的。我这个二楼的食客的饭菜，通常是由小伙计盛在托盘里送上来，而“比目鱼”和小伙计则在楼下四铺半席大的饮湿房间里匆匆忙忙地用餐，还一边把碗碟鼓捣得嗑嚓作响。</p><p>在三月末的一个黄昏，或许是“比目鱼”找到了什么意料之外的赚钱门道，抑或是他另有计谋（即使这两种推测都没有错，至少也还有我等之辈无法推测的种种琐屑的原因吧），他破例把我叫到了楼下的餐桌旁。桌子上竟然很罕见地摆放着酒壶和生鱼片，而且那个生鱼片也不是廉价的比目鱼，而是昂贵的金枪鱼。就连款待我的主人家也大受感动，赞叹不已，甚至还向我这个茫然不知所措的食客劝了点酒。</p><p>“你究竟打算怎么办呢，这以后？”我没有回答，只是从桌子上的盘子里夹起了一块干沙丁鱼片看着那小鱼身上银白色的眼珠子，酒劲便渐渐上来了。我开始怀念起那些四处乱转的时光，还有掘木。我是那么痛切地渴望起“自由”来了，以致差点脆弱得掩面哭泣。</p><p>我搬进这个家以后，甚至于丧失了逗笑的欲望，只是任凭自己置身于“比目鱼”和小伙计的蔑视之中。“比目鱼”似乎也竭力避免与我进行推心置腹的长谈，而我自己也无意跟在他后面向他诉说衷肠，所以我几乎完全变成了一个湿乎乎的食客。</p><p>“所谓缓期起诉，今后是不会变成一个人的前科的。所以就单凭你自己的决心就可以获得新生。若是你想洗心革面，正经八百地征求我的意见，那我自会加以考虑的。”</p><p>“比目鱼”的说法，不，世上所有人的说法，总是显得转弯抹角，含糊不清，其中有一种试图逃避责任似的微妙性和复杂性。对于他们那种近于徒劳无益的严加防范的心理和无数小小的计谋，我总是感到困惑不已，最后只得听之任之，随他而去。要么我以滑稽的玩笑来敷衍塞责，要么我用无言的首肯来得过且过，总之，我采取的是一种败北者的消极态度。</p><p>多年以后我才知道，其实当时要是“比目鱼”像下面这样简明扼要地告诉我，事情就会是另一个样子，可是……我为“比目鱼”多此一举的用心，不，为世人那不可理喻的虚荣心和面子观念，感到万般的凄凉和阴郁。</p><p>“比目鱼”当时要是那么直截了当地告诉我就好了：</p><p>“不管似乎官立学校还是私立学校，反正从四月开始，你得进一所学校。只要你肯进学校读书，老家就会寄来更充裕的生活费。”</p><p>后来我才了解到，事实上，当时情况就是这样。那样说的话，我是会言听计从的吧。但是，由于“比目鱼”那种过分小心翼翼、过分转弯抹角的说法，我反倒闹起了别扭，以致于我的生活方向也完全改变了。</p><p>“如果你没有诚心了来征求我的意见，那我就无可奈何了。”</p><p>“征求什么意见？”我就像丈二和尚一样摸不到头脑。</p><p>“关于你心中想的一些事情罢了。”</p><p>“比如说？”</p><p>“比如，你自己打算今后怎么办？”</p><p>“还是找点活儿来干好吧？”</p><p>“不，我是问你自己究竟是怎么想的？”</p><p>“不过，即使我想进学校，也……”</p><p>“那也需要钱。但问题不在钱上，而在于你的想法。”</p><p>他为什么不挑明说一句“老家会寄钱过来”呢？仅此一句话，我就会下定决心的。可现在我却坠入了云里雾中。</p><p>“怎么样？你对未来是否抱有希望之类的东西呢？照顾一个人有多难，这是受人照顾者所无法体会的。”</p><p>“对不起您。”</p><p>“这确实让我担心呐。我既然答应了照顾你，也就不希望你半途而废。我希望你拿出决心来，走上一条重新做人的道路。至于你将来的打算，如果你诚心诚意地告诉我征求我的意见，我是愿意与你一起商量着办的。当然，我“比目鱼”是个穷光蛋，但还是愿意资助你的。可是，如果你还奢望过从前那种阔绰的生活，那就大错特错了。不过，要是你的想法切实可行，明确地制定出了将来的方针，并愿意与我商量，那我会不厌其烦地帮助你获得新生。你明白吗？我的这种心情？你究竟以后打算怎么办？”　</p><p>“如果您真的不愿意收留我，我就出去找点活儿来干干……”</p><p>“你是真心那么说的吗？在如今这个世上，就算是帝国大学的毕业生也还……”</p><p>“不，我又不是去做什么白领阶层。”</p><p>“那做什么呢？”</p><p>“当画家。”我狠狠心说了出来。</p><p>“嘿？！”</p><p>我无法忘记当时“比目鱼”缩着脖子嗤笑的狡猾面影。那嗤笑的面影里潜藏着一种近于轻蔑却又不同于轻蔑的东西。倘若把人世间比作一片大海，那么，在大海的万丈深渊里就分明曳动着那种奇妙的影子。我正是透过那种嗤笑，管窥了成年人生活的深层奥秘。最后他说道：“想当画家的想法真是太荒唐了，你在情绪上一点也不稳定。你再考虑考虑吧，今天晚上你就好好地考虑一晚上吧。”被他这样一说，我就像是被人追撵着似的赶紧爬上了二楼。无论怎样辗转反侧地思考，也想不出什么别的主意。再过了一阵子，天破晓了。黎明时分，我从“比目鱼”家逃了出来。</p><p>“傍晚时分我肯定回来，关于将来的打算，我这就去找下面所记的一位朋友商量，所以，请您不必为我担心。真的。”</p><p>我用铅笔在便筏上写了上面的一番话。然后，又记下了浅草掘木正雄的住址和姓名，悄悄溜出了“比目鱼”家。</p><p>我并不是因为讨厌“比目鱼”的说教才偷跑出来的。正如“比目鱼”所说的那样，我是一个情绪不稳定的男人。对于将来的打算，我一无所知，而且，如果一直呆在“比目鱼”家当食客的话，未免又对不起“比目鱼”。即使我想发奋图强，立下宏志，可一想到自己每个月都得从并不富裕的“比目鱼”那儿接受经济上的援助，不禁顿时黯然神伤，痛苦不堪。</p><p>不过，我并不是真的想去找掘木商量什么“将来的打算”才逃离“比目鱼”家的。哪怕是片刻也好，我希望能先让“比目鱼”放下心来（而在他宽心的这段时间里，我便可以逃得再远一点，正是出于这种侦探小说式的策略，我才写下了那张留言条。不，不对，尽管不无这种心理，但更准确的说法是：我害怕自己冷不防代给“比目鱼”太大的打击，使他惊惶失措。尽管事情的真相迟早是要败露的，但我还是惧怕直截了当地说出来。因而必要进行某种掩饰。这正是我可悲的性格之一，尽管它与世人斥之为“撒谎”而百般鄙弃的性格颇为相似，但我却从来也没有为了牟取私利而那么做，我只是对那种气氛的骤然变化所造成的扫兴感到一种窒息感的恐惧，所以，即使明知事后对自己不利，也必定会进行那种拼死拼活的服务。纵然这种“服务”是一种被扭曲了的、微不足道而又愚蠢至极的东西，但恰恰是出于这种为人“服务”的心理，我才在许多场合下不由自主地添加上漂亮的修饰语。但这种习惯却常常被世上所谓的“正人君子”大肆利用），所以，就任凭记忆的驱使，把当时浮现在脑海中的掘木的住址和姓名随手写在便筏的一隅。　</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;blockquote class=&quot;colorquote info&quot;&gt;&lt;p&gt;手记之三 1&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;竹一的两大预言，兑现了一个，落空了一个。“被女人迷恋上“这一并不光彩的预言化作了现实，而”肯定会成为一个伟大的画家“的这一祝福性的预言却归于泡影。&lt;
      
    
    </summary>
    
      <category term="文学阅读" scheme="http://yoursite.com/categories/%E6%96%87%E5%AD%A6%E9%98%85%E8%AF%BB/"/>
    
    
      <category term="文学摘抄" scheme="http://yoursite.com/tags/%E6%96%87%E5%AD%A6%E6%91%98%E6%8A%84/"/>
    
  </entry>
  
  <entry>
    <title>银字笙调，奈何初冬</title>
    <link href="http://yoursite.com/2018/12/28/%E9%93%B6%E5%AD%97%E7%AC%99%E8%B0%83%EF%BC%8C%E5%A5%88%E4%BD%95%E5%88%9D%E5%86%AC/"/>
    <id>http://yoursite.com/2018/12/28/银字笙调，奈何初冬/</id>
    <published>2018-12-28T14:59:59.000Z</published>
    <updated>2020-01-07T23:08:06.773Z</updated>
    
    <content type="html"><![CDATA[<h3 id="文章段落"><a href="#文章段落" class="headerlink" title="文章段落"></a>文章段落</h3><p>荏苒岁月覆盖了过往，有很多人已经沉沦在琼壶歌月之中，也有很多人长歌倚楼。但在那滚滚红尘中，那座断桥，那场雪;那个秋，那个染火枫林都是昙花一现。而那座桥上，那个愀然的女子更是不入年华。</p><p>瑞雪初霁，那一刻有多少凝视?立于红褐色的山岩上，看，那是宝石山;亦或置身于断桥之中，有了雪，唤为断桥残雪。大雪纷飞，西湖银装素裹，白堤横亘雪柳霜桃。美景无处不见，静谧的西湖缭绕着风雪的呼啸。霜雪千年，那雪花一点点，悄悄然落在断桥上，一点一片，似飘落在断桥的心中，与断桥共同勾画了这段千年芳华。“欲把西湖比西子,浓妆艳抹相宜”，它的风华在古人心中已经定格成幅幅美丽的画卷。</p><hr><p>但，初冬最是变化无常，何人记得这里曾来过一个人，带着一幅镜花水月离开这座桥、离开这座城，留下了无尽的遗憾。泪珠从眼眸中流下，没有霜雪把它带走，任由它一点一滴掉在断桥中，落入西湖里，于此留下了她淡淡的印记。时光，并没有干透那泪花。它把泪花带入我的梦里，一点一滴流淌在心间，给我铭刻下不泯的痕迹，如此的平静怡然。</p><p>“你要记得，那年那月。水落红莲，唯闻玉馨，但此情依旧。”她行走在车水马龙的古街中，立身回眸。手中握着一枚玉玑，在那琼瑶中还刻着行行小字，只是，不知有谁人曾见到过。</p><blockquote><p>作者：半世浮沉半世梦</p><p>转自：<a href="https://www.duanwenxue.com/article/4786935.html#7s8d6f87" target="_blank" rel="noopener">短文学网</a></p><p>类型：中文测试</p></blockquote><p>十年前，她怀揣着美梦来到这个陌生的城市。十年后，她的梦想实现了一半，却依然无法融入这个城市。作为十年后异乡的陌生人，她将何去何从？   </p><p>在她十八岁那年，她不顾父母的反对，【加粗】<strong>依然跟随闺蜜来到了她梦想中的天堂</strong>。【斜体】<em>尽管在路途中她还在为父母要和她断绝关系的话感到难过</em>，【下划线】<u>但是在她亲眼目睹城市的繁华之后，她决心要赚很多钱</u>，【代码】<code>把父母接到城市</code>，【删除线】<del>让父母知道她的选择是正确的。</del></p><p>可是很快，她就发现真实的情况和她想象的完全不一样。闺蜜的光鲜生活只是表面，实则也没有多少钱，依赖于一个纨绔子弟，而非一份正当的工作。而她既没有学历、又没有美貌，也不适应城市生活，闺蜜也自顾不暇，没有时间和多余的钱帮助她。这样的她，连生活下去都成问题，更别说赚大钱了。倔强的她没有因此放弃，而是更加坚定要作为一个异乡人留在这里打拼，相信自己一定可以实现梦想。    </p><p>一开始，她只能做清洁工、洗碗工等不需要学历的工作，住在楼梯间，一日三餐只吃一餐。周围的人对于一个年轻女孩做这类型工作都会投以异样的眼光，在发现她一口乡音的时候就立即转为理所当然的表情。自尊心强的她受不了这两种目光，在工作的时候默默地留意城市人说话的语音语调，和内容。    </p><p>当她做到说话的时候没有人能听出她来自乡下的时候，她开始到各家小企业应聘。虽然她应聘的岗位都是企业里最基层的职位，但是她依然到处碰壁。最后终于有一家企业愿意聘用她，但是工资只有行情的一半，而且工作又多又累。尽管如此，她还是签了合同上班了。她每天都要战战兢兢地等待同事们的叫唤，偷偷地观察别人，谦卑地请教别人关于工作上的问题。也许是她的态度良好，工作尽责，同事们都愿意在空闲的时候教她一些东西，让她受益匪浅。她一天一天地学习着、进步着，慢慢脱离了以前乡下的生活，一步一步地走进城市。    </p><h3 id="文章图片"><a href="#文章图片" class="headerlink" title="文章图片"></a>文章图片</h3><p><img src="/img/post-cover/74.jpg" alt="白花"></p><p><img src="/img/post-cover/55.jpg" alt="boy and girl"></p><h3 id="代码块"><a href="#代码块" class="headerlink" title="代码块"></a>代码块</h3><figure class="highlight"><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">&lt;<span class="selector-tag">style</span>&gt;</span><br><span class="line"><span class="selector-id">#loading</span> &#123;</span><br><span class="line"><span class="attribute">background-color</span>: red;</span><br><span class="line"><span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line"><span class="attribute">width</span>: <span class="number">0px</span>;</span><br><span class="line"><span class="attribute">position</span>: fixed;</span><br><span class="line"><span class="attribute">top</span>: <span class="number">0px</span></span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+ This is add</span></span><br><span class="line"><span class="deletion">- This is subtract</span></span><br></pre></td></tr></table></figure><h3 id="文章表格"><a href="#文章表格" class="headerlink" title="文章表格"></a>文章表格</h3><table><thead><tr><th>1</th><th>2</th><th>3</th></tr></thead><tbody><tr><td>行1</td><td>-</td><td>-</td></tr><tr><td>行2</td><td>-</td><td>-</td></tr><tr><td>行三</td><td>-</td><td>-</td></tr></tbody></table><h3 id="文章引用"><a href="#文章引用" class="headerlink" title="文章引用"></a>文章引用</h3><blockquote><p>这是一个普通的引用</p><p>人的一生十分短暂！</p></blockquote><blockquote><p>这是一个来源于书籍的引用</p><p>人生若只如初见，何事秋风悲画扇！</p><footer><strong>纳兰性德</strong><cite>木兰花</cite></footer></blockquote><blockquote><p>这是一个来源于网页的引用</p><p>Every interaction is both precious and an opportunity to delight！</p><footer><strong>Seth Godin</strong><cite><a href="http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html" target="_blank" rel="noopener">Welcome to Island Marketing</a></cite></footer></blockquote><h3 id="提示引用"><a href="#提示引用" class="headerlink" title="提示引用"></a>提示引用</h3><blockquote class="colorquote info"><p>这是一个info</p></blockquote><blockquote class="colorquote success"><p>这是一个success </p></blockquote><blockquote class="colorquote warning"><p>这是一个warning</p></blockquote><blockquote class="colorquote danger"><p>这是一个danger</p></blockquote><h3 id="文章列表"><a href="#文章列表" class="headerlink" title="文章列表"></a>文章列表</h3><ul><li>无序项1</li><li>无序项2</li><li>无序项3</li></ul><ol><li>有序项1</li><li>有序项2</li><li>有序项3</li></ol><ul><li style="list-style: none"><input type="checkbox"> 任务项1</li><li style="list-style: none"><input type="checkbox"> 任务项2</li><li style="list-style: none"><input type="checkbox"> 任务项3</li></ul><h3 id="数学公式"><a href="#数学公式" class="headerlink" title="数学公式"></a>数学公式</h3><p>公式块<br>$$<br>∫51f(x)dx∫15f(x)dx    $\int^5_1{f(x)}{\rm d}x$<br>$$<br>内联公式 $\int^5_1{f(x)}{\rm d}x$</p><h3 id="文章标题"><a href="#文章标题" class="headerlink" title="文章标题"></a>文章标题</h3><h1 id="标题1"><a href="#标题1" class="headerlink" title="标题1"></a>标题1</h1><h2 id="标题2"><a href="#标题2" class="headerlink" title="标题2"></a>标题2</h2><h3 id="标题3"><a href="#标题3" class="headerlink" title="标题3"></a>标题3</h3>]]></content>
    
    <summary type="html">
    
      
      
        &lt;h3 id=&quot;文章段落&quot;&gt;&lt;a href=&quot;#文章段落&quot; class=&quot;headerlink&quot; title=&quot;文章段落&quot;&gt;&lt;/a&gt;文章段落&lt;/h3&gt;&lt;p&gt;荏苒岁月覆盖了过往，有很多人已经沉沦在琼壶歌月之中，也有很多人长歌倚楼。但在那滚滚红尘中，那座断桥，那场雪;那个秋，那个染火
      
    
    </summary>
    
      <category term="主题测试" scheme="http://yoursite.com/categories/%E4%B8%BB%E9%A2%98%E6%B5%8B%E8%AF%95/"/>
    
    
      <category term="文学摘抄" scheme="http://yoursite.com/tags/%E6%96%87%E5%AD%A6%E6%91%98%E6%8A%84/"/>
    
      <category term="散文" scheme="http://yoursite.com/tags/%E6%95%A3%E6%96%87/"/>
    
  </entry>
  
  <entry>
    <title>Annie主题使用Gitalk</title>
    <link href="http://yoursite.com/2018/11/18/Annie%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8Gitalk/"/>
    <id>http://yoursite.com/2018/11/18/Annie主题使用Gitalk/</id>
    <published>2018-11-18T15:41:24.000Z</published>
    <updated>2019-04-28T09:10:00.687Z</updated>
    
    <content type="html"><![CDATA[<p>应请求，特意写了这篇文章。文章涉及到了<code>Github</code>仓库的创建、<code>OAuth</code>应用的申请、<code>Gitalk</code>评论插件的使用，请读者按需取用。（文章不叙述具体概念及原理）</p><h3 id="Gitalk使用方法一"><a href="#Gitalk使用方法一" class="headerlink" title="Gitalk使用方法一"></a>Gitalk使用方法一</h3><h4 id="新建仓库"><a href="#新建仓库" class="headerlink" title="新建仓库"></a>新建仓库</h4><ul><li>点击<strong><em>你的用户名</em></strong>，定位到github用户主页，新建一个仓库</li></ul><p><img src="用户主页-.png" alt="用户主页"></p><ul><li>点击<strong><em>New</em></strong>之后，你应该看到</li></ul><p><img src="创建仓库.png" alt="创建仓库"></p><h4 id="注册应用"><a href="#注册应用" class="headerlink" title="注册应用"></a>注册应用</h4><p>Gitalk评论插件的授权机制依赖于<code>OAuth Application</code>，故使用Gitalk之前注册新应用。<a href="https://github.com/settings/applications/new" target="_blank" rel="noopener">注册链接</a></p><ul><li>点击<strong><em>注册链接</em></strong>之后，你应该看到</li></ul><p><img src="注册应用.png" alt="注册应用"></p><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">说明</th><th style="text-align:left">填写例子</th></tr></thead><tbody><tr><td style="text-align:left">Application name</td><td style="text-align:left">应用名称</td><td style="text-align:left">Annie-Gitalk</td></tr><tr><td style="text-align:left">Homepage URL</td><td style="text-align:left">博客地址</td><td style="text-align:left"><code>https://sariay.github.io/</code>或者https://…name.com/</td></tr><tr><td style="text-align:left">Application description</td><td style="text-align:left">应用描述</td><td style="text-align:left">Annie-Gitalk</td></tr><tr><td style="text-align:left">Authorization callback URL</td><td style="text-align:left">博客地址</td><td style="text-align:left"><code>https://sariay.github.io/</code> 或者https://…name.com/</td></tr></tbody></table><ul><li>点击<strong><em>Register application</em></strong>之后，你应该看到</li></ul><p><img src="获取密钥.png" alt="获取密钥"></p><p>请复制、保留<code>Client ID</code>和<code>Client Secret</code>的值（相应字段下方的字符串。<del>此处Teach-ple应用我已删除</del>）</p><h4 id="主题配置"><a href="#主题配置" class="headerlink" title="主题配置"></a>主题配置</h4><p>现在，请打开主题目录下的<code>_config.yml</code>文件，配置Gitalk评论插件的参数</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">gitalk:</span></span><br><span class="line"><span class="attr">    enable:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">    clientID:</span> <span class="string">' '</span> </span><br><span class="line"><span class="attr">    clientSecret:</span> <span class="string">''</span> </span><br><span class="line"><span class="attr">    repo:</span>  </span><br><span class="line"><span class="attr">    owner:</span> </span><br><span class="line"><span class="attr">    admin:</span> </span><br><span class="line"><span class="attr">    distractionFreeMode:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">    hrefTrimend:</span> <span class="string">'#.*$,\\?.*$,index.html$'</span></span><br></pre></td></tr></table></figure><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">说明</th><th style="text-align:left">填写例子</th></tr></thead><tbody><tr><td style="text-align:left">enable</td><td style="text-align:left">插件开关，<code>true</code>启用插件，<code>false</code>关闭插件</td><td style="text-align:left">true</td></tr><tr><td style="text-align:left">clientID</td><td style="text-align:left">注册OAuth应用之后获得的值</td><td style="text-align:left">‘ce11……’</td></tr><tr><td style="text-align:left">clientSecret</td><td style="text-align:left">注册OAuth应用之后获得的值</td><td style="text-align:left">‘ce11……’</td></tr><tr><td style="text-align:left">repo</td><td style="text-align:left">前面创建的仓库的名称（issues的容器）</td><td style="text-align:left">Annie-Gitalk</td></tr><tr><td style="text-align:left">owner</td><td style="text-align:left">前面创建的仓库的拥有者</td><td style="text-align:left">Sariay</td></tr><tr><td style="text-align:left">admin</td><td style="text-align:left">前面创建的仓库的管理者</td><td style="text-align:left">Sariay</td></tr><tr><td style="text-align:left">distractionFreeMode</td><td style="text-align:left">Gitalk插件的参数（无干扰模式，<code>true</code>启用，<code>false</code>关闭）</td><td style="text-align:left">true</td></tr><tr><td style="text-align:left">hrefTrimend</td><td style="text-align:left"><code>Post url</code>处理（删除url中的#、index等字符，缩短url）</td><td style="text-align:left">默认字段</td></tr></tbody></table><h4 id="本地测试"><a href="#本地测试" class="headerlink" title="本地测试"></a>本地测试</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo g</span><br><span class="line">hexo s</span><br></pre></td></tr></table></figure><p><code>hexo s</code>本地测试以检查参数是否设置错误，<code>hexo d</code>部署以正常使用。（第一次使用，请登陆初始化）</p><h3 id="Gitalk使用方法二"><a href="#Gitalk使用方法二" class="headerlink" title="Gitalk使用方法二"></a>Gitalk使用方法二</h3><p>与方法一的区别：不新建仓库，使用你的博客仓库作为issues容器。（跳过<strong><em>新建仓库</em></strong>的步骤即可）</p><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">说明</th><th style="text-align:left">填写例子</th></tr></thead><tbody><tr><td style="text-align:left">enable</td><td style="text-align:left">插件开关，<code>true</code>启用插件，<code>false</code>关闭插件</td><td style="text-align:left">true</td></tr><tr><td style="text-align:left">clientID</td><td style="text-align:left">注册OAuth应用之后获得的值</td><td style="text-align:left">‘ce11……’</td></tr><tr><td style="text-align:left">clientSecret</td><td style="text-align:left">注册OAuth应用之后获得的值</td><td style="text-align:left">‘ce11……’</td></tr><tr><td style="text-align:left">repo</td><td style="text-align:left"><u>你的博客仓库的名称</u>（issues的容器）</td><td style="text-align:left">Annie-Gitalk</td></tr><tr><td style="text-align:left">owner</td><td style="text-align:left"><u>你的博客仓库的拥有者</u></td><td style="text-align:left">Sariay</td></tr><tr><td style="text-align:left">admin</td><td style="text-align:left"><u>你的博客仓库的管理者</u></td><td style="text-align:left">Sariay</td></tr><tr><td style="text-align:left">distractionFreeMode</td><td style="text-align:left">Gitalk插件的参数（无干扰模式，<code>true</code>启用，<code>false</code>关闭）</td><td style="text-align:left">true</td></tr><tr><td style="text-align:left">hrefTrimend</td><td style="text-align:left"><code>Post url</code>处理（删除url中的#、index等字符，缩短url）</td><td style="text-align:left">默认字段</td></tr></tbody></table><h3 id="相关问题的答案"><a href="#相关问题的答案" class="headerlink" title="相关问题的答案"></a>相关问题的答案</h3><table><thead><tr><th style="text-align:left">错误状态</th><th style="text-align:left">可能的原因</th></tr></thead><tbody><tr><td style="text-align:left">文章页不见评论插件的信息</td><td style="text-align:left">未启用插件（<del>enable: false</del>）</td></tr><tr><td style="text-align:left">Error not found</td><td style="text-align:left">repo、owner、admin出错</td></tr><tr><td style="text-align:left">——</td><td style="text-align:left">——</td></tr></tbody></table><p>更多问题，请查看Gitalk评论插件的<a href="https://github.com/gitalk/gitalk/issues" target="_blank" rel="noopener">ISSUES</a></p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;应请求，特意写了这篇文章。文章涉及到了&lt;code&gt;Github&lt;/code&gt;仓库的创建、&lt;code&gt;OAuth&lt;/code&gt;应用的申请、&lt;code&gt;Gitalk&lt;/code&gt;评论插件的使用，请读者按需取用。（文章不叙述具体概念及原理）&lt;/p&gt;
&lt;h3 id=&quot;Gitalk使
      
    
    </summary>
    
      <category term="HEXO博客" scheme="http://yoursite.com/categories/HEXO%E5%8D%9A%E5%AE%A2/"/>
    
    
      <category term="说明" scheme="http://yoursite.com/tags/%E8%AF%B4%E6%98%8E/"/>
    
  </entry>
  
  <entry>
    <title>山鬼情书之零</title>
    <link href="http://yoursite.com/2018/10/02/%E5%B1%B1%E9%AC%BC%E6%83%85%E4%B9%A6%E4%B9%8B%E9%9B%B6/"/>
    <id>http://yoursite.com/2018/10/02/山鬼情书之零/</id>
    <published>2018-10-02T08:31:58.000Z</published>
    <updated>2020-04-18T16:40:52.909Z</updated>
    
    <content type="html"><![CDATA[<p>匹夫说我生来骄傲，</p><p><em>I’m proud of my husband.</em></p><p><br></p><p>不肯半分折腰，</p><p><em>Unwilling to half split up.</em></p><p><br></p><p>亦不能半分低头。</p><p><em>You can not half bow.</em></p><p><br></p><p>我将送喜欢的人远走,</p><p><em>I will go away the people I like.</em></p><p><br></p><p>此后情书写给山鬼,</p><p><em>After that, the love letter was written to the Mountain Ghost.</em></p><p><br></p><p>心事寄于西风，</p><p><em>My mind is in the west wind.</em></p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;匹夫说我生来骄傲，&lt;/p&gt;
&lt;p&gt;&lt;em&gt;I’m proud of my husband.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;br&gt;&lt;/p&gt;
&lt;p&gt;不肯半分折腰，&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Unwilling to half split up.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;br&gt;&lt;/p&gt;
      
    
    </summary>
    
      <category term="文学阅读" scheme="http://yoursite.com/categories/%E6%96%87%E5%AD%A6%E9%98%85%E8%AF%BB/"/>
    
    
      <category term="文学摘抄" scheme="http://yoursite.com/tags/%E6%96%87%E5%AD%A6%E6%91%98%E6%8A%84/"/>
    
  </entry>
  
  <entry>
    <title>Annie主题更新日志</title>
    <link href="http://yoursite.com/2018/09/25/Annie%E4%B8%BB%E9%A2%98%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97/"/>
    <id>http://yoursite.com/2018/09/25/Annie主题更新日志/</id>
    <published>2018-09-25T12:16:32.000Z</published>
    <updated>2019-04-28T10:36:36.992Z</updated>
    
    <content type="html"><![CDATA[<ul><li style="list-style: none"><input type="checkbox" checked> 2019-4-27 主题优化 </li></ul><p>commit <a href="https://github.com/Sariay/hexo-theme-Annie/commit/b421393dd259809fadba119547fda4fcf2633f1f" target="_blank" rel="noopener">b421393</a></p><table><thead><tr><th style="text-align:center">类型</th><th style="text-align:left">模块</th><th style="text-align:left">说明</th></tr></thead><tbody><tr><td style="text-align:center">优化</td><td style="text-align:left">文章模块</td><td style="text-align:left">Markdown（重写样式，优化表格、引用等样式）</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left">文章模块</td><td style="text-align:left">color quote（info、success、warning、danger）</td></tr><tr><td style="text-align:center">优化</td><td style="text-align:left"><strong>文章模块</strong></td><td style="text-align:left"><strong>代码块高亮</strong>（弃用hexo-plugin-prism，使用next主题的highlight.styl）</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left">文章模块</td><td style="text-align:left">分享功能（addThis、baiduShare、shareThis、socialShare）</td></tr><tr><td style="text-align:center">优化</td><td style="text-align:left"><strong>文章模块</strong></td><td style="text-align:left">toc目录（增加开关，控制展示与否）</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left">站点分析</td><td style="text-align:left">baidu分析、google分析、cnzz分析等</td></tr><tr><td style="text-align:center">优化</td><td style="text-align:left">页脚模块</td><td style="text-align:left">social.ejs（重构代码）</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left">图片模块</td><td style="text-align:left">懒加载（使用插件yall.min.js，懒加载index.ejs、post-relate.ejs的图片）</td></tr><tr><td style="text-align:center">优化</td><td style="text-align:left">图片模块</td><td style="text-align:left">缩放比例（使用插件<a href="https://github.com/levymetal/jquery-resize-image-to-parent" target="_blank" rel="noopener">jquery-resize-image-to-parent</a>，按原始比例裁剪index.ejs、post-relate.ejs的图片）</td></tr><tr><td style="text-align:center">修复</td><td style="text-align:left">图片模块</td><td style="text-align:left">文章内图片（使用fancybox插件，修复关闭lightgallery画廊时的错误问题）</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left"><strong>滚动条</strong></td><td style="text-align:left">使用jquery.nicescroll.js美化网页页面、代码块的滚动条</td></tr><tr><td style="text-align:center">优化</td><td style="text-align:left"><strong>搜索模块</strong></td><td style="text-align:left">优化样式，增加搜索结果提示，提供更炫酷的搜索体验</td></tr><tr><td style="text-align:center">修复</td><td style="text-align:left">文章模块</td><td style="text-align:left">代码块复制（修复点击<u>复制按钮</u>时，页面滚动问题）</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left"><strong>语言模块</strong></td><td style="text-align:left">支持繁体中文、简体中文的互转（页脚增加切换按钮）</td></tr><tr><td style="text-align:center">修复</td><td style="text-align:left"><strong>归档模块</strong></td><td style="text-align:left">修复具有指定标签、分类的文章总数的计数问题（新增post-number.ejs）</td></tr><tr><td style="text-align:center">优化</td><td style="text-align:left">layout.ejs</td><td style="text-align:left">优化layout.ejs的结构，删除冗余代码（综合考虑了gallery.ejs）</td></tr><tr><td style="text-align:center">优化</td><td style="text-align:left">main.js</td><td style="text-align:left">优化部分function的逻辑</td></tr><tr><td style="text-align:center">优化</td><td style="text-align:left"><strong>Annie主题</strong></td><td style="text-align:left">重新组织项目结构，优化部分语法问题</td></tr></tbody></table><blockquote class="colorquote warning"><p>layout.ejs</p></blockquote><figure class="highlight diff"><figcaption><span>layout.ejs</span><a href="https://github.com/Sariay/hexo-theme-Annie/commit/b421393dd259809fadba119547fda4fcf2633f1f" target="_blank" rel="noopener">commit-b421393</a></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="deletion">-3,26 </span></span><br><span class="line"><span class="addition">+3,19</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-&lt;% if(page.type === "gallery") &#123; %&gt;</span></span><br><span class="line"><span class="deletion">-</span></span><br><span class="line"><span class="deletion">-&lt;!--gallery--&gt;</span></span><br><span class="line"><span class="deletion">-&lt;%- partial('gallery') %&gt;</span></span><br><span class="line"><span class="deletion">-</span></span><br><span class="line"><span class="deletion">-&lt;% &#125; else &#123; %&gt;</span></span><br><span class="line"><span class="deletion">-&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="deletion">-&lt;html class="scrollbar"&gt;</span></span><br><span class="line"><span class="addition">+&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="addition">+&lt;html class="html-loading"&gt;</span></span><br><span class="line">&lt;%- partial('_partial/head',&#123;cache: true&#125;) %&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;%- partial('_partial/header',&#123;cache: true&#125;) %&gt;</span><br><span class="line"><span class="deletion">-</span></span><br><span class="line"><span class="addition">+</span></span><br><span class="line">&lt;!--main--&gt;</span><br><span class="line">&lt;main&gt;</span><br><span class="line">&lt;%- body %&gt;</span><br><span class="line">&lt;/main&gt;</span><br><span class="line"><span class="deletion">-</span></span><br><span class="line"><span class="addition">+</span></span><br><span class="line">&lt;!--footer--&gt;</span><br><span class="line">&lt;%- partial('_partial/footer',&#123;cache: true&#125;) %&gt;</span><br><span class="line">&lt;%- partial('_partial/footer-after',&#123;cache: true&#125;) %&gt;</span><br><span class="line"><span class="deletion">-&lt;/body&gt;</span></span><br><span class="line"><span class="deletion">-&lt;/html&gt;</span></span><br><span class="line"><span class="deletion">-&lt;% &#125; %&gt;</span></span><br><span class="line"><span class="addition">+&lt;/body&gt;</span></span><br><span class="line"><span class="addition">+&lt;/html&gt;</span></span><br></pre></td></tr></table></figure><ul><li style="list-style: none"><input type="checkbox" checked> 2018-12-27 主题重构</li></ul><p>commit <a href="https://github.com/Sariay/hexo-theme-Annie/commit/0e63d03a44ffcb18acbab8c3ff02b9755b983d4e" target="_blank" rel="noopener">0e63d03</a> </p><table><thead><tr><th style="text-align:center">类型</th><th style="text-align:left">模块</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">优化</td><td style="text-align:left">网站lOGO、FAVICON</td><td style="text-align:left">通过主题配置文件设置</td></tr><tr><td style="text-align:center">优化</td><td style="text-align:left"><strong>页头背景</strong></td><td style="text-align:left">主页、归档页…的页头背景使用随机图片或固定图片，文章页的页头背景使用该篇文章的特色图（即其主页的缩略图）</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left">菜单模块</td><td style="text-align:left">页头固定显示菜单列表、滚动高度大于页头高度时，显示隐藏的菜单按钮</td></tr><tr><td style="text-align:center">修复</td><td style="text-align:left">菜单模块</td><td style="text-align:left">选中页头的菜单列表项时，标记该项。（提取背景图片主题色以设置菜单项颜色，解决<strong>字体与背景</strong>的颜色冲突问题）</td></tr><tr><td style="text-align:center">修复</td><td style="text-align:left">MOTTO</td><td style="text-align:left">修复高度溢出的问题</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left">预加载</td><td style="text-align:left">增加三种遮罩动画，通过_config.yml设置（api）</td></tr><tr><td style="text-align:center">优化</td><td style="text-align:left"><strong>预加载</strong></td><td style="text-align:left">超时时间设置为10s，超时后移除预加载遮罩</td></tr><tr><td style="text-align:center">修复</td><td style="text-align:left">主页</td><td style="text-align:left">参考<a href="https://github.com/LoeiFy/Diaspora" target="_blank" rel="noopener">Diaspora</a>重做主页</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left"><strong>相关文章</strong></td><td style="text-align:left">文章页，每一篇文章后展示相关的文章</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left">livere评论</td><td style="text-align:left">评论模块中增加<strong>livere评论</strong></td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left"><strong>文章点赞</strong></td><td style="text-align:left">依赖于leancloud</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left"><strong>阅读计数</strong></td><td style="text-align:left">依赖于leancloud</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left"><strong>站点计数</strong></td><td style="text-align:left">依赖于busuanzi</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left">mathjax支持</td><td style="text-align:left">依赖于hexo-math，支持文章中书写公式</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left">代码复制</td><td style="text-align:left">支持代码块复制（功能待完善  <strong>⚠</strong>  ）</td></tr></tbody></table><ul><li style="list-style: none"><input type="checkbox"> <del>2018-12-5 主题重构</del></li></ul><table><thead><tr><th style="text-align:center">类型</th><th style="text-align:left">模块</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">优化</td><td style="text-align:left">Annie主题</td><td style="text-align:left">主题重构（css、js、ejs）</td></tr></tbody></table><ul><li style="list-style: none"><input type="checkbox" checked> 2018-9-25 主题完善</li></ul><table><thead><tr><th style="text-align:center">类型</th><th style="text-align:left">模块</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">新增</td><td style="text-align:left">相册模块</td><td style="text-align:left">使用画廊插件</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left">评论模块</td><td style="text-align:left">gitalk、valine</td></tr><tr><td style="text-align:center">修复</td><td style="text-align:left">代码高亮</td><td style="text-align:left">使用高亮插件</td></tr><tr><td style="text-align:center">新增</td><td style="text-align:left">文章TOC</td><td style="text-align:left">参照其他主题</td></tr><tr><td style="text-align:center">优化</td><td style="text-align:left">页头背景</td><td style="text-align:left">使用随机图片或固定图片</td></tr><tr><td style="text-align:center">修复</td><td style="text-align:left">页脚高度</td><td style="text-align:left">height、min-height</td></tr></tbody></table><p>未整合css、js文件，方便二次定制开发！</p><p>或多或少地使用了各种开源资源，All Relevant Rights Reserved by Them！</p><hr><ul><li style="list-style: none"><input type="checkbox" checked> 2018-8-26 主题创建</li></ul><p>描述：创建仓库<code>hexo-theme-Annie</code>并<code>push</code>源文件。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;ul&gt;
&lt;li style=&quot;list-style: none&quot;&gt;&lt;input type=&quot;checkbox&quot; checked&gt; 2019-4-27 主题优化 &lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;commit &lt;a href=&quot;https://github.com/Sariay/he
      
    
    </summary>
    
      <category term="HEXO博客" scheme="http://yoursite.com/categories/HEXO%E5%8D%9A%E5%AE%A2/"/>
    
    
      <category term="说明" scheme="http://yoursite.com/tags/%E8%AF%B4%E6%98%8E/"/>
    
      <category term="开发实践" scheme="http://yoursite.com/tags/%E5%BC%80%E5%8F%91%E5%AE%9E%E8%B7%B5/"/>
    
  </entry>
  
  <entry>
    <title>toc标题测试</title>
    <link href="http://yoursite.com/2018/09/21/toc%E6%A0%87%E9%A2%98%E6%B5%8B%E8%AF%95/"/>
    <id>http://yoursite.com/2018/09/21/toc标题测试/</id>
    <published>2018-09-21T15:23:00.000Z</published>
    <updated>2019-04-13T12:26:59.026Z</updated>
    
    <content type="html"><![CDATA[<h1 id="h1标题：的霍华德和很多很多和很多很多和很多很多"><a href="#h1标题：的霍华德和很多很多和很多很多和很多很多" class="headerlink" title="h1标题：的霍华德和很多很多和很多很多和很多很多"></a>h1标题：的霍华德和很多很多和很多很多和很多很多</h1><h2 id="h2标题好的话的霍华德和和和好的话的霍华德和好的话"><a href="#h2标题好的话的霍华德和和和好的话的霍华德和好的话" class="headerlink" title="h2标题好的话的霍华德和和和好的话的霍华德和好的话"></a>h2标题好的话的霍华德和和和好的话的霍华德和好的话</h2><h2 id="h2标题"><a href="#h2标题" class="headerlink" title="h2标题"></a>h2标题</h2><h3 id="h3标题"><a href="#h3标题" class="headerlink" title="h3标题"></a>h3标题</h3><h3 id="h3标题-1"><a href="#h3标题-1" class="headerlink" title="h3标题"></a>h3标题</h3><h2 id="h2标题-1"><a href="#h2标题-1" class="headerlink" title="h2标题"></a>h2标题</h2><h5 id="h5"><a href="#h5" class="headerlink" title="h5"></a>h5</h5><h6 id="h6"><a href="#h6" class="headerlink" title="h6"></a>h6</h6><h6 id="h6-1"><a href="#h6-1" class="headerlink" title="h6"></a>h6</h6><h1 id="h1标题"><a href="#h1标题" class="headerlink" title="h1标题"></a>h1标题</h1><h2 id="h2标题-2"><a href="#h2标题-2" class="headerlink" title="h2标题"></a>h2标题</h2><h3 id="h3标题-2"><a href="#h3标题-2" class="headerlink" title="h3标题"></a>h3标题</h3><h4 id="h4标题"><a href="#h4标题" class="headerlink" title="h4标题"></a>h4标题</h4><h1 id="h1标题：的霍华德和很多很多和很多很多和很多很多-1"><a href="#h1标题：的霍华德和很多很多和很多很多和很多很多-1" class="headerlink" title="h1标题：的霍华德和很多很多和很多很多和很多很多"></a>h1标题：的霍华德和很多很多和很多很多和很多很多</h1><h2 id="h2标题好的话的霍华德和和和好的话的霍华德和好的话-1"><a href="#h2标题好的话的霍华德和和和好的话的霍华德和好的话-1" class="headerlink" title="h2标题好的话的霍华德和和和好的话的霍华德和好的话"></a>h2标题好的话的霍华德和和和好的话的霍华德和好的话</h2><h2 id="h2标题-3"><a href="#h2标题-3" class="headerlink" title="h2标题"></a>h2标题</h2><h3 id="h3标题-3"><a href="#h3标题-3" class="headerlink" title="h3标题"></a>h3标题</h3><h3 id="h3标题-4"><a href="#h3标题-4" class="headerlink" title="h3标题"></a>h3标题</h3><h2 id="h2标题-4"><a href="#h2标题-4" class="headerlink" title="h2标题"></a>h2标题</h2><h1 id="h1标题-1"><a href="#h1标题-1" class="headerlink" title="h1标题"></a>h1标题</h1><h2 id="h2标题-5"><a href="#h2标题-5" class="headerlink" title="h2标题"></a>h2标题</h2><h3 id="h3标题-5"><a href="#h3标题-5" class="headerlink" title="h3标题"></a>h3标题</h3><h4 id="h4标题-1"><a href="#h4标题-1" class="headerlink" title="h4标题"></a>h4标题</h4><h1 id="h1"><a href="#h1" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-1"><a href="#h1-1" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-2"><a href="#h1-2" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-3"><a href="#h1-3" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-4"><a href="#h1-4" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-5"><a href="#h1-5" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-6"><a href="#h1-6" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-7"><a href="#h1-7" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-8"><a href="#h1-8" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-9"><a href="#h1-9" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-10"><a href="#h1-10" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-11"><a href="#h1-11" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-12"><a href="#h1-12" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-13"><a href="#h1-13" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-14"><a href="#h1-14" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-15"><a href="#h1-15" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-16"><a href="#h1-16" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-17"><a href="#h1-17" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-18"><a href="#h1-18" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-19"><a href="#h1-19" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-20"><a href="#h1-20" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-21"><a href="#h1-21" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-22"><a href="#h1-22" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-23"><a href="#h1-23" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-24"><a href="#h1-24" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-25"><a href="#h1-25" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-26"><a href="#h1-26" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-27"><a href="#h1-27" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-28"><a href="#h1-28" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-29"><a href="#h1-29" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-30"><a href="#h1-30" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-31"><a href="#h1-31" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-32"><a href="#h1-32" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-33"><a href="#h1-33" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-34"><a href="#h1-34" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-35"><a href="#h1-35" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-36"><a href="#h1-36" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-37"><a href="#h1-37" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-38"><a href="#h1-38" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-39"><a href="#h1-39" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-40"><a href="#h1-40" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-41"><a href="#h1-41" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-42"><a href="#h1-42" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-43"><a href="#h1-43" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-44"><a href="#h1-44" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-45"><a href="#h1-45" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-46"><a href="#h1-46" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-47"><a href="#h1-47" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-48"><a href="#h1-48" class="headerlink" title="h1"></a>h1</h1><h1 id="h1-49"><a href="#h1-49" class="headerlink" title="h1"></a>h1</h1>]]></content>
    
    <summary type="html">
    
      
      
        &lt;h1 id=&quot;h1标题：的霍华德和很多很多和很多很多和很多很多&quot;&gt;&lt;a href=&quot;#h1标题：的霍华德和很多很多和很多很多和很多很多&quot; class=&quot;headerlink&quot; title=&quot;h1标题：的霍华德和很多很多和很多很多和很多很多&quot;&gt;&lt;/a&gt;h1标题：的霍华德和很多很多
      
    
    </summary>
    
      <category term="主题测试" scheme="http://yoursite.com/categories/%E4%B8%BB%E9%A2%98%E6%B5%8B%E8%AF%95/"/>
    
    
  </entry>
  
  <entry>
    <title>起风了</title>
    <link href="http://yoursite.com/2018/09/08/%E8%B5%B7%E9%A3%8E%E4%BA%86/"/>
    <id>http://yoursite.com/2018/09/08/起风了/</id>
    <published>2018-09-08T08:49:36.000Z</published>
    <updated>2019-04-13T12:20:59.294Z</updated>
    
    <content type="html"><![CDATA[<p>起风了 (原曲： 高桥优 -《ヤキモチ》) - 买辣椒也用券 </p><p>词：米果 </p><p>曲：高桥优 </p><p>这一路上走走停停 </p><p>顺着少年漂流的痕迹 </p><p>迈出车站的前一刻 </p><p>竟有些犹豫 </p><p>不禁笑这近乡情怯 </p><p>仍无可避免 </p><p>而长野的天 </p><p>依旧那么暖 </p><p>风吹起了从前 </p><p>从前初识这世间 </p><p>万般流连 </p><p>看着天边似在眼前 </p><p>也甘愿赴汤蹈火去走它一遍 </p><p>如今走过这世间 </p><p>万般流连 </p><p>翻过岁月不同侧脸 </p><p>措不及防闯入你的笑颜 </p><p>我曾难自拔于世界之大 </p><p>也沉溺于其中梦话 </p><p>不得真假 不做挣扎 不惧笑话 </p><p>我曾将青春翻涌成她 </p><p>也曾指尖弹出盛夏 </p><p>心之所动 且就随缘去吧 </p><p>逆着光行走 任风吹雨打 </p><p>短短的路走走停停 </p><p>也有了几分的距离 </p><p>不知抚摸的是故事 还是段心情 </p><p>也许期待的不过是 与时间为敌 </p><p>再次看到你 </p><p>微凉晨光里 </p><p>笑的很甜蜜 </p><p>从前初识这世间 </p><p>万般流连 </p><p>看着天边似在眼前 </p><p>也甘愿赴汤蹈火去走它一遍 </p><p>如今走过这世间 </p><p>万般流连 </p><p>翻过岁月不同侧脸 </p><p>措不及防闯入你的笑颜 </p><p>我曾难自拔于世界之大 </p><p>也沉溺于其中梦话 </p><p>不得真假 不做挣扎 不惧笑话 </p><p>我曾将青春翻涌成她 </p><p>也曾指尖弹出盛夏 </p><p>心之所动 且就随缘去吧 </p><p>晚风吹起你鬓间的白发 </p><p>抚平回忆留下的疤 </p><p>你的眼中 明暗交杂 一笑生花 </p><p>暮色遮住你蹒跚的步伐 </p><p>走进床头藏起的画 </p><p>画中的你 低着头说话 </p><p>我仍感叹于世界之大 </p><p>也沉醉于儿时情话 </p><p>不剩真假 不做挣扎 无谓笑话 </p><p>我终将青春还给了她 </p><p>连同指尖弹出的盛夏 </p><p>心之所动 就随风去了 </p><p>以爱之名 你还愿意吗</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;起风了 (原曲： 高桥优 -《ヤキモチ》) - 买辣椒也用券 &lt;/p&gt;
&lt;p&gt;词：米果 &lt;/p&gt;
&lt;p&gt;曲：高桥优 &lt;/p&gt;
&lt;p&gt;这一路上走走停停 &lt;/p&gt;
&lt;p&gt;顺着少年漂流的痕迹 &lt;/p&gt;
&lt;p&gt;迈出车站的前一刻 &lt;/p&gt;
&lt;p&gt;竟有些犹豫 &lt;/p&gt;
&lt;p&gt;不禁笑这近
      
    
    </summary>
    
      <category term="音乐" scheme="http://yoursite.com/categories/%E9%9F%B3%E4%B9%90/"/>
    
    
      <category term="歌词摘抄" scheme="http://yoursite.com/tags/%E6%AD%8C%E8%AF%8D%E6%91%98%E6%8A%84/"/>
    
  </entry>
  
  <entry>
    <title>Annie主题使用说明</title>
    <link href="http://yoursite.com/2018/08/27/Annie%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/"/>
    <id>http://yoursite.com/2018/08/27/Annie主题使用说明/</id>
    <published>2018-08-27T12:16:19.000Z</published>
    <updated>2019-05-01T09:54:09.685Z</updated>
    
    <content type="html"><![CDATA[<h3 id="零、准备工作"><a href="#零、准备工作" class="headerlink" title="零、准备工作"></a>零、准备工作</h3><p>开始之前，你应该预先理解下列标签的意义：</p><ol><li>代码对比</li></ol><figure class="highlight diff"><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">  This is a diff block.</span><br><span class="line"><span class="addition">+ This is add!</span></span><br><span class="line"><span class="deletion">- This is subtract!</span></span><br></pre></td></tr></table></figure><ol start="2"><li>信息提示</li></ol><blockquote class="colorquote info"><p>这是一个info提示</p></blockquote><blockquote class="colorquote success"><p>这是一个success提示 </p></blockquote><blockquote class="colorquote warning"><p>这是一个warning提示</p></blockquote><blockquote class="colorquote danger"><p>这是一个danger提示</p></blockquote><ol start="3"><li>名词约定</li></ol><table><thead><tr><th style="text-align:center">序号</th><th style="text-align:left">名词</th><th style="text-align:left">说明</th><th style="text-align:left">目录</th></tr></thead><tbody><tr><td style="text-align:center">1</td><td style="text-align:left">站点配置文件</td><td style="text-align:left">站点目录下的<code>_config.yml</code>文件</td><td style="text-align:left">hexo/_config.yml</td></tr><tr><td style="text-align:center">2</td><td style="text-align:left">主题配置文件</td><td style="text-align:left">主题目录下的<code>_config.yml</code>文件</td><td style="text-align:left">hexo/themes/Annie/_config.yml</td></tr><tr><td style="text-align:center">3</td><td style="text-align:left">页头背景</td><td style="text-align:left">网页页头背景</td><td style="text-align:left">html/header(网页标签)</td></tr></tbody></table><h3 id="一、LOGO和FAVICON"><a href="#一、LOGO和FAVICON" class="headerlink" title="一、LOGO和FAVICON"></a>一、LOGO和FAVICON</h3><p>编辑<u>主题配置文件</u>，设置<code>favicon</code>和<code>logo</code>的路径即可。当然，你可以使用文字logo或图片logo，即<code>logo</code>的值为空时，主题使用<code>title</code>的值作为logo！</p><figure class="highlight diff"><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"># favicon &amp; logo</span><br><span class="line"># if the value of logo is false, the 'title' is optional.</span><br><span class="line"><span class="deletion">-favicon: /img/favicon.ico</span></span><br><span class="line"><span class="deletion">-logo: /img/logo.png</span></span><br><span class="line"><span class="deletion">-title: Welcome </span></span><br><span class="line"><span class="addition">+favicon: /img/your-favicon.ico</span></span><br><span class="line"><span class="addition">+logo: /img/your-logo.png</span></span><br><span class="line"><span class="addition">+title: your-title</span></span><br></pre></td></tr></table></figure><h3 id="二、页头背景图片"><a href="#二、页头背景图片" class="headerlink" title="二、页头背景图片"></a>二、页头背景图片</h3><p>文章详情页的<u>页头背景图片</u>为该文章的封面图，其他页的<u>页头背景图片</u>为随机图片或固定图片。原则上，使用固定图片时，应将参数<code>mode</code>设为<code>normal</code>，然后设置<code>normal_url</code>的路径；使用随机图片时，应将参数<code>mode</code>设为<code>random</code>，然后设置<code>random_url</code>的路径。</p><blockquote class="colorquote warning"><p><b>warning!</b><br>注意跨域问题，尽量不使用跨域的图片（即背景图片和网页最好托管在一起，存放于同一服务器）</p></blockquote><ol><li>使用固定图片，请确保参数<code>mode</code>设为<code>normal</code>，然后设置参数<code>normal_url</code>的值</li></ol><figure class="highlight diff"><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"># background_image</span><br><span class="line"># /img/1.jpg</span><br><span class="line"># https://source.unsplash.com/collection/954550/1920x1080</span><br><span class="line"># https://sariay.github.io/Random-img/</span><br><span class="line"># May be cause CROS bug!</span><br><span class="line">background_image:</span><br><span class="line"><span class="addition">+   mode: normal #normal or random</span></span><br><span class="line"><span class="addition">+   normal_url: /img/1.jpg</span></span><br><span class="line">    random_max: 110 </span><br><span class="line">    random_url: https://sariay.github.io/Random-img/</span><br></pre></td></tr></table></figure><ol start="2"><li>使用unplash随机图片，请确保参数<code>mode</code>设为<code>normal</code>，然后设置参数<code>normal_url</code>的值</li></ol><figure class="highlight diff"><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"># background_image</span><br><span class="line"># /img/1.jpg</span><br><span class="line"># https://source.unsplash.com/collection/954550/1920x1080</span><br><span class="line"># https://sariay.github.io/Random-img/</span><br><span class="line"># May be cause CROS bug!</span><br><span class="line">background_image:</span><br><span class="line"><span class="addition">+   mode: normal #normal or random</span></span><br><span class="line"><span class="addition">+   normal_url: https://source.unsplash.com/collection/954550/1920x1080</span></span><br><span class="line">    random_max: 110 </span><br><span class="line">    random_url: https://sariay.github.io/Random-img/</span><br></pre></td></tr></table></figure><ol start="3"><li>使用自定义随机图片，请确保参数<code>mode</code>设为<code>random</code>，然后设置参数<code>random_max</code>、<code>random_url</code>的值 </li></ol><ul><li>第一步、fork <a href="https://github.com/Sariay/Random-img" target="_blank" rel="noopener">随机图片集</a> ；</li><li>第二步、开启你所fork的仓库的page服务；</li><li>第三步、获取相对地址；</li><li>第四步、设置<code>random_url</code>为获得的相对地址。</li></ul><figure class="highlight diff"><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"># background_image</span><br><span class="line"># /img/01.jpg</span><br><span class="line"># https://source.unsplash.com/collection/954550/1920x1080</span><br><span class="line"># https://sariay.github.io/Random-img/</span><br><span class="line"># May be cause CROS bug!</span><br><span class="line">background_image:</span><br><span class="line"><span class="addition">+   mode: random #normal or random</span></span><br><span class="line">    normal_url: https://source.unsplash.com/collection/954550/1920x1080</span><br><span class="line"><span class="addition">+   random_max: 110 </span></span><br><span class="line"><span class="addition">+   random_url: https://sariay.github.io/Random-img/</span></span><br></pre></td></tr></table></figure><p>你可以将<u>随机图片集</u>上传到图床（腾讯云、七牛云等），然后获取<code>https://....../Random-img/</code>格式的地址，最后将<code>random_url</code>的值设置为该地址。</p><p>你也可以在主题目录下的img文件夹中新建Random-img文件夹，将<code>0.jpg</code>、<code>1.jpg</code>、<code>2.jpg</code>、<code>3.jpg</code>……<code>110.jpg</code>命名格式的图片放入其中，然后将<code>random_url</code>的值设置为<code>/img/Random-img/</code>。</p><blockquote class="colorquote warning"><p><b>warning!</b></p><p>图片的命名使用连续的整数，<code>random_max</code>的值小于等于（0、1、2、3…..110）的最大整数。（ps：如你偏爱访问速度🙃，尽可能使用固定图片）</p></blockquote><h3 id="三、随机名言与当地时间"><a href="#三、随机名言与当地时间" class="headerlink" title="三、随机名言与当地时间"></a>三、随机名言与当地时间</h3><p>每次刷新网页，网页页头展示一条随机名言，获取并展示该时区的标准时间。</p><figure class="highlight diff"><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"># show motto</span><br><span class="line">motto:</span><br><span class="line">    enable: true</span><br><span class="line">    </span><br><span class="line"># show current time</span><br><span class="line"><span class="addition">+ #This is only a demo, please go to "https://time.is" to set your city time!</span></span><br><span class="line">timejs:</span><br><span class="line">    enable: true</span><br></pre></td></tr></table></figure><h3 id="四、预加载遮罩"><a href="#四、预加载遮罩" class="headerlink" title="四、预加载遮罩"></a>四、预加载遮罩</h3><p><u>预加载遮罩</u>的作用为，确保背景图片加载完成和背景构造完成。当背景加载并构造完成时，主题立即移除遮罩。<u>预加载行为</u>的超时时间默认设为10s，即最多10s左右后，不管背景是否加载并构造完成，主題都移除遮罩。你可以决定是否使用：</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 02-PROLOADER</span></span><br><span class="line"><span class="comment"># animation: spinner, transition or cyclic</span></span><br><span class="line"><span class="attr">preloader:</span></span><br><span class="line"><span class="attr">    enable:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">    animation:</span> <span class="string">transition</span></span><br></pre></td></tr></table></figure><h3 id="五、首页的使用"><a href="#五、首页的使用" class="headerlink" title="五、首页的使用"></a>五、首页的使用</h3><p>首页文章展示有两种模式：图文模式<code>cart</code>和纯净模式<code>pure</code>。默认图文模式（<code>cart</code>），你只需编辑<u>主题配置文件</u>，设置<code>index-style</code>的参数，即可使用或扩展指定的主页文章展示模式。</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"># 03-INDEX</span><br><span class="line"># index-style: pure, cart or poem</span><br><span class="line"><span class="addition">+index_style: cart</span></span><br><span class="line"></span><br><span class="line"># index_cart_cover</span><br><span class="line">cover: /img/cart_cover.jpg</span><br></pre></td></tr></table></figure><h4 id="5-1文章封面图"><a href="#5-1文章封面图" class="headerlink" title="5.1文章封面图"></a>5.1文章封面图</h4><figure class="highlight diff"><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">title: Annie主题使用说明</span><br><span class="line">date: 2018-08-27 20:16:19</span><br><span class="line"><span class="addition">+cover: /img/post-cover/74.jpg</span></span><br><span class="line">categories: HEXO博客</span><br><span class="line">tags: 说明</span><br></pre></td></tr></table></figure><p><code>cover</code>参数值即为图片路径，路径可为相对路径或绝对路径。</p><h4 id="5-2首页的分页"><a href="#5-2首页的分页" class="headerlink" title="5.2首页的分页"></a>5.2首页的分页</h4><p>hexo博客默认首页分页，编辑<u>站点配置文件</u>，置参数<code>per_page</code>为1、2、3…..以达到分页目的，0则不分页。</p><figure class="highlight diff"><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"># Home page setting</span><br><span class="line"># path: Root path for your blogs index page. (default = '')</span><br><span class="line"># per_page: Posts displayed per page. (0 = disable pagination)</span><br><span class="line"># order_by: Posts order. (Order by date descending by default)</span><br><span class="line"><span class="addition">+index_generator:</span></span><br><span class="line">  path: ''</span><br><span class="line"><span class="addition">+ per_page: 5</span></span><br><span class="line">  order_by: -date</span><br></pre></td></tr></table></figure><h4 id="5-3文字的截断"><a href="#5-3文字的截断" class="headerlink" title="5.3文字的截断"></a>5.3文字的截断</h4><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># post_excerpt for index page</span></span><br><span class="line"><span class="attr">excerpt_cart:</span> <span class="number">80</span></span><br><span class="line"><span class="attr">excerpt_pure:</span> <span class="number">300</span>   </span><br><span class="line"><span class="attr">excerpt_link:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p><code>excerpt_cart</code>为图文模式的截取字数，推荐<strong>小于等于</strong>100。<code>excerpt_pure</code>为纯净模式的截取字数，推荐字数为300。<code>excerpt_link</code>为<u>阅读更多</u>按钮展示与否的开关。</p><h3 id="六、归档页的使用"><a href="#六、归档页的使用" class="headerlink" title="六、归档页的使用"></a>六、归档页的使用</h3><p>Annie主题的归档页按年归档，不分页。当然，可以置参数<code>archive_generator.per_page</code>（<u>站点配置文件</u>）为1、2、3…..以达到分页目的。</p><blockquote class="colorquote warning"><p><b>warning!</b></p><p>Annie主题中无效，分页是对该页面[主页、归档页、标签页、分类页]的文章进行分页，即每次（每页）展示指定数量的文章</p></blockquote><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">archive:</span> <span class="number">1</span></span><br><span class="line"><span class="attr">category:</span> <span class="number">1</span></span><br><span class="line"><span class="attr">tag:</span> <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="attr">archive_generator:</span></span><br><span class="line"><span class="attr">  per_page:</span> <span class="number">10</span></span><br><span class="line"></span><br><span class="line"><span class="attr">tag_generator:</span></span><br><span class="line"><span class="attr">  per_page:</span> <span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="attr">category_generator:</span> </span><br><span class="line"><span class="attr">  per_page:</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><h3 id="七、分类页的使用"><a href="#七、分类页的使用" class="headerlink" title="七、分类页的使用"></a>七、分类页的使用</h3><p>执行命令，创建分类页</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new page categories</span><br></pre></td></tr></table></figure><p>然后编辑站点目录下的<u>source/categories/index.md</u>，添加如下<code>Front-matter</code></p><figure class="highlight diff"><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">title: categories</span><br><span class="line">date: 2019-03-30 19:25:34</span><br><span class="line"><span class="addition">+ layout: categories</span></span><br><span class="line"><span class="addition">+ type: categories</span></span><br></pre></td></tr></table></figure><h3 id="八、标签页的使用"><a href="#八、标签页的使用" class="headerlink" title="八、标签页的使用"></a>八、标签页的使用</h3><p>执行命令，创建标签页</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new page tags</span><br></pre></td></tr></table></figure><p>然后编辑站点目录下的<u>source/tags/index.md</u>，添加如下<code>Front-matter</code></p><figure class="highlight diff"><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">title: tags</span><br><span class="line">date: 2019-03-30 19:25:34</span><br><span class="line"><span class="addition">+ layout: tags</span></span><br><span class="line"><span class="addition">+ type: tags</span></span><br></pre></td></tr></table></figure><h3 id="九、关于页的使用"><a href="#九、关于页的使用" class="headerlink" title="九、关于页的使用"></a>九、关于页的使用</h3><p>执行命令，创建关于页</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new page about</span><br></pre></td></tr></table></figure><p>然后编辑站点目录下的<code>source/about/index.md</code>，添加如下<code>Front-matter</code></p><figure class="highlight diff"><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">title: about</span><br><span class="line">date: 2019-03-30 19:25:34</span><br><span class="line"><span class="addition">+ layout: about</span></span><br><span class="line"><span class="addition">+ type: about</span></span><br></pre></td></tr></table></figure><h3 id="十、相册页的使用"><a href="#十、相册页的使用" class="headerlink" title="十、相册页的使用"></a>十、相册页的使用</h3><p>执行命令，创建相册页</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new page gallery</span><br></pre></td></tr></table></figure><p>然后编辑站点目录下的<code>source/gallery/index.md</code>，添加如下<code>Front-matter</code></p><figure class="highlight diff"><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">title: gallery</span><br><span class="line">date: 2019-03-30 19:25:34</span><br><span class="line"><span class="addition">+ layout: gallery</span></span><br><span class="line"><span class="addition">+ type: gallery</span></span><br></pre></td></tr></table></figure><p>打开文件data.json（<u>Annie/source/plugin/gallerypage/data.json</u>）, 按照json语法在数组[……]中添加gallery的图片数据，请设置合适的<code>eWidth</code>、<code>eHeight</code>的值。</p><blockquote class="colorquote warning"><p><b>warning!</b></p><p>注意：下列注释在json文件中无效，使用时请去掉注释。（注释仅为说明）</p></blockquote><figure class="highlight"><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></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line">&#123;&#125;, </span><br><span class="line">&#123;</span><br><span class="line">        "thumbnail": "https://img.jpg",     //小图路径</span><br><span class="line">        "enlarged": "https://img.jpg", //大图路径（可与小图一致）</span><br><span class="line">        "title": "百里守约",//图片标题</span><br><span class="line">        "categories": [&#123;</span><br><span class="line">                "id": 9,//根据id来进行分类</span><br><span class="line">                "title": "百里玄策",</span><br><span class="line">                "photo_count": 41787, //可忽略</span><br><span class="line">                "links": &#123;//可忽略</span><br><span class="line">                    "self": "https://img.jpg",</span><br><span class="line">                    "photos": "https://img.jpg"</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        ],</span><br><span class="line">        "tWidth": 800.6130030959752,//小图相对宽度</span><br><span class="line">        "tHeight": 500,   //小图相对高度</span><br><span class="line">        "eWidth": 3630,   //大图相对宽度</span><br><span class="line">        "eHeight": 2907   //大图相对高度</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;&#125;</span><br><span class="line"> ]</span><br></pre></td></tr></table></figure><p>当然，你可以将该文件<strong>data.json</strong>移至其他目录，相应地修改路径<code>gallery_data</code>。</p><figure class="highlight diff"><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"># gallery page</span><br><span class="line"># gallery_format: natural | square</span><br><span class="line">gallery_format: natural</span><br><span class="line"># one time to load 4 rows or other count, 0 to load img automatically when scrolling.(0,1,2,3,4,5,6......)</span><br><span class="line">gallery_limit: 0</span><br><span class="line"># data url</span><br><span class="line"><span class="addition">+ gallery_data: plugin/gallerypage/data.json</span></span><br></pre></td></tr></table></figure><h3 id="十一、关于站内搜索"><a href="#十一、关于站内搜索" class="headerlink" title="十一、关于站内搜索"></a>十一、关于站内搜索</h3><p>若此时仍未配置站内搜索，则执行命令，安装插件<code>hexo-generator-search-zip</code></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-generator-search-zip --save</span><br></pre></td></tr></table></figure><p>编辑站点目录下的<code>_config.yml</code>，添加如下语句</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line"><span class="attr">  path:</span> <span class="string">search.json</span></span><br><span class="line"><span class="attr">  zipPath:</span> <span class="string">search.zip</span></span><br><span class="line"><span class="attr">  versionPath:</span> <span class="string">searchVersion.txt</span></span><br><span class="line"><span class="attr">  field:</span> <span class="string">post</span></span><br><span class="line">  <span class="comment">#field: post, page or all（3个可选参数）</span></span><br></pre></td></tr></table></figure><p>编辑主题目录下的<code>_config.yml</code>，添加如下语句</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Local search</span></span><br><span class="line"><span class="comment"># Dependencies: https://github.com/flashlab/hexo-generator-search</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line"><span class="attr">    enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># if auto, trigger search by changing input</span></span><br><span class="line">    <span class="comment"># if manual, trigger search by pressing enter key or search button</span></span><br><span class="line"><span class="attr">    trigger:</span> <span class="string">auto</span></span><br><span class="line">    <span class="comment"># show top n results per article, show all results by setting to -1</span></span><br><span class="line"><span class="attr">    top_n_per_article:</span> <span class="number">2</span></span><br></pre></td></tr></table></figure><h3 id="十二、文章页问题"><a href="#十二、文章页问题" class="headerlink" title="十二、文章页问题"></a>十二、文章页问题</h3><h4 id="12-1分类和标签"><a href="#12-1分类和标签" class="headerlink" title="12.1分类和标签"></a>12.1分类和标签</h4><figure class="highlight diff"><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">title: Annie主题使用说明</span><br><span class="line">date: 2018-08-27 20:16:19</span><br><span class="line">cover: /img/post-cover/74.jpg</span><br><span class="line"><span class="addition">+ categories: HEXO博客</span></span><br><span class="line"><span class="addition">+ tags: </span></span><br><span class="line"><span class="addition">+- 说明</span></span><br><span class="line"><span class="addition">+- other tag</span></span><br></pre></td></tr></table></figure><p>分类页的<code>HEXO博客</code>字段来源于文章Front-matter中的<code>categories</code>参数值，标签页的<code>说明</code>字段来源于文章Front-matter中的<code>tags</code>参数值。hexo博客框架只支持一个同级分类，支持多个同级标签。</p><h4 id="12-2相关的文章"><a href="#12-2相关的文章" class="headerlink" title="12.2相关的文章"></a>12.2相关的文章</h4><p>文章页将展示与<u>当前文章</u>具有相同分类、相同标签的系列文章，排序规则：分类&gt;标签&gt;时间&gt;不相关文章。你可以决定是否使用该模块，<code>posts_limit</code>为显示的文章篇数，<code>posts_excerpt</code>为每篇文章的文字截取数量。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 04-POST</span></span><br><span class="line"><span class="comment"># post_relate</span></span><br><span class="line"><span class="attr">relate:</span></span><br><span class="line"><span class="attr">    enable:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">    posts_limit:</span> <span class="number">10</span></span><br><span class="line"><span class="attr">    posts_excerpt:</span> <span class="number">120</span></span><br></pre></td></tr></table></figure><blockquote class="colorquote info"><p><b>info!</b></p><p>只有全站博客文章篇数大于1且<code>relate.enable</code>为真时，该模块有效。</p></blockquote><h4 id="12-3阅读量计数"><a href="#12-3阅读量计数" class="headerlink" title="12.3阅读量计数"></a>12.3阅读量计数</h4><p>对于<code>leancloud_count</code>，你必须设置appid、appkey；对于<code>busuanzi_count</code>，你只需要开启它即可。</p><ol><li>leancloud计数</li></ol><figure class="highlight diff"><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"># post_count</span><br><span class="line">leancloud_count:</span><br><span class="line"><span class="addition">+   enable: true</span></span><br><span class="line"><span class="addition">+   appid: 'dXz'</span></span><br><span class="line"><span class="addition">+    appkey: 'wzG'</span></span><br><span class="line">    like_post:</span><br><span class="line">        enable: true</span><br><span class="line"><span class="addition">+   visit_post:</span></span><br><span class="line">        enable: true</span><br><span class="line">    topN_post: </span><br><span class="line">        enable: true #param1 for topN_post</span><br><span class="line">        limit: 10 #param2 for topN_post</span><br><span class="line">busuanzi_count:</span><br><span class="line">    enable: true</span><br></pre></td></tr></table></figure><p>如果你使用过Valine评论插件，那么leancloud_count的使用十分简单。如果你没有使用过，请参考文章<a href="https://cuibin1991.github.io/2017/07/31/Hexo%E5%8D%9A%E5%AE%A2next%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E9%98%85%E8%AF%BB%E9%87%8F%E7%BB%9F%E8%AE%A1%E5%8A%9F%E8%83%BD/" target="_blank" rel="noopener">Hexo博客next主题添加文章阅读量统计功能</a>创建leancloud应用，创建counter类，并获取其appid、appkey，且设置上面的appid、appkey为相应的值，最后开启<code>visit_post</code>。</p><ol start="2"><li>卜蒜子计数</li></ol><figure class="highlight diff"><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"># post_count</span><br><span class="line">leancloud_count:</span><br><span class="line">    enable: false</span><br><span class="line">    appid: 'dX--'</span><br><span class="line">    appkey: 'dX--'</span><br><span class="line">    like_post:</span><br><span class="line">        enable: true</span><br><span class="line">    visit_post:</span><br><span class="line">        enable: true</span><br><span class="line">    topN_post: </span><br><span class="line">        enable: true #param1 for topN_post</span><br><span class="line">        limit: 10 #param2 for topN_post</span><br><span class="line"></span><br><span class="line">busuanzi_count:</span><br><span class="line"><span class="addition">+    enable: true</span></span><br></pre></td></tr></table></figure><p>该模块放置于页脚，文章页面只显示<strong>文章的阅读量</strong>，其他页面只显示<strong>总访问量</strong>和<strong>访客数</strong>（<del>等待完善</del>）</p><h4 id="12-4文章点赞"><a href="#12-4文章点赞" class="headerlink" title="12.4文章点赞"></a>12.4文章点赞</h4><p>如果你完成了<u>12.3阅读量计数</u>的<u>leancloud计数</u>的设置，那么只需要开启<code>like_post</code>。</p><figure class="highlight diff"><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"># post_count</span><br><span class="line">leancloud_count:</span><br><span class="line">    enable: false</span><br><span class="line">    appid: 'dX--'</span><br><span class="line">    appkey: 'dX--'</span><br><span class="line"><span class="addition">+   like_post:</span></span><br><span class="line"><span class="addition">+       enable: true</span></span><br><span class="line">    visit_post:</span><br><span class="line">        enable: true</span><br><span class="line">    topN_post: </span><br><span class="line">        enable: true #param1 for topN_post</span><br><span class="line">        limit: 10 #param2 for topN_post</span><br><span class="line"></span><br><span class="line">busuanzi_count:</span><br><span class="line">    enable: true</span><br></pre></td></tr></table></figure><h4 id="12-5-文章排行"><a href="#12-5-文章排行" class="headerlink" title="12.5 文章排行"></a>12.5 文章排行</h4><figure class="highlight diff"><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"># post_count</span><br><span class="line">leancloud_count:</span><br><span class="line">    enable: false</span><br><span class="line">    appid: 'dX--'</span><br><span class="line">    appkey: 'dX--'</span><br><span class="line">    like_post:</span><br><span class="line">       enable: true</span><br><span class="line">    visit_post:</span><br><span class="line">        enable: true</span><br><span class="line"><span class="addition">+   topN_post: </span></span><br><span class="line"><span class="addition">+       enable: true #param1 for topN_post</span></span><br><span class="line"><span class="addition">+       limit: 10 #param2 for topN_post</span></span><br><span class="line"></span><br><span class="line">busuanzi_count:</span><br><span class="line">    enable: true</span><br></pre></td></tr></table></figure><p>如果你完成了<u>12.3阅读量计数</u>的<u>leancloud计数</u>的设置，那么只需要开启<code>topN_post</code>。（<strong>文章阅读排行</strong>依赖于<strong>12.3阅读量计数</strong>）</p><blockquote class="colorquote info"><p><b>info!</b></p><p>该模块放置于搜索页面，你可按需定制</p></blockquote><h4 id="12-6文章目录"><a href="#12-6文章目录" class="headerlink" title="12.6文章目录"></a>12.6文章目录</h4><p>若一篇文章的正文存在h1、h2、h3等标题，则文章页展示<u>目录按钮</u>。点击<u>目录按钮</u>，页面左侧展示文章目录。当屏幕宽度小于1024px或页面滚动高度大于文章正文高度时，页面隐藏文章目录。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># post_toc</span></span><br><span class="line"><span class="attr">post_toc:</span></span><br><span class="line"><span class="attr">    enable:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">    katelog:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><h4 id="12-7数学公式"><a href="#12-7数学公式" class="headerlink" title="12.7数学公式"></a>12.7数学公式</h4><p>请先设置<u>主题配置文件</u>的<code>mathjax</code>参数，再于文章的Front-matter中添加<code>mathjax: true</code></p><figure class="highlight diff"><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"># post_mathJax</span><br><span class="line">mathjax:</span><br><span class="line"><span class="addition">+  enable: true</span></span><br></pre></td></tr></table></figure><figure class="highlight diff"><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">title: Annie主题使用说明</span><br><span class="line">date: 2018-08-27 20:16:19</span><br><span class="line">cover: /img/post-cover/74.jpg</span><br><span class="line"><span class="addition">+ mathjax: true</span></span><br><span class="line">categories: HEXO博客</span><br><span class="line">tags: </span><br><span class="line">- 说明</span><br><span class="line">- other tag</span><br></pre></td></tr></table></figure><h4 id="12-8代码块高亮"><a href="#12-8代码块高亮" class="headerlink" title="12.8代码块高亮"></a>12.8代码块高亮</h4><p>综合考虑hexo自身的代码高亮插件和hexo-pism-plugin高亮插件的特性及代码块解析规则，2019-04-27日更新后，主题弃用<a href="https://github.com/ele828/hexo-prism-plugin" target="_blank" rel="noopener">hexo-prism-plugin</a>插件，参考&amp;使用了next主题的代码高亮风格。</p><ol><li>编辑<u>主题配置文件</u>，选择并设置<code>highlight_theme</code>的值</li></ol><figure class="highlight diff"><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"># post_code</span><br><span class="line"># highlight_theme: normal | night | night blue | night bright | night eighties</span><br><span class="line"><span class="addition">+ highlight_theme: night bright</span></span><br><span class="line">code_copy:</span><br><span class="line">    enable: true</span><br></pre></td></tr></table></figure><ol start="2"><li>编辑<u>站点配置文件</u>，设置<code>highlight</code>的值</li></ol><figure class="highlight diff"><figcaption><span>_config.yml</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"># Writing</span><br><span class="line">new_post_name: :title.md # File name of new posts</span><br><span class="line">default_layout: post</span><br><span class="line">titlecase: false # Transform title into titlecase</span><br><span class="line">external_link: true # Open external links in new tab</span><br><span class="line">filename_case: 0</span><br><span class="line">render_drafts: false</span><br><span class="line">post_asset_folder: true</span><br><span class="line">relative_link: false</span><br><span class="line">future: true</span><br><span class="line"><span class="addition">+highlight:</span></span><br><span class="line"><span class="addition">+  enable: true</span></span><br><span class="line"><span class="addition">+  line_number: true</span></span><br><span class="line">  auto_detect: false</span><br><span class="line">  tab_replace:</span><br></pre></td></tr></table></figure><blockquote class="colorquote warning"><p><b>warning!</b></p><p>请尽可能地指定<u>相应代码块</u>的<u>语言类型</u>（html、js、c++、java……），以使高亮风格有效。</p></blockquote><h4 id="12-9代码块复制"><a href="#12-9代码块复制" class="headerlink" title="12.9代码块复制"></a>12.9代码块复制</h4><p>只有<code>theme.code_copy.enable</code>为真且<code>config.highlight.enable</code>为真时，代码块的复制功能才有效。</p><figure class="highlight diff"><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"># post_code</span><br><span class="line"># highlight_theme: normal | night | night blue | night bright | night eighties</span><br><span class="line">highlight_theme: night bright</span><br><span class="line">code_copy:</span><br><span class="line"><span class="addition">+    enable: true</span></span><br></pre></td></tr></table></figure><h4 id="12-10文章评论功能"><a href="#12-10文章评论功能" class="headerlink" title="12.10文章评论功能"></a>12.10文章评论功能</h4><p>Hexo-theme-Annie主题集成了gitalk、DesertsP版的valine、livere评论插件。</p><table><thead><tr><th style="text-align:center">序号</th><th style="text-align:left">评论插件</th><th style="text-align:left">使用方法</th></tr></thead><tbody><tr><td style="text-align:center">1</td><td style="text-align:left">gitalk</td><td style="text-align:left"><a href="https://github.com/gitalk/gitalk/blob/master/readme-cn.md" target="_blank" rel="noopener">正式文档</a>、<a href="https://sariay.github.io/2018/11/18/Annie%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8Gitalk/" target="_blank" rel="noopener">Annie主题使用Gitalk</a></td></tr><tr><td style="text-align:center">2</td><td style="text-align:left">valine</td><td style="text-align:left"><a href="https://panjunwen.com/diy-a-comment-system" target="_blank" rel="noopener">正式文档</a>、<a href="https://www.xxwhite.com/2017/Valine.html" target="_blank" rel="noopener">加个Valine评论系统</a></td></tr><tr><td style="text-align:center">3</td><td style="text-align:left">livere</td><td style="text-align:left"><a href="https://juejin.im/post/5a632dfcf265da3e484be90c" target="_blank" rel="noopener">为Hexo博客添加LiveRe评论系统</a></td></tr></tbody></table><blockquote class="colorquote warning"><p><b>warning!</b></p><p>对于gitalk，你必须设置clientID、clientSecret；对于Valine，你必须设置appid、appkey；对于livere，你必须设置livere_uid。</p></blockquote><h4 id="12-11文章分享功能"><a href="#12-11文章分享功能" class="headerlink" title="12.11文章分享功能"></a>12.11文章分享功能</h4><p>Hexo-theme-Annie主题集成了addThis、baiduShare、shareThis、socialShare分享插件。</p><table><thead><tr><th style="text-align:center">序号</th><th style="text-align:left">分享插件</th><th style="text-align:left">使用方法</th></tr></thead><tbody><tr><td style="text-align:center">1</td><td style="text-align:left">addThis</td><td style="text-align:left">登录<a href="https://www.addthis.com/" target="_blank" rel="noopener">addThis</a>获取应用的账户id</td></tr><tr><td style="text-align:center">2</td><td style="text-align:left">baiduShare</td><td style="text-align:left">直接使用</td></tr><tr><td style="text-align:center">3</td><td style="text-align:left">shareThis</td><td style="text-align:left">登录<a href="https://www.sharethis.com/onboarding-cms/" target="_blank" rel="noopener">shareThis</a>获取应用的账户id</td></tr><tr><td style="text-align:center">4</td><td style="text-align:left">socialShare</td><td style="text-align:left">直接使用</td></tr></tbody></table><blockquote class="colorquote info"><p><b>info!</b></p><p>使用addThis、shareThis时，应注意<b>关闭</b>浏览器的内容拦截插件。</p></blockquote><h3 id="十三、站点分析"><a href="#十三、站点分析" class="headerlink" title="十三、站点分析"></a>十三、站点分析</h3><table><thead><tr><th style="text-align:center">序号</th><th style="text-align:left">分析插件</th><th style="text-align:left">使用方法</th></tr></thead><tbody><tr><td style="text-align:center">1</td><td style="text-align:left">卜算子分析</td><td style="text-align:left">直接使用</td></tr><tr><td style="text-align:center">2</td><td style="text-align:left">baidu_analytics</td><td style="text-align:left">需获取账户id</td></tr><tr><td style="text-align:center">3</td><td style="text-align:left">cnzz_analytics</td><td style="text-align:left">需获取账户id</td></tr><tr><td style="text-align:center">4</td><td style="text-align:left">google_analytics</td><td style="text-align:left">需获取账户id</td></tr><tr><td style="text-align:center">5</td><td style="text-align:left">tencent_analytics</td><td style="text-align:left">需获取账户id</td></tr></tbody></table><h3 id="十四、其他的问题"><a href="#十四、其他的问题" class="headerlink" title="十四、其他的问题"></a>十四、其他的问题</h3><h4 id="14-1社交链接"><a href="#14-1社交链接" class="headerlink" title="14.1社交链接"></a>14.1社交链接</h4><p>直接增加相应的社交图标、社交链接即可。</p><figure class="highlight diff"><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></pre></td><td class="code"><pre><span class="line"># social</span><br><span class="line">social:</span><br><span class="line">    github:</span><br><span class="line">        url: http://github.com/</span><br><span class="line">        icon: fa fa-github</span><br><span class="line">    weibo:</span><br><span class="line">        url: http://github.com/</span><br><span class="line">        icon: fa fa-weibo    </span><br><span class="line">    pinterest: </span><br><span class="line">        url: http://github.com/</span><br><span class="line">        icon: fa fa-pinterest</span><br><span class="line">    instagram:</span><br><span class="line">        url: http://github.com/</span><br><span class="line">        icon: fa fa-instagram</span><br><span class="line">    twitter:</span><br><span class="line">        url: http://github.com/</span><br><span class="line">        icon: fa fa-twitter</span><br><span class="line">    rss: </span><br><span class="line">        url: /atom.xml</span><br><span class="line">        icon: fa fa-rss</span><br><span class="line"><span class="addition">+   digg: </span></span><br><span class="line"><span class="addition">+       url: http://github.com/</span></span><br><span class="line"><span class="addition">+       icon: fa fa-digg</span></span><br></pre></td></tr></table></figure><h4 id="14-2RSS订阅"><a href="#14-2RSS订阅" class="headerlink" title="14.2RSS订阅"></a>14.2RSS订阅</h4><p>主题将使用到 <a href="https://github.com/hexojs/hexo-generator-feed" target="_blank" rel="noopener">hexo-generator-feed</a> 插件来生成<u>atom.xml</u> 文件。执行命令安装该插件：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-feed --save</span><br></pre></td></tr></table></figure><p>编辑<u>站点配置文件</u>，添加相应的参数：</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+feed:</span></span><br><span class="line"><span class="addition">+  type: atom</span></span><br><span class="line"><span class="addition">+  path: atom.xml</span></span><br><span class="line"><span class="addition">+  limit: 20</span></span><br></pre></td></tr></table></figure><p>执行 <code>hexo clean &amp; hexo g</code> 重新生成博客文件，你将在 <u>hexo/public</u>/ 目录下看到 <code>atom.xml</code> 文件，说明你已经安装成功了。 （rss的社交链接见于上一节：<strong>1. 社交链接</strong>）</p><h4 id="14-3版权声明"><a href="#14-3版权声明" class="headerlink" title="14.3版权声明"></a>14.3版权声明</h4><p>对于copyright ，<code>since</code>为站点建立年份，<code>cotent_author</code>为站点作者。</p><figure class="highlight yml"><figcaption><span>_config.yml</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># copyright  </span></span><br><span class="line"><span class="attr">since:</span> <span class="number">2017</span></span><br><span class="line"><span class="attr">cotent_author:</span> <span class="string">Sariay</span></span><br></pre></td></tr></table></figure><h4 id="14-4点击页面浮现桃心"><a href="#14-4点击页面浮现桃心" class="headerlink" title="14.4点击页面浮现桃心"></a>14.4点击页面浮现桃心</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></pre></td><td class="code"><pre><span class="line"># when click, emerge heart</span><br><span class="line">love:</span><br><span class="line">    enable: true</span><br><span class="line"></span><br><span class="line"># back to top</span><br><span class="line">totop:</span><br><span class="line">    enable: true</span><br></pre></td></tr></table></figure><p>对于<code>love</code>，若设置为true，则点击页面时，会出现随机颜色的桃心💚💛💕。对于<code>totop</code>，若设置为true，则启用<u>返回顶部按钮</u>。</p><h3 id="十五、开发定制问题"><a href="#十五、开发定制问题" class="headerlink" title="十五、开发定制问题"></a>十五、开发定制问题</h3><h4 id="15-1主题项目结构"><a href="#15-1主题项目结构" class="headerlink" title="15.1主题项目结构"></a>15.1主题项目结构</h4><figure class="highlight plain"><figcaption><span>Annie</span><a href="https://github.com/Sariay/hexo-theme-Annie" target="_blank" rel="noopener">hexo-theme-Annie </a></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line">ANNIE</span><br><span class="line">├─languages#国际化语言支持</span><br><span class="line">├─layout#html页面模板</span><br><span class="line">│  └─_partial</span><br><span class="line">│      ├─custom</span><br><span class="line">│      ├─plugin</span><br><span class="line">│      │  ├─clipboard</span><br><span class="line">│      │  ├─comment</span><br><span class="line">│      │  ├─share</span><br><span class="line">│      │  └─statistics</span><br><span class="line">│      ├─post</span><br><span class="line">│      └─widget</span><br><span class="line">├─scripts#站点脚本</span><br><span class="line">└─source#主题资源</span><br><span class="line">    ├─css</span><br><span class="line">    │  └─_highlight</span><br><span class="line">    ├─img</span><br><span class="line">    │  ├─post-cover</span><br><span class="line">    │  ├─quote</span><br><span class="line">    │  └─random</span><br><span class="line">    ├─js</span><br><span class="line">    └─plugin</span><br><span class="line">        ├─chinese</span><br><span class="line">        ├─clipboard</span><br><span class="line">        ├─comment</span><br><span class="line">        ├─fancybox</span><br><span class="line">        ├─gallerypage</span><br><span class="line">        │  └─images</span><br><span class="line">        ├─imgLazyLoader</span><br><span class="line">        ├─imgResize</span><br><span class="line">        ├─love</span><br><span class="line">        ├─motto</span><br><span class="line">        ├─nicescroll</span><br><span class="line">        ├─search</span><br><span class="line">        ├─toc</span><br><span class="line">        └─vibrant</span><br></pre></td></tr></table></figure><p>Annie主题基于<u>hexo 3.8.0</u>、ejs、styl开发而成。一般来说，如果你想修改页面的html结构，请到<u>layout</u>目录下添加或修改相应的ejs文件； 如果你想修改页面元素的css样式，请到<u>source/css</u>目录下添加或修改相应的styl文件；如果你想添加一些js代码，原则上，自定义代码片段应添加于<u>source/js/main.js</u>文件中，引入的js文件应放置于<u>source/plugin</u>目录下。 </p><h4 id="15-2主题字体问题"><a href="#15-2主题字体问题" class="headerlink" title="15.2主题字体问题"></a>15.2主题字体问题</h4><p>主题整体字体大小，修改html标签的<code>font-size</code>属性</p><figure class="highlight diff"><figcaption><span>_main.styl</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">html &#123;</span><br><span class="line"><span class="deletion">-   font-size: 16px;</span></span><br><span class="line"><span class="addition">+   font-size: 14px;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>主题整体字体族，修改body标签的<code>font-family</code>属性</p><figure class="highlight diff"><figcaption><span>_main.styl</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">body &#123;</span><br><span class="line"><span class="deletion">-   font-family: Ovo, Georgia, STZhongsong, "Microsoft YaHei", serif;</span></span><br><span class="line"><span class="addition">+   font-family: "PingFang SC", "Microsoft YaHei";</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>文章详情页字体族，修改#layout-post类的<code>font-family</code>属性</p><figure class="highlight diff"><figcaption><span>_post.styl</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">#layout-post &#123;</span><br><span class="line"><span class="addition">+   font-family: "Source Sans Pro", "Segoe UI";</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>你可以检索styl文件，查询相应的标签或类，进而设置相应元素的屬性。</p><h4 id="15-3页头菜单颜色"><a href="#15-3页头菜单颜色" class="headerlink" title="15.3页头菜单颜色"></a>15.3页头菜单颜色</h4><p>页头菜单颜色会根据背景的主题色变化<strong>非黑即白</strong>。亦即主题色为浅色时，字体为黑；主题色为深色时，字体为白。你可以参考main.js中函数<code>Annie_ColorExtraction(img)</code>。（修改、完善它）</p><p><br></p><center>愿温柔相待与你，满杯欢喜，不逐哀城！</center>]]></content>
    
    <summary type="html">
    
      
      
        &lt;h3 id=&quot;零、准备工作&quot;&gt;&lt;a href=&quot;#零、准备工作&quot; class=&quot;headerlink&quot; title=&quot;零、准备工作&quot;&gt;&lt;/a&gt;零、准备工作&lt;/h3&gt;&lt;p&gt;开始之前，你应该预先理解下列标签的意义：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;代码对比&lt;/li&gt;
&lt;/ol&gt;
&lt;fig
      
    
    </summary>
    
      <category term="HEXO博客" scheme="http://yoursite.com/categories/HEXO%E5%8D%9A%E5%AE%A2/"/>
    
    
      <category term="说明" scheme="http://yoursite.com/tags/%E8%AF%B4%E6%98%8E/"/>
    
  </entry>
  
  <entry>
    <title>Github入门术语</title>
    <link href="http://yoursite.com/2018/08/02/Github%E5%85%A5%E9%97%A8%E6%9C%AF%E8%AF%AD/"/>
    <id>http://yoursite.com/2018/08/02/Github入门术语/</id>
    <published>2018-08-02T11:14:05.000Z</published>
    <updated>2019-04-13T12:27:38.310Z</updated>
    
    <content type="html"><![CDATA[<p><strong>什么是Git</strong> </p><p>Git是一个版本控制系统（Version Control System），版本控制即记录一个或若干文件内容变化的情况。Git属于分布式版本控制系统，客户端提取文件时总是镜像的完整仓库。</p><p><strong>Repository</strong>  </p><p>仓库，储存项目的空间。建立项目之前需要建立仓库，一个项目对应一个仓库。</p><p><strong>Issues</strong>  </p><p>针对于项目bug，审查者提出的问题。or审查者希望项目增加新的特性，而提出的建议。</p><p><strong>Star</strong> </p><p>点赞，遇到一个较好项目时可以为其”点赞“，Star过的项目会保存到点赞者的”star“库中。</p><p><strong>Fork</strong>  </p><p>拉分支，若对一个项目感兴趣，并且希望基于该项目开发新功能时，开发者可以Fork此项目。Fork之后就复制一个完全相同的项目到开发者的github仓库中，此项目独立于原项目，有着独立的时间线。</p><p><strong>Pull Request</strong>  </p><p>提交请求，建立在Fork之上。Fork一个项目并进行完善之后，可以对原项目的拥有者提出Pull Request。</p><p><strong>Merge </strong> </p><p>合并，别人Fork你的项目，对其进行完善之后，若其提出Pull Request，此时你可以审查该请求。如果Pull Request内容满足你的要求，且未与原项目冲突，你可以选择将其合并到项目之中。</p><p><strong>Watch </strong></p><p>观察，若希望及时得到一个项目的更新通知，你可以Watch该项目</p><p><strong>Gist</strong></p><p>分享片段化的代码。<del>翻不出去，网络奇差</del></p><blockquote><p>封面图 Photo by <a href="https://unsplash.com/photos/ZxnR3pirTx4?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener">Neven Krcmarek</a> on <a href="https://unsplash.com/search/photos/pen?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener">Unsplash</a></p></blockquote>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;&lt;strong&gt;什么是Git&lt;/strong&gt; &lt;/p&gt;
&lt;p&gt;Git是一个版本控制系统（Version Control System），版本控制即记录一个或若干文件内容变化的情况。Git属于分布式版本控制系统，客户端提取文件时总是镜像的完整仓库。&lt;/p&gt;
&lt;p&gt;&lt;stro
      
    
    </summary>
    
      <category term="前端学习" scheme="http://yoursite.com/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/"/>
    
    
      <category term="Github入门" scheme="http://yoursite.com/tags/Github%E5%85%A5%E9%97%A8/"/>
    
  </entry>
  
  <entry>
    <title>秦时明月</title>
    <link href="http://yoursite.com/2018/07/25/%E7%A7%A6%E6%97%B6%E6%98%8E%E6%9C%88/"/>
    <id>http://yoursite.com/2018/07/25/秦时明月/</id>
    <published>2018-07-25T15:57:16.000Z</published>
    <updated>2019-04-13T12:25:58.090Z</updated>
    
    <content type="html"><![CDATA[<p>空页测试</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;p&gt;空页测试&lt;/p&gt;

      
    
    </summary>
    
      <category term="主题测试" scheme="http://yoursite.com/categories/%E4%B8%BB%E9%A2%98%E6%B5%8B%E8%AF%95/"/>
    
    
  </entry>
  
</feed>