基于Hexo的matery主题搭建博客自定义修改篇2_

Hexo系列 HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

• Hexo Docker环境与Hexo基础配置篇

• hexo博客自定义修改篇

• hexo博客网络优化篇

• hexo博客增强部署篇

• hexo博客个性定制篇

• hexo博客常见问题篇

• Hexo Markdown以及各种插件功能测试

• markdown 各种其它语法插件
• latex公式支持
• mermaid图表
• plant uml图表
• URL卡片
• bilibili卡片
• github卡片
• 豆瓣卡片
• 插入音乐和视频
• 插入脑图

如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能有用的地方：

更换字体

一般网站的web字体都可以直接从Google-Font获取资源，这样不用担心字体商业带来的法律问题。

常见的开源字体有：

思源黑体 、 文泉驿 、 文鼎开放字体 、 柳体 、 cwTeX中文字体 、 濑户字体、江西拙楷体等。

1）创建web字体引用

@font-face{
    font-family: '引用的字体名称';
    src: url('谷歌字体路径（或者其他什么字体引用）');   
}

2）在网页合适的位置进行字体引用

①利用浏览器检查元素，获取需要定义字体的部分

②在主体的配置文件中(hexo-theme-matery/layout/…)找到对应的渲染(.ejs)文件，查找需要修改的部分

①演示一下利用浏览器获取定义字体的部分

对获取到的id选择器：#artDetail进行css渲染

#artDetail {
    font-family: '引用的web字体';
}

②利用主体的ejs渲染文件找出需要修饰的部分（加入自定义类）

/*使用我在文章内容详情定义的diyFnot类**/
.diyfont {
   font-family: '引用的web字体'; 
}

/*也可以使用自带的id*/
#artDetail {
    font-family: '引用的web字体'; 
}

网站全局化字体定义

@font-face{
    font-family: '引用的字体名称';
    src: url('谷歌字体路径（或者其他什么字体引用）');   
}

body {
    font-family: '引用的web字体名称'; 
}

引用本地的字体文件

当然有时候那个谷歌字体的网站可能登录不上去，需要科学上网，很烦人！我们也可以直接下载下字体文件，将他放在本地，进行直接引用！看下面操作👇

①在本地的hexo根目录的source文件下创立diy-font文件夹:/source/diy-font

在该文件下存放你的字体文件，比如：/source/diy-font/IBMPlexMono-Italic.ttf

②引用本地字体（仍然是在my.css文件中书写代码）

@font-face{
    font-family: 'hl';
    src: url('../diy-font/IBMPlexMono-Italic.ttf');
}

/** 表示全局使用，如果不想全局使用不要添加该段 */
body{
    font-family: 'hl';
}


/* 可以局部使用，建议添加 */
.diyFont{
    font-family: 'hl';
}

这样我们就可以实现引用本地的字体了，并且在web有效！

在你想要使用的元素的 class 里面加上 diyFont 即可。

• 直接使用

  F12，找到对应的代码片段即可：

<span class="logo-span diyFont">测试字体</span>

• 模板使用

  找到对应的模板 header.ejs中的代码片段使用即可：

<span class="logo-span diyFont"><%= config.title %></span>

修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
  background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
  /* 动态切换背景颜色. */
}

@keyframes rainbow {
  /* 动态切换背景颜色. */
}

修改 banner 图和文章特色图

可以直接在 /source/medias/banner 文件夹中更换喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果会 JavaScript 代码，可以修改成自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中：

$(".bg-cover").css("background-image", "url(/medias/banner/" + new Date().getDay() + ".jpg)");

在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

Hexo 跳过渲染

在Hexo部署时会默认渲染source下的所有html页面，但有时候想在Hexo博客上单独自定义html页面或README.md时，却不希望被Hexo渲染。因此对某个文件或者目录进行排除渲染是非常必要的。

方法一：font matter

Hexo新建网站页面，然后将你的代码直接写入 index.md 中

在 Front matter 中添加 layout: false，此方法适用于单一的纯HTML
CSS 页面。

