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

搭建技术

创建时间:2019-08-16 06:21

字数:3.3k 阅读:

评论:

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

0. 前述

1. 安装与使用

2. 配置功能

1. 可以直接使用的特性
2. 需要安装插件的功能

3 我做的修改

1. 备案信息补充与位置调整
2. 页面底部添加网站运行时间
3. 文章结束处添加感谢阅读的提示
4. 文章中添加对应的多语言版本的链接
5. 其他的一些小修改

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备案方案。但缺少公安备案，同时显示的位置我不是很满意，进行了一些改动。

打开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

打开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 %}

结束。刷新网页查看效果。

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

打开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

在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>

打开themes\next6\_layout\footer.swig，在您想展示的位置，比如备案代码之前，加入如下内容。

   {% if theme.footer.runtime.enable %}
     {% include 'web-runtime.swig' %}  
   {% endif %}

结束，刷新网页查看效果。

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

打开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-------

在themes\next6\_macro\下新建passage-end-tag.swig，写入如下内容，保存。

   <div>
      {% if not is_index %}
   		{{theme.end_info.start_info}}  {{theme.end_info.end_info}}
   	{% endif %}
   </div>

打开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>

结束，刷新网页查看效果

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

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

打开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

在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>

打开themes\next6\_macro\post.swig，在POST BODY之前，加入

   {% if theme.translation.enable and not is_index %}
     
          {% include '../_partials/post-tran.swig' with { post: post } %}
          

     
   {% endif %}

结束，刷新网页查看效果

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/

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以加QQ（2602138376）