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

0. 前述

Hexo NexT 6.x 推出已经有一段时间了,相比于5.x版本的众多功能,6.x版本有如下提升:

  • 优化配置项
  • 将众多特性合并到主题当中,例如:顶部展示加载进度条,头像滚动,工信部备案信息等。
  • 代码快支持复制功能
  • 支持 Valine 评论系统
  • 部分功能优化,一些功能之前是使用修改源代码方式,现在可以使用 “包/插件引入 + 选项配置” 的方式激活该功能。

被开源组织接手的NexT更加好看好用,但依然有一些地方不尽如人意,需要小小修改以更好的满足个性化的需要。本文将以我自己的网站为例,分享我对NexT的配置和修改的一些心得。

我自己使用的,修改后的NexT版本已经开源到Github,欢迎star,follow。同时由于水平有限,做的还不是很完美。需要大家的帮助。从Github来的朋友可以直接查看我做了哪些修改,欢迎提交issue和pull。

1. 安装与使用

安装好Hexo后,将NexT主题文件克隆或者拷贝到hexo/theme目录下即可。如果之前已经存在5.0版本的NexT文件夹,需要建立一个新文件夹。

复制

cd hexogit clone https://github.com/theme-next/hexo-theme-next themes/next6

2. 配置功能

1. 可以直接使用的特性

在6.0版本的NexT中,许多特性被合并到主分支,比如:

特性 配置属性 说明
缓存 cache 允许缓存内容生成。 在NexT v6.0.0中引入。
展示Hexo与next版本 copyright.powered,copyright.theme 可以选择是否开启,选择是否展示版本
备案 beian 展示备案信息。这个样式我不太满意,下面会提到修改
版权信息 creative_commons 可以自己选择权利协议,展示的地方。
SEO优化 seo Canonical,在您的hexo中设置规范链接标记,您可以将它用于您的博客搜索引擎优化。
首页标题展示副标题 index_with_subtitle 打开后,首页标题展示样式如标题 - 副标题
外链加密 exturl 自动将外链使用 BASE64 encrypt 与 decrypt 加密
代码块提示复制按钮 codeblock.copy_button 打开后,代码块右上角出现复制按钮
数学公式 math 数学公式
百度推送 baidu_push 更好的SEO

2. 需要安装插件的功能

另外,新版本的NexT还对部分功能的使用做了优化。我们除了要在主题的_config.yml中启用功能,还要在NexT目录下安装相应的插件。
我启用的功能有:

功能 插件 配置项 可以进行的配置
字数、阅读时间统计 hexo-symbols-count-time theme.symbols_count_time 单词长度,阅读速度
图片浏览 theme-next-fancybox3 theme.fancybox
顶部进度条 theme-next-pace theme.pace 进度条的样式
Algolia搜索 algolia_search algolia_search 需要在hexo\_config.yml中配置api_key等信息
相关文章 hexo-related_posts related_posts 展示关键词相同的文章
懒加载 theme-next-lazyload lazyload Jquery-懒加载

其他可以配置,但我没有启用的功能

功能 插件 配置项 可以进行的配置
Canvas背景 theme-next-canvas_nest canvas_nest 颜色,深度等样式
JavaScript 3D library theme-next-three three_waves

安装插件后,请务必执行hexo clean命令,重新编译。

3 我做的修改

1. 备案信息补充与位置调整

每一个中国的合法网站都需要进行ICP备案,现在还增加了公安网安备案。虽然NexT 6.x已经提供了ICP备案方案。但缺少公安备案,同时显示的位置我不是很满意,进行了一些改动。

  1. 打开themes/next/_config.yml添加
   # Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
   # http://www.miitbeian.gov.cn
   beian:
    enable: true
    icp: 赣ICP备 - 18012283
   # 以下是我增加的内容。
   # 公安网备案 for Chinese users. local mean 京 or 赣 
   gongan:
    enable: true
    local: 赣
    num: 36010202000154
  1. 打开themes\next6\layout\footer.swig,首先前面删除
   <div class="copyright">{% set current = date(Date.now(), "YYYY") %}

