-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
159 lines (97 loc) · 98.5 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Song's Blog</title>
<subtitle>技术 | 杂文</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://codersong.top/"/>
<updated>2018-01-16T07:29:45.000Z</updated>
<id>http://codersong.top/</id>
<author>
<name>songguoping</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>使用 hexo-theme-next 搭建博客（五）</title>
<link href="http://codersong.top/2018-01-14/build-blog-five.html"/>
<id>http://codersong.top/2018-01-14/build-blog-five.html</id>
<published>2018-01-13T16:00:00.000Z</published>
<updated>2018-01-16T07:29:45.000Z</updated>
<content type="html"><![CDATA[<p id="div-border-top-blue"><br>本系列文章旨在教会你通过 next 主题搭建自己的 hexo 博客，跟着本系列完成后你的博客将会具备以下几个功能：<br>- 强调精于心，简于形的 next 主题，也可以很方便的定制和扩展；<br>- Hexo同时部署在 Coding 和 GitHub 上并使用 DNSPod 分流;<br>- LeanCloud 为文章添加阅读量统计功能，并在首页可以显示，不蒜子实现站内 UV PV 等统计；<br>- 百度统计；<br>- 站内搜索功能；<br>- RSS;<br>- 代码高亮，社交链接，打赏，动画等功能；<br>- 评论系统，可以匿名评论；<br>- 备份博客在 Github 上；<br>- 同步更新博客；<br>- ……<br></p><p><a href="/2017-12-16/build-blog-four.html">上一篇文章</a>我们主要介绍网站的搜索优化以及数据统计分析，本章节主要介绍将博客项目上传至 Github 备份、博客生成发表流程以及同步更新到新电脑。</p><h2 id="Github-备份"><a href="#Github-备份" class="headerlink" title="Github 备份"></a>Github 备份</h2><ol><li>Fork <a href="https://github.com/iissnan/hexo-theme-next" target="_blank" rel="noopener">hexo-theme-next</a> 项目到自己的仓库</li><li>将本地修改的主题文件夹 themes/next 备份到其它地方并删除</li><li><p>运行以下命令将 Fork 出来的仓库 pull 到本地子模块</p><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">git submodule add https://github.com/YourName/hexo-theme-next.git themes/next</span><br><span class="line">git checkout master</span><br></pre></td></tr></table></figure><p> 运行该命令后会在项目根目录生成 <code>.gitmodules</code> 文件，文件内容如下：</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></pre></td><td class="code"><pre><span class="line">[submodule <span class="string">"themes/next"</span>]</span><br><span class="line"> path = themes/next</span><br><span class="line"> url = https://github.com/songguoping/hexo-theme-next</span><br></pre></td></tr></table></figure></li><li><p>将备份的主题内容覆盖到刚拉下来的主题中，我们先要 push 子模块，在 theme/next 目录下依次执行：</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></pre></td><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">"update config file"</span></span><br><span class="line">git push origin master //这是提交到fork后主题的仓库</span><br></pre></td></tr></table></figure></li><li><p>在 Github 上新建一个仓库 blog</p></li><li>切换到项目根目录，在根目录下执行以下命令提交到 Github 上的 blog 仓库下：<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></pre></td><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">"add submodule"</span></span><br><span class="line">git push origin master</span><br></pre></td></tr></table></figure></li></ol><h2 id="博客生成发表流程"><a href="#博客生成发表流程" class="headerlink" title="博客生成发表流程"></a>博客生成发表流程</h2><p>如果改变了 <code>themes/next</code> 的内容则按以下流程：</p><ol><li>先在本地的 themes/next 下 git commit</li><li>使用命令 git push origin master 提交到 Github(即 Fork 的那个仓库)</li><li>在本地 hexo 下 git commit </li><li>使用命令提交到 Github</li><li>以上成功后部署 blog</li></ol><p>如果没有改变 themes/next 的内容则1，2步不用执行，原则就是<code>在提交项目到远程仓库时先提交该项目的子模块到远程仓库</code>。</p><h2 id="同步更新到新电脑"><a href="#同步更新到新电脑" class="headerlink" title="同步更新到新电脑"></a>同步更新到新电脑</h2><p>配置好 Node 、git 环境，安装 Hexo 后：<br><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></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> --recursive git@github.com:songguoping/blog.git</span><br><span class="line">git submodule init</span><br><span class="line">git submodule update</span><br></pre></td></tr></table></figure></p><p>第一次初始化之后，子模块的 head 可能是游离的，如果直接提交了变更就会带来问题，记得先放到 master 上，运行:<br><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"><span class="built_in">cd</span> themes/next</span><br><span class="line">git checkout master</span><br></pre></td></tr></table></figure></p><p>代码配置完成之后，执行:<br><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</span><br></pre></td></tr></table></figure></p><p>就可以完成 package.json 中所有依赖的安装了，执行命令 hexo -s 在本地运行查看效果。</p><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>本章节主要介绍将博客项目上传至 Github 备份、博客生成发表流程以及同步更新到新电脑。至此，本系列 <code>使用 hexo-theme-next 搭建博客</code>就全部更新完成了。该系列作为我开始写博客的练手之作，存在很多的不足，后期也会不定时的更新，希望读者多多批评指正！</p>]]></content>
<summary type="html">
本章节主要介绍 hexo 备份在 github 上、博客生成发表的流程、同步更新到新电脑
</summary>
<category term="Hexo" scheme="http://codersong.top/tags/Hexo/"/>
</entry>
<entry>
<title>2017 年度总结和 2018 年计划</title>
<link href="http://codersong.top/2017-12-31/2017-summary.html"/>
<id>http://codersong.top/2017-12-31/2017-summary.html</id>
<published>2017-12-31T14:16:51.000Z</published>
<updated>2017-12-31T15:40:02.000Z</updated>
<content type="html"><![CDATA[<p>今天是 12 月 31 日，2017 年还差一个多小时就成为过去了，现在趴在昨天新买的书桌上对着电脑敲下这一年的总结博文，感概万分。这一年总结一句话就是幸福与遗憾同在，也不奢求什么大幸福，这一年没有大遗憾就好了。</p><h2 id="工作"><a href="#工作" class="headerlink" title="工作"></a>工作</h2><h3 id="2017-年度总结"><a href="#2017-年度总结" class="headerlink" title="2017 年度总结"></a>2017 年度总结</h3><p><code>学的多，忘的多</code><br>工作上同事都对我很照顾，我也很感恩他们，工作上的事也从来不干怠慢，尽量仔细少犯错误。工作之余自己也看视频学习了 python 语言，学习了 django tornado scrapy 等框架，不过比较遗憾的是学了没有用过过不了多久又忘了，确实比较可惜。在下半年这几个月，我也学习了 react-native ，试着自己做一个 app,开源在自己的 github 上，同时整理了一下自己的 github，并做了一个博客网站，记录自己所学的知识，希望这样能解决这个学了又忘的毛病吧。</p><h3 id="2018-年计划"><a href="#2018-年计划" class="headerlink" title="2018 年计划"></a>2018 年计划</h3><p><code>巩固学到的知识，继续提升技术能力</code></p><p id="div-border-left-green">- 首要的就是更加努力细心的完成公司的工作<br>- 然后的工作就是维护好这个博客网站，争取每月都能出几篇高质量的博文，多多总结经验<br>- 在微信上开一个公众号，多写写一些东西，技术与非技术的，总之要提高自己的文笔<br>- 继续完善<a href="https://github.com/songguoping/ReactNative-Tooyue" target="_blank" rel="noopener">途悦</a>这个 react-native 项目，并把服务器端与后台都做出来<br></p><h2 id="生活"><a href="#生活" class="headerlink" title="生活"></a>生活</h2><h3 id="2017-年度总结-1"><a href="#2017-年度总结-1" class="headerlink" title="2017 年度总结"></a>2017 年度总结</h3><p><code>把好多人生大事都办了</code><br>今年是我的本命年，都说本命年犯太岁，不要太折腾，但回首这一年，想想自己也是够折腾的了。这一年把领证、买房、迁户口这些人生大事差不多都办了。这么多大事，幸福与遗憾同在。幸福的是跟我女朋友（现在的媳妇），谈了这么久也终于修成正果了。遗憾的是冲动之下买房买在了惠州惠阳，没有买在深圳，也怪自己眼光太短浅。后面也只好安慰自己买了总比没买好，算是小遗憾吧，想想人生也没有十分如意的事情。</p><h3 id="2018-年计划-1"><a href="#2018-年计划-1" class="headerlink" title="2018 年计划"></a>2018 年计划</h3><p><code>存钱还账，好好经营</code></p><p id="div-border-left-green">- 买房欠了很多钱，把未来两年的购买力都透支完了，2018 年的主基调就是存钱，先把亲戚朋友的账还清<br>- 多看些财经类的新闻和文章，学好理财<br>- 注重户外运动，每个月去爬一次山<br></p><h2 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h2><p>从来没有写过年度总结，也很少写文章或者看书了，这篇总结写的很笼统，但基本能表达我现在对这一年的经历和对未来一年的期望。目标不多，如果都能完成这些目标，那到 2018 年末的时候再看这篇总结的时候，我应该是欣慰的。突然想到一句话来警示自己，不要打烂手里的一副好牌，趁年轻，多奋斗！</p>]]></content>
<summary type="html">
总结 2017，展望 2018
</summary>
<category term="生活" scheme="http://codersong.top/tags/%E7%94%9F%E6%B4%BB/"/>
</entry>
<entry>
<title>使用 hexo-theme-next 搭建博客（四）</title>
<link href="http://codersong.top/2017-12-16/build-blog-four.html"/>
<id>http://codersong.top/2017-12-16/build-blog-four.html</id>
<published>2017-12-15T16:00:00.000Z</published>
<updated>2018-01-16T07:22:17.000Z</updated>
<content type="html"><![CDATA[<p id="div-border-top-blue"><br>本系列文章旨在教会你通过 next 主题搭建自己的 hexo 博客，跟着本系列完成后你的博客将会具备以下几个功能：<br>- 强调精于心，简于形的 next 主题，也可以很方便的定制和扩展；<br>- Hexo同时部署在 Coding 和 GitHub 上并使用 DNSPod 分流;<br>- LeanCloud 为文章添加阅读量统计功能，并在首页可以显示，不蒜子实现站内 UV PV 等统计；<br>- 百度统计；<br>- 站内搜索功能；<br>- RSS;<br>- 代码高亮，社交链接，打赏，动画等功能；<br>- 评论系统，可以匿名评论；<br>- 备份博客在 Github 上；<br>- 同步更新博客；<br>- ……<br></p><p><a href="/2017-12-15/build-blog-three.html">上一篇文章</a>我们主要介绍 NexT 的主题配置、第三方服务以及动画的实现，本章节主要介绍网站的搜索优化以及数据统计分析。</p><h2 id="网站的搜索优化"><a href="#网站的搜索优化" class="headerlink" title="网站的搜索优化"></a>网站的搜索优化</h2><h3 id="首页-title-的优化"><a href="#首页-title-的优化" class="headerlink" title="首页 title 的优化"></a>首页 title 的优化</h3><p>文件路径是 <code>your-hexo-site\themes\next\layout</code> 下的 <code>index.swig</code> 文件，将下面代码<br><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">{% block title %}{{ config.title }}{% <span class="keyword">if</span> theme.index_with_subtitle and config.subtitle %} - {{config.subtitle }}{% endif %}{% endblock %}</span><br></pre></td></tr></table></figure></p><p>改成<br><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">{% block title %} {{ config.title }} - {{ theme.description }} {% endblock %}</span><br></pre></td></tr></table></figure></p><p>这时候你的首页标题会更符合<code>网站名称 - 网站描述</code>习惯，为了做 seo 优化，把关键词也显示在 title 里，并尽可能的放在最前面，如下：<br><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">{% block title %} {{ theme.keywords }} - {{ config.title }} - {{ theme.description }</span><br></pre></td></tr></table></figure></p><p>注意：别堆砌关键字，整个标题一般不超过80个字符，可以通过 <a href="http://tool.chinaz.com/" target="_blank" rel="noopener">chinaz 站长工具</a>的 seo 综合查询检查。</p><h3 id="修改-permalink"><a href="#修改-permalink" class="headerlink" title="修改 permalink"></a>修改 permalink</h3><p>hexo 默认的 permalink 配置是：<br><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">permalink: :year/:month/:day/:title/</span><br></pre></td></tr></table></figure></p><p>不过这样可能对于搜索引擎不是太友好，我们可以把 permalink 修改成 .html 结尾和相应减少层级：<br><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">permalink: :year-:month-:day/:title.html</span><br></pre></td></tr></table></figure></p><p>还有一点需要注意的是，title 最好是英文的，这样 permalink 也是不带中文的，但是 markdown 文件中的 title 你还是可以按自己的文章标题写成中文的。</p><h3 id="给非友情链接的出站链接添加-“nofollow”-标签"><a href="#给非友情链接的出站链接添加-“nofollow”-标签" class="headerlink" title="给非友情链接的出站链接添加 “nofollow” 标签"></a>给非友情链接的出站链接添加 “nofollow” 标签</h3><p>经过 <a href="http://tool.chinaz.com/" target="_blank" rel="noopener">chinaz 站长工具</a>友情链接检测，发现有不必要的 PR 值输出，对于非友情链接的 PR 值输出，我们可以加上 nofollow 便签避免不必要的 PR 输出。<br>以 hexo 的 NexT 主题为例，需要修改两处<br>文件路径在 <code>your-hexo-site\themes\next\layout\_partials</code> 下的 <code>footer.swig</code>，将下面代码<br><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></pre></td><td class="code"><pre><span class="line">{{ __(<span class="string">'footer.powered'</span>, <span class="string">'<a class="theme-link" href="http://hexo.io">Hexo</a>'</span>) }}</span><br><span class="line"></span><br><span class="line"><a class=<span class="string">"theme-link"</span> href=<span class="string">"https://github.com/iissnan/hexo-theme-next"</span>></span><br></pre></td></tr></table></figure></p><p>在a标签中添加 <code>rel="external nofollow"</code> 改成<br><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></pre></td><td class="code"><pre><span class="line">{{ __(<span class="string">'footer.powered'</span>, <span class="string">'<a class="theme-link" href="http://hexo.io" rel="external nofollow">Hexo</a>'</span>) }}</span><br><span class="line"></span><br><span class="line"><a class=<span class="string">"theme-link"</span> href=<span class="string">"https://github.com/iissnan/hexo-theme-next"</span> rel=<span class="string">"external nofollow"</span>></span><br></pre></td></tr></table></figure></p><p>文件路径在 <code>your-hexo-site\themes\next\layout\_macro</code> 的 <code>sidebar.swig</code> 文件，将下面代码<br><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></pre></td><td class="code"><pre><span class="line"><a href=<span class="string">"{{ link }}"</span> target=<span class="string">"_blank"</span>>{{ name }}</a></span><br><span class="line"></span><br><span class="line"><a href=<span class="string">"http://creativecommons.org/licenses/{{ theme.creative_commons }}/4.0"</span> class=<span class="string">"cc-opacity"</span> target=<span class="string">"_blank"</span>></span><br></pre></td></tr></table></figure></p><p>在a标签中添加 <code>rel="external nofollow"</code> 改成<br><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></pre></td><td class="code"><pre><span class="line"><a href=<span class="string">"{{ link }}"</span> target=<span class="string">"_blank"</span> rel=<span class="string">"external nofollow"</span>>{{ name }}</a></span><br><span class="line"></span><br><span class="line"><a href=<span class="string">"http://creativecommons.org/licenses/{{ theme.creative_commons }}/4.0"</span> class=<span class="string">"cc-opacity"</span> target=<span class="string">"_blank"</span> rel=<span class="string">"external nofollow"</span>></span><br></pre></td></tr></table></figure></p><h3 id="添加蜘蛛协议-robots-txt"><a href="#添加蜘蛛协议-robots-txt" class="headerlink" title="添加蜘蛛协议 robots.txt"></a>添加蜘蛛协议 robots.txt</h3><p>在路径 <code>your-hexo-site\source\</code> 下新建文件 <code>robots.txt</code>，内容可参考如下：<br><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># hexo robots.txt</span></span><br><span class="line">User-agent: *</span><br><span class="line">Allow: /</span><br><span class="line">Allow: /archives/ </span><br><span class="line">Allow: /tags/ </span><br><span class="line">Allow: /categories/ </span><br><span class="line">Allow: /about/ </span><br><span class="line"></span><br><span class="line">Disallow: /js/</span><br><span class="line">Disallow: /css/</span><br><span class="line">Disallow: /fonts/</span><br><span class="line">Disallow: /vendors/</span><br><span class="line">Disallow: /fancybox/</span><br><span class="line"></span><br><span class="line">Sitemap: http://codersong.top/sitemap.xml</span><br><span class="line">Sitemap: http://codersong.top/baidusitemap.xml</span><br></pre></td></tr></table></figure></p><p>注意，将 codersong.top 替换成你自己的域名，以上两个 sitemap 稍后会讲到</p><h3 id="将博客添加-sitemap-站点地图"><a href="#将博客添加-sitemap-站点地图" class="headerlink" title="将博客添加 sitemap 站点地图"></a>将博客添加 sitemap 站点地图</h3><h4 id="安装-sitemap-站点地图自动生成插件"><a href="#安装-sitemap-站点地图自动生成插件" class="headerlink" title="安装 sitemap 站点地图自动生成插件"></a>安装 sitemap 站点地图自动生成插件</h4><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"><span class="comment"># google</span></span><br><span class="line">npm install hexo-generator-sitemap --save</span><br><span class="line"><span class="comment"># baidu</span></span><br><span class="line">npm install hexo-generator-baidu-sitemap --save</span><br></pre></td></tr></table></figure><p>在<span id="inline-purple">主题配置文件</span>中添加以下配置：<br><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">sitemap: </span><br><span class="line"> path: sitemap.xml</span><br><span class="line">baidusitemap:</span><br><span class="line"> path: baidusitemap.xml</span><br></pre></td></tr></table></figure></p><p>注意<strong>缩进</strong>，要不然生成的时候会报错<br>然后在<span id="inline-blue">站点配置文件</span>中修改 url 为你的域名，例如我的<br><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">url: http://codersong.top</span><br></pre></td></tr></table></figure></p><p>以上配置好之后执行 <code>hexo g</code> 就能在 <code>your-hexo-site\public</code> 中生成 <code>sitemap.xml</code> 和 <code>baidusitemap.xml</code> 了。其中第一个是一会要提交给 google 的，后面那个看名字当然就是提交给 Baidu 的了。</p><h4 id="在-Google-Baidu-验证-Hexo-博客网站"><a href="#在-Google-Baidu-验证-Hexo-博客网站" class="headerlink" title="在 Google Baidu 验证 Hexo 博客网站"></a>在 Google Baidu 验证 Hexo 博客网站</h4><p>在提交 xml 文件前，Google Baidu 需要验证你提交的网站是不是你的，Google Baidu 上的验证方式差不多，此处只讲 Google 的验证方式。<br>登录 <a href="https://www.google.com/webmasters/tools/home" target="_blank" rel="noopener">Google Search Console</a>，点击添加属性，然后输入 Hexo 博客的网址，添加网站,如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-four/google_add_site.png" alt="google_add_site"><br>添加网站完成以后，需要验证网站。Google 提供了多种方案验证网站。这里使用 Google 推荐的一种 <code>域名提供商</code>方法，相对简单，如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-four/google_site_check.png" alt="google_site_check"><br>选择<code>其他</code>后如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-four/google_site_checkout1.png" alt="google_site_checkout1"><br>点击红框中的<code>添加 CNAME 记录</code>后如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-four/google_site_check2.png" alt="google_site_checkout2"><br>复制红框中的内容，打开 <a href="https://www.dnspod.cn" target="_blank" rel="noopener">DNSPod</a>，添加如下记录并保存:<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-four/google_site_checkout_3.png" alt="google_site_checkout_3"><br>回到刚才的页面点击验证，则验证通过。</p><h4 id="提交站点地图到-Google"><a href="#提交站点地图到-Google" class="headerlink" title="提交站点地图到 Google"></a>提交站点地图到 Google</h4><p>验证完成后，就可以提交刚生成的 xml 站点地图了。注意，我们要先把博客部署到线上去，访问 <a href="https://www.codersong.top/sitemap.xml" target="_blank" rel="noopener">https://www.codersong.top/sitemap.xml</a>，如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-four/google_sitemap.png" alt="google_sitemap"><br>可以访问到 sitemap.xml 文件就将该文件提交到 Google，如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-four/google_site_checkout4.png" alt="google_site_checkout4"><br>按照以上步骤完成之后，自己的 Hexo 博客就提交到 Google 了，就可以通过 Google 搜索到你博客中相关的内容了。</p><h4 id="提交站点地图到-Baidu"><a href="#提交站点地图到-Baidu" class="headerlink" title="提交站点地图到 Baidu"></a>提交站点地图到 Baidu</h4><p>登录<a href="http://zhanzhang.baidu.com/" target="_blank" rel="noopener">百度站长平台</a>，点击 <code>站点管理 ---> 添加站点</code>。流程走到验证网站的时候选择 <code>CNAME 验证</code>，方式同 Google 一样。<br>百度站长平台提供链接提交通道，可以提交想被百度收录的链接，百度搜索引擎会按照标准处理，但不保证一定能够收录您提交的链接,如下 baidusitemap 的提交方式。<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-four/baidu_site_checkout.png" alt="baidu_site_checkout"><br>还有我们可以再添加一种<code>自动推送</code>的方式，把如下的代码放入 <code>your-hexo-site/blog/themes/next/layout/_layout.swig</code> 的 <body> 标签的最后面即可：</body></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></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> bp = <span class="built_in">document</span>.createElement(<span class="string">'script'</span>);</span><br><span class="line"> <span class="keyword">var</span> curProtocol = <span class="built_in">window</span>.location.protocol.split(<span class="string">':'</span>)[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">if</span> (curProtocol === <span class="string">'https'</span>) {</span><br><span class="line"> bp.src = <span class="string">'https://zz.bdstatic.com/linksubmit/push.js'</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">else</span> {</span><br><span class="line"> bp.src = <span class="string">'http://push.zhanzhang.baidu.com/push.js'</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> s = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"script"</span>)[<span class="number">0</span>];</span><br><span class="line"> s.parentNode.insertBefore(bp, s);</span><br><span class="line">})();</span><br><span class="line"><<span class="regexp">/script></span></span><br></pre></td></tr></table></figure><p>至此，理论上我们的博客就被 Google 和 Baidu 收录了，我们发现，现在在 Google 中搜索我们的网站可以搜索到，但是在 Baidu 中却搜索不到，这是因为 Baidu 现在还没收录我们的网站，可能要过一段时间。</p><h2 id="博客数据统计分析"><a href="#博客数据统计分析" class="headerlink" title="博客数据统计分析"></a>博客数据统计分析</h2><p>此处使用 <a href="http://www.google.cn/intl/zh-CN_ALL/analytics/learn/index.html" target="_blank" rel="noopener">Google 分析</a>，在填入媒体资源名称以及默认网址之后，在下图获取到跟踪 ID:<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-four/google_analytics.png" alt="google_analytics"><br>之后在主题配置文件中，修改字段 <code>google_analytics</code>， 值设置成你的 Google 跟踪 ID。</p><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>本章节主要介绍网站的搜索优化以及数据统计分析，<a href="/2018-01-14/build-blog-five.html">下一章节</a>主要介绍博客项目上传至 Github 备份、博客生成发表流程以及同步更新到新电脑。</p>]]></content>
<summary type="html">
本章节主要介绍网站的搜索优化以及数据统计分析
</summary>
<category term="Hexo" scheme="http://codersong.top/tags/Hexo/"/>
</entry>
<entry>
<title>使用 hexo-theme-next 搭建博客（三）</title>
<link href="http://codersong.top/2017-12-15/build-blog-three.html"/>
<id>http://codersong.top/2017-12-15/build-blog-three.html</id>
<published>2017-12-14T16:00:00.000Z</published>
<updated>2018-01-16T07:33:23.000Z</updated>
<content type="html"><![CDATA[<p id="div-border-top-blue"><br>本系列文章旨在教会你通过 next 主题搭建自己的 hexo 博客，跟着本系列完成后你的博客将会具备以下几个功能：<br>- 强调精于心，简于形的 next 主题，也可以很方便的定制和扩展；<br>- Hexo同时部署在 Coding 和 GitHub 上并使用 DNSPod 分流;<br>- LeanCloud 为文章添加阅读量统计功能，并在首页可以显示，不蒜子实现站内 UV PV 等统计；<br>- 百度统计；<br>- 站内搜索功能；<br>- RSS;<br>- 代码高亮，社交链接，打赏，动画等功能；<br>- 评论系统，可以匿名评论；<br>- 备份博客在 Github 上；<br>- 同步更新博客；<br>- ……<br></p><p><a href="/2017-12-14/build-blog-two.html">上一篇文章</a>我们主要介绍了如何把博客部署在 GitHub page 和 Coding Page 上，注册了自己的域名，通过 DNSpod 配置 DNS 流量分发，本章节主要介绍 NexT 的主题配置、第三方服务以及动画的实现。</p><h2 id="NexT-的主题配置"><a href="#NexT-的主题配置" class="headerlink" title="NexT 的主题配置"></a>NexT 的主题配置</h2><p>具体的主题配置在 NexT 文档上有，我这里主要介绍没有讲到的地方以及一些坑。</p><h3 id="代码高亮"><a href="#代码高亮" class="headerlink" title="代码高亮"></a>代码高亮</h3><p>在主题配置文件中配置如下：<br><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"><span class="comment"># Code Highlight theme</span></span><br><span class="line"><span class="comment"># Available value: normal | night | night eighties | night blue | night bright</span></span><br><span class="line"><span class="comment"># https://github.com/chriskempson/tomorrow-theme</span></span><br><span class="line">highlight_theme: normal</span><br></pre></td></tr></table></figure></p><p>可能会发现插入代码后代码不高亮，此刻检查你的多行或者一行代码的 markdown 格式是否正确。代码凌乱的话，建议使用空格代替 tab，例：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">HelloWorld</span> </span>{ </span><br><span class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title">main</span><span class="params">(String args[])</span> </span>{ </span><br><span class="line"> System.out.println(<span class="string">"Hello World!"</span>); </span><br><span class="line"> } </span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h3 id="修改文章内链接文本样式"><a href="#修改文章内链接文本样式" class="headerlink" title="修改文章内链接文本样式"></a>修改文章内链接文本样式</h3><p>修改文件 <code>themes\next\source\css\_common\components\post\post.styl</code> ，在末尾添加如下 css 样式：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></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>其中选择 .post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。</p><h3 id="修改文章底部的那个带-号的标签"><a href="#修改文章底部的那个带-号的标签" class="headerlink" title="修改文章底部的那个带 # 号的标签"></a>修改文章底部的那个带 # 号的标签</h3><p>修改模板 <code>/themes/next/layout/_macro/post.swig</code>，搜索 <code>rel="tag">#</code>，将 # 换成 <code><i class="fa fa-tag"></i></code><br>此处图标是 NexT 使用的是 <a href="http://fontawesome.io/icons/" target="_blank" rel="noopener">Font Awesome</a> 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景。</p><h3 id="在每篇文章末尾统一添加“本文结束”标记"><a href="#在每篇文章末尾统一添加“本文结束”标记" class="headerlink" title="在每篇文章末尾统一添加“本文结束”标记"></a>在每篇文章末尾统一添加“本文结束”标记</h3><p>在路径 <code>\themes\next\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-hourglass-end"</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>接着打开 <code>\themes\next\layout\_macro\post.swig</code>文件，在 post-body 之后， post-footer 之前添加如下画红色部分代码:<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>然后打开<span id="inline-purple">主题配置文件</span>在末尾添加：<br><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># 文章末尾添加“本文结束”标记</span></span><br><span class="line">passage_end_tag:</span><br><span class="line"> enabled: <span class="literal">true</span></span><br></pre></td></tr></table></figure></p><h3 id="实现文章字数统计功能"><a href="#实现文章字数统计功能" class="headerlink" title="实现文章字数统计功能"></a>实现文章字数统计功能</h3><p>在根目录下安装 <code>hexo-wordcount</code>,运行：<br><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-wordcount --save</span><br></pre></td></tr></table></figure></p><p>然后在<span id="inline-purple">主题配置文件</span>中，配置如下：<br><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># Post wordcount display settings</span></span><br><span class="line"><span class="comment"># Dependencies: https://github.com/willin/hexo-wordcount</span></span><br><span class="line">post_wordcount:</span><br><span class="line"> item_text: <span class="literal">true</span></span><br><span class="line"> wordcount: <span class="literal">true</span></span><br><span class="line"> min2read: <span class="literal">true</span></span><br></pre></td></tr></table></figure></p><h3 id="在文章底部增加版权信息"><a href="#在文章底部增加版权信息" class="headerlink" title="在文章底部增加版权信息"></a>在文章底部增加版权信息</h3><p>在<span id="inline-purple">主题配置文件</span>中配置如下：<br><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># Declare license on posts</span></span><br><span class="line">post_copyright:</span><br><span class="line"> <span class="built_in">enable</span>: <span class="literal">true</span></span><br><span class="line"> license: CC BY-NC-SA 3.0</span><br><span class="line"> license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/</span><br></pre></td></tr></table></figure></p><h3 id="修改打赏字体不闪动"><a href="#修改打赏字体不闪动" class="headerlink" title="修改打赏字体不闪动"></a>修改打赏字体不闪动</h3><p>修改文件 <code>next/source/css/_common/components/post/post-reward.styl</code>，然后注释其中的函数 <code>wechat:hover</code> 和 <code>alipay:hover</code>，如下：<br><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></pre></td><td class="code"><pre><span class="line">/* 注释文字闪动函数</span><br><span class="line"> <span class="comment">#wechat:hover p{</span></span><br><span class="line"> animation: roll 0.1s infinite linear;</span><br><span class="line"> -webkit-animation: roll 0.1s infinite linear;</span><br><span class="line"> -moz-animation: roll 0.1s infinite linear;</span><br><span class="line">}</span><br><span class="line"> <span class="comment">#alipay:hover p{</span></span><br><span class="line"> animation: roll 0.1s infinite linear;</span><br><span class="line"> -webkit-animation: roll 0.1s infinite linear;</span><br><span class="line"> -moz-animation: roll 0.1s infinite linear;</span><br><span class="line">}</span><br><span class="line">*/</span><br></pre></td></tr></table></figure></p><h3 id="自定义页面"><a href="#自定义页面" class="headerlink" title="自定义页面"></a>自定义页面</h3><p>比如想增加一个留言页面，则可以执行以下步骤：</p><ol><li>执行 “hexo new page “guestbook”</li><li><p>找到主题配置文件下的 menu，把 guestbook 加进去：</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></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line"> home: /</span><br><span class="line"> categories: /categories</span><br><span class="line"> about: /about</span><br><span class="line"> archives: /archives</span><br><span class="line"> tags: /tags</span><br><span class="line"> guestbook: /guestbook</span><br><span class="line"></span><br><span class="line"> menu_icons:</span><br><span class="line"> <span class="built_in">enable</span>: <span class="literal">true</span></span><br><span class="line"> guestbook: book <span class="comment"># 使用 fontawesome</span></span><br></pre></td></tr></table></figure></li><li><p>在 <code>/themes/next/languages/zh-Hans.yml</code>的目录下（这里默认你使用的是简体中文，若是其他语言更改相应的 yml 就行），在 memu 下加一句即可：</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">guestbook: 留言</span><br></pre></td></tr></table></figure></li></ol><h2 id="第三方服务"><a href="#第三方服务" class="headerlink" title="第三方服务"></a>第三方服务</h2><h3 id="HyperComments-评论系统"><a href="#HyperComments-评论系统" class="headerlink" title="HyperComments 评论系统"></a>HyperComments 评论系统</h3><p>使用自己的 google 账号登录 <a href="https://www.hypercomments.com/" target="_blank" rel="noopener">HyperComments</a>，添加 blog 的 url,例：xxx.github.io，在 <code>setting -> Widget -> General</code> 中可以看到 ID，如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-three/hypercomments_id.png" alt="hypercomments_id"></p><h3 id="不蒜子统计"><a href="#不蒜子统计" class="headerlink" title="不蒜子统计"></a>不蒜子统计</h3><p>编辑<span id="inline-purple">主题配置文件</span>中的 <code>busuanzi_count</code> 的配置项。<br>当 enable: true 时，代表开启全局开关。若 site_uv、site_pv、page_pv 的值均为 false 时，不蒜子仅作记录而不会在页面上显示。</p><h4 id="站点-UV-配置"><a href="#站点-UV-配置" class="headerlink" title="站点 UV 配置"></a>站点 UV 配置</h4><p>当 site_uv: true 时，代表在页面底部显示站点的 UV 值。<br>site_uv_header 和 site_uv_footer 为自定义样式配置，相关的值留空时将不显示，可以使用（带特效的）font-awesome。显示效果为 [site_uv_header] UV 值 [site_uv_footer]。<br><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></pre></td><td class="code"><pre><span class="line">site_uv: <span class="literal">true</span></span><br><span class="line">site_uv_header: 本站访客数</span><br><span class="line">site_uv_footer: 人次</span><br></pre></td></tr></table></figure></p><h4 id="站点-PV-配置"><a href="#站点-PV-配置" class="headerlink" title="站点 PV 配置"></a>站点 PV 配置</h4><p>当site_pv: true 时，代表在页面底部显示站点的 PV 值。<br>site_pv_header 和 site_pv_footer 为自定义样式配置，相关的值留空时将不显示，可以使用（带特效的）font-awesome。显示效果为 [site_pv_header] PV 值 [site_pv_footer]。<br><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></pre></td><td class="code"><pre><span class="line">site_pv: <span class="literal">true</span></span><br><span class="line">site_pv_header: 本站总访问量</span><br><span class="line">site_pv_footer: 次</span><br></pre></td></tr></table></figure></p><h3 id="文章的阅读次数统计"><a href="#文章的阅读次数统计" class="headerlink" title="文章的阅读次数统计"></a>文章的阅读次数统计</h3><h3 id="AddThis-内容分享"><a href="#AddThis-内容分享" class="headerlink" title="AddThis 内容分享"></a>AddThis 内容分享</h3><p>在网站 <a href="http://www.addthis.com/" target="_blank" rel="noopener">AddThis</a> 上注册账号。 可以使用 Google/Facebook/Twitter 账号进行第三方登陆<br>选择分享模块的显示方式是 <code>Inline</code>，调整分享模块的大小等参数<br>从下面菜单获得 AddThis id：<code>More.. --> General --> ID</code>。如下所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-three/addthis_share.png" alt="addthis_share"><br>在 主题配置文件 中，把 #Share 下的 #add_this_id 取消注释， 改为 <code>add_this_id: put_your_add_this_id_here</code><br>在 <code>/themes/next/layout/_macro/post.swig</code> 里面的 标签的上方添加如下代码：<br><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">< {<span class="comment">##AddThis 分享,首页不显示##}</span></span><br><span class="line">{% <span class="keyword">if</span> theme.add_this_id and not is_index%}</span><br><span class="line">{% include <span class="string">'../_partials/share/add-this.swig'</span> %}</span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure></p><h2 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h2><h3 id="添加动态背景"><a href="#添加动态背景" class="headerlink" title="添加动态背景"></a>添加动态背景</h3><ol><li>将 <code>particle.js</code> 文件添加到 <code>\themes\next\source\js\src</code> 文件目录下。</li><li>找到 <code>\themes\next\layout\_layout.swing</code> 文件， 在文件的后面，标签之前 添加以下代码：</li></ol><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><br><span class="line"><script type=<span class="string">"text/javascript"</span> src=<span class="string">"/js/src/particle.js"</span>><span class="xml"><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><h3 id="修改作者头像并旋转"><a href="#修改作者头像并旋转" class="headerlink" title="修改作者头像并旋转"></a>修改作者头像并旋转</h3><p>打开 \themes\next\source\css\ _common\components\sidebar\sidebar-author.styl，在里面添加如下代码：<br><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><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">.site-author-image {</span><br><span class="line"> display: block;</span><br><span class="line"> margin: 0 auto;</span><br><span class="line"> padding: <span class="variable">$site</span>-author-image-padding;</span><br><span class="line"> max-width: <span class="variable">$site</span>-author-image-width;</span><br><span class="line"> height: <span class="variable">$site</span>-author-image-height;</span><br><span class="line"> border: <span class="variable">$site</span>-author-image-border-width solid <span class="variable">$site</span>-author-image-border-color;</span><br><span class="line"></span><br><span class="line"> /* 头像圆形 */</span><br><span class="line"> border-radius: 80px;</span><br><span class="line"> -webkit-border-radius: 80px;</span><br><span class="line"> -moz-border-radius: 80px;</span><br><span class="line"> box-shadow: inset 0 -1px 0 <span class="comment">#333sf;</span></span><br><span class="line"></span><br><span class="line"> /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 </span><br><span class="line"> (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/</span><br><span class="line"> </span><br><span class="line"></span><br><span class="line"> /* 鼠标经过头像旋转360度 */</span><br><span class="line"> -webkit-transition: -webkit-transform 1.0s ease-out;</span><br><span class="line"> -moz-transition: -moz-transform 1.0s ease-out;</span><br><span class="line"> transition: transform 1.0s ease-out;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">img:hover {</span><br><span class="line"> /* 鼠标经过停止头像旋转 </span><br><span class="line"> -webkit-animation-play-state:paused;</span><br><span class="line"> animation-play-state:paused;*/</span><br><span class="line"></span><br><span class="line"> /* 鼠标经过头像旋转360度 */</span><br><span class="line"> -webkit-transform: rotateZ(360deg);</span><br><span class="line"> -moz-transform: rotateZ(360deg);</span><br><span class="line"> transform: rotateZ(360deg);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">/* Z 轴旋转动画 */</span><br><span class="line">@-webkit-keyframes play {</span><br><span class="line"> 0% {</span><br><span class="line"> -webkit-transform: rotateZ(0deg);</span><br><span class="line"> }</span><br><span class="line"> 100% {</span><br><span class="line"> -webkit-transform: rotateZ(-360deg);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">@-moz-keyframes play {</span><br><span class="line"> 0% {</span><br><span class="line"> -moz-transform: rotateZ(0deg);</span><br><span class="line"> }</span><br><span class="line"> 100% {</span><br><span class="line"> -moz-transform: rotateZ(-360deg);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">@keyframes play {</span><br><span class="line"> 0% {</span><br><span class="line"> transform: rotateZ(0deg);</span><br><span class="line"> }</span><br><span class="line"> 100% {</span><br><span class="line"> transform: rotateZ(-360deg);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h3 id="实现点击出现桃心效果"><a href="#实现点击出现桃心效果" class="headerlink" title="实现点击出现桃心效果"></a>实现点击出现桃心效果</h3><p>在网址输入如下<br><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">http://7u2ss1.com1.z0.glb.clouddn.com/love.js</span><br></pre></td></tr></table></figure></p><p>然后将里面的代码 copy 一下，新建 <code>love.js</code> 文件并且将代码复制进去，然后保存。将 love.js 文件放到路径 <code>/themes/next/source/js/src</code> 里面，然后打开 <code>\themes\next\layout\_layout.swig</code> 文件,在末尾（在前面引用会出现找不到的 bug）添加以下代码：</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><br><span class="line"><script type=<span class="string">"text/javascript"</span> src=<span class="string">"/js/src/love.js"</span>><span class="xml"><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>本章节主要介绍了 NexT 的主题配置、第三方服务以及动画的实现，更多的个人定制可以参考下面的网址，本系列到这里相信你已经可以定制自己风格的博客网站了，恭喜你！但做出自己喜欢的博客网站还只是第一步，我们还要将幸苦做出的博客网站推销出去，让更多的人可以看到，可以搜索到，所以<a href="/2017-12-16/build-blog-four.html">下一章节</a>我们主要介绍网站的搜索优化以及数据统计分析。</p><h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><blockquote><p><a href="https://segmentfault.com/a/1190000009544924" target="_blank" rel="noopener">https://segmentfault.com/a/1190000009544924</a></p></blockquote>]]></content>
<summary type="html">
本章节主要介绍 NexT的主题配置、第三方服务以及动画的实现
</summary>
<category term="Hexo" scheme="http://codersong.top/tags/Hexo/"/>
</entry>
<entry>
<title>使用 hexo-theme-next 搭建博客（二）</title>
<link href="http://codersong.top/2017-12-14/build-blog-two.html"/>
<id>http://codersong.top/2017-12-14/build-blog-two.html</id>
<published>2017-12-14T14:40:51.000Z</published>
<updated>2018-01-16T07:34:54.000Z</updated>
<content type="html"><![CDATA[<p id="div-border-top-blue"><br>本系列文章旨在教会你通过 next 主题搭建自己的 hexo 博客，跟着本系列完成后你的博客将会具备以下几个功能：<br>- 强调精于心，简于形的 next 主题，也可以很方便的定制和扩展；<br>- Hexo同时部署在 Coding 和 GitHub 上并使用 DNSPod 分流;<br>- LeanCloud 为文章添加阅读量统计功能，并在首页可以显示，不蒜子实现站内 UV PV 等统计；<br>- 百度统计；<br>- 站内搜索功能；<br>- RSS;<br>- 代码高亮，社交链接，打赏，动画等功能；<br>- 评论系统，可以匿名评论；<br>- 备份博客在 Github 上；<br>- 同步更新博客；<br>- ……<br></p><p><a href="/2017-12-13/build-blog-one.html">上一篇文章</a>我们主要介绍 Hexo 的本地站点的搭建以及使用 next 主题，本章节主要介绍把博客部署在 <code>GitHub page</code> 和 <code>Coding Page</code> 上，并配置自己的域名访问。</p><h2 id="部署到-GitHub"><a href="#部署到-GitHub" class="headerlink" title="部署到 GitHub"></a>部署到 GitHub</h2><h3 id="创建-Repository"><a href="#创建-Repository" class="headerlink" title="创建 Repository"></a>创建 Repository</h3><p>登录 GitHub 账号后，在首页右上角会有 New repository 按钮，点击后进入如下界面：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-two/github_new_repository.png" alt="github_new_repository"></p><p id="div-border-left-green">- repository name 一定要填 Owner.github.io，例如：songguoping.github.io<br>- 项目一定是 Public<br></p><h3 id="安装-Git-部署器"><a href="#安装-Git-部署器" class="headerlink" title="安装 Git 部署器"></a>安装 Git 部署器</h3><p>在终端执行以下命令；<br><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-deployer-git –save</span><br></pre></td></tr></table></figure></p><h3 id="修改配置文件"><a href="#修改配置文件" class="headerlink" title="修改配置文件"></a>修改配置文件</h3><p>打开 <span id="inline-blue">站点配置文件</span>，搜索 <code>deploy</code>，修改如下配置：<br><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></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line"> <span class="built_in">type</span>: git</span><br><span class="line"> repo: </span><br><span class="line"> github: https://github.com/songguoping/songguoping.github.io.git</span><br><span class="line"> branch: master</span><br></pre></td></tr></table></figure></p><h3 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h3><p>在站点目录下执行以下命令，即可将博客部署到 GitHub 上：<br><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 generate</span><br><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure></p><p>部署成功以后，在浏览器中输入 <code>http://Repository name</code>，例如 <a href="http://songguoping.github.io" target="_blank" rel="noopener">http://songguoping.github.io</a> 即可在线浏览自己的博客啦</p><h2 id="部署到-Coding"><a href="#部署到-Coding" class="headerlink" title="部署到 Coding"></a>部署到 Coding</h2><h3 id="创建项目"><a href="#创建项目" class="headerlink" title="创建项目"></a>创建项目</h3><p>没有 Coding 账号的先注册账号，然后新建项目，具体如图：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-two/coding_new_repository.png" alt="coding_new_repository"></p><p id="div-border-left-green">- 项目名称和个人名称必须一致<br>- 项目必须是公开的</p><h3 id="修改配置文件-1"><a href="#修改配置文件-1" class="headerlink" title="修改配置文件"></a>修改配置文件</h3><p>打开 <span id="inline-blue">站点配置文件</span>，搜索 <code>deploy</code>，修改如下配置：<br><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></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line"> <span class="built_in">type</span>: git</span><br><span class="line"> repo: </span><br><span class="line"> github: https://github.com/songguoping/songguoping.github.io.git</span><br><span class="line"> coding: https://git.coding.net/codersong/codersong.git</span><br><span class="line"> branch: master</span><br></pre></td></tr></table></figure></p><p>配置完成后，使用 <code>hexo d -g</code> 命令重新生成博客并部署到 GitHub 和 Coding 上去。</p><h3 id="为博客绑定个人域名"><a href="#为博客绑定个人域名" class="headerlink" title="为博客绑定个人域名"></a>为博客绑定个人域名</h3><h4 id="购买域名"><a href="#购买域名" class="headerlink" title="购买域名"></a>购买域名</h4><p>你需要在<a href="www.net.cn">万网</a>上购买一个域名，笔者购买的域名是：codersong.top</p><h4 id="解析域名"><a href="#解析域名" class="headerlink" title="解析域名"></a>解析域名</h4><p>找一个域名解析的提供商，使用它的DNS解析服务，此处推荐 <a href="https://www.dnspod.cn" target="_blank" rel="noopener">DNSPod</a><br>在your-hexo-site/source/路径下创建一个名为 <code>CNAME</code> 的文件<code>(没有扩展名)</code>,如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-two/cname.png" alt="cname"><br>使用文本编辑器打开 <code>CNAME</code> 文件，在首行添加个人域名信息，如：codersong.top<br>完成以上步骤后，重新执行命令 <code>hexo d -g</code> 部署。</p><h3 id="通过-DNSPod-配置-DNS-流量分发"><a href="#通过-DNSPod-配置-DNS-流量分发" class="headerlink" title="通过 DNSPod 配置 DNS 流量分发"></a>通过 DNSPod 配置 DNS 流量分发</h3><p>注册账号登陆 DNSPod，在自己的域名下添加四条记录：</p><p id="div-border-top-blue">添加一个主机记录为 <code>@</code>，记录类型为 <code>CNAME</code>，线路类型为 <code>国内</code>，记录值为 <code>xxx.coding.me</code>(例如：songguoping.coding.me)的记录；</p><br><p id="div-border-top-blue">添加一个主机记录为 <code>www</code>，记录类型为 <code>CNAME</code>，线路类型为 <code>国内</code>，记录值为 <code>xxx.coding.me</code>(例如：songguoping.coding.me)的记录；</p><br><p id="div-border-top-blue">添加一个主机记录为 <code>@</code>，记录类型为 <code>CNAME</code>，线路类型为 <code>默认</code>，记录值为 <code>xxx.github.io</code>(例如：songguoping.github.io)的记录；</p><br><p id="div-border-top-blue">添加一个主机记录为 <code>@</code>，记录类型为 <code>CNAME</code>，线路类型为 <code>国内</code>，记录值为 <code>xxx.github.io</code>(例如：songguoping.github.io)的记录；</p><br>如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-two/dnspod.png" alt="dnspod"><br><p id="div-border-left-green">主机记录为 @ 允许用户以 codersong.top 访问你的博客；主机记录为 www 允许用户以 www.codersong.top 访问你的博客</p><h3 id="配置-Coding-Pages"><a href="#配置-Coding-Pages" class="headerlink" title="配置 Coding Pages"></a>配置 Coding Pages</h3><h4 id="自定义域名"><a href="#自定义域名" class="headerlink" title="自定义域名"></a>自定义域名</h4><p>如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-two/coding_yuming.png" alt="coding_yuming"></p><p id="div-border-left-green">域名可以绑定最多5个，一定要选<code>首选</code>的域名，并且非首选域名要勾选<code>跳转至首选</code>域名不然有些第三方服务数据会统计不到一起</p><h4 id="强制-https-访问"><a href="#强制-https-访问" class="headerlink" title="强制 https 访问"></a>强制 https 访问</h4><p><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-two/coding_https.png" alt="coding_https"></p><p id="div-border-left-green">- 先要验证，验证完成后如图<br>- 打开强制 https 访问的开关，这时访问你的博客都是 https 了</p><h4 id="屏蔽掉-Coding-跳转页"><a href="#屏蔽掉-Coding-跳转页" class="headerlink" title="屏蔽掉 Coding 跳转页"></a>屏蔽掉 Coding 跳转页</h4><p>将博客部署 Coding 后，访问你的博客首先会跳到 Coding 的一个页面，这样不利于 seo 优化，我们要屏蔽掉这个跳转页，如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-two/coding_page_service.png" alt="coding_page_service"><br>将文字版的代码放置到 <code>themes/next/layout/_partials/footer.swig</code> 中，可以替换掉 Hexo 的内容：<br><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></pre></td><td class="code"><pre><span class="line">{% <span class="keyword">if</span> theme.footer.powered %}</span><br><span class="line"> <div class=<span class="string">"powered-by"</span>>Hosted by <a rel=<span class="string">"external nofollow"</span> href=<span class="string">"https://pages.coding.me"</span> style=<span class="string">"font-weight: bold"</span>>Coding Pages</a></div></span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure></p><p>代码配置完成后，勾选上图的<code>已放置 Hosted by Coding Pages</code>，等待通过审核。</p><p>通过 DNSPod 完成流量分发后，然后 Github 和 Coding 上完成各自的配置就可以将自己的域名与 Github page 和 Coding page 绑定起来。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>本章节我们主要介绍了如何把博客部署在 GitHub page 和 Coding Page 上，注册了自己的域名，通过 DNSpod 配置DNS流量分发，<a href="/2017-12-15/build-blog-three.html">下一章节</a>主要介绍 NexT 的主题配置、第三方服务以及动画的实现。</p><h2 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h2><h3 id="部署失败"><a href="#部署失败" class="headerlink" title="部署失败"></a>部署失败</h3><p>检查 SSH 公钥是否配置</p><h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><blockquote><p>lijiankun24: <a href="http://lijiankun24.com/" target="_blank" rel="noopener">http://lijiankun24.com/</a></p></blockquote>]]></content>
<summary type="html">
本章节主要介绍把博客部署在 GitHub page 和 Coding Page 上，并配置自己的域名访问
</summary>
<category term="Hexo" scheme="http://codersong.top/tags/Hexo/"/>
</entry>
<entry>
<title>使用 hexo-theme-next 搭建博客（一）</title>
<link href="http://codersong.top/2017-12-13/build-blog-one.html"/>
<id>http://codersong.top/2017-12-13/build-blog-one.html</id>
<published>2017-12-13T12:30:13.000Z</published>
<updated>2018-01-16T07:22:05.000Z</updated>
<content type="html"><![CDATA[<p id="div-border-top-blue"><br>本系列文章旨在教会你通过 next 主题搭建自己的 hexo 博客，跟着本系列完成后你的博客将会具备以下几个功能：<br>- 强调精于心，简于形的 next 主题，也可以很方便的定制和扩展；<br>- Hexo 同时部署在 Coding 和 GitHub 上并使用 DNSPod 分流;<br>- LeanCloud 为文章添加阅读量统计功能，并在首页可以显示，不蒜子实现站内 UV PV 等统计；<br>- 百度统计；<br>- 站内搜索功能；<br>- RSS;<br>- 代码高亮，社交链接，打赏，动画等功能；<br>- 评论系统，可以匿名评论；<br>- 备份博客在 Github 上；<br>- 同步更新博客；<br>- ……<br></p><h2 id="软件环境"><a href="#软件环境" class="headerlink" title="软件环境"></a>软件环境</h2><ul><li>Mac OS</li><li>Git</li><li>Node.js</li></ul><h2 id="本地站点搭建"><a href="#本地站点搭建" class="headerlink" title="本地站点搭建"></a>本地站点搭建</h2><h3 id="安装-Git"><a href="#安装-Git" class="headerlink" title="安装 Git"></a>安装 Git</h3><blockquote><p>Windows：下载安装 git 。<a id="download" href="https://git-scm.com/download/win" target="_blank" rel="noopener"><i class="fa fa-download"></i><span> Download git</span></a><br>Mac：使用 <a href="http://mxcl.github.com/homebrew/" target="_blank" rel="noopener">Homebrew</a>，<a href="http://www.macports.org/" target="_blank" rel="noopener">MacPorts</a> 或下载 <a href="http://sourceforge.net/projects/git-osx-installer/" target="_blank" rel="noopener">安装程序</a> 安装</p></blockquote><h3 id="安装-Node-js"><a href="#安装-Node-js" class="headerlink" title="安装 Node.js"></a>安装 Node.js</h3><p>下载安装 Node.js。<a id="download" href="https://nodejs.org/en/#download" target="_blank" rel="noopener"><i class="fa fa-download"></i><span> Download Node.js</span></a>,点击安装各个系统的版本，无脑的下一步即可完成安装。node.js 安装完成后，npm 也被安装完成。检测是否安装成功可以在终端输入命令查看 node.js 和 npm 的版本号。<br>如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-one/node_version.png" alt="node_version"></p><h3 id="安装-Hexo"><a href="#安装-Hexo" class="headerlink" title="安装 Hexo"></a>安装 Hexo</h3><p>所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。<br><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 -g hexo-cli</span><br></pre></td></tr></table></figure></p><p>输入以下命令查看 Hexo 的版本号：<br><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 -v</span><br></pre></td></tr></table></figure></p><p>如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-one/hexo_version.png" alt="hexo_version"></p><h3 id="建站"><a href="#建站" class="headerlink" title="建站"></a>建站</h3><p>安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件并拉取所需要的依赖。<br><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></pre></td><td class="code"><pre><span class="line">$ <span class="built_in">cd</span> <folder></span><br><span class="line">$ hexo init </span><br><span class="line">$ npm install</span><br></pre></td></tr></table></figure></p><p>如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-one/hexo_init.png" alt="hexo_init"><br>新建完成后，指定文件夹的目录如下：<br><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></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">├── _config.yml <span class="comment"># 网站的配置信息，在此称为站点配置文件，往后主题目录下也有相同命名的文件，称为主题配置文件</span></span><br><span class="line">├── package.json <span class="comment"># 应用程序的信息</span></span><br><span class="line">├── scaffolds <span class="comment"># 模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。</span></span><br><span class="line">├── <span class="built_in">source</span> <span class="comment"># 资源文件夹是存放用户资源的地方。</span></span><br><span class="line">| ├── _drafts</span><br><span class="line">| └── _posts</span><br><span class="line">└── themes <span class="comment"># 主题 文件夹。Hexo 会根据主题来生成静态页面。</span></span><br></pre></td></tr></table></figure></p><p>执行以下命令，生成静态页面：<br><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 generate</span><br></pre></td></tr></table></figure></p><p>执行以下命令，启动服务：<br><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 server</span><br></pre></td></tr></table></figure></p><p>如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-one/hexo_server.png" alt="hexo_server"><br>打开浏览器，输入 <a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/</a>，即可在本地查看基于 Hexo 的默认主题的原型：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-one/hexo_index.png" alt="hexo_index"></p><h3 id="安装-NexT"><a href="#安装-NexT" class="headerlink" title="安装 NexT"></a>安装 NexT</h3><p>Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可。具体到 NexT 来说，安装步骤如下。<br>在终端窗口下，定位到 Hexo 站点目录下。使用 <code>git checkout</code> 代码：<br><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">$ <span class="built_in">cd</span> your-hexo-site</span><br><span class="line">$ git <span class="built_in">clone</span> https://github.com/iissnan/hexo-theme-next themes/next</span><br></pre></td></tr></table></figure></p><p>如下图所示：<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-one/git_clone_next.png" alt="next_clone"><br>当 克隆/下载 完成后，打开 <span id="inline-blue">站点配置文件</span>， 找到 <code>theme</code> 字段，并将其值更改为 <code>next</code>。<br><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">theme: next</span><br></pre></td></tr></table></figure></p><p>启动 Hexo 本地站点，并开启调试模式（即加上 –debug），整个命令是 <code>hexo s --debug</code>，在启动之前，我们最好使用 <code>hexo clean</code> 来清除 Hexo 的缓存。<br>当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse<br><img src="http://p0ufe2pi4.bkt.clouddn.com/build-blog-one/hexo_index.png" alt="next_muse"></p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>本章节主要介绍 Hexo 的本地站点的搭建以及使用 next 主题，<a href="/2017-12-14/build-blog-two.html">下一章节</a>主要介绍把博客部署在 Github page 和 Coding Page 上，并配置自己的域名访问。</p><h3 id="Hexo-基本指令"><a href="#Hexo-基本指令" class="headerlink" title="Hexo 基本指令"></a>Hexo 基本指令</h3><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></pre></td><td class="code"><pre><span class="line">$ hexo init <span class="comment"># 新建一个网站</span></span><br><span class="line">$ hexo new [layout] <title> <span class="comment"># 新建一篇文章</span></span><br><span class="line">$ hexo generate <span class="comment"># 生成静态文件，部署时可以使用 hexo g -d</span></span><br><span class="line">$ hexo publish [layout] <filename> <span class="comment"># 发表草稿</span></span><br><span class="line">$ hexo server <span class="comment"># 启动服务器</span></span><br><span class="line">$ hexo deploy <span class="comment"># 部署网站</span></span><br><span class="line">$ hexo clean <span class="comment"># 清除缓存文件 (db.json) 和已生成的静态文件 (public)</span></span><br></pre></td></tr></table></figure><h3 id="简写命令"><a href="#简写命令" class="headerlink" title="简写命令"></a>简写命令</h3><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">$ hexo new == hexo n</span><br><span class="line">$ hexo generate == hexo g</span><br><span class="line">$ hexo server == hexo s</span><br><span class="line">$ hexo deploy == hexo d</span><br></pre></td></tr></table></figure><h3 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h3><ul><li>注意在配置文件中，冒号后面要留一个空格，要不然配置不生效</li></ul><h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><blockquote><p>hexo doc: <a href="https://hexo.io/zh-cn/docs/" target="_blank" rel="noopener">https://hexo.io/zh-cn/docs/</a><br>Never_yu’s Blog: <a href="https://neveryu.github.io/2016/09/03/hexo-next-one/" target="_blank" rel="noopener">https://neveryu.github.io/2016/09/03/hexo-next-one/</a></p></blockquote>]]></content>
<summary type="html">
本系列文章旨在教会你通过 next 主题搭建自己的 hexo 博客，本章节主要介绍 Hexo 的本地站点的搭建以及使用 next 主题
</summary>
<category term="Hexo" scheme="http://codersong.top/tags/Hexo/"/>
</entry>
<entry>
<title>Android Signature V2 下的多渠道打包</title>
<link href="http://codersong.top/2017-12-04/Android-Signature-V2.html"/>
<id>http://codersong.top/2017-12-04/Android-Signature-V2.html</id>
<published>2017-12-04T11:49:51.000Z</published>
<updated>2017-12-13T09:59:52.000Z</updated>
<content type="html"><![CDATA[<h2 id="相关背景"><a href="#相关背景" class="headerlink" title="相关背景"></a>相关背景</h2><p>Android7.0 引入一项新的应用签名方案 APK Signnature Scheme v2(以下简称 v2 ),这种新机制使得 apk 的签名方式更加安全，默认情况下,<code>Android Studio2.2</code> 和 <code>Gradle2.2</code> 会使用 v2 签名方案来签名 apk。如果使用 v2 这套签名方案就使得之前用的美团点评多渠道打包方案没用了，当然，美团点评在此基础上推出了新的解决方案 Walle。</p><h2 id="需求"><a href="#需求" class="headerlink" title="需求"></a>需求</h2><ul><li>客户端需要传一个 Channel 字段给服务器；</li><li>在发包时需要使用 360 加固或者其他的加固方式给 apk 加固；</li><li>apk 命名需要自定义；</li><li>批量打包；</li></ul><a id="more"></a><h2 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h2><h3 id="使用-v1-的签名方案"><a href="#使用-v1-的签名方案" class="headerlink" title="使用 v1 的签名方案"></a>使用 v1 的签名方案</h3><p>禁用掉 v2，使用 v1。打开<code>模块级 build.gradle</code> 文件，配置如下：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">android{</span><br><span class="line"> signingConfigs{</span><br><span class="line"> release{</span><br><span class="line"> <span class="function">storeFile <span class="title">file</span><span class="params">(<span class="string">"releasekey.keystore"</span>)</span></span></span><br><span class="line"><span class="function"> storePassword "password"</span></span><br><span class="line"><span class="function"> keyAlias "ReleaseKey"</span></span><br><span class="line"><span class="function"> keyPassword "password"</span></span><br><span class="line"><span class="function"> v2SigningEnabled <span class="keyword">false</span></span></span><br><span class="line"><span class="function"> }</span></span><br><span class="line"><span class="function"> }</span></span><br><span class="line"><span class="function">}</span></span><br></pre></td></tr></table></figure></p><h3 id="使用-v2-的签名方案"><a href="#使用-v2-的签名方案" class="headerlink" title="使用 v2 的签名方案"></a>使用 v2 的签名方案</h3><p>之前的美团点评的多渠道打包方案无效，我们使用新的解决方案 <a href="https://github.com/Meituan-Dianping/walle" target="_blank" rel="noopener">Walle</a>。如果不使用加固方案的话，直接按照 Walle 的 readme 操作即可，但是使用加固方案后，只能先加固，后签名，在通过 Walle 对这个签名后的 apk 进行多渠道打包，具体操作如下：</p><h4 id="先在项目中引用-Walle"><a href="#先在项目中引用-Walle" class="headerlink" title="先在项目中引用 Walle"></a>先在项目中引用 Walle</h4><p>在位于<code>项目的根目录 build.gradle</code> 文件中添加 <code>Walle Gradle</code> 插件的依赖<br><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">buildscript{</span><br><span class="line"> dependencies{</span><br><span class="line"> classpath <span class="string">'com.meituan.android.walle:plugin:1.1.5'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>并在<code>模块级 build.gradle</code> 文件中 apply 这个插件，并添加上用于读取渠道号的 AAR<br><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">apply plugin: <span class="string">'walle'</span></span><br><span class="line"> </span><br><span class="line">dependencies {</span><br><span class="line"> compile <span class="string">'com.meituan.android.walle:library:1.1.5'</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>通过以下方式获取渠道信息，并上传给服务器<br><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">ChannelInfo channelInfo= WalleChannelReader.getChannelInfo(<span class="keyword">this</span>.getApplicationContext());</span><br><span class="line"><span class="keyword">if</span> (channelInfo != <span class="keyword">null</span>) {</span><br><span class="line"> String channel = channelInfo.getChannel();</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>至此，在项目中的配置就算完成了，如果想插入一些额外的信息或者要对 Walle 进行更多的配置，请参考 Walle 的 readme。配置完成后，通过 <code>assembleRelease</code> 命令生成使用v2签名方式的 apk。</p><h4 id="python-工具打自定义名称的渠道包"><a href="#python-工具打自定义名称的渠道包" class="headerlink" title="python 工具打自定义名称的渠道包"></a>python 工具打自定义名称的渠道包</h4><p>拿这个 apk 去加固<code>生成未签名的加固包</code>。之后使用 python 工具去批量打自定义名称的渠道包。<br><strong>channel.txt</strong>：渠道信息<br><strong>config.py</strong>：配置签名信息以及 Android sdk 路径。<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">#Windows 下路径分割线请注意使用\\转义</span><br><span class="line">keystorePath = ""</span><br><span class="line">keyAlias = ""</span><br><span class="line">keystorePassword = ""</span><br><span class="line">keyPassword = ""</span><br><span class="line"></span><br><span class="line">#Android SDK buidtools path , please use above 25.0+</span><br><span class="line">sdkBuildToolPath = ""</span><br></pre></td></tr></table></figure></p><p><strong>MultiChannelBuildTool.py</strong>：基本思路就是遍历放置在同文件夹内的 apk 文件(将生成的未签名的加固包放置此处)。使用 v2 签名该 apk，然后将签名成功的 apk 通过 Walle 的命令行工具写入渠道等信息。<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><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br></pre></td><td class="code"><pre><span class="line">#!/usr/bin/python </span><br><span class="line"># -*-coding:utf-8-*-</span><br><span class="line">import zipfile</span><br><span class="line">import shutil</span><br><span class="line">import os</span><br><span class="line">import sys</span><br><span class="line">import platform</span><br><span class="line">import config</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"># 获取脚本文件的当前路径</span><br><span class="line">def curFileDir():</span><br><span class="line"> # 获取脚本路径</span><br><span class="line"> path = sys.path[0]</span><br><span class="line"> # 判断为脚本文件还是py2exe编译后的文件，</span><br><span class="line"> # 如果是脚本文件，则返回的是脚本的目录，</span><br><span class="line"> # 如果是编译后的文件，则返回的是编译后的文件路径</span><br><span class="line"> if os.path.isdir(path):</span><br><span class="line"> return path</span><br><span class="line"> elif os.path.isfile(path):</span><br><span class="line"> return os.path.dirname(path)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"># 判断当前系统</span><br><span class="line">def isWindows():</span><br><span class="line"> sysstr = platform.system()</span><br><span class="line"> if ("Windows" in sysstr):</span><br><span class="line"> return 1</span><br><span class="line"> else:</span><br><span class="line"> return 0</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"># 兼容不同系统的路径分隔符</span><br><span class="line">def getBackslash():</span><br><span class="line"> if (isWindows() == 1):</span><br><span class="line"> return "\\"</span><br><span class="line"> else:</span><br><span class="line"> return "/"</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"># 获取当前目录中所有的apk源包</span><br><span class="line">src_apks = []</span><br><span class="line"># python3 : os.listdir()即可，这里使用兼容Python2的os.listdir('.')</span><br><span class="line">for file in os.listdir('.'):</span><br><span class="line"> if os.path.isfile(file):</span><br><span class="line"> if ".apk" in file:</span><br><span class="line"> src_apks.append(file)</span><br><span class="line"></span><br><span class="line"># 获取渠道列表</span><br><span class="line">channel_file = 'channel.txt'</span><br><span class="line">f = open(channel_file)</span><br><span class="line">lines = f.readlines()</span><br><span class="line">f.close()</span><br><span class="line"></span><br><span class="line"># 当前脚本文件所在目录</span><br><span class="line">parentPath = curFileDir() + getBackslash()</span><br><span class="line"># config</span><br><span class="line">libPath = parentPath + "lib" + getBackslash()</span><br><span class="line">buildToolsPath = config.sdkBuildToolPath + getBackslash()</span><br><span class="line">checkAndroidV2SignaturePath = libPath + "CheckAndroidV2Signature.jar"</span><br><span class="line">walleChannelWritterPath = libPath + "walle-cli-all.jar"</span><br><span class="line">keystorePath = config.keystorePath</span><br><span class="line">keyAlias = config.keyAlias</span><br><span class="line">keystorePassword = config.keystorePassword</span><br><span class="line">keyPassword = config.keyPassword</span><br><span class="line"></span><br><span class="line">for src_apk in src_apks:</span><br><span class="line"> # 原包路径</span><br><span class="line"> protectedSourceApkPath = parentPath + src_apk</span><br><span class="line"></span><br><span class="line">zipalignedApkPath = protectedSourceApkPath[0: -4] + "_aligned.apk"</span><br><span class="line">signedApkPath = zipalignedApkPath[0: -4] + "_signed.apk"</span><br><span class="line"></span><br><span class="line"># 对齐</span><br><span class="line">zipalignShell = buildToolsPath + "zipalign -v 4 " + protectedSourceApkPath + " " + zipalignedApkPath</span><br><span class="line">os.system(zipalignShell)</span><br><span class="line"></span><br><span class="line"># 签名</span><br><span class="line">signShell = buildToolsPath + "apksigner sign --ks " + keystorePath + " --ks-key-alias " + keyAlias + " --ks-pass pass:" + keystorePassword + " --key-pass pass:" + keyPassword + " --out " + signedApkPath + " " + zipalignedApkPath</span><br><span class="line">os.system(signShell)</span><br><span class="line"></span><br><span class="line"># 检查V2签名是否正确</span><br><span class="line">checkV2Shell = "java -jar " + checkAndroidV2SignaturePath + " " + signedApkPath</span><br><span class="line">os.system(checkV2Shell)</span><br><span class="line"></span><br><span class="line"># file name (with extension)</span><br><span class="line">src_apk_file_name = os.path.basename(src_apk)</span><br><span class="line"># 分割文件名与后缀</span><br><span class="line">temp_list = os.path.splitext(src_apk_file_name)</span><br><span class="line"># name without extension</span><br><span class="line">src_apk_name = temp_list[0]</span><br><span class="line"># 后缀名".apk "</span><br><span class="line">src_apk_extension = temp_list[1]</span><br><span class="line"># 创建生成目录,与文件名相关</span><br><span class="line">output_dir = src_apk_name + 'android_' + "1-{channels}".format(channels=len(lines)) + '/'</span><br><span class="line"># 目录不存在则创建</span><br><span class="line">if not os.path.exists(output_dir):</span><br><span class="line"> os.mkdir(output_dir)</span><br><span class="line"></span><br><span class="line"># 遍历渠道号并创建对应渠道号的apk文件</span><br><span class="line">for line in lines:</span><br><span class="line"> # 获取当前渠道号，因为从渠道文件中获得带有\n,所有strip一下</span><br><span class="line"> target_channel = line.strip()</span><br><span class="line"> # 拼接对应渠道号的apk</span><br><span class="line"> target_apk = output_dir + src_apk_name + src_apk_extension</span><br><span class="line"> # 将签名后的apk拷贝建立新apk</span><br><span class="line"> shutil.copy(signedApkPath, target_apk)</span><br><span class="line"> writeChannelShell = "java -jar " + walleChannelWritterPath + " put -c " + target_channel + " " + target_apk</span><br><span class="line"> os.system(writeChannelShell)</span><br></pre></td></tr></table></figure></p><h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><blockquote><p>Walle: <a href="https://github.com/Meituan-Dianping/walle" target="_blank" rel="noopener">https://github.com/Meituan-Dianping/walle</a><br>Jay-Goo: <a href="https://github.com/Jay-Goo/ProtectedApkResignerForWalle" target="_blank" rel="noopener">https://github.com/Jay-Goo/ProtectedApkResignerForWalle</a></p></blockquote>]]></content>
<summary type="html">
本文主要解决 v2 签名方案下的多渠道打包问题，利用 Walle 批量打可以自定义文件名的 apk
</summary>
<category term="Android" scheme="http://codersong.top/tags/Android/"/>
</entry>
</feed>