写于2019-11-04
Blog / Hexo
19 分钟 读完 (大约 2793 个字) 0次访问

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
social_links:
Github:
    icon: /images/github.svg
    url: 'https://github.com/liqingwang'
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

喜欢这篇文章？打赏一下作者吧

phpMyAdmin导出长数字到Excel
Nginx配置(HTTPS && HTTP自动跳转HTTPS && 禁止IP访问)

评论

关注我

友情链接

分类

最新文章

归档

标签

.NET 1
Cisco 2
Docker 6
DolphinScheduler 11
E2E 2
Fluentd 4
Hexo 4
Java 2
Jenkins 2
Kubernetes 12
Laravel 1
Linux 1
Mysql 1
Nginx 1
PHP 3
Prometheus 2
Python 2
Quartz 2
Scala 2
Spring 1
WordPress 3
Your browser is out-of-date!

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

×