之间的备案代码,然后在文件底部增加如下代码

    {% if theme.footer.beian.enable %}{#
   #}  {{ next_url('http://www.miitbeian.gov.cn', theme.footer.beian.icp ) }}
   {% endif %}
   {% if theme.footer.gongan.enable %}{#
   #} {{' | '}}# 这张国徽图片可以自行更换
   {{ next_url('http://www.beian.gov.cn/portal/registerSystemInfo?recordcode='+theme.footer.gongan.num, theme.footer.gongan.local+'公网安备'+theme.footer.gongan.num+'号' ) }}{#
   #}{% endif %}
  1. 结束。刷新网页查看效果。

2. 页面底部添加网站运行时间

  1. 打开themes/next/_config.yml,添加
    # -------------------------------------------------------------
    # web run time
    # 这是网站开始运行的时间,展示网站运行了多长时间。
    # 格式, 2018-02-13 15:00:00. 如果个数只有一位,需要补零。
    runtime:
   enable: true
   year: 2018
   month: 02
   day: 13
   hour: 15
   minute: 00
   second: 00
  1. themes\next6\layout\下新建web-runtime.swig,写入如下内容,保存。
    <div>
      <span id="sitetime"></span>
      // 这里我没有好办法吧swig的值传到JavaScript代码中。如果您会,请帮我改进。
      <span id="year" style="display:none">{{theme.footer.runtime.year}}</span> 
      <span id="month" style="display:none">{{theme.footer.runtime.month}}</span>   
      <span id="day" style="display:none">{{theme.footer.runtime.day}}</span>   
      <span id="hour" style="display:none">{{theme.footer.runtime.hour}}</span>   
      <span id="minute" style="display:none">{{theme.footer.runtime.minute}}</span>   
      <span id="second" style="display:none">{{theme.footer.runtime.second}}</span>   
       <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 = document.getElementById("year").innerHTML;
           var month = document.getElementById("month").innerHTML;
           var day = document.getElementById("day").innerHTML;
           var hour = document.getElementById("hour").innerHTML;
           var minute = document.getElementById("minute").innerHTML;
           var second = 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=" Website has run  "/*+diffYears+" year "*/+diffDays+" days "+diffHours+" h "+diffMinutes+" min "+diffSeconds+" s";
           } else{
           document.getElementById("sitetime").innerHTML=" Website has run  "+diffYears+" year "+diffDays+" days "+diffHours+" h "+diffMinutes+" min "+diffSeconds+" s";
           }
       }
       //siteTime(document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,0);
       siteTime();
       </script>
   </div>
  1. 打开themes\next6\_layout\footer.swig,在您想展示的位置,比如备案代码之前,加入如下内容。
   {% if theme.footer.runtime.enable %}
     {% include 'web-runtime.swig' %}  
   {% endif %}
  1. 结束,刷新网页查看效果。

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

  1. 打开themes/next/_config.yml,添加
    # 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-------
  1. themes\next6\_macro\下新建passage-end-tag.swig,写入如下内容,保存。
   <div>
      {% if not is_index %}
   		
{{theme.end_info.start_info}}  {{theme.end_info.end_info}}
{% endif %} </div>
  1. 打开themes\next6\_macro\post.swig,在如下代码(相关文章)之前,

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

    加入

    <div>
         {% if not is_index and theme.end_info.enable %}
              {% include 'passage-end-tag.swig' %}
            {% endif %}
       </div>
  2. 结束,刷新网页查看效果

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

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

  1. 打开themes/next/_config.yml,添加
   # Go to another language Page
      translation:
         enable: true
         language: English  # language name
         icon: globe
         info: 英文版本 
         url: https://en.xian6ge.cn # Destination URL
  1. themes\next6\_partials\下新建post-tran.swig,写入如下内容,保存。
   <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>
  1. 打开themes\next6\_macro\post.swig,在POST BODY之前,加入
   {% if theme.translation.enable and not is_index %}
     
{% include '../_partials/post-tran.swig' with { post: post } %}
{% endif %}
  1. 结束,刷新网页查看效果

5. 其他的一些小修改

1. 不蒜子统计提示语

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

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

{% if theme.busuanzi_count.total_visitors %}
    
      
      网站总访客数  人次. |
    
  {% endif %}

  {% if theme.busuanzi_count.total_views %}
    
       
      总访问量  次.
    
{% endif %}

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

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

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

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>

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

打开theme\hexo-theme-next\source\css\_custom\custom.styl,添加如下代码。

//添加背景图片
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
}

更多修改样式的方法请查看为你的博客换上新年皮肤,NexT 主题个性化样式详解

声明:本文转自作者: LuoV https://xian6ge.cn/posts/2da0ce2e/


一个好奇的人