Hexo博客Next6.0版本主题配置（站内搜索、新建404界面、静态资源压缩、底部信息隐藏、各版块透明度修改、字数统计、推荐阅读、博文置顶、阅读进度、在线评论、运行时间）

新建404界面

在站点根目录下，输入hexo new page 404，在默认Hexo站点下/source/404/index.md
打开新建的404界面，编辑属于自己的404界面，可以显示腾讯公益404界面，代码如下：

<!DOCTYPE HTML>

<html>

<head>

  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <meta name="robots" content="all" />

  <meta name="robots" content="index,follow"/>

  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">

</head>

<body>

  <script type="text/plain" src="http://www.qq.com/404/search_children.js"

          charset="utf-8" homePageUrl="/"

          homePageName="回到我的主页">

  </script>

  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>

  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>

</body>

</html>

静态资源压缩

在站点目录下安装插件：

$ npm install gulp -g

npm install gulp-minify-css --save

npm install gulp-uglify --save

npm install gulp-htmlmin --save

npm install gulp-htmlclean --save

npm install gulp-imagemin --save

在Hexo站点下添加gulpfile.js文件，文件内容如下：

var gulp = require('gulp');

var minifycss = require('gulp-minify-css');

var uglify = require('gulp-uglify');

var htmlmin = require('gulp-htmlmin');

var htmlclean = require('gulp-htmlclean');

var imagemin = require('gulp-imagemin');

// 压缩css文件

gulp.task('minify-css', function() {

  return gulp.src('./public/**/*.css')

  .pipe(minifycss())

  .pipe(gulp.dest('./public'));

});

// 压缩html文件

gulp.task('minify-html', function() {

  return gulp.src('./public/**/*.html')

  .pipe(htmlclean())

  .pipe(htmlmin({

    removeComments: true,

    minifyJS: true,

    minifyCSS: true,

    minifyURLs: true,

  }))

  .pipe(gulp.dest('./public'))

});

// 压缩js文件

gulp.task('minify-js', function() {

    return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])

        .pipe(uglify())

        .pipe(gulp.dest('./public'));

});

// 压缩 public/demo 目录内图片

gulp.task('minify-images', function() {

    gulp.src('./public/demo/**/*.*')

        .pipe(imagemin({

           optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）

           progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片

           interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染

           multipass: false, //类型：Boolean 默认：false 多次优化svg直到完全优化

        }))

        .pipe(gulp.dest('./public/uploads'));

});

// 默认任务

gulp.task('default', [

  'minify-html','minify-css','minify-js','minify-images'

]);

需要只在每次执行generate命令后执行gulp就可以实现对静态资源的压缩，完成压缩后执行deploy命令同步到服务器：

hexo g

gulp

hexo d

隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用隐藏之间的代码即可，或者直接删除。位置如图：

各版块透明度修改

内容板块透明

根博客目录themes\next\source\css\_schemes\Pisces\_layout.styl文件.content-wrap标签下background: white修改为：

background: rgba(255,255,255,0.7); //0.7是透明度

菜单栏背景

根博客目录themes\next\source\css\_schemes\Pisces\_layout.styl文件.header-inner标签下background: white修改为：

background: rgba(255,255,255,0.7); //0.7是透明度

站点概况背景

根博客目录themes\next\source\css\_schemes\Pisces\_sidebar.styl文件.sidebar-inner标签下background: white修改为：

background: rgba(255,255,255,0.7); //0.7是透明度

修改然后根博客目录themes\next\source\css\_schemes\Pisces\_layout.styl文件.sidebar标签下background: $body-bg-color修改为：

background: rgba(255,255,255,0.7); //0.7是透明度

网站底部字数统计

具体方法实现

切换到根目录下，然后运行如下代码

npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

<div class="theme-info">

  <div class="powered-by"></div>

  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>

</div>

添加侧栏推荐阅读

编辑主题配置文件，如下配置即可：

# Blog rolls

links_icon: link

links_title: 推荐阅读

#links_layout: block

links_layout: inline

links:

  Swift 4: https://developer.apple.com/swift/

  Objective-C: https://developer.apple.com/documentation/objectivec

博文置顶

修改hexo-generator-index插件，把node_modules/hexo-generator-index/lib/generator.js中代码替换为：

'use strict';

var pagination = require('hexo-pagination');

