hexo博客优化

最新推荐文章于 2021-12-09 19:34:54 发布

howyoung525

最新推荐文章于 2021-12-09 19:34:54 发布

阅读量570

点赞数

分类专栏： hexo 文章标签： hexo github

原文链接：https://fenghen0918.github.io/2020/06/19/hexo/matery-zhu-ti-valine-ping-lun-xi-tong/

版权

hexo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

hexo博客优化

本文参考Hexo+github搭建matery博客二（主题配置篇）

更改主题的默认配置

增加红心

打开themes\matery\layout\_partial/header.ejs文件，增加：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

在需要红心的地方添加以下代码：

<i id="heartbeat" class="fa fas fa-heartbeat"></i>

修改页脚

打开themes\matery\layout\_partial/footer.ejs文件，修改成自己想要的样式：

Copyright&nbsp;&copy;
<% if (theme.time.year !== new Date().getFullYear()) { %>
<span id="year"><%- theme.time.year %>-<%- new Date().getFullYear() %></span>
<% } else { %>
<span id="year"><%- theme.time.year %></span>
<% } %>
<span id="year"><%- theme.time.year %></span>
<i id="heartbeat" class="fa fas fa-heartbeat"></i>&nbsp;
<a href="<%- url_for('/about') %>" target="_blank"><%- config.title %></a>
<br>欢迎访问我的博客！
<br>

页脚效果图

修改打赏二维码

在主题文件的source/medias/reward文件中，替换成自己的支付宝和微信二维码即可。

修改社交链接

打开主题的_config.yml文件，找到socialLink，按自己的意愿修改代码：

# 首页 banner 中的第二行个人信息配置，留空即不启用
socialLink:
  github:  https://github.com/sehowyoung
  email: howyoung525@foxmail.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  qq: 846614051
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  rss: false # true、false

鼠标点击增加特效

增加文字特效

在themes/matery/layout/layout.ejs中，在最后增加代码如下：

<script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function ($) {
        $("body").click(function (e) {
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信",
                              "友善");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 5,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#FF0000"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
                       3000,
                       function () {
                $i.remove();
            });
        });
        setTimeout('delay()', 2000);
    });

    function delay() {
        $(".buryit").removeAttr("onclick");
    }
</script>

增加爱心特效

在主题的_config.yml文件中，将clicklove.enable设为true

clicklove:
  enable: true

特效示例

动态背景科技线条

在themes/matery/layout/layout.ejs文件中添加如下代码：

<script type="text/javascript" color="122 103 238" opacity='0.7' zIndex="-2" count="200"
src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>

科技线特效

页面获取标题

让每个页面有不同的标题

修改themes\matery\layout\_partial中的bg-cover-content.ejs文件，将第四行的div标签换为：

<div class="title center-align">
     <% if (is_home() && config.subtitle && config.subtitle.length > 0) { %>
        <%= config.subtitle %>
     <% } else { %>
        <%= page.title %>
     <% } %>
</div>

这个有一点bug，归档页面标题无法显示，解决办法目前还没有。

打字机效果

在主题配置文件中，按自己的心意进行配置subtitle

# 打字效果副标题.
# 如果有符号 ‘ ，请在 ’ 前面加上 \
subtitle:
  enable: true
  loop: true # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 300 # 开始延迟
  typeSpeed: 130 # 打字速度
  backSpeed: 70 # 删除速度
  sub1: 从来没有真正的绝境, 只有心灵的迷途
  sub2: 即使爬到最高的山上，一次也只能脚踏实地地迈一步

打字机效果图

博客优化

gulp代码压缩

hexo生成的html、css、js等都有很多的空格或者换行，而空格和换行也是占用字节的，所以需要将空格换行去掉也就是我要进行的“压缩”，减小一点资源文件的大小也是对访问速度有那么一点提升的。

在站点目录执行以下命令，安装插件

# 全局安装gulp模块
npm install gulp -g
# 安装各种小功能模块  执行这步的时候，可能会提示权限的问题，最好以管理员模式执行
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 额外的功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save

