0%

Hexo NexT 主题7.x版本的使用配置与美化

  • 英语:

0. 前述

一年多的时间了,Hexo NexT主题升级到了7.7,在6.x版本我进行了相当多的操作与修改,做了一个很完善的自用版本。但在阅读了7.x的版本的官方文档后,还是很心动。相比于6.x版本,NexT 7主要由如下更新:

  • 将众多特性合并到主题当中,例如:顶部展示加载进度条,头像滚动,工信部、公安部备案信息等。尤其是备案信息,当初为了满意的样式改了很久
  • 支持了更多特色,但也移除了一些特性
  • 支持文章内tag标签,图片组,相关文章等新样式

相比于当初魔改Next 6 主题,Next 7 主题显然更加好用,且样式也较为好看。寒假过年适逢疫情不便出门,在家就将博客的主题升级了下。具体的改动介绍如下,做一个备忘,也希望能够给大家帮助。

1. 安装与使用

安装好Hexo后,将NexT主题文件克隆或者拷贝到hexo/theme目录下即可。因为我在NexT 6中做了很多修改,这里用到是全新安装

1
2
cd hexo
git clone https://github.com/theme-next/hexo-theme-next themes/next7

2. 配置功能

  1. 可以直接使用的特性
    Next 7 中有许多特性,具体的用法与特点官方文档写的很详细,请自行对照查看。
  2. 自动节选
    自Next 7.6 中已经移除了auto_excerpt这一特性,官方推荐使用hexo-excerpt插件完成。
    插件的github仓库,以及安装方法:
    1
    $ npm install hexo-excerpt --save
  3. 媒体播放器
    Hexo 是静态博客,不支持媒体文件的播放。之前一直是使用网易云音乐哔哩哔哩提供的ifream作为媒体播放器,但网易云音乐支持的歌越来越少了。而且用ifream引用也会遇到因为加载速度不一致报错的问题。因此在去年的新年贺词中,就首先使用了Aplayer播放器,不过mmedia插件也不错,综合了Aplayer和Dplayer(一款插入B站视频的脚本),后期会进行迁移。
    安装方法:
    1
    2
    3
    4
    5
    6
    7
    8
    // 安装aplayer,https://github.com/MoePlayer/APlayer
    npm install --save hexo-tag-aplayer
    // 安装mmedia, https://github.com/MonoLogueChi/hexo-tag-mmedia
    // 如果安装了aplayer或者dplayer,需要先卸载
    npm uninstall hexo-tag-dplayer
    npm uninstall hexo-tag-aplayer
    // 安装
    npm install hexo-tag-mmedia --save

    3. 我做的修改

