hexo主题Icarus浅度修改教程
发表更新杂谈 / 备忘录13 分钟读完 (大约1991个字)

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)
  }
}

hexo主题Icarus浅度修改教程

https://big-news.cn/2019/08/12/hexo主题Icarus浅度修改教程/

作者

ce-amtic

发布于

2019-08-12

更新于

2023-04-15

许可协议

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

×

×