-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathatom.xml
More file actions
73 lines (41 loc) · 86.5 KB
/
atom.xml
File metadata and controls
73 lines (41 loc) · 86.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Sando博客</title>
<subtitle>代码日记</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="https://sandop.github.io/"/>
<updated>2019-02-21T05:55:37.795Z</updated>
<id>https://sandop.github.io/</id>
<author>
<name>Sando</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>GitHub + Hexo搭建自己博客(二) Next主题配置 </title>
<link href="https://sandop.github.io/2019/02/19/GitHub-Hexo%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E5%8D%9A%E5%AE%A2-%E4%BA%8C-Next%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE/"/>
<id>https://sandop.github.io/2019/02/19/GitHub-Hexo搭建自己博客-二-Next主题配置/</id>
<published>2019-02-19T07:35:40.000Z</published>
<updated>2019-02-21T05:55:37.795Z</updated>
<content type="html"><![CDATA[<h2 id="一、基本配置"><a href="#一、基本配置" class="headerlink" title="一、基本配置"></a>一、基本配置</h2><p>在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于<strong>站点根目录</strong>下，主要包含 Hexo 本身的配置；另一份位于<strong>主题目录</strong>下，这份配置由主题作者提供，主要用于配置主题相关的选项。</p><p>为了描述方便，在以下说明中，将前者称为 <strong>站点配置文件</strong>， 后者称为 <strong>主题配置文件</strong>。</p><h3 id="1、站点基本设置"><a href="#1、站点基本设置" class="headerlink" title="1、站点基本设置"></a>1、站点基本设置</h3><p>在<strong>站点配置文件</strong> 即博客根目录下的<code>_config.yml</code>中</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"># Site</span><br><span class="line">title: Sando博客 </span><br><span class="line">subtitle: 代码日记 </span><br><span class="line">description: 寄杂志第</span><br><span class="line">keywords:</span><br><span class="line">author: Sando</span><br><span class="line">language: zh-Hans</span><br><span class="line">timezone:</span><br></pre></td></tr></table></figure><p><img src="/assets/images/20190219/01.png" alt="01"></p><h3 id="2、头像设置"><a href="#2、头像设置" class="headerlink" title="2、头像设置"></a>2、头像设置</h3><h4 id="2-1-设置头像"><a href="#2-1-设置头像" class="headerlink" title="2.1 设置头像"></a>2.1 设置头像</h4><p>在<strong>站点配置文件</strong> 中新增avatar，值设置为头像的链接地址。地址可以是网络地址，也可以是本地地址（放置在source/images/ 目录下）<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">#侧边栏头像设置</span><br><span class="line">avatar: /images/user.jpg</span><br></pre></td></tr></table></figure></p><h4 id="2-2-头像旋转动画"><a href="#2-2-头像旋转动画" class="headerlink" title="2.2 头像旋转动画"></a>2.2 头像旋转动画</h4><p>打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.site-author-image</span> {</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line"> <span class="attribute">padding</span>: $site-author-image-padding;</span><br><span class="line"> <span class="attribute">max-width</span>: $site-author-image-width;</span><br><span class="line"> <span class="attribute">height</span>: $site-author-image-height;</span><br><span class="line"> <span class="attribute">border</span>: $site-author-image-border-width solid $site-author-image-border-color;</span><br><span class="line"> </span><br><span class="line"> <span class="comment">/* 头像圆形 */</span></span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">80px</span>;</span><br><span class="line"> <span class="attribute">-webkit-border-radius</span>: <span class="number">80px</span>;</span><br><span class="line"> <span class="attribute">-moz-border-radius</span>: <span class="number">80px</span>;</span><br><span class="line"> <span class="attribute">box-shadow</span>: inset <span class="number">0</span> -<span class="number">1px</span> <span class="number">0</span> <span class="number">#333</span>sf;</span><br><span class="line"> </span><br><span class="line"> <span class="comment">/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 </span></span><br><span class="line"><span class="comment"> (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/</span></span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"> <span class="comment">/* 鼠标经过头像旋转360度 */</span></span><br><span class="line"> <span class="attribute">-webkit-transition</span>: -webkit-transform <span class="number">1.0s</span> ease-out;</span><br><span class="line"> <span class="attribute">-moz-transition</span>: -moz-transform <span class="number">1.0s</span> ease-out;</span><br><span class="line"> <span class="attribute">transition</span>: transform <span class="number">1.0s</span> ease-out;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line"><span class="selector-tag">img</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="comment">/* 鼠标经过停止头像旋转 </span></span><br><span class="line"><span class="comment"> -webkit-animation-play-state:paused;</span></span><br><span class="line"><span class="comment"> animation-play-state:paused;*/</span></span><br><span class="line"> </span><br><span class="line"> <span class="comment">/* 鼠标经过头像旋转360度 */</span></span><br><span class="line"> <span class="attribute">-webkit-transform</span>: <span class="built_in">rotateZ</span>(360deg);</span><br><span class="line"> <span class="attribute">-moz-transform</span>: <span class="built_in">rotateZ</span>(360deg);</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(360deg);</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* Z 轴旋转动画 */</span></span><br><span class="line">@-<span class="keyword">webkit</span>-<span class="keyword">keyframes</span> play {</span><br><span class="line"> 0% {</span><br><span class="line"> <span class="attribute">-webkit-transform</span>: <span class="built_in">rotateZ</span>(0deg);</span><br><span class="line"> }</span><br><span class="line"> 100% {</span><br><span class="line"> <span class="attribute">-webkit-transform</span>: <span class="built_in">rotateZ</span>(-360deg);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">@-<span class="keyword">moz</span>-<span class="keyword">keyframes</span> play {</span><br><span class="line"> 0% {</span><br><span class="line"> <span class="attribute">-moz-transform</span>: <span class="built_in">rotateZ</span>(0deg);</span><br><span class="line"> }</span><br><span class="line"> 100% {</span><br><span class="line"> <span class="attribute">-moz-transform</span>: <span class="built_in">rotateZ</span>(-360deg);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">@<span class="keyword">keyframes</span> play {</span><br><span class="line"> 0% {</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(0deg);</span><br><span class="line"> }</span><br><span class="line"> 100% {</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(-360deg);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h3 id="3、主题布局设置"><a href="#3、主题布局设置" class="headerlink" title="3、主题布局设置"></a>3、主题布局设置</h3><p>在<strong>主题配置文件</strong>即在next主题目录下的_config.yml文件中将scheme设定为Pisces,可根据个人喜好设置成其他的值</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"># Schemes</span><br><span class="line">#scheme: Muse</span><br><span class="line">#scheme: Mist</span><br><span class="line">scheme: Pisces</span><br><span class="line">#scheme: Gemini</span><br></pre></td></tr></table></figure><h3 id="4、菜单项设置"><a href="#4、菜单项设置" class="headerlink" title="4、菜单项设置"></a>4、菜单项设置</h3><p>在<strong>主题配置文件</strong>中的menu中设置，增添一个movies<br>注：千万不要在这设置中文，后面的值那是查找文件的地方！<br>如下<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line"> home: / || home</span><br><span class="line"> about: /about/ || user</span><br><span class="line"> tags: /tags/ || tags</span><br><span class="line"> categories: /categories/ || th</span><br><span class="line"> #archives: /archives</span><br><span class="line"> #search: /search</span><br><span class="line"> #schedule: /schedule/ || calendar</span><br><span class="line"> #sitemap: /sitemap.xml || sitemap</span><br><span class="line"> #commonweal: /404</span><br><span class="line"> movies: /movies || film</span><br></pre></td></tr></table></figure></p><p>这些配置都要与你主题目录下的languages文件中对应的yml文档里配置相关联。<br>比如你在站点根目录中的配置文件设置language为zh-Hans，那么就要进入到主题目录下的languages文件中修改zh-Hans.yml，这样才能显示出菜单项新增的中文内容<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line"> home: 首页</span><br><span class="line"> archives: 归档</span><br><span class="line"> categories: 分类</span><br><span class="line"> tags: 标签</span><br><span class="line"> about: 关于</span><br><span class="line"> search: 搜索</span><br><span class="line"> schedule: 日程表</span><br><span class="line"> sitemap: 站点地图</span><br><span class="line"> commonweal: 公益404</span><br><span class="line"> movies: 电影</span><br></pre></td></tr></table></figure></p><h3 id="5、菜单项图标设置"><a href="#5、菜单项图标设置" class="headerlink" title="5、菜单项图标设置"></a>5、菜单项图标设置</h3><p>在<strong>主题配置文件</strong>中对应的字段是menu_icons。格式为item name：icon name，其中item name与所配置的菜单名字对应，icon name是Font Awesome图标的名字。而 enable 可用于控制是否显示图标，你可以设置成 false 来去掉图标。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">menu_icons:</span><br><span class="line"> enable: true</span><br><span class="line"> home: home</span><br><span class="line"> about: user</span><br><span class="line"> categories: th</span><br><span class="line"> tags: tags</span><br><span class="line"> archives: archive</span><br><span class="line"> commonweal: heartbeat</span><br><span class="line"> movies: film</span><br></pre></td></tr></table></figure></p><p><img src="/assets/images/20190219/05.png" alt="05"></p><p>新建的栏目icon，需要在<a href="http://fontawesome.io/icons/" target="_blank" rel="noopener">Font Awesome图标库</a>存在，例如新建的movies，在图标库中查询选择film图标，在<strong>主题配置文件</strong>的menu_icons中，更改movies: film</p><h3 id="6、侧栏位置设置"><a href="#6、侧栏位置设置" class="headerlink" title="6、侧栏位置设置"></a>6、侧栏位置设置</h3><p>在<strong>主题配置文件</strong>中修改主题目录下sidebar的position值<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">sidebar:</span><br><span class="line"> # Sidebar Position, available value: left | right (only for Pisces | Gemini).</span><br><span class="line"> position: left</span><br><span class="line"> #position: right</span><br></pre></td></tr></table></figure></p><h3 id="7、添加标签页面"><a href="#7、添加标签页面" class="headerlink" title="7、添加标签页面"></a>7、添加标签页面</h3><p>前面通过修改next主题下的_config.yml文件中的menu选项，可以在主页面的菜单栏添加标签选项，但是此时点击标签，跳转的页面会显示page not found。此时我们要新建一个页面<br>在git bush中输入<code>hexo new page tags</code><br><img src="/assets/images/20190219/02.png" alt="02"></p><p>在新建的index.md文件中添加type: “tags”<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: tags</span><br><span class="line">date: 2019-02-18 17:16:00</span><br><span class="line">type: "tags"</span><br><span class="line">---</span><br></pre></td></tr></table></figure></p><p>当要为某一篇文章添加标签，只需在blog/source/_post目录下的具体文章的tags中添加标签即可，如：<br><img src="/assets/images/20190219/03.png" alt="03"><br>成功后为<br><img src="/assets/images/20190219/04.png" alt="04"></p><h3 id="8、侧边栏社交栏目"><a href="#8、侧边栏社交栏目" class="headerlink" title="8、侧边栏社交栏目"></a>8、侧边栏社交栏目</h3><p>侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。 两者配置均在 <strong>主题配置文件</strong> 中</p><p>（1）链接放置在 social 字段下，一行一个链接。其键值格式是 显示文本: 链接地址。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"># Social links</span><br><span class="line">social:</span><br><span class="line"> GitHub: https://github.com/your-user-name</span><br><span class="line"> Twitter: https://twitter.com/your-user-name</span><br><span class="line"> 微博: http://weibo.com/your-user-name</span><br><span class="line"> 豆瓣: http://douban.com/people/your-user-name</span><br><span class="line"> 知乎: http://www.zhihu.com/people/your-user-name</span><br><span class="line"> # 等等</span><br></pre></td></tr></table></figure></p><p>（2）设定链接的图标，对应的字段是 social_icons。其键值格式是 匹配键: Font Awesome 图标名称， 匹配键 与上一步所配置的链接的 显示文本 相同（大小写严格匹配），图标名称 是 Font Awesome 图标的名字（不必带 fa- 前缀）。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。<br>其中seoial_icons节点中后面的值是<a href="http://fontawesome.io/icons/" target="_blank" rel="noopener">http://fontawesome.io/icons/</a> 中提供的图标的名称。之后其他链接如推特，微博等都可自行增减。<br><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"># Social Icons</span><br><span class="line">social_icons:</span><br><span class="line"> enable: true</span><br><span class="line"> # Icon Mappings</span><br><span class="line"> GitHub: github</span><br><span class="line"> Twitter: twitter</span><br><span class="line"> 微博: weibo</span><br></pre></td></tr></table></figure></p><h3 id="9、显示当前浏览进度"><a href="#9、显示当前浏览进度" class="headerlink" title="9、显示当前浏览进度"></a>9、显示当前浏览进度</h3><p><strong>主题配置文件</strong> 即<code>themes/*/_config.yml</code>中的<code>b2t</code>（返回顶部）及<code>scrollpercent</code>（浏览百分数）<br><img src="/assets/images/20190219/12.png" alt="12"></p><h2 id="二、个性化设置"><a href="#二、个性化设置" class="headerlink" title="二、个性化设置"></a>二、个性化设置</h2><h3 id="1、添加萌萌哒二次元看板娘"><a href="#1、添加萌萌哒二次元看板娘" class="headerlink" title="1、添加萌萌哒二次元看板娘"></a>1、添加萌萌哒二次元看板娘</h3><p><a href="https://github.com/EYHN/hexo-helper-live2d" target="_blank" rel="noopener">英文介绍</a><br><a href="https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md" target="_blank" rel="noopener">中文介绍</a></p><h4 id="1-1、安装插件"><a href="#1-1、安装插件" class="headerlink" title="1.1、安装插件"></a>1.1、安装插件</h4><blockquote><p><code>npm install --save hexo-helper-live2d</code></p></blockquote><h4 id="1-2、配置"><a href="#1-2、配置" class="headerlink" title="1.2、配置"></a>1.2、配置</h4><p>请向根目录的 _config.yml 文件或主题的 _config.yml 文件中添加配置.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">live2d:</span><br><span class="line"> enable: true</span><br><span class="line"> scriptFrom: local</span><br><span class="line"> pluginRootPath: live2dw/</span><br><span class="line"> pluginJsPath: lib/</span><br><span class="line"> pluginModelPath: assets/</span><br><span class="line"> tagMode: false</span><br><span class="line"> log: false</span><br><span class="line"> model:</span><br><span class="line"> use: live2d-widget-model-<你喜欢的模型名字></span><br><span class="line"> display:</span><br><span class="line"> position: right</span><br><span class="line"> width: 150</span><br><span class="line"> height: 300</span><br><span class="line"> mobile:</span><br><span class="line"> show: true</span><br></pre></td></tr></table></figure><p><a href="https://huaji8.top/post/live2d-plugin-2.0/" target="_blank" rel="noopener">模型连接</a><br><a href="https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init" target="_blank" rel="noopener">配置详细介绍</a></p><h4 id="1-3、配置文件"><a href="#1-3、配置文件" class="headerlink" title="1.3、配置文件"></a>1.3、配置文件</h4><p>配置文件有很多方法这里主要讲我使用的方法：详情请参考如下：</p><p><a href="https://github.com/EYHN/hexo-helper-live2d" target="_blank" rel="noopener">英文介绍</a><br><a href="https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md" target="_blank" rel="noopener">中文介绍</a></p><h5 id="1-3-1-在博客根目录下建文件夹live2d-models；"><a href="#1-3-1-在博客根目录下建文件夹live2d-models；" class="headerlink" title="1.3.1 在博客根目录下建文件夹live2d_models；"></a>1.3.1 在博客根目录下建文件夹live2d_models；</h5><h5 id="1-3-2-再在live2d-models下建文件夹-lt-你喜欢的模型名字-gt-；"><a href="#1-3-2-再在live2d-models下建文件夹-lt-你喜欢的模型名字-gt-；" class="headerlink" title="1.3.2 再在live2d_models下建文件夹<你喜欢的模型名字>；"></a>1.3.2 再在live2d_models下建文件夹<你喜欢的模型名字>；</h5><h5 id="1-3-3-再在-lt-你喜欢的模型名字-gt-下建json文件：-lt-你喜欢的模型名字-gt-model-json；"><a href="#1-3-3-再在-lt-你喜欢的模型名字-gt-下建json文件：-lt-你喜欢的模型名字-gt-model-json；" class="headerlink" title="1.3.3 再在<你喜欢的模型名字>下建json文件：<你喜欢的模型名字>.model.json；"></a>1.3.3 再在<你喜欢的模型名字>下建json文件：<你喜欢的模型名字>.model.json；</h5><h4 id="1-4、安装模型"><a href="#1-4、安装模型" class="headerlink" title="1.4、安装模型"></a>1.4、安装模型</h4><p>在命令行（即Git Bash）运行以下命令即可：</p><blockquote><p><code>npm install --save live2d-widget-model-<你喜欢的模型名字></code><br><a href="https://github.com/xiazeyu/live2d-widget-models" target="_blank" rel="noopener">模型安装</a></p></blockquote><h4 id="1-5、查看结果"><a href="#1-5、查看结果" class="headerlink" title="1.5、查看结果"></a>1.5、查看结果</h4><p>在命令行（即Git Bash）运行以下命令， 在<code>http://127.0.0.1:4000/</code>查看测试结果：</p><blockquote><p><code>hexo clean && hexo g && hexo s</code></p></blockquote><h4 id="1-6、更改模型"><a href="#1-6、更改模型" class="headerlink" title="1.6、更改模型"></a>1.6、更改模型</h4><p>若更改模型请从第二步更改model.use；删除第三步原有文件，重新创建，安装模型，查看结果</p><h3 id="2、实现fork-me-on-github"><a href="#2、实现fork-me-on-github" class="headerlink" title="2、实现fork me on github"></a>2、实现fork me on github</h3><h4 id="2-1、点击-这里-挑选自己喜欢的样式，并复制代码"><a href="#2-1、点击-这里-挑选自己喜欢的样式，并复制代码" class="headerlink" title="2.1、点击 这里 挑选自己喜欢的样式，并复制代码"></a>2.1、点击 <a href="https://github.blog/2008-12-19-github-ribbons/" target="_blank" rel="noopener">这里</a> 挑选自己喜欢的样式，并复制代码</h4><h4 id="2-2、然后粘贴刚才复制的代码到themes-next-layout-layout-swig文件中-放在-lt-div-class-quot-headband-quot-gt-lt-div-gt-的下面-，并把href改为你的github地址"><a href="#2-2、然后粘贴刚才复制的代码到themes-next-layout-layout-swig文件中-放在-lt-div-class-quot-headband-quot-gt-lt-div-gt-的下面-，并把href改为你的github地址" class="headerlink" title="2.2、然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址"></a>2.2、然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<code><div class="headband"></div></code>的下面)，并把href改为你的github地址</h4><h4 id="2-3、若位置不对，在-img-标签中修改-style-quot-position-fixed-top-0-right-0-quot"><a href="#2-3、若位置不对，在-img-标签中修改-style-quot-position-fixed-top-0-right-0-quot" class="headerlink" title="2.3、若位置不对，在 img 标签中修改 style="position:fixed;top:0;right:0""></a>2.3、若位置不对，在 img 标签中修改 <code>style="position:fixed;top:0;right:0"</code></h4><p><img src="/assets/images/20190219/06.png" alt="06"></p><h3 id="3、设置网站的图标Favicon"><a href="#3、设置网站的图标Favicon" class="headerlink" title="3、设置网站的图标Favicon"></a>3、设置网站的图标Favicon</h3><p>在<a href="https://www.easyicon.net/" target="_blank" rel="noopener">EasyIcon</a>或者<a href="https://www.iconfont.cn/" target="_blank" rel="noopener">Iconfont</a>中找一张（32*32）的ico图标，并将图标名称改为favicon.ico，然后把图标放在/themes/next/source/images里，并且修改<strong>主题配置文件</strong> ：</p><p><img src="/assets/images/20190219/07.png" alt="07"></p><h3 id="4、首页文章添加阴影效果"><a href="#4、首页文章添加阴影效果" class="headerlink" title="4、首页文章添加阴影效果"></a>4、首页文章添加阴影效果</h3><p>打开\themes\next\source\css_custom\custom.styl,向里面加入：<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">//文章内容添加边框阴影</span><br><span class="line"><span class="selector-class">.post</span> {</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">0px</span>;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">60px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">25px</span>;</span><br><span class="line"> <span class="attribute">-webkit-box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="built_in">rgba</span>(202, 203, 203, .5);</span><br><span class="line"> <span class="attribute">-moz-box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="built_in">rgba</span>(202, 203, 204, .5);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h3 id="5、网站顶部加载条"><a href="#5、网站顶部加载条" class="headerlink" title="5、网站顶部加载条"></a>5、网站顶部加载条</h3><p>修改主题配置文件(_config.yml)将pace: false改为pace: true就行了，你还可以换不同样式的加载条，如下图：<br><img src="/assets/images/20190219/08.png" alt="08"></p><h3 id="6、统计文章阅读量"><a href="#6、统计文章阅读量" class="headerlink" title="6、统计文章阅读量"></a>6、统计文章阅读量</h3><p>通过leanCloud统计您网站的文章阅读量<br>1.注册<a href="https://leancloud.cn/" target="_blank" rel="noopener">LeanCloud</a>, 并创建一个你自己的应用;<br>2.点击图片右上角的设置图标进入应用界面;<br><img src="/assets/images/20190219/20.png" alt="20"><br>3.到此，你的应用创建成功，继续表的创建,创建表，并将表的名字命名为：Counter, 如图:<br><img src="/assets/images/20190219/21.png" alt="21"><br>4.打开设置 -> 应用key 获取<code>App ID</code>和<code>App Key</code>;<br>5.最后打开<strong>主题配置文件</strong>: <code>themes/*/_config.yml</code>;<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">leancloud_visitors:</span><br><span class="line"> enable: true</span><br><span class="line"> app_id: #你的app_id</span><br><span class="line"> app_key: #你的的app_key</span><br></pre></td></tr></table></figure></p><p>6.完成配置并重新编译。到此您已经成功设置了阅读量的统计</p><h3 id="7、文章加密访问"><a href="#7、文章加密访问" class="headerlink" title="7、文章加密访问"></a>7、文章加密访问</h3><p>打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码：<br><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><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span><br><span class="line"><span class="undefined"> (function(){</span></span><br><span class="line"><span class="undefined"> if('{{ page.password }}'){</span></span><br><span class="line"><span class="undefined"> if (prompt('请输入文章密码') !== '{{ page.password }}'){</span></span><br><span class="line"><span class="undefined"> alert('密码错误！');</span></span><br><span class="line"><span class="undefined"> history.back();</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> })();</span></span><br><span class="line"><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></p><p><img src="/assets/images/20190219/09.png" alt="09"></p><p>然后在文章上写上<code>password: ****</code>,如下：<br><img src="/assets/images/20190219/10.png" alt="10"><br><img src="/assets/images/20190219/11.png" alt="11"></p><h3 id="8、修改链接URL"><a href="#8、修改链接URL" class="headerlink" title="8、修改链接URL"></a>8、修改链接URL</h3><p>编辑 <strong>站点配置文件</strong>下的 _config.yml 文件，修改其中的 permalink字段：<code>permalink: :category/:title/</code></p><h3 id="9、文章置顶"><a href="#9、文章置顶" class="headerlink" title="9、文章置顶"></a>9、文章置顶</h3><h4 id="9-1-安装插件"><a href="#9-1-安装插件" class="headerlink" title="9.1 安装插件"></a>9.1 安装插件</h4><blockquote><p><code>npm uninstall hexo-generator-index --save</code><br><code>npm install hexo-generator-index-pin-top --save</code></p></blockquote><h4 id="9-2-在需要置顶的文章中加上top即可，数值越大文章越靠前"><a href="#9-2-在需要置顶的文章中加上top即可，数值越大文章越靠前" class="headerlink" title="9.2 在需要置顶的文章中加上top即可，数值越大文章越靠前"></a>9.2 在需要置顶的文章中加上top即可，数值越大文章越靠前</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">---</span><br><span class="line">title: 'GitHub + Hexo搭建自己博客(二) Next主题配置 '</span><br><span class="line">date: 2019-02-19 15:35:40</span><br><span class="line">tags: [hexo,github]</span><br><span class="line">categories: blog,hexo,next</span><br><span class="line">top: 10</span><br><span class="line">---</span><br></pre></td></tr></table></figure><h4 id="9-3-设置置顶标志"><a href="#9-3-设置置顶标志" class="headerlink" title="9.3 设置置顶标志"></a>9.3 设置置顶标志</h4><p>打开：/themes/*/layout/_macro/post.swig，定位到<code><div class="post-meta"></code>标签下，插入如下代码：<br><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></pre></td><td class="code"><pre><span class="line">{% if post.top %}</span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-thumb-tack"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">font</span> <span class="attr">color</span>=<span class="string">7D26CD</span>></span>置顶<span class="tag"></<span class="name">font</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-divider"</span>></span>|<span class="tag"></<span class="name">span</span>></span></span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure></p><p>如下：<br><img src="/assets/images/20190219/13.png" alt="13"><br><img src="/assets/images/20190219/14.png" alt="14"></p><h3 id="10、隐藏网页底部powered-By-Hexo-强力驱动"><a href="#10、隐藏网页底部powered-By-Hexo-强力驱动" class="headerlink" title="10、隐藏网页底部powered By Hexo / 强力驱动"></a>10、隐藏网页底部powered By Hexo / 强力驱动</h3><p>打开themes/next/layout/_partials/footer.swig,使用<code><!-- --></code>隐藏之间的代码即可，或者直接删除。位置如图：<br><img src="/assets/images/20190219/15.png" alt="15"></p><h3 id="11、实现统计功能"><a href="#11、实现统计功能" class="headerlink" title="11、实现统计功能"></a>11、实现统计功能</h3><p>1.在根目录下安装 hexo-wordcount,运行：<code>npm install hexo-wordcount --save</code><br>2.然后在<strong>主题配置文件</strong>中，配置如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"># Post wordcount display settings</span><br><span class="line"># Dependencies: https://github.com/willin/hexo-wordcount</span><br><span class="line">post_wordcount:</span><br><span class="line"> item_text: true</span><br><span class="line"> wordcount: true</span><br><span class="line"> min2read: true</span><br><span class="line"> totalcount: false</span><br><span class="line"> separated_meta: true</span><br></pre></td></tr></table></figure></p><h3 id="12、网站底部字数统计"><a href="#12、网站底部字数统计" class="headerlink" title="12、网站底部字数统计"></a>12、网站底部字数统计</h3><p>1.在根目录下安装 hexo-wordcount,运行：<code>npm install hexo-wordcount --save</code><br>2.然后在/themes/next/layout/_partials/footer.swig文件尾部加上：<br><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"theme-info"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"powered-by"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-count"</span>></span>博客全站共{{ totalcount(site) }}字<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure></p><h3 id="13、添加-README-md-文件"><a href="#13、添加-README-md-文件" class="headerlink" title="13、添加 README.md 文件"></a>13、添加 README.md 文件</h3><p>每个项目下一般都有一个 README.md 文件，但是使用 hexo 部署到仓库后，项目下是没有 README.md 文件的。</p><p>在 Hexo 目录下的 source 根目录下添加一个 README.md 文件，修改<strong>站点配置文件</strong> _config.yml，将 skip_render 参数的值设置为<code>skip_render: README.md</code></p><h3 id="14、修改文章底部的那个带-号的标签"><a href="#14、修改文章底部的那个带-号的标签" class="headerlink" title="14、修改文章底部的那个带#号的标签"></a>14、修改文章底部的那个带#号的标签</h3><p>修改模板/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成<i class="fa fa-tag"></i><br><img src="/assets/images/20190219/16.png" alt="16"></p><h3 id="15、添加RSS"><a href="#15、添加RSS" class="headerlink" title="15、添加RSS"></a>15、添加RSS</h3><p>1.站点根目录下安装插件，<code>npm install --save hexo-generator-feed</code>;<br>2.在<strong>站点配置文件</strong>_config.yml中，添加如下内容：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># Extensions</span><br><span class="line">## Plugins: http://hexo.io/plugins/</span><br><span class="line">plugins: hexo-generate-feed</span><br></pre></td></tr></table></figure><p>3.然后再<strong>主题配置文件</strong>中配置<code>rss</code>;<br><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">rss: /atom.xml</span><br></pre></td></tr></table></figure></p><p>4.配置完之后运行：<code>hexo clean && hexo g && hexo s</code>;<br>5.重新生成一次，你会在./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效，之后再部署到 Github 中</p><h3 id="16、点击出现桃心效果"><a href="#16、点击出现桃心效果" class="headerlink" title="16、点击出现桃心效果"></a>16、点击出现桃心效果</h3><p>1.在路径<code>/themes/*/source/js/src</code>里面新建<code>love.js</code>文件并将代码复制进去；<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">! <span class="function"><span class="keyword">function</span> (<span class="params">e, t, a</span>) </span>{</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">n</span>(<span class="params"></span>) </span>{</span><br><span class="line"> c(<span class="string">".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"</span>), o(), r()</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">r</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> e = <span class="number">0</span>; e < d.length; e++) d[e].alpha <= <span class="number">0</span> ? (t.body.removeChild(d[e].el), d.splice(e, <span class="number">1</span>)) : (d[e].y--, d[e].scale += <span class="number">.004</span>, d[e].alpha -= <span class="number">.013</span>, d[e].el.style.cssText = <span class="string">"left:"</span> + d[e].x + <span class="string">"px;top:"</span> + d[e].y + <span class="string">"px;opacity:"</span> + d[e].alpha + <span class="string">";transform:scale("</span> + d[e].scale + <span class="string">","</span> + d[e].scale + <span class="string">") rotate(45deg);background:"</span> + d[e].color + <span class="string">";z-index:99999"</span>);</span><br><span class="line"> requestAnimationFrame(r)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">o</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> t = <span class="string">"function"</span> == <span class="keyword">typeof</span> e.onclick && e.onclick;</span><br><span class="line"> e.onclick = <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> t && t(), i(e)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">i</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a = t.createElement(<span class="string">"div"</span>);</span><br><span class="line"> a.className = <span class="string">"heart"</span>, d.push({</span><br><span class="line"> el: a,</span><br><span class="line"> x: e.clientX - <span class="number">5</span>,</span><br><span class="line"> y: e.clientY - <span class="number">5</span>,</span><br><span class="line"> scale: <span class="number">1</span>,</span><br><span class="line"> alpha: <span class="number">1</span>,</span><br><span class="line"> color: s()</span><br><span class="line"> }), t.body.appendChild(a)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">c</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a = t.createElement(<span class="string">"style"</span>);</span><br><span class="line"> a.type = <span class="string">"text/css"</span>;</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> a.appendChild(t.createTextNode(e))</span><br><span class="line"> } <span class="keyword">catch</span> (t) {</span><br><span class="line"> a.styleSheet.cssText = e</span><br><span class="line"> }</span><br><span class="line"> t.getElementsByTagName(<span class="string">"head"</span>)[<span class="number">0</span>].appendChild(a)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">s</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="string">"rgb("</span> + ~~(<span class="number">255</span> * <span class="built_in">Math</span>.random()) + <span class="string">","</span> + ~~(<span class="number">255</span> * <span class="built_in">Math</span>.random()) + <span class="string">","</span> + ~~(<span class="number">255</span> * <span class="built_in">Math</span>.random()) + <span class="string">")"</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> d = [];</span><br><span class="line"> e.requestAnimationFrame = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line"> setTimeout(e, <span class="number">1e3</span> / <span class="number">60</span>)</span><br><span class="line"> }</span><br><span class="line"> }(), n()</span><br><span class="line">}(<span class="built_in">window</span>, <span class="built_in">document</span>);</span><br></pre></td></tr></table></figure></p><p>2.在<code>\themes\*\layout\_layout.swig</code>文件末尾<code></body></code>之前添加<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- 页面点击小红心 --></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"/js/src/love.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></p><p>3.我选择的是社会主义核心价值观的特效，因为我们都是社会主义接班人！！<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> T_color = <span class="string">""</span>;<span class="comment">//字体颜色,你不设置就是随机颜色,</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> T_size = [<span class="number">10</span>,<span class="number">20</span>];<span class="comment">//文字大小区间,不建议太大</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> T_font_weight = <span class="string">"bold"</span>;<span class="comment">//字体粗斜度-->normal,bold,900</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> AnimationTime = <span class="number">1500</span>;<span class="comment">//文字消失总毫秒</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> Move_up_Distance = <span class="number">388</span>;<span class="comment">//文字移动距离,正数代表上移，反之下移</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> a_index = <span class="number">0</span>;</span><br><span class="line"> $(<span class="string">"html"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">"富强"</span>, <span class="string">"民主"</span>, <span class="string">"文明"</span>, <span class="string">"和谐"</span>, <span class="string">"自由"</span>, <span class="string">"平等"</span>, <span class="string">"公正"</span> ,<span class="string">"法治"</span>, <span class="string">"爱国"</span>, <span class="string">"敬业"</span>, <span class="string">"诚信"</span>, <span class="string">"友善"</span>);</span><br><span class="line"> <span class="keyword">var</span> $i = $(<span class="string">"<span/>"</span>).text(a[a_index]);</span><br><span class="line"> a_index = (a_index + <span class="number">1</span>) % a.length;</span><br><span class="line"> <span class="keyword">var</span> x = e.pageX,y = e.pageY;</span><br><span class="line"> <span class="keyword">var</span> x_color = <span class="string">"#"</span> + (<span class="string">'00000'</span> + (<span class="built_in">Math</span>.random() * <span class="number">0x1000000</span> << <span class="number">0</span>).toString(<span class="number">16</span>)).substr(<span class="number">-6</span>);<span class="comment">//-->随机颜色</span></span><br><span class="line"> <span class="comment">//console.log(x_color);</span></span><br><span class="line"> <span class="keyword">if</span>(T_color.length>=<span class="number">4</span>){</span><br><span class="line"> x_color = T_color;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> x_size = <span class="built_in">Math</span>.random()*(T_size[<span class="number">1</span>]-T_size[<span class="number">0</span>]) + T_size[<span class="number">0</span>];</span><br><span class="line"> x_size += <span class="string">"px"</span>;</span><br><span class="line"> </span><br><span class="line"> $i.css({</span><br><span class="line"> <span class="string">"z-index"</span>: <span class="number">99999</span>,</span><br><span class="line"> <span class="string">"top"</span>: y - <span class="number">20</span>,</span><br><span class="line"> <span class="string">"left"</span>: x,</span><br><span class="line"> <span class="string">"position"</span>: <span class="string">"absolute"</span>,</span><br><span class="line"> <span class="string">"font-weight"</span>: <span class="string">"bold"</span>,</span><br><span class="line"> <span class="string">"font-size"</span>:x_size,</span><br><span class="line"> <span class="string">"color"</span>: x_color</span><br><span class="line"> });</span><br><span class="line"> $(<span class="string">"html"</span>).append($i);</span><br><span class="line"> $i.animate({<span class="string">"top"</span>: y-Move_up_Distance,<span class="string">"opacity"</span>: <span class="number">0</span>},AnimationTime,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $i.remove();</span><br><span class="line"> });</span><br><span class="line"> });</span><br><span class="line">})();</span><br></pre></td></tr></table></figure></p><h3 id="17、修改文章内链接文本样式"><a href="#17、修改文章内链接文本样式" class="headerlink" title="17、修改文章内链接文本样式"></a>17、修改文章内链接文本样式</h3><p>1.修改文件 <code>themes\*\source\css\_common\components\post\post.styl</code>，在末尾添加如下css样式，：<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">// 文章内链接文本样式</span><br><span class="line"><span class="selector-class">.post-body</span> <span class="selector-tag">p</span> <span class="selector-tag">a</span>{</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#0593d3</span>;</span><br><span class="line"> <span class="attribute">border-bottom</span>: none;</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#0593d3</span>;</span><br><span class="line"> &:hover {</span><br><span class="line"> <span class="selector-tag">color</span>: <span class="selector-id">#fc6423</span>;</span><br><span class="line"> <span class="selector-tag">border-bottom</span>: <span class="selector-tag">none</span>;</span><br><span class="line"> <span class="selector-tag">border-bottom</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#fc6423</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h3 id="18、在文章末尾添加“本文结束”标记"><a href="#18、在文章末尾添加“本文结束”标记" class="headerlink" title="18、在文章末尾添加“本文结束”标记"></a>18、在文章末尾添加“本文结束”标记</h3><p>1.在路径 <code>\themes\*\layout\_macro</code> 中新建 <code>passage-end-tag.swig</code> 文件,并添加以下内容：<br><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> {% if not is_index %}</span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"text-align:center;color: #ccc;font-size:14px;"</span>></span>-------------本文结束<span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-paw"</span>></span><span class="tag"></<span class="name">i</span>></span>感谢您的阅读-------------<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> {% endif %}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure></p><p>2.打开<code>\themes\*\layout\_macro\post.swig</code>文件，在<code>post-body</code> 之后， <code>post-footer</code>之前添加如下代码（post-footer之前两个DIV）<br><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></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> {% if not is_index %}</span><br><span class="line"> {% include 'passage-end-tag.swig' %}</span><br><span class="line"> {% endif %}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure></p><p><img src="/assets/images/20190219/17.png" alt="17"></p><p>3.打开<strong>主题配置文件</strong>（_config.yml),在末尾添加：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># 文章末尾添加“本文结束”标记</span><br><span class="line">passage_end_tag:</span><br><span class="line"> enabled: true</span><br></pre></td></tr></table></figure></p><p>4.完成以上设置之后，在每篇文章之后都会添加如此效果图<br><img src="/assets/images/20190219/18.png" alt="18"></p><h3 id="19、自定义鼠标样式"><a href="#19、自定义鼠标样式" class="headerlink" title="19、自定义鼠标样式"></a>19、自定义鼠标样式</h3><p>打开 <code>themes/*/source/css/_custom/custom.styl</code> ,在里面写下如下代码：<br><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">// 鼠标样式</span><br><span class="line"> * {</span><br><span class="line"> cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important</span><br><span class="line"> }</span><br><span class="line"> :active {</span><br><span class="line"> cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></p><h3 id="20、Canvas背景"><a href="#20、Canvas背景" class="headerlink" title="20、Canvas背景"></a>20、Canvas背景</h3><p>在<strong>主题配置文件</strong>中，找到Canvas配置项，可以应用NNext自带的Canvas特效，如下：<br><img src="/assets/images/20190219/19.png" alt="19"></p><p>想要更改颜色和数量？修改文件：<code>/themes/next/source/lib/canvas-nest/canvas-nest.min.js</code>,<a href="https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md" target="_blank" rel="noopener">修改参考</a></p><h3 id="21、修改内容区域的宽度"><a href="#21、修改内容区域的宽度" class="headerlink" title="21、修改内容区域的宽度"></a>21、修改内容区域的宽度</h3><p>编辑主题的 source/css/_variables/custom.styl 文件，新增变量：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 修改成你期望的宽度</span><br><span class="line">$content-desktop = 700px</span><br><span class="line"></span><br><span class="line">// 当视窗超过 1600px 后的宽度</span><br><span class="line">$content-desktop-large = 900px</span><br></pre></td></tr></table></figure></p><h3 id="22、打赏功能"><a href="#22、打赏功能" class="headerlink" title="22、打赏功能"></a>22、打赏功能</h3><p>1.准备支付宝和微信二维码，存放在<code>themes/*/source/images</code><br>2.在<strong>主题配置文件</strong>（_config.yml）中进行设置<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># Reward</span><br><span class="line">reward_comment: 谢谢请我吃辣条！</span><br><span class="line">wechatpay: /images/wechatpay.png</span><br><span class="line">alipay: /images/alipay.jpg</span><br></pre></td></tr></table></figure></p><p>3.修复图片闪动bug，修改<code>next/source/css/_common/components/post/post-reward.styl</code>，注释<code>wechat:hover</code>和<code>alipay:hover</code></p><h3 id="23、配置Valine评论系统"><a href="#23、配置Valine评论系统" class="headerlink" title="23、配置Valine评论系统"></a>23、配置Valine评论系统</h3><p>1.Valine 是一款基于Leancloud的快速、简洁且高效的无后端评论系统；<br>2.获取Leancloud的APP ID和 APP KEY, 上面第六步设置中已经介绍了获取方法；<br>3.打开<strong>主题配置文件</strong>: <code>themes/*/_config.yml</code>;<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"># Valine.</span><br><span class="line"># You can get your appid and appkey from https://leancloud.cn</span><br><span class="line"># more info please open https://valine.js.org</span><br><span class="line">valine:</span><br><span class="line"> enable: true</span><br><span class="line"> appid: # your leancloud application appid</span><br><span class="line"> appkey: # your leancloud application appkey</span><br><span class="line"> notify: true # mail notifier , https://github.com/xCss/Valine/wiki</span><br><span class="line"> verify: false # Verification code</span><br><span class="line"> placeholder: 在这里说点什么吧... # comment box placeholder</span><br><span class="line"> avatar: identicon # 评论表头样式 /mm/identicon/monsterid/wavatar/retro/hide</span><br><span class="line"> guest_info: nick,mail,link # custom comment header</span><br><span class="line"> pageSize: 10 # pagination size</span><br></pre></td></tr></table></figure></p><p>4.其他相关配置和邮件提醒方式可查看<a href="https://valine.js.org/configuration/configuration.html" target="_blank" rel="noopener">Valline详细配置官网</a></p><h3 id="24、添加搜索功能"><a href="#24、添加搜索功能" class="headerlink" title="24、添加搜索功能"></a>24、添加搜索功能</h3><p>1.在根目录下安装<code>hexo-generator-searchdb</code>插件，<code>npm install hexo-generator-searchdb --save</code>;<br>2.<strong>站点配置文件</strong>中添加以下字段<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">search:</span><br><span class="line"> path: search.xml</span><br><span class="line"> field: post</span><br><span class="line"> format: html</span><br><span class="line"> limit: 10000</span><br></pre></td></tr></table></figure></p><p>3.编辑<strong>主题配置文件</strong>启用本地搜索<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># Local search</span><br><span class="line">local_search:</span><br><span class="line"> enable: true</span><br></pre></td></tr></table></figure></p><h3 id="25、不蒜子访问统计"><a href="#25、不蒜子访问统计" class="headerlink" title="25、不蒜子访问统计"></a>25、不蒜子访问统计</h3><p>1.编辑 <strong>主题配置文件</strong> <code>themes/*/_config.yml</code>中的<code>busuanzi_count</code>的配置项即可;<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">busuanzi_count:</span><br><span class="line"> # count values only if the other configs are false</span><br><span class="line"> enable: true</span><br><span class="line"> # custom uv span for the whole site</span><br><span class="line"> site_uv: true</span><br><span class="line"> site_uv_header: <i class="fa fa-user"></i></span><br><span class="line"> site_uv_footer:</span><br><span class="line"> # custom pv span for the whole site</span><br><span class="line"> site_pv: true</span><br><span class="line"> site_pv_header: <i class="fa fa-eye"></i></span><br><span class="line"> site_pv_footer:</span><br><span class="line"> # custom pv span for one page only</span><br><span class="line"> page_pv: true</span><br><span class="line"> page_pv_header: <i class="fa fa-file-o"></i></span><br><span class="line"> page_pv_footer:</span><br></pre></td></tr></table></figure></p><p>2.找到主题调用不蒜子的swig文件<code>\themes*\layout_third-party\analytics\busuanzi-counter.swig</code><br>3.更改域名<br><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></pre></td><td class="code"><pre><span class="line">把原有的：</span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line">域名改一下即可：</span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></p><h3 id="26、添加404公益界面"><a href="#26、添加404公益界面" class="headerlink" title="26、添加404公益界面"></a>26、添加404公益界面</h3><p>1.在根目录下输入<code>hexo new page 404</code>;<br>2.打开刚新建的页面文件，默认在 Hexo 文件夹根目录下 <code>/source/404/index.md</code>；<br>3.将文件名<code>index.md</code>改为<code>404.html</code>;<br>4.在文件中写入内容，这里使用的是腾讯公益；<br><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><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 404 Not Found：该页无法显示</span><br><span class="line">toc: false</span><br><span class="line">comments: false</span><br><span class="line">permalink: /404</span><br><span class="line">---</span><br><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>404<span class="tag"></<span class="name">title</span>></span> </span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"</span> <span class="attr">homePageName</span>=<span class="string">"返回首页"</span> <span class="attr">homePageUrl</span>=<span class="string">"https://sandop.github.io"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></p><p>5.将<code>返回首页</code>的链接更改为自己的链接。</p>]]></content>
<summary type="html">
<h2 id="一、基本配置"><a href="#一、基本配置" class="headerlink" title="一、基本配置"></a>一、基本配置</h2><p>在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于<strong>站
</summary>
<category term="hexo" scheme="https://sandop.github.io/categories/hexo/"/>
<category term="hexo" scheme="https://sandop.github.io/tags/hexo/"/>
<category term="github" scheme="https://sandop.github.io/tags/github/"/>
</entry>
<entry>
<title>GitHub + Hexo搭建自己博客(一) 基本内容</title>
<link href="https://sandop.github.io/2019/02/18/GitHub%20+%20Hexo%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E5%8D%9A%E5%AE%A2(%E4%B8%80)%20%E5%9F%BA%E6%9C%AC%E5%86%85%E5%AE%B9/"/>
<id>https://sandop.github.io/2019/02/18/GitHub + Hexo搭建自己博客(一) 基本内容/</id>
<published>2019-02-18T08:30:36.000Z</published>
<updated>2019-02-20T09:21:58.823Z</updated>
<content type="html"><![CDATA[<h2 id="一、基本环境"><a href="#一、基本环境" class="headerlink" title="一、基本环境"></a>一、基本环境</h2><h3 id="1、安装Node-js和配置好Node-js环境"><a href="#1、安装Node-js和配置好Node-js环境" class="headerlink" title="1、安装Node.js和配置好Node.js环境"></a>1、安装Node.js和配置好Node.js环境</h3><p><a href="https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html" target="_blank" rel="noopener">NodeJs安装（Windows版本）</a></p><h3 id="2、安装Git和配置好Git环境"><a href="#2、安装Git和配置好Git环境" class="headerlink" title="2、安装Git和配置好Git环境"></a>2、安装Git和配置好Git环境</h3><p><a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" target="_blank" rel="noopener">Git安装</a></p><h2 id="二、Hexo安装"><a href="#二、Hexo安装" class="headerlink" title="二、Hexo安装"></a>二、Hexo安装</h2><h3 id="1、在自己认为合适的地方创建文件夹，并进入"><a href="#1、在自己认为合适的地方创建文件夹，并进入" class="headerlink" title="1、在自己认为合适的地方创建文件夹，并进入"></a>1、在自己认为合适的地方创建文件夹，并进入</h3><p><img src="/assets/images/20190218/01.png" alt="01"></p><h3 id="2、安装Hexo，输入npm-install-hexo-g-并检查是否安装成功hexo-v"><a href="#2、安装Hexo，输入npm-install-hexo-g-并检查是否安装成功hexo-v" class="headerlink" title="2、安装Hexo，输入npm install hexo -g,并检查是否安装成功hexo -v"></a>2、安装Hexo，输入<code>npm install hexo -g</code>,并检查是否安装成功<code>hexo -v</code></h3><p><img src="/assets/images/20190218/02.png" alt="02"></p><h3 id="3、初始化文件，输入hexo-init"><a href="#3、初始化文件，输入hexo-init" class="headerlink" title="3、初始化文件，输入hexo init"></a>3、初始化文件，输入<code>hexo init</code></h3><p><img src="/assets/images/20190218/03.png" alt="03"></p><h3 id="4、安装所需组件，输入npm-install"><a href="#4、安装所需组件，输入npm-install" class="headerlink" title="4、安装所需组件，输入npm install"></a>4、安装所需组件，输入<code>npm install</code></h3><p><img src="/assets/images/20190218/04.png" alt="04"></p><h3 id="5、生成静态文件，输入hexo-g-或者-hexo-generate"><a href="#5、生成静态文件，输入hexo-g-或者-hexo-generate" class="headerlink" title="5、生成静态文件，输入hexo g 或者 hexo generate"></a>5、生成静态文件，输入<code>hexo g</code> 或者 <code>hexo generate</code></h3><p><img src="/assets/images/20190218/05.png" alt="05"></p><h3 id="6、启动本地服务，输入hexo-s-或者-hexo-server"><a href="#6、启动本地服务，输入hexo-s-或者-hexo-server" class="headerlink" title="6、启动本地服务，输入hexo s 或者 hexo server"></a>6、启动本地服务，输入<code>hexo s</code> 或者 <code>hexo server</code></h3><p><img src="/assets/images/20190218/06.png" alt="06"></p><p>若页面一直无法跳转，那么可能端口被占用了。此时我们<code>ctrl+c</code>停止服务器，接着输入<code>hexo server -p 端口号</code>来改变端口号，例如<code>hexo server -p 5000</code></p><h3 id="7、若能看见如下图就成功啦"><a href="#7、若能看见如下图就成功啦" class="headerlink" title="7、若能看见如下图就成功啦"></a>7、若能看见如下图就成功啦</h3><p><img src="/assets/images/20190218/07.png" alt="07"></p><h2 id="三、创建GitHub仓库"><a href="#三、创建GitHub仓库" class="headerlink" title="三、创建GitHub仓库"></a>三、创建GitHub仓库</h2><h3 id="1、创建项目"><a href="#1、创建项目" class="headerlink" title="1、创建项目"></a>1、创建项目</h3><p><img src="/assets/images/20190218/08.png" alt="08"></p><blockquote><p><strong>注意：</strong>项目必须要遵守格式：账户名.github.io</p></blockquote><h3 id="2、查看项目"><a href="#2、查看项目" class="headerlink" title="2、查看项目"></a>2、查看项目</h3><p>在新建项目的<code>setting</code>设置中，可以看到<code>GitHub Pages</code>板块，如下图说明创建成功，点击<code>https://账户名.github.io/</code>可以看到自己的博客<br><img src="/assets/images/20190218/09.png" alt="09"><br><img src="/assets/images/20190218/10.png" alt="10"><br><img src="/assets/images/20190218/11.png" alt="11"></p><h2 id="四、关联博客"><a href="#四、关联博客" class="headerlink" title="四、关联博客"></a>四、关联博客</h2><h3 id="1、设置Git的user-name和email"><a href="#1、设置Git的user-name和email" class="headerlink" title="1、设置Git的user name和email"></a>1、设置Git的user name和email</h3><p>如果是第一次使用Git需要在Git Base Here 中分别输入<code>git config --global user.name "用户名"</code> 及 <code>git config --global user.name "邮箱"</code><br><img src="/assets/images/20190218/12.png" alt="12"></p><h3 id="2、创建SSH-Key"><a href="#2、创建SSH-Key" class="headerlink" title="2、创建SSH Key"></a>2、创建SSH Key</h3><p>在用户主目录下，看看有没有.ssh目录，如果有，再看看这个目录下有没有id_rsa和id_rsa.pub这两个文件，如果已经有了，可直接跳到下一步。</p><p>也可以输入<code>cd ~/.ssh</code>检查是否有.ssh文件夹，输入<code>ls</code>，列出该文件下的内容。下图说明存在<br><img src="/assets/images/20190218/13.png" alt="13"></p><p>如果没有，打开Git Bash，创建SSH Key：</p><blockquote><p><code>ssh-keygen -t rsa -C "youremail@example.com"</code></p></blockquote><p>你需要把邮件地址换成你自己的邮件地址，然后一路回车，使用默认值即可，由于这个Key也不是用于军事目的，所以也无需设置密码。</p><p>如果一切顺利的话，可以在用户主目录里找到.ssh目录，里面有id_rsa和id_rsa.pub两个文件，这两个就是SSH Key的秘钥对，id_rsa是私钥，不能泄露出去，id_rsa.pub是公钥，可以放心地告诉任何人。</p><h3 id="3、添加SSH-Key"><a href="#3、添加SSH-Key" class="headerlink" title="3、添加SSH Key"></a>3、添加SSH Key</h3><p>(1).登陆GitHub，打开“settings”，“SSH and GPG Keys”页面<br><img src="/assets/images/20190218/14.png" alt="14"><br>(2).填上任意Title，在Key文本框里粘贴id_rsa.pub文件的内容<br>(3).点“Add Key”，你就应该看到已经添加的Key<br>(4).输入<code>ssh -T git@github.com</code>，测试添加ssh是否成功。如果看到Hi后面是你的用户名，就说明成功了<br><img src="/assets/images/20190218/15.png" alt="15"></p><h3 id="4、配置Deployment"><a href="#4、配置Deployment" class="headerlink" title="4、配置Deployment"></a>4、配置Deployment</h3><p>在博客的根目录文件夹中，找到_config.yml文件<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line"> type: git</span><br><span class="line"> repository: git@github.com:Sandop/Sandop.github.io.git</span><br><span class="line"> branch: master</span><br></pre></td></tr></table></figure></p><blockquote><p><strong>注意：</strong> 1.每个冒号之后必须有空格；2.repository中的用户名更改为自己的用户名</p></blockquote><h3 id="5、安装扩展"><a href="#5、安装扩展" class="headerlink" title="5、安装扩展"></a>5、安装扩展</h3><p>在生成以及部署文章之前，需要安装一个扩展<code>npm install hexo-deployer-git --save</code><br><img src="/assets/images/20190218/16.png" alt="16"></p><h3 id="6、生成部署"><a href="#6、生成部署" class="headerlink" title="6、生成部署"></a>6、生成部署</h3><p>输入命令<code>hexo g</code>及<code>hexo d</code></p><p><img src="/assets/images/20190218/17.png" alt="17"><br><img src="/assets/images/20190218/18.png" alt="18"></p><h3 id="7、部署成功"><a href="#7、部署成功" class="headerlink" title="7、部署成功"></a>7、部署成功</h3><p>部署成功后访问你的地址：http://用户名.github.io。那么将看到自己的博客</p><h2 id="五、设置主题"><a href="#五、设置主题" class="headerlink" title="五、设置主题"></a>五、设置主题</h2><p>在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于<strong>站点根目录</strong>下，主要包含 Hexo 本身的配置；另一份位于<strong>主题目录</strong>下，这份配置由主题作者提供，主要用于配置主题相关的选项。</p><p>为了描述方便，在以下说明中，将前者称为 <strong>站点配置文件</strong>， 后者称为 <strong>主题配置文件</strong>。</p><blockquote><p>PS：需要特别注意的地方是，冒号后面必须有一个空格，否则可能会出问题。</p></blockquote><h3 id="1、安装-NexT主题"><a href="#1、安装-NexT主题" class="headerlink" title="1、安装 NexT主题"></a>1、安装 NexT主题</h3><p>在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：</p><p><code>git clone https://github.com/iissnan/hexo-theme-next themes/next</code></p><p><img src="/assets/images/20190218/19.png" alt="19"></p><h3 id="2、启用主题"><a href="#2、启用主题" class="headerlink" title="2、启用主题"></a>2、启用主题</h3><p>当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。<br><img src="/assets/images/20190218/20.png" alt="20"></p><h3 id="3、查看效果"><a href="#3、查看效果" class="headerlink" title="3、查看效果"></a>3、查看效果</h3><p>在切换主题之后、验证之前， 我们最好使用 <code>hexo clean</code> 来清除 Hexo 的缓存。<br><img src="/assets/images/20190218/21.png" alt="21"><br>然后在本地查看效果</p><blockquote><p>hexo s -g //生成静态文件，启动本地服务<br><img src="/assets/images/20190218/22.png" alt="22"></p></blockquote><h3 id="4、同步博客"><a href="#4、同步博客" class="headerlink" title="4、同步博客"></a>4、同步博客</h3><p>在本地浏览没有问题之后就可以同步到博客 执行<code>hexo d</code></p><h3 id="5、访问我的hexo-github博客"><a href="#5、访问我的hexo-github博客" class="headerlink" title="5、访问我的hexo+github博客"></a>5、访问我的hexo+github博客</h3><p>可以访问我的git博客来查看效果： <a href="https://sandop.github.io/">https://sandop.github.io/</a></p>]]></content>
<summary type="html">
<h2 id="一、基本环境"><a href="#一、基本环境" class="headerlink" title="一、基本环境"></a>一、基本环境</h2><h3 id="1、安装Node-js和配置好Node-js环境"><a href="#1、安装Node-js和配
</summary>
<category term="hexo" scheme="https://sandop.github.io/categories/hexo/"/>
<category term="hexo" scheme="https://sandop.github.io/tags/hexo/"/>
<category term="github" scheme="https://sandop.github.io/tags/github/"/>
</entry>
</feed>