Hexo系列 HexoRSS分类订阅
[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程
- 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系列 HexoRSS分类订阅
[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程
- 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安装使用,调用外部编辑器,网盘同步等等
- Joplin简明教程
- markdown语法简明教程
- 教你用各种插件打造一个强大的笔记工具。
- 如何部署自己私有的为知笔记。
- 其实博主更推荐私有部署joplin
Gitbook使用系列 Gitbook分类RSS订阅
Gitlab 使用系列 Gitlab RSS 分类订阅