启用hexo新主题indigo

本文最后更新于：3 个月前

我的博客原来的主题是fexo，经过了一段时间后，也有点审美疲劳了，所以本次切换主题到hexo-theme-indigo

一、部分个性化

部署完该主题后，我觉的有部分内容需要修改为我自己的风格，所以做了如下修改

1、左上部分头像、姓名和邮箱位置居中

  • /indigo/layout/_partial/menu.ejs
1
2
3
<!--第7行，添加居中样式-->
<!--<div class="brand">-->
<div class="brand" style="text-align: center;">
1
2
3
<!--第8行，添加居中样式-->
<!--<a href="<%- url_for(theme.avatar_link) %>" class="avatar waves-effect waves-circle waves-light">-->
<a href="<%- url_for(theme.avatar_link) %>" class="avatar waves-effect waves-circle waves-light" style="margin-left: 60px;">

2、隐藏底部关于版权的内容，并把RSS按钮改到最底部

  • /themes/indigo/layout/_partial/footer.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<footer class="footer">
    <!--删除上半部分标签-->
    <!--<div class="top">-->
    <!--    <%- partial('plugins/site-visit') %>-->
    <!--    <p>-->
    <!--        <% if ((config.feed) && (config.feed.path.length)) { %>-->
    <!--            <span><a href="<%- url_for(config.feed.path) %>" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>-->
    <!--        <% } %>-->
    <!--        <span><%- __('footer.license') %></span>-->
    <!--    </p>-->
    <!--</div>-->
    <div class="bottom">
        <p><span><%-config.author %> &copy; <%if (theme.since_year && theme.since_year < date(new Date(), 'YYYY')) {%><%- theme.since_year %> - <%}%><%- date(new Date(), 'YYYY') %></span>
        
            <!--添加RSS标签-->
            <% if ((config.feed) && (config.feed.path.length)) { %>
                <span><a href="<%- url_for(config.feed.path) %>" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            <% } %>
        
            <span>
                <% if(theme.ICP_license) {%>
                <a href="http://www.miitbeian.gov.cn/" target="_blank"><%- theme.ICP_license %></a><br>
                <% } %>
                Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a>
            </span>
        </p>
    </div>
</footer>

3、浏览器Console下出现node-waves插件等报错

由于我不需要node-waves插件，所以我删除了加载插件的代码，设置配置项cdn: false

  • /themes/indigo/layout/_partial/script.ejs
1
2
<!--删除首行插件引入代码-->
<!--<script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>-->
  • /themes/indigo/source/js/main.js
  • /themes/indigo/source/js/main.min.js
1
2
3
<!--修改报错为正常打印-->
<!--console.error('Waves loading failed.')-->
console.log('Waves loading failed.')

二、原功能迁移

1、图片功能

在原主题中，我分析了添加图片的几种方案，参见：如何在hexo博客中添加图片，想继续使用hexo-asset-image插件

但是由于hexo 3新版本的原因，hexo-asset-image插件出现了一些报错，查看Issues后决定本地修改插件代码

  1. io路径问题，修改MyBlog/node_modules/hexo-asset-image/index.js文件
1
2
// 第24行
var endPos = link.length - 1;
  1. 执行hexo的命令时，会有log输出，修改MyBlog/node_modules/hexo-asset-image/index.js文件，注释第60行代码

2、音频功能

以前的文档记录如何在hexo博客添加音频。新主题中，依然准备采用APlayer播放器和APlayer-Typecho插件

注意：由于indigo主题编译js路径的问题，所以dist文件夹放在themes/indigo/source路径下才行

本次同时更新APlayer-Typecho插件，为了能播放纯音乐，修改Meting.min.js中代码，添加一个歌词的字段，data-lrcType：是否打开歌词

1
g=g.replace(':lrcType',d.dataset.lrcType)
1
2
3
4
5
6
7
8
<link rel="stylesheet" href="/dist/APlayer.min.css">
<script src="/dist/APlayer.min.js"></script>

<div class="aplayer" data-id="496298744" data-server="netease" data-type="song" data-lrcType=false></div>

<div class="aplayer" data-id="004VBMk71TdUuR" data-server="tencent" data-type="song"></div>

<script src="/dist/Meting.min.js"></script>

3、视频功能

暂不修改，如何在hexo博客中添加视频

4、代码高亮

原文章地址：https://andergh.github.io/2019/04/01/代码高亮/

  1. 代码高亮
  • 在MyBlog/themes/indigo/layout/_partial/head.ejs文件中第56行添加引用
  • 对/highlight/styles/xcode.css修改，个性化部分样式
1
2
3
<link rel="stylesheet" href="/highlight/custom/xcode.css">
<script src="/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
  1. 代码行号

采用Github上第三方的插件highlightjs-line-numbers

  • 在MyBlog/themes/indigo/layout/_partial/head.ejs文件中第56行添加引用
1
2
3
4
5
<link rel="stylesheet" href="/highlight/custom/xcode.css">
<script src="/highlight/highlight.pack.js"></script>
<script src="/highlight/highlightjs-line-numbers/highlightjs-line-numbers.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.initLineNumbersOnLoad();</script>
  1. 修改行号样式
  • 由于highlightjs-line-numbers插件当代码只有一行时不会显示行号，所以需要修改源码
1
2
3
// change by guanhao at 20200227 修改判断逻辑，大于改成大于等于，单行代码也添加行号
// if (lines.length > firstLineIndex) {
if (lines.length >= firstLineIndex) {
  • 自定义其他css样式

找到MyBlog/themes/indigo/source/css/style.less文件，添加自定义的样式文件，并创建相应的样式文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* 个性化样式 */

pre {
    padding: 0px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

code {
    color: #4d4d4c !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

a code {
    color: #ff4081 !important;
}

.hljs-ln {
    margin-bottom: 0px !important;
    border: 1px solid #dedede !important;
}

.hljs-ln tr {
    height: 26px !important;
}

.hljs-ln-numbers {
    border: 0px !important;
    border-right: 1px solid #dedede !important;
    background-color: #eaeaea !important;
    height: 26px !important;
    width: 27px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.hljs-ln-code {
    border: 0px !important;
    background-color: #fbfbfb !important;
    height: 26px !important;
}

.hljs-ln-n {
    text-align: center !important;
}

三、上传部署

最新版本hexo部署包中缺少hexo-deployer-git插件，导致部署到git时出现报错：ERROR Deployer not found: git，需要安装hexo-deployer-git插件才行

1
$ npm install hexo-deployer-git --save