yilia 在大屏下被拉伸的太长了，一直想换三栏模式，最近看到 icarus主题，设计的非常漂亮，于是果断换 (怎么现在尽是在折腾Hexo 主题啊，Orz…)
配置 icarus 主题
下载 icarus ，在 hexo 的 themes 文件夹，新加入 icarus 目录，配置 hexo 的根目录的 _config.yml
_config.yml1
2
| -theme: yilia
+theme: icarus
|
然后更新部署就好了
自定义 icarus 主题
默认配置也基本能用了，但是有一个痛点就是，阅读模式文章宽度太短了，还是根据个人习惯做下配置下
配置 gitalk 评论
icarus 默认是支持 gitalk 的，所以只需要在 themes/icarus/_config.yml 中设置一下即可
themes/icarus/_config.yml1
2
3
4
5
6
7
8
| comment:
# Name of the comment plugin
type: gitalk
owner: cloudy-liu # (required) GitHub user name
repo: cloudy-liu.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
|
还没配置的可以参考这篇做配置
代码高亮
代码高亮款式 , 预览参见这里，Android 程序员选择 androidstudio 效果不错
themes/icarus/_config.yml1
| highlight: androidstudio
|
调整阅读模式双栏
判断 post 页面，显示目录 toc ，修改宽度
themes/icarus/includes/helpers/layout.js1
2
3
4
5
6
7
8
9
| - 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 === 'right') {
+ return widgets.filter(widget => widget.hasOwnProperty('position') && (widget.type === 'toc'));
+ } else {
+ return []
+ }
|
themes/icarus/layout/common/widget.ejs1
2
3
| 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.ejs1
2
3
4
5
6
7
8
9
10
11
12
| <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.styl1
2
3
4
5
6
7
8
9
10
| .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.ejs1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <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.styl1
2
3
4
5
6
7
8
9
10
11
12
| 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
|
这里大部分是参照 自定义icarus 做的修改(点赞)
更新logo
icarus 有默认的 logo，这里想改变一下，logo 是在 themes\icarus\source\images 里面logo.svg 文件，我们只需要替换成自己的 logo 文件即可，可以从这里 去获取。
总访问量统计
icarus 是用卜算子统计，默认只统计了访问人数，并没有访问量统计，需要在页脚修改下
themes/icarus/layout/common/footer.ejs1
2
3
4
5
6
7
8
9
10
11
| @@ -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>
|
修改主题后，建议先进行清理，不然可能由于缓存问题，导致本地预览与部署不一致，KO !
参考资料
