Hexo-Next-主题优化(三)

0.463字数 653阅读 2846

1.博文置顶

  • 打开Hexo 站点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字段,设置数值,数值越大文章越靠前
---
layout: layout
title: 标签1
date: 2017-08-18 15:41:18
tags: 标签1
top: 100
---

2.统计功能,统计功能,显示文章字数统计,阅读时长,总字数

count.png
  • 在你站点的根目录下
$ npm i --save hexo-wordcount
  • 打开themes/next下的_config.yml,搜索关键字post_wordcount
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  #字数统计
  wordcount: true
  #预览时间
  min2read: true
  #总字数,显示在页面底部
  totalcount: false
  separated_meta: true

3.修改文章内文本连接样式

link.png
  • 打开 themes/next/source/css/_custom/下的custom.styl,添加代码
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

4.每篇文章末尾统一添加“本文结束”标记

end.png
  • 在路径/themes/next/layout/_macro中新建 passage-end-tag.swig 文件,并添加以下内容:
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">------ 本文结束------</div>
    {% endif %}
</div>
  • 打开themes/next/layout/_macro/下的post.swig文件,添加:
<div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
 </div>
  • 然后打开主题配置文件_config.yml,在末尾添加:
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

5.文章顶部显示更新时间

  • 打开主题配置文件_config.yml,搜索关键字updated_at设置为true
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: ture
  categories: true
  • 编辑文章,增加关键字updated
---
layout: layout
title: 关于
date: 2017-08-18 15:41:18
updated: 2017-09-05 20:18:54 #手动添加更新时间

6.修改访问URL路径

  • 默认情况下访问URL路径为:domain/2017/08/18/关于本站,修改为domain/About/关于本站
  • 编辑Hexo 站点下的_config.yml文件,修改其中的permalink字段
permalink: :category/:title/

7.给代码块添加复制功能

  1. 下载插件clipboard.js
  2. 打开themes/next/source/lib/,新建文件夹clipboard
  3. 把下载clipboard.js下的src文件夹下的文件拖动到clipboard文件夹下
  4. 打开themes/next/source/js/src/,新建文件custom.js,代码如下:
//此函数用于创建复制按钮
function createCopyBtns() {
    var $codeArea = $("figure table");
    //查看页面是否具有代码区域,没有代码块则不创建 复制按钮
    if ($codeArea.length > 0) {
        //复制成功后将要干的事情
        function changeToSuccess(item) {
             $imgOK = $("#copyBtn").find("#imgSuccess");
                if ($imgOK.css("display") == "none") {
                    $imgOK.css({
                        opacity: 0,
                        display: "block"
                    });
                    $imgOK.animate({
                        opacity: 1
                    }, 1000);
                    setTimeout(function() {
                        $imgOK.animate({
                            opacity: 0
                        }, 2000);
                    }, 2000);
                    setTimeout(function() {
                        $imgOK.css("display", "none");
                    }, 4000);
                };
        };
        //创建 全局复制按钮,仅有一组。包含:复制按钮,复制成功响应按钮
        //值得注意的是:1.按钮默认隐藏,2.位置使用绝对位置 position: absolute; (position: fixed 也可以,需要修改代码)
        $(".post-body").before('<div id="copyBtn" style="opacity: 0; position: absolute;top:0px;display: none;line-height: 1; font-size:1.5em"><span id="imgCopy" ><i class="fa fa-paste fa-fw"></i></span><span id="imgSuccess" style="display: none;"><i class="fa fa-check-circle fa-fw" aria-hidden="true"></i></span>');
        //创建 复制 插件,绑定单机时间到 指定元素,支持JQuery
        var clipboard = new Clipboard('#copyBtn', {
            target: function() {
                //返回需要复制的元素内容
                return document.querySelector("[copyFlag]");
            },
            isSupported: function() {
                //支持复制内容
                return document.querySelector("[copyFlag]");
            }
        });
        //复制成功事件绑定
        clipboard.on('success',
            function(e) {
                //清除内容被选择状态
                e.clearSelection();
                changeToSuccess(e);
            });
        //复制失败绑定事件
        clipboard.on('error',
            function(e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });
        //鼠标 在复制按钮上滑动和离开后渐变显示/隐藏效果
        $("#copyBtn").hover(
            function() {
                $(this).stop();
                $(this).css("opacity", 1);
            },
            function() {
                $(this).animate({
                    opacity: 0
                }, 2000);
            }
        );
    }
}
//感应鼠标是否在代码区
$("figure").hover(
    function() {
        //-------鼠标活动在代码块内
        //移除之前含有复制标志代码块的 copyFlag
        $("[copyFlag]").removeAttr("copyFlag");
        //在新的(当前鼠标所在代码区)代码块插入标志:copyFlag
        $(this).find(".code").attr("copyFlag", 1);
        //获取复制按钮
        $copyBtn = $("#copyBtn");
        if ($copyBtn.lenght != 0) {
            //获取到按钮的前提下进行一下操作
            //停止按钮动画效果
            //设置为 显示状态
            //修改 复制按钮 位置到 当前代码块开始部位
            //设置代码块 左侧位置
            $copyBtn.stop();
            $copyBtn.css("opacity", 0.8);
            $copyBtn.css("display", "block");
            $copyBtn.css("top", parseInt($copyBtn.css("top")) + $(this).offset().top - $copyBtn.offset().top + 3);
            $copyBtn.css("left", -$copyBtn.width() - 3);
        }
    },
    function() {
        //-------鼠标离开代码块
        //设置复制按钮可见度 2秒内到 0
        $("#copyBtn").animate({
            opacity: 0
        }, 2000);
    }
);
//页面载入完成后,创建复制按钮
$(document).ready(function() {
  createCopyBtns();
});
  1. 打开themes/next/layout/_custom/,新建文件custom.swig,代码如下:
<script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script>
<script type="text/javascript" src="/js/src/custom.js"></script>
  1. 修改文件themes/next/layout/_layout.swig,在标签</body>上面插入代码:
{% include '_custom/custom.swig' %}

8.新建404界面

  • 在站点根目录下,输入 hexo new page 404,默认在Hexo 站点/source/404/index.md
  • 打开新建的404界面,在顶部插入一行,写上permalink: /404,这表示指定该页固定链接为 http://"主页"/404.html
---
title: #404 Not Found:该页无法显示
date: 2017-09-06 15:37:18
comments: false
permalink: /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>

9.静态资源压缩

  • 在站点目录下
$ npm install gulp -g
  • 安装gulp插件
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

10.本地站点推送到GitHub上

  • 在站点更目录下
    $ npm install hexo-deployer-git --save
  • Hexo 站点_config.yml中配置deploy
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: <repository url> #your github.io.git
  branch: master
  • $ hexo clean
  • $ hexo d --g
hexo g  # 生成本地 public 静态文件
hexo d  # 部署到 Github 上
# 也可以缩写成:hexo g --d

Hexo-Next-主题优化(一)
Hexo-Next-主题优化(二)
Hexo-Next-主题优化(四)

推荐阅读更多精彩内容