Hexo&icarus主题修改

前一段时间将博客迁移到了Hexo,并切换了icarus主题,并花了一些时间修改,于是写篇博客记录一下中途遇到的问题。

一、前言

Hexo有很多主题,看了很多主题,像占比最高的Next,但是个人不是很喜欢那个风格,总觉得两栏不是那么好看。

找了不少,最终看到了icarus,感觉很简洁、很清爽。三栏的设计,整体白色的基调,看着很舒服。

但是刚切换过来发现很多地方还可以再改改,于是也折腾了一段时间,因为上班比较忙,加上对node不怎么熟,中途也遇到了不少坑。

在这里得感谢i蝸居年華_谢谢谢,因为icarus比较小众,网上的教程也不多,基本是参考他的博文修改的。

自己修改完成后也要做个记录,也可以给别人以参考。

二、改动记录

1、配置文件_config.yml

配置文件整体请参考官方文档,非常全,基本什么都有。

之前大学在实验室的时候让美工帮忙设计过一个logo,但是现在看着已经不喜欢那样的风格了,于是也去阿里矢量库找了不少小图像然后给我女朋友看,选出来一个两个人都觉得萌萌哒小考拉,加上汉字,就看起来很像logo啦。

源码中改动如下:

  • themes/hexo-theme-icarus/layout/common/navbar.ejs
    1
    2
    3
    第8行
    <img src="<%- url_for(logo) %>" alt="<%= title %>" height="36">
    <span style="font-size:16px;display:inline-block;vertical-align:top;font-weight:600">旺阳</span>

之前给女朋友搭过一个网站,于是也想加在social_links里面,配置文件中使用的是fontawesome。我想找一个心形,heart-o或者heart都可以。但是试了试显示不出来。后面受到启发,直接不使用这个图标字体库了,改为img格式,引入图片。
配置文件改动如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
social_links:
Github:
icon: /images/github.svg
url: 'https://github.com/liqingwang'
Weibo:
icon: /images/weibo.svg
url: 'https://weibo.com/u/5708757981'
Heart:
icon: /images/heart.svg
url: 'https://zdyang.net'
Mail:
icon: /images/mail.svg
url: mailto:wang@lqwang.net

源码中改动如下:

  • themes/icarus/layout/widget/profile.ejs
    1
    2
    第88行 
    <img src="<%= link.icon %>" style="height: 20px;width: 20px;"></img>

4、文章页配置

1、文章添加摘要

在文章的摘要后添加标签,之前的文本就会显示成摘要啦,后面出现阅读更多按钮。

2、文章发表时间修改

如果文章发布时间较早,那么默认会显示一年前两年前等,看着不是很美观,于是全部修改为发表的年月日。
源码中改动如下:

  • themes/icarus/layout/common/article.ejs
    1
    2
    第14行
    <span class="level-item has-text-grey">写于<%= date(post.date) %></span>

3、添加版权声明

源码中改动如下:

  • themes/icarus/layout/common/article.ejs
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    第51行添加
    <% if (!index) { %>
    <div>
    <ul class="post-copyright">
    <li><strong>本文标题:</strong><a href="<%- url_for(post.link ? post.link : post.path) %>"><%= post.title %></a></li>
    <li><strong>本文作者:</strong><a href="https://xiefayang.com">旺阳</a></li>
    <li><strong>本文链接:</strong><a href="<%- url_for(post.link ? post.link : post.path) %>">https://www.lqwang.net/<%- post.path %></a></li> <!-- 这里替换成你自己的网址-->
    <li><strong>发布时间:</strong><%= date(post.date) %></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>
    </div><br>
    <% } %>

4、添加分享工具

配置文件改动

1
2
3
share:
# Share plugin name
type: sharejs

主题里有很多种的分享配置,详情可以看官方文档

5、添加图片默认主图

在写文章的时候在顶部添加 thumbnail:图片路径 即可。

我觉得麻烦于是直接替换了默认的图片。

  • themes/icarus/source/images/thumbnail.svg

5、添加评论系统

之前的WordPress用的是内置评论系统,现在主题里支持很多第三方的评论系统。我采用的是valine,具体配置详见官方文档

6、目录添加粘性布局

文章页面主要想显示文章的主要内容,所以想在文章页里一直显示目录,这样阅读体验会更好。具体的改动如下:

  • themes/icarus/layout/widget/toc.ejs
    1
    2
    第26行添加一个样式即可
    style="position: sticky;position: -webkit-sticky;top: 0"

7、目录修改为不显示默认序号

主题的目录是自动添加序号的,但是我在写文章的时候更习惯自己添加好目录序号,所以需要去掉默认的序号。具体改动如下:

  • themes/icarus/layout/widget/toc.ejs
    1
    2
    删除第6行代码即可
    <span class="has-mr-6">${toc.index}</span>

8、文章页三栏变两栏

主题默认是三列排列,第一列是个人信息,第二列是文章的简介或者内容,第三列是标签云等组件。在首页的时候阅读体验也很好,但是在文章页面查看全文的时候就感觉文章内容显示有些太少。

于是打算在文章页面隐藏掉右边的侧边栏。这个在可能是我搜索的关键词不对,没有找到教程,于是就打算自己来😂。

首先找到了控制侧边栏的代码文件在

  • themes/icarus/layout/layout.ejs

