前言：
hexo 提供了很好的静态页面组织技术，得益于此，我们可以基于GitHub page搭建我们自己的静态网站（成本较低），前面使用过NexT主题，主题简洁大方，黑白分明，但是看久了总让人麻木，而且很多功能都逐渐失效了，于是下定决心要迁移主题。
注意的一点是，本文只是迁移，也就是已经完成hexo的安装和github的ssh密钥的配置，没有整好的需要提前完成。
示例网站：Gitpage
如何迁移
准备工作
为了避免先前的主题影响页面生成，我们最好还是重新安装一份Hexo和icarus主题
mkdir hexo-page
hexo init
这样会在新文件夹下自动git下载hexo组织资源，等待完成
npm install hexo -server --save
需要额外安装hexo的server服务，以便于在本地调试
然后进入hexo-page文件夹中，安装依赖的资源模块
npm install
然后把原来的配置文件_config.yml 替换到新的文件夹中
配置 icarus 主题
下载 icarus，在 hexo 的 themes 文件夹，新加入 icarus 目录，配置 hexo 的根目录的 _config.yml
theme: icarus
然后更新部署就好了
hexo d -g
自定义 icarus 主题
默认配置也基本能用了，但是有一个痛点就是，阅读模式文章宽度太短了.
配置 gitalk 评论
icarus 默认是支持 gitalk 的，所以只需要在 themes/icarus/_config.yml 中设置一下即可
comment:
# Name of the comment plugin
type: gitalk
owner: panxiaoguang # (required) GitHub user name
repo: panxiaoguang.github.io # (required) GitHub repository name
client_id: xxxx # (required) OAuth application client id
client_secret: xxx # (required) OAuth application client secret
admin: cloudy-liu
链接id 和密钥可以在网站获取
代码高亮
代码高亮款式有很多，官方使用的是higlight.js,只需要选择一种款式就好了，默认就行
调整阅读模式双栏
判断 post 页面，显示目录 toc ，修改宽度
首先修改themes/icarus/includes/helpers/layout.js
- return widgets.filter(widget => widget.hasOwnProperty('position') && widget.position === position);
+ if (this.page.layout !== 'post') {
+ return widgets.filter(widget => widget.hasOwnProperty('position') && widget.position === position);
+ }
+ if (position === 'left') {
+ return widgets.filter(widget => widget.hasOwnProperty('position') && (widget.type === 'toc'));
+ } else {
+ return []
+ }
然后themes/icarus/layout/common/widget.ejs
case 2:
- return 'is-4-tablet is-4-desktop is-4-widescreen';
+ return 'is-4-tablet is-4-desktop is-3-widescreen';
themes/icarus/layout/layout.ejs
<head>
<%- partial('common/head') %>
</head>
-<body class="is-<%= column_count() %>-column">
+<body class="is-3-column">
<%- partial('common/navbar', { page }) %>
case 2:
- return 'is-8-tablet is-8-desktop is-8-widescreen';
+ return 'is-8-tablet is-8-desktop is-9-widescreen';
case 3:
return 'is-8-tablet is-8-desktop is-6-widescreen'
}
然后是themes/icarus/source/css/style.styl
.is-2-column .container
max-width: screen-desktop - 2 * gap
width: screen-desktop - 2 * gap
+ .is-3-column .container
+ max-width: screen-widescreen - gap
+ width: screen-widescreen - gap
@media screen and (min-width: screen-fullhd)
+ .is-3-column .container
+ max-width: screen-fullhd - 2 * gap
+ width: screen-fullhd - 2 * gap
增加文章版权
修改themes/icarus/layout/common/article.ejs
<div class="content">
<%- index && post.excerpt ? post.excerpt : post.content %>
</div>
+ <% if (!index && post.layout === 'post' && post.copyright !== false) { %>
+ <ul class="post-copyright">
+ <li><strong>本文标题：</strong><a href="<%= post.permalink %>"><%= page.title %></a></li>
+ <li><strong>本文作者：</strong><a href="<%= theme.url %>"><%= theme.author %></a></li>
+ <li><strong>本文链接：</strong><a href="<%= post.permalink %>"><%= post.permalink %></a></li>
+ <li><strong>发布时间：</strong><%= post.date.format("YYYY-MM-DD") %></li>
+ <li><strong>版权声明：</strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！
+ </li>
+ </ul>
+ <% } %>
<% if (!index && post.tags && post.tags.length) { %>
下面文件加入格式
修改themes/icarus/source/css/style.styl
border: none
.file
all: initial
+
+.post-copyright
+ font-size: 1rem
+ letter-spacing: 0.02rem
+ word-break: break-all
+ margin: 2.5rem 0 0
+ padding: 1rem 1rem
+ border-left: 3px solid #FF1700
+ background-color: #F9F9F9
更新logo
icarus 有默认的 logo，这里想改变一下，logo 是在 themes\icarus\source\images 里面logo.svg 文件，我们只需要替换成自己的 logo 文件即可，可以从这里去获取。
总访问量统计
icarus 是用卜算子统计，默认只统计了访问人数，并没有访问量统计，需要在页脚修改下
修改themes/icarus/layout/common/footer.ejs
@@ -15,9 +15,8 @@
href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank">Icarus</a>
<% if (has_config('plugins.busuanzi') ? get_config('plugins.busuanzi') : false) { %>
<br>
- <span id="busuanzi_container_site_uv">
- <%- _p('plugin.visitor', '<span id="busuanzi_value_site_uv">0</span>') %>
- </span>
+ <span id="busuanzi_container_site_uv"> 来访 <span id="busuanzi_value_site_uv"></span>人</span>
+ <span id="busuanzi_container_site_pv">, 总访问 <span id="busuanzi_value_site_pv"></span>次</span>
<% } %>
</p>
修改主题后，建议先进行清理，不然可能由于缓存问题，导致本地预览与部署不一致!
hexo clean
hexo d -g
网友评论