hexo主题Icarus浅度修改教程

hexo主题Icarus浅度修改教程

此页面最近更新时间:2019.8.14,其中可能存在过时内容。

难得放假两天(还是因为来台风),结果so又没得颓,实在是闲的没事干,随便写写博吧,说不定还能当备忘录使……

Icarus实在是hexo的一款非常优秀的主题。它具有极高的自由度和兼容性,并且功能也很齐全。不过还是有一些美中不足的地方,其中一部分被我摸索(瞎蒙)着解决了(蒙中了)。

2021.1.6 注:由于 Icarus 3.0 及以上版本的修改,现在侧边栏小部件的相关代码需要到 \hexo\node_modules\hexo-component-inferno\lib\view\widget\ 这个文件夹下去找,语言也从 EJS 变成了 JS,但是方法还是大同小异的。

侧边栏

侧边栏“最新文章”栏

这个东西啊,个人感觉真的没什么实用性。可以把它改成类似于优秀文章推广之类的,就比较好了。

打开\icarus\layout\widget\recent_posts.ejs,找到:

\icarus\layout\widget\recent_posts.ejs
1
<% site.posts.sort('date', -1).limit(5).each(post => { %>

一行,改成:

\icarus\layout\widget\recent_posts.ejs
1
<% site.posts.sort('priority', -1).limit(5).each(post => { %>

然后只需要在每篇文章上面的配置里加上priority: xxx,其中xxx是你自由确定的优先级(1,2,3之类的数字),就可以自由更改显示在那里的文章了。
当然也可以调整显示在那里的文章数量,像这样:

\icarus\layout\widget\recent_posts.ejs
1
<% site.posts.sort('priority', -1).limit(10).each(post => { %>

就是显示10篇文章。10也可以改成其它数字。

然后更改栏目名称。打开\icarus\languages\zh-CN.yml ,找到:

\icarus\languages\zh-CN.yml
1
recents: '最新文章'

一句,把“最新文章”替换成“阅读推荐”就好了。

侧边栏“目录”栏自动编号

目录本人一般会手动编号,所以这个自动编号功能对我来说并不友好。所以加个开关好了。

打开\icarus\layout\widget\toc.ejs,把整个文件复制一遍然后粘贴到最后面。然后会有两行像这样的语句:

\icarus\layout\widget\toc.ejs
1
<% if (get_config('toc') === true && (post.layout === 'page' || post.layout === 'post')) {

把第一句改成:

\icarus\layout\widget\toc.ejs
1
<% if (get_config('toc_auto_num') === false && get_config('toc') === true && (post.layout === 'page' || post.layout === 'post')) {

第二句改成:

\icarus\layout\widget\toc.ejs
1
<% if ((get_config('toc_auto_num') === true || !has_config('toc_auto_num')) && get_config('toc') === true && (post.layout === 'page' || post.layout === 'post')) {

然后找到第一个if语段中如下的位置:

\icarus\layout\widget\toc.ejs
1
<span class="has-mr-6">${toc.index}</span>

把它注释掉:

\icarus\layout\widget\toc.ejs
1
<!--span class="has-mr-6">${toc.index}</span-->

然后就可以通过文章前面的toc_auto_num: true/false来控制是不是开启自动编号。

侧边栏“资料”栏关注按钮

这个东西对我来说也没什么用处。把它链接到关于页面之后,在\icarus\languages\zh-CN.yml 里,找到:

\icarus\languages\zh-CN.yml
1
follow: '关注'

一句,改成:

\icarus\languages\zh-CN.yml
1
follow: '关于'

然后更改页面打开方式为同一页面跳转,具体做法是打开\icarus\layout\widget\profile.ejs,找到:

\icarus\layout\widget\profile.ejs
1
2
3
<a class="level-item button is-link is-rounded" href="<%= url_for(widget.follow_link) %>" target="_blank">
<%= __('widget.follow') %>
</a>

target="_blank"属性删掉就好了。


站底

站底备案号及链接

这个Icarus貌似并没有预留接口……只能自己写了。

打开\icarus\layout\common\footer.ejs,找到:

\icarus\layout\common\footer.ejs
1
2
3
4
5
 <% if (has_config('plugins.busuanzi') ? get_config('plugins.busuanzi') : false) { %>
<span id="busuanzi_container_site_uv">
<%- _p('plugin.visitor', '<span id="busuanzi_value_site_uv">0</span>') %>
</span>
<% } %>

一段,在后面添加:

\icarus\layout\common\footer.ejs
1
2
<br> 
<a class="has-link-black-ter-2 -link" href="http://beian.miit.gov.cn/" target="_blank">省份ICP备xxx号-x</a>

然后更改样式文件。打开\icarus\source\css\style.styl,找到这样的两段:

\icarus\source\css\style.styl
1
2
3
4
.has-link-black-ter
transition: 0.2s ease
&:hover
color: hsl(217, 71%, 53%) !important
\icarus\source\css\style.styl
1
2
.has-link-black-ter
color: hsl(0, 0%, 14%) !important

把这两段分别扩充成:

\icarus\source\css\style.styl
1
2
3
4
5
6
7
8
.has-link-black-ter
transition: 0.2s ease
&:hover
color: hsl(217, 71%, 53%) !important
.has-link-black-ter-2
transition: 0.2s ease
&:hover
color: hsl(217, 71%, 53%) !important
\icarus\source\css\style.styl
1
2
3
4
.has-link-black-ter
color: hsl(0, 0%, 14%) !important
.has-link-black-ter-2
color: hsl(0, 0%, 30%) !important

就好了。

站底字数统计

这个主题是没有集成的,所以首先安插件:

1
$ npm i --save hexo-wordcount

然后打开\icarus\layout\common\footer.ejs,找到:

\icarus\layout\common\footer.ejs
1
2
3
4
5
 <% if (has_config('plugins.busuanzi') ? get_config('plugins.busuanzi') : false) { %>
<span id="busuanzi_container_site_uv">
<%- _p('plugin.visitor', '<span id="busuanzi_value_site_uv">0</span>') %>
</span>
<% } %>

一段,在后面添加:

\icarus\layout\common\footer.ejs
1
2
<br>
<span class="post-count"><%= totalcount(site) %></span> Words in Total

当然,如果想和备案号放在一块,可以这样添加:

\icarus\layout\common\footer.ejs
1
2
3
<br>
<span class="post-count"><%= totalcount(site) %></span> Words in Total |
<a class="has-link-black-ter-2 -link" href="http://beian.miit.gov.cn/" target="_blank">省份ICP备xxx号-x</a>

站点推送

Sitemap生成

这个的方法对与所有hexo博客来说都是一样的吧…装个插件就好了:

1
2
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

百度自动推送

这个貌似并没有什么用处…但是有总比没有好。

需要从baidu上搞到的推送代码,这个代码可能跟下面这份一样或相似:

\icarus\layout\common\scripts.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https'){
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else{
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>

然后打开\icarus\layout\common\scripts.ejs,在顶部添加上面的代码就好了。


其他

markdown行间代码样式

emm,我还真不知道这个叫什么,其实就是abcde这个东西。这个默认的是红色字体,个人感觉不好看。其实可以改。

打开\icarus\source\css\style.styl,找到:

\icarus\source\css\style.styl
1
2
3
4
code
color: hsl(348, 100%, 61%)
background: transparent
padding: 0
一段。这段就是控制行间代码样式的。其中`color`控制字体颜色,`background`控制背景颜色,`padding`控制代码块的边距大小。这里提供一种配色方案:
\icarus\source\css\style.styl
1
2
3
4
code
color: #5E81AC
background: #ECEFF4
padding: 0

其实就是本博客现在呈现的行间代码样式。

Sharthis分享插件

emm,这个毕竟是国外的东西,在国内不怎么实用。但是它好看啊…
想在站底插入这样一个分享按钮,得先注册一个Sharethis账号,然后获得一个javascript代码的url。这个是免费的。

然后主题里大概集成了这个,但是貌似存在BUG导致hexo无法渲染。于是还得自己加。

打开\icarus\layout\common\article.ejs,找到:

\icarus\layout\common\article.ejs
1
2
3
4
5
6
7
<div class="level is-mobile">
<div class="level-start">
<div class="level-item">
<a class="button is-size-7 is-light" href="<%- url_for(post.path) %>#more"><%= __('article.more') %></a>
</div>
</div>
</div>

一段,在下面添加:

\icarus\layout\common\article.ejs
1
2
3
4
5
6
7
8
9
10
11
<% if (!index
&& post.path !== "friends.html"
&& post.path !== "about\index.html"
&& post.path !== "(你不想添加代码的页面的路径)"
(......)
) { %>
<hr>
<h3 class="menu-label has-text-centered">(你想要的标题)</h3>
<div class="sharethis-inline-share-buttons"></div>
<script type='text/javascript' src='(你的js的url)' async='async'></script>
<% } %>

隐藏首页文章

打开\icarus\layout\index.ejs ,把它改成这样:

\icarus\layout\index.ejs
1
2
3
4
5
6
7
8
<% page.posts.each(function(post){ %>
<% if (post.unshown !== true) { %>
<%- partial('common/article', { post, index: true }) %>
<% } %>
<% }); %>
<% if (page.total > 1) { %>
<%- partial('common/paginator') %>
<% } %>

然后通过文章表头的unshown: true/false控制就好了。

在搜索中隐藏文章

Icarus的insight搜索基于一个本地生成的content.json。所以只要让页面不出现在这个里面就好了。

打开\icarus\includes\generators\insight.js,找到这样一段:

\icarus\includes\generators\insight.js
1
2
3
4
5
6
7
function postMapper(post) {
return {
title: post.title,
text: minify(post.content),
link: url_for(post.path)
}
}

在前面加上一段:

\icarus\includes\generators\insight.js
1
2
3
4
5
6
7
8
9
10
function postMapper(post) {
if (url_for(post.path) == "(你想隐藏的页面的路径)"){
return {}
}
return {
title: post.title,
text: minify(post.content),
link: url_for(post.path)
}
}

作者

ce-amtic

发布于

2019-08-12

更新于

2021-01-06

许可协议

CC BY-NC-SA 4.0

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×