1. 文章结束处添加感谢阅读的提示

  1. 打开themes/next/_config.yml,添加

    1
    2
    3
    4
    5
    6
     # At the end of the article, show thanks for reading
    end_info:
    enable: true
    start_info: -------The end of this article
    icon: paw
    end_info: Thank you for your reading-------
  2. themes/next7/layout/_partials/post下新建passage-end-tag.swig,写入如下内容,保存。

    1
    2
    3
    4
    5
    <div>
    {% if not is_index %}
    <div style="text-align:center;color: #ccc;font-size:14px;">{{theme.end_info.start_info}}&nbsp;<i class="fa fa-{{ theme.end_info.icon }}"></i>&nbsp;{{theme.end_info.end_info}}</div>
    {% endif %}
    </div>
  3. 打开themes\next6\_macro\post.swig,在您如下代码(相关文章)之前,

    1
    2
    3
    {% if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
    {% include 'post-related.swig' with { post: post } %}
    {% endif %}

    加入

    1
    2
    3
    4
    5
    <div>
    {% if not is_index and theme.end_info.enable %}
    {{ partial('_partials/post/passage-end-tag.swig') }}
    {% endif %}
    </div>

    (这里的语法和Next 6 不同)

  4. 结束,刷新网页查看效果

2. 文章中添加对应的多语言版本的链接

这个功能需要手动设置对应文章的abbrlink一致。建议在本地先编译一个语言版本的文件,然后手动修改另一个版本的文章的链接。

  1. 打开themes/next/_config.yml,添加
    1
    2
    3
    4
    5
    6
    7
    # Go to another language Page
    translation:
    enable: true
    language: English # language name
    icon: globe
    info: 英文版本
    url: https://en.xian6ge.cn # Destination URL
  2. themes\next6\_partials\下新建post-tran.swig,写入如下内容,保存。
    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
    <div>
    <ul class="post-copyright">
    <li class="post-copyright-link">
    <strong><i class="fa fa-{{ theme.translation.icon }}"></i> {{ theme.translation.language + __('symbol.colon') }}</strong>
    <span id="url" style="display:none">{{theme.translation.url}}</span>
    <span id="path" style="display:none">{{post.permalink}}</span>
    <span id="info" style="display:none">{{theme.translation.info}}</span>
    <span id="goto"></span>
    </li>
    </ul>

    //我不知道怎么整理链接,所以只能用JavaScript重写。
    <script language=javascript>
    var url = document.getElementById("url").innerHTML;
    var path = document.getElementById("path").innerHTML;
    var info = document.getElementById("info").innerHTML;
    path=GetUrlRelativePath(path);
    if(info.length==0){
    infos= url+path;
    }
    else{
    infos=info;
    }
    var str = "<a href='"+url+path+"'>"+infos+"</a>"
    console.log(str);
    document.getElementById("goto").innerHTML=str;

      function GetUrlRelativePath()
      {
        var url = document.location.toString();
        var arrUrl = url.split("//");

        var start = arrUrl[1].indexOf("/");
        var relUrl = arrUrl[1].substring(start);//stop省略,截取从start开始到结尾的所有字符

        if(relUrl.indexOf("?") != -1){
          relUrl = relUrl.split("?")[0];
        }
        return relUrl;
      }
    </script>
  3. 打开themes\next6\_macro\post.swig,在POST BODY之前,加入
    1
    2
    3
    4
    5
    6
    {% if theme.translation.enable and not is_index %}
    <div>
    {{ partial('_partials/post/post-tran.swig') }}
    <br/>
    </div>
    {% endif %}
  4. 结束,重新编译运行,查看效果。

3. 不蒜子统计提示语

NexT走简洁风格,许多地方只展示图标而略去了文字说明。但因为我在网站底部添加了太多信息,最低端的访客数提示未免显得头重脚轻。

打开theme\next6\layout\_third-party\analytics\busuanzi-counter.swig,修改如下

1
2
3
4
5
6
7
8
9
10
11
12
13
{% if theme.busuanzi_count.total_visitors %}
<span class="site-uv" title="{{ __('footer.total_visitors') }}">
<i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
<span class="busuanzi-value" id="busuanzi_value_site_uv"></span> people visited our site. |
</span>
{% endif %}

{% if theme.busuanzi_count.total_views %}
<span class="site-pv" title="{{ __('footer.total_views') }}">
&nbsp;<i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i>
Total visits <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> times.
</span>
{% endif %}

其他小修改

1. 解决左边工具栏上无法跳转到外部链接的问题

由于NexT6做了设置,左边工具栏上的所有链接将会自动在前面添加上当前域名。对于,“首页”,“关于”这样的链接没有问题。但如果要添加上外链,例如英文页面:https:\\en.xian6ge.cn,会被自动编译为https:\\xian6ge.cn\https\en.xian6ge.cn,造成跳转出错。为此,我们可以采用一个折中的办法。

hexo\source下建立一个en.html文件,在里面通过JavaScript代码跳转。但这样会遇到一个问题,Hexo会编译所有文件,造成其中的Js代码失效。因此,在前面添加layout: false设置,告诉编译器不要编译该HTML文件。具体代码如下。

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
49
50
layout: false
title: "XianliuGe - Eternal charm, Endless sound."
date: 2018-11-13 09:12:12
---
<!--上述title采用英文网站的title,以减少跳转时的突兀感。-->
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>XianliuGe - Eternal charm, Endless sound.</title>
<script type="text/javascript">
window.location.href = "https://en.xian6ge.cn";
</script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->

<!-- Favicon and touch icons -->
<!-- <link rel="shortcut icon" href="assets/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> -->

</head>

<body>

<!-- Loader -->
<h1>前往『贤柳阁』英文版</h1>
<h2>Go to XianliuGe for English</h2>

</body>

</html>

2. 修改背景,颜色样式等

  1. 打开themes/next/_config.yml,找到custom_file_path,打开style处的注释
  2. 打开themes/hexo-theme-next/source/css/_data/style.styl,添加如下代码。(没有_data目录自行新建)
    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
    //添加背景图片
    body { background:url(/images/backGround.jpg)}
    //改掉题头颜色
    .site-meta {
    background: #F0D784; //修改为自己喜欢的颜色
    }
    //主标题颜色
    .brand{
    color: #2f9833
    }
    //副标题颜色
    .site-subtitle{
    color: #47b54a
    }
    //页脚统计文字颜色
    .footer{
    color: #F0D784
    }
    //修改页脚备案链接颜色
    .footer a{
    color: #F0D784
    }
    //修改页脚统计人数的颜色
    .footer .with-love{
    color: #F0D784
    }
  3. 如果出现编译出错,关闭1.中的style,然后打开themes/next7/source/css/main.styl,末尾添加
    1
    @import "_data/styles.styl";
  4. 结束,重新编译运行,查看效果。

3. 增加网站运行时间统计

这次没有在页脚处增加统计,避免过多的js代码拖累网站速度,将这段统计的代码放到关于中。但这个页面是由markdown文件编译的,无法执行js代码。又不像单独重写这一页面,于是使用ifream的技术方法。

  1. about/文件夹下新建timer.html,写入如下内容
    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
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    layout: false
    title: "网站运行计时器"
    comments: false
    permalink:
    ---

    <html lang="en">
    <style type="text/css">
    *{margin:0;padding:0}
    .post-body{overflow-wrap:break-word;line-height:2;text-align:justify;font-size:1.125em}
    @media(min-width:992px){
    .post-body{text-align:justify}}
    @media(min-width:1200px){
    .post-body{font-size:1.125em}}
    div{display:block}
    .note{margin-bottom:20px;position:relative;border-radius:3px;padding:15px;border-width:1px;border-style:solid;border-image:initial}
    .success{color:#3c763d;background:#dff0d8;border-color:#d0e6be}
    .primary{background:#f3daff;border-color:#e1c2ff;color:#6f42c1}
    p{letter-spacing:normal;margin:0 0 20px}
    p:last-child{margin-bottom:0}
    p:first-child{margin-top:0}
    </style>
    <script language=javascript>
    function siteTime(){
    window.setTimeout("siteTime()", 1000);
    var seconds = 1000;
    var minutes = seconds * 60;
    var hours = minutes * 60;
    var days = hours * 24;
    var years = days * 365;
    var today = new Date();
    var todayYear = today.getFullYear();
    var todayMonth = today.getMonth()+1;
    var todayDate = today.getDate();
    var todayHour = today.getHours();
    var todayMinute = today.getMinutes();
    var todaySecond = today.getSeconds();
    /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
    year - 作为date对象的年份,为4位年份值
    month - 0-11之间的整数,做为date对象的月份
    day - 1-31之间的整数,做为date对象的天数
    hours - 0(午夜24点)-23之间的整数,做为date对象的小时数
    minutes - 0-59之间的整数,做为date对象的分钟数
    seconds - 0-59之间的整数,做为date对象的秒数
    microseconds - 0-999之间的整数,做为date对象的毫秒数 */
    var year = 2018//document.getElementById("year").innerHTML;
    var month = 02//document.getElementById("month").innerHTML;
    var day = 13//document.getElementById("day").innerHTML;
    var hour = 00//document.getElementById("hour").innerHTML;
    var minute = 00//document.getElementById("minute").innerHTML;
    var second = 00//document.getElementById("second").innerHTML;//北京时间2018-2-13 00:00:00
    var t1 = Date.UTC(year,month,day,hour,minute,second);
    var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
    var diff = t2-t1;
    var diffYears = Math.floor(diff/years);
    var diffDays = Math.floor((diff/days)-diffYears*365);
    var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
    var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
    var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
    if(diffYears==0){
    document.getElementById("sitetime").innerHTML=/*+diffYears+" year "*/+diffDays+" 日 "+diffHours+" 小时 "+diffMinutes+" 分 "+diffSeconds+" 秒";
    } else{
    document.getElementById("sitetime").innerHTML=diffYears+" 年 "+diffDays+" 日 "+diffHours+" 小时 "+diffMinutes+" 分 "+diffSeconds+" 秒";
    }
    }
    //siteTime(document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,0);
    siteTime();
    </script>
    </head>

    <body class="post-body">
    <div class="note primary">
    <p>『贤柳阁』已经运行了 <span id="sitetime">已经运行了一年多了</span></p>
    </div>
    </body>

    </html>
  2. 打开about\index.md,在需要展示的地方增加
    1
    2
    3
    <span style="width:100%; height:260;border:none;text-align:center"> 
    <iframe allowtransparency="yes" frameborder="0" width="100%" height="88" src="/about/timer.html"/>
    </span>
    其中,iframesrc标签中指向的是需要展示的Html文件,注意文件中要添加layout: false,避文件被编译。
-------全文结束  感谢您的阅读-------
  • 本文作者: LuoV
  • 本文链接: https://xian6ge.cn/posts/6d7ed114/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!