三栏分别为:

  • <%- _partial(‘common/widget’, { position: ‘left’ }) %> 左
  • <div class=”column <%= main_column_class() %> has-order-2 column-main”><%- body %></div> 中
  • <%- _partial(‘common/widget’, { position: ‘right’ }) %> 右

那能不能逻辑改为只有主页才显示右边侧栏呢?

修改逻辑如下:

1
2
3
4
<%- _partial('common/widget', { position: 'left' }) %>
<% if (page.path === 'index.html') { %>
<%- _partial('common/widget', { position: 'right' }) %>
<% } %>

只有在主页,才显示右边栏。OK。

那只需要判断一下,如果不是主页,那么中间栏宽度为80%就好了吧。修改逻辑如下:

1
2
3
4
5
<% if (page.path === 'index.html') { %>
<div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div>
<% } else { %>
<div class="column <%= main_column_class() %> has-order-2 column-main style="width:80%"><%- body %></div>
<% } %>

OK啦!

结果在手机打开博客发现有问题。因为手机默认是隐藏掉左右的侧栏的,只保留中间文章内容,宽度为100%,但是我的内容设置为80%了,就显示的有问题。那么说明我们不能粗暴的把中间栏的宽度设置为80%,还需要改。

那么判断一下,如果是不是手机模式再修改宽度?否则不变?理论上是可以的,但是对ejs不太熟,网上找到的通过js判断是否是前端页面的方法贴进来失效,我还咨询了一下实验室下一届前端大哥,他也没怎么用过ejs,最后只能放弃这个方法了😂。

那我通过调试模式,发现icarus采用的是响应式布局,我能不能通过css来判断是不是手机模式,然后来修改中间框的大小呢?

修改逻辑如下:

1
2
3
4
5
<% if (page.path === 'index.html') { %>
<div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div>
<% } else { %>
<div class="column <%= main_column_class() %> has-order-2 column-main twoLine"><%- body %></div>
<% } %>

如果不是主页则添加一个class twoLine,然后css修改如下:

  • themes/icarus/source/css/style.styl
1
2
3
4
5
6
7
@media screen and (min-width: screen-widescreen)
.is-1-column .container
.is-2-column .container
max-width: screen-desktop - 2 * gap
width: screen-desktop - 2 * gap
.twoLine
width: 80%!important

屏幕宽度大于 screen-widescreen = 1280px,那么使用这些样式,也可以理解为使用这些样式的最小宽度为1280px。我们的逻辑为如果不是主页,就添加一个class,但是只有宽度在>=1280px的时候才把宽度设置为80%,完美解决在电脑版三栏变两栏的问题~

9、添加网站访客统计

主题是默认支持BuSuanZi,只需要在配置文件中把busuanzi 改为true即可。

在本机通过http://localhost/访问会发现访客数很大,我百度后说是发布到服务器上就好了。确实是。

初步感觉应该是按照IP为维度来分的,大家本机访问域名都是localhost,所以访客数不断累积。放到自己服务器就重新计算了。

10、页面添加图片

之前的WordPress是内置了资源管理系统的,hexo是没有的。是可以使用图库,然后博客外链图库的功能,比如七牛云、阿里云、腾讯云等等。但是比较麻烦,七牛云是有免费的空间,个人使用够了,但是阿里云、腾讯云是收费的。如果想本地负责图片直接上传是需要搭配其他插件使用的,我是觉得有点太麻烦了。

搜索了一下,hexo是有资源库的插件的。具体操作如下:

  • 配置文件中post_asset_folder设置为true
  • 到博客的根目录下执行 npm install https://github.com/CodeFalling/hexo-asset-image –save 命令来进行插件的安装
  • 在使用hexo n “测试”的命令后,_posts下就会生成 测试.md和测试文件夹,在文章中使用测试/XXX.png就可以引用本地文件了

在hexo g打包的时候,插件会自动更新文章内引用的地址,还是很方便的。

11、修改文章访问路径

默认的访问路径是permalink: :year/:month/:day/:title/,在配置文件的18行。看着有点臃肿而且不美观,于是我改为permalink: :id.html。

文章markdown文件中添加id: 1,文章的访问路径就为XXX.1.html了。看着舒服了很多。

但是也会遇到一个问题,就是图片脚本的自动替换路径会有问题。具体的问题我记得当时研究了一会。好像是替换的文件夹路径为1.htm/,但是正确的路径应该为1/。

  • node_modules/hexo-asset-image/index.js
    1
    2
    57行 添加一行代码即可            
    link=link.replace(".htm","");

12、页面底部样式优化

我在页面底部添加了备案号,然后把logo也修改为顶部的图标+汉字的样子。同时去掉了busuanzi的访问量数据,只保留了访客数据。并把样式进行了优化,具体改动代码就不放出来了,自己按照喜好修改吧~

  • themes/icarus/layout/common/footer.ejs

三、总结

折腾之前其实有点迷的,不知道怎么下手,nodejs不太懂。但是真的上手去改以后感觉其实都一样。没有什么太大的区别,技术都是想通的,ejs跟js还有styl跟css其实本质是一样的。

折腾好之后看着是舒服多啦哈哈。在修改的过程中参考了很多的文章,所以自己修改完后也做个记录。可以给其他人以参考,有问题可以邮件联系我。


# Hexo

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×