module.exports = function(locals){

  var config = this.config;

  var posts = locals.posts;

    posts.data = posts.data.sort(function(a, b) {

        if(a.top && b.top) { // 两篇文章top都有定义

            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排

            else return b.top - a.top; // 否则按照top值降序排

        }

        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）

            return -1;

        }

        else if(!a.top && b.top) {

            return 1;

        }

        else return b.date - a.date; // 都没定义按照文章日期降序排

    });

  var paginationDir = config.pagination_dir || 'page';

  return pagination('', posts, {

    perPage: config.index_generator.per_page,

    layout: ['index', 'archive'],

    format: paginationDir + '/%d/',

    data: {

      __index: true

    }

  });

};

文章添加Top值，值越大，越靠前：

---

title: Hexo-NexT主题配置

date: 2018-01-20 20:41:08

categories: Hexo

tags:

- Hexo

- NexT

top: 100

---

网页底部信息隐藏

网页底默认最新一次使用，需要取消since注释，设定年份

footer:

  # Specify the date when the site was setup.

  # If not defined, current year will be used.

  since: 2017

  # Icon between year and copyright info.

  icon:

    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/

    # `heart` is recommended with animation in red (#ff0000).

    name: user #设置图标，想修改图标从https://fontawesome.com/v4.7.0/icons获取

    # If you want to animate the icon, set it to true.

    animated: false

    # Change the color of icon, using Hex Code.

    color: "#808080"

  # If not defined, `author` from Hexo main config will be used.

  copyright:  by AomanHao  #版权

显示文章阅读进度百分比

设置方法：
打开themes/next/_config.yml主题配置文件,找到# Scroll percent label in b2t button将scrollpercent:的值,改成true

# Scroll percent label in b2t button

  scrollpercent: true

浏览页面的时候显示当前浏览进度

如果想把top按钮放在侧边栏,打开themes/next下的_config.yml,搜索关键字b2t,把false改为true

# Back to top in sidebar

 b2t: true

 # Scroll percent label in b2t button

 scrollpercent: true

加入valine在线评论

设置效果：

设置方法：
首先要先去LeanCloud注册一个帐号.然后再创建一个应用.

拿到appid和appkey之后，打开themes/next/_config.yml主题配置文件，查找valine，填入appid和 appkey
我的配置:

添加网站已运行时间

在themes/layout/_parrials/footer.swing后添加

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>

<script>

    var now = new Date();

    function createtime() {

        var grt= new Date("11/27/2017 12:00:00");//在此处修改你的建站时间

        now.setTime(now.getTime()+250);

        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);

        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);

        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);

        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}

        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);

        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}

        document.getElementById("timeDate").innerHTML = " Runing "+dnum+" D ";

        document.getElementById("times").innerHTML = hnum + " H " + mnum + " M " + snum + " S";

    }

setInterval("createtime()",250);

</script>

添加头像

打开themes/next下的_config.yml文件，搜索 Avatar关键字，修改url的参数

avatar:

  # in theme directory(source/images): /images/avatar.gif

  # in site  directory(source/uploads): /uploads/avatar.gif

  # You can also use other linking images.

  url: /images/avatar.gif

  # If true, the avatar would be dispalyed in circle.

  rounded: true

  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.

  opacity: 1

  # If true, the avatar would be rotated with the cursor.

  rotated: false

url链接默认是themes/next/source/images下的avatar.gif文件,有两种方法修改连接

1、本地连接，不建议用比较大的图片（大于1M文件），加载图片需要时间

url: /images/avatar.gif

或者

url: /images/xx.jpg等类型图片

2、图床外链，建议使用

url: http://example.com/avatar.png

添加站内搜索

设置效果：

设置方法：
安装hexo-generator-searchdb插件

npm install hexo-generator-searchdb --save

编辑_config.yml站点配置文件，新增以下内容到任意位置：

search:

  path: search.xml

  field: post

  format: html

  limit: 10000

编辑themes/next/_config.yml主题配置文件，启用本地搜索功能,将local_search:下面的enable:的值，改成true

# Local search

local_search:

  enable: true

底部跳动图标实现

注意点：需要到next\layout_partials下的footer.swig文件中，在你所需要调动的图标所对应的span中增加对应的ID
去到主体的css文件（next\source\css_variables\custom.styl，增加以下代码即可

//底部爱心小图标跳动

keyframes heartAnimate {

    0%,100%{transform:scale(1);}

    10%,30%{transform:scale(0.9);}

    20%,40%,60%,80%{transform:scale(1.1);}

    50%,70%{transform:scale(1.1);}

}

//图标所对应的span中的ID

#heart {

    animation: heartAnimate 1.33s ease-in-out infinite;

}

.with-love {

    color: rgb(255, 113, 113);

}

我的个人博客文章地址，欢迎访问
 我的CSDN文章地址，欢迎访问
 我的简书文章地址，欢迎访问
 我的GitHub主页，欢迎访问