---
title: tools
date: 2020-04-28 00:00:00
type: "tools"
layout: false
---

方法二：skip rende

在博客根目录下的 _config.yml，找到 skip_render，大概在32行左右，写入你想要的跳过渲染的路径，注意缩进和空格。

# 指定目录跳过hexo渲染
skip_render:
  - 'tools/*'
  - 'tools/**'

注释：tools/* 表示在目录 source/fireworks 下的文件全部跳过渲染，tools/** 表示在博客根目录 source/tools/ 文件夹下的文件全部跳过渲染（例如页面的 js、css 在另一个文件夹中）。

hexo体积压缩

• 因为 hexo 生成的 html、css、js 等都有很多的空格或者换行，而空格和换行也是占用字节的，所以需要将空格换行去掉也就是我要进行的 “压缩”。减小体积，加快加载速度。
• npm下载太慢怎么办？ 修改国内淘宝源加速，戳

# 全局安装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
 
或者使用yarn 
 
yarn global add gulp
yarn add  gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin
yarn add  gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core

然后，在根目录(有_config.yml文件，theme目录的目录)新增 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(
    "cicd",
    gulp.series(
        "clean",
        "generate",
        "compressHtml",
        "compressCss",
        "compressJs",
        "compressImage",
        gulp.parallel("deploy")
    )
);

// 默认任务
gulp.task(
    "ci",
    gulp.series(
        "clean",
        "generate",
        gulp.parallel("compressHtml", "compressCss", "compressJs","compressImage")
    )
);

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

运行：

hexo clean && hexo g && gulp &&  hexo g

gulp只执行压缩功能。直接在 Hexo 根目录执行 gulp ci ，这个命令相当于 hexo cl&&hexo g 并且再把代码和图片压缩。 在 Hexo 根目录执行 gulp cicd ，这个命令与前一个相比是：在最后又加了个 hexo d ，等于说生成、压缩文件后又帮你自动部署了

如果不想用图片压缩可以把文件中的"compressImage" 去掉即可

博客中插入音乐

hexo-tag-aplayer

hexo-tag-aplayerAPlayer 播放器的 Hexo 标签插件（现已支持 MetingJS）。

安装

npm install --save hexo-tag-aplayer

使用方法——aplayer

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

• title : 曲目标题
• author: 曲目作者
• url: 音乐文件 URL 地址
• picture_url: (可选) 音乐对应的图片地址
• narrow: （可选）播放器袖珍风格
• autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
• width:xxx: (可选) 播放器宽度 (默认: 100%)
• lrc:xxx: （可选）歌词文件 URL 地址
  例如：

{% aplayer "她的睫毛" "周杰伦" "http://home.ustc.edu.cn/~mmmwhy/%d6%dc%bd%dc%c2%d7%20-%20%cb%fd%b5%c4%bd%de%c3%ab.mp3"  "http://home.ustc.edu.cn/~mmmwhy/jay.jpg" %}

如果你觉得前面的方法不太好用，可以用下面的方法，使用MetingJS。

使用方法——MetingJS

MetingJS 是基于Meting API 的 APlayer 衍生播放器，支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。
第一步：修改_config.yml配置
在hexo的配置文件_config.yml中添加：

aplayer:
	meting: true

第二步：使用MetingJS 播放器

<!-- 简单示例 (id, server, type)  -->
{% meting "571184509" "xiami" "playlist" %}

有关的选项列表如下:

选项	默认值	描述
id	必须值	歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server	必须值	音乐平台: netease, tencent, kugou, xiami, baidu
type	必须值	song, playlist, album, search, artist
fixed	false	开启固定模式
mini	false	开启迷你模式
loop	all	列表循环模式：all, one,none
order	list	列表播放模式： list, random
volume	0.7	播放器音量
lrctype	0	歌词格式类型
listfolded	false	指定音乐播放列表是否折叠
storagename	metingjs	LocalStorage 中存储播放器设定的键名
autoplay	true	自动播放，移动端浏览器暂时不支持此功能
mutex	true	该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight	340px	播放列表的最大长度
preload	auto	音乐文件预载入模式，可选项： none, metadata, auto
theme	#ad7a86	播放器风格色彩设置

博客中插入视频

hexo-tag-dplayer

hexo-tag-dplayer 是 DPlayer 播放器的 Hexo 标签插件

安装

npm install --save hexo-tag-dplayer

使用

{% dplayer key=value ... %}
例：
{% dplayer "url=http://www.nenu.edu.cn/_upload/article/videos/03/5f/7c999eed42e3aadc413d7f851f0e/0f50b3eb-9285-41d2-ac4d-6cc363651aad_B.mp4"  "autoplay=true" "preload=metadata" "hotkey=true" %} 

有关的选项列表如下:

选项	默认值	描述
url	必须值	视频地址
loop	false	视频循环播放
volume	0.7	播放器音量
hotkey	true	开启热键
autoplay	true	自动播放，移动端浏览器暂时不支持此功能
logo	-	在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
mutex	true	该选项开启时，如果同页面有其他播放，该播放器会暂停
highlight	[]	自定义进度条提示点
preload	auto	视频文件预载入模式，可选项： none, metadata, auto
theme	#ad7a86	播放器风格色彩设置

注：如果使用腾讯视频、优酷视频等在线视频网站的资源，需要先进行视频地址解析，如点量视频解析，获取到实际的视频地址。

其他使用方法

在使用优酷或者腾讯视频时可以直接复制分享代码到文章中，如：

<iframe height=498 width=510 src='https://player.youku.com/embed/XMjk4ODAyMzIyOA==' frameborder=0 'allowfullscreen'></iframe>

参考文献

• hexo-tag-aplayer
• hexo-tag-dplayer

系列教程

全部文章RSS订阅

Hexo系列 HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

• Hexo Docker环境与Hexo基础配置篇

• hexo博客自定义修改篇

• hexo博客网络优化篇

• hexo博客增强部署篇

• hexo博客个性定制篇

• hexo博客常见问题篇

• Hexo Markdown以及各种插件功能测试

• markdown 各种其它语法插件
• latex公式支持
• mermaid图表
• plant uml图表
• URL卡片
• bilibili卡片
• github卡片
• 豆瓣卡片
• 插入音乐和视频
• 插入脑图

笔记系列 Note分类RSS订阅

• 完美笔记进化论

经历了很长时间，使用了各种各样的方案，最终选择了一种相对完美的方式。docker私有部署运行的joplin，使用markdown语法，github作为图床，picgo作为图像自动上传后端，pypora作为MD编辑器，Snipaste作为截图工具。后备gitlab ee selfhost备份，自建图床VPS多线负载均衡。cloudflare partner cdn加速，jsdelivr加速。

• pigo图床搭建与配置
• Joplin教程
• Snipaste截图工具
• Typora 作为Markdown编辑器最强

• Joplin入门指南&实践方案

• Joplin和使用
• Joplin同步与备份
• Joplin导入与导出

• 替代Evernote免费开源笔记Joplin-网盘同步笔记历史版本Markdown可视化

• Joplin安装使用，调用外部编辑器，网盘同步等等

• Joplin 插件以及其Markdown语法。All in One!

• Joplin简明教程
• markdown语法简明教程

• Joplin 插件使用推荐

• 教你用各种插件打造一个强大的笔记工具。

• 为知笔记私有化Docker部署

• 如何部署自己私有的为知笔记。
• 其实博主更推荐私有部署joplin

Gitbook使用系列 Gitbook分类RSS订阅

• GitBook+GitLab撰写发布技术文档-Part1:GitBook篇

• GitBook+GitLab撰写发布技术文档-Part2:GitLab篇

• 自己动手制作电子书的最佳方式（支持PDF、ePub、mobi等格式）

Gitlab 使用系列 Gitlab RSS 分类订阅

• Gitlab的安装及使用教程完全版
• 破解Gitlab EE
• Gitlab的安装及使用
• CI/CD与Git Flow与GitLab