在Hexo根目录新建文件 gulpfile.js，并复制以下内容到文件中，有中文注释，可以根据自己需求修改。（注意：文件名不能错，一定为gulpfile.js，否则会出错！）

var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象

// 清除public文件夹
gulp.task("clean", function () {
    return del(["public/**/*"]);
});

// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function () {
    return hexo.init().then(function () {
        return hexo
            .call("generate", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 启动Hexo服务器
gulp.task("server", function () {
    return hexo
        .init()
        .then(function () {
            return hexo.call("server", {});
        })
        .catch(function (err) {
            console.log(err);
        });
});

// 部署到服务器
gulp.task("deploy", function () {
    return hexo.init().then(function () {
        return hexo
            .call("deploy", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 压缩public目录下的js文件
gulp.task("compressJs", function () {
    return gulp
        .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
        .pipe(plumber())
        .pipe(
            gulpBabel({
                presets: [es2015Preset] // es5检查机制
            })
        )
        .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
        .pipe(gulp.dest("./public")); //输出到目标目录
});

// 压缩public目录下的css文件
gulp.task("compressCss", function () {
    var option = {
        rebase: false,
        //advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
        compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
        //keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
        //keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
    };
    return gulp
        .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
        .pipe(plumber())
        .pipe(cleancss(option))
        .pipe(gulp.dest("./public"));
});

// 压缩public目录下的html文件
gulp.task("compressHtml", function () {
    var cleanOptions = {
        protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
        unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
    };
    var minOption = {
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        removeComments: true, //清除HTML注释
        minifyJS: true, //压缩页面JS
        minifyCSS: true, //压缩页面CSS
        minifyURLs: true //替换页面URL
    };
    return gulp
        .src("./public/**/*.html")
        .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
        .pipe(plumber())
        .pipe(htmlclean(cleanOptions))
        .pipe(htmlmin(minOption))
        .pipe(gulp.dest("./public"));
});

// 压缩 public/medias 目录内图片
gulp.task("compressImage", function () {
    var option = {
        optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
        progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
        interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
        multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化
    };
    return gulp
        .src("./public/medias/**/*.*")
        .pipe(gulpif(!isScriptAll, changed("./public/medias")))
        .pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
        .pipe(plumber())
        .pipe(imagemin(option))
        .pipe(gulp.dest("./public"));
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器
gulp.task(
    "build",
    gulp.series(
        "clean",
        "generate",
        "compressHtml",
        "compressCss",
        "compressJs",
        gulp.parallel("deploy")
    )
);

// 默认任务
gulp.task(
    "default",
    gulp.series(
        "clean",
        "generate",
        gulp.parallel("compressHtml", "compressCss", "compressJs")
    )
);
//Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数

注意：这里我去掉了图片的压缩，如果想要加上可以在第154行加上 “compressImage”, 和第165行的加上”compressImage” 即可

使用（两种方式）：

直接在Hexo根目录执行 gulp，这个命令相当于 hexo cl&&hexo g 并且再把代码压缩，再hexo s进行部署即可
在Hexo根目录执行 gulp build ，这个命令与第1种相比是：在最后又加了个 hexo d ，等于说生成、压缩文件后又帮你自动部署了

新建文章自动打开本地Markdown编辑器

写新文章时，需要控制台执行hexo new “文章名字”生成一篇新文章，但需要手动打开，挺麻烦，我们可以设置在生成之后自动打开

在站点根目录下新建scripts目录，然后在新建auto_open.js，在文件填入一下内容：

var spawn = require('child_process').exec;

// Hexo 2.x 用户复制这段
//hexo.on('new', function(path){
  //spawn('start  "markdown编辑器绝对路径.exe" ' + path);
//});

// Hexo 3 用户复制这段
hexo.on('new', function(data){
  spawn('start  "D:\program\typora\Typora\Typora.exe" ' + data.path);
});