前言
我的博客已经重新搭建,使用Hexo
框架,并部署Next-Mist V7.7.0
主题,依旧使用GitHub Page方式,博客为林深时见璐,目前持续更新中,欢迎访问。
这篇博文也发布在我的博客中,访问博客优化原文,写这篇博文在于新版本的Next主题与旧版本存在差异,且自定义内容支持比较丰富,可作为参考。
优化主题
我的个人博客是林深时见璐,本文优化的效果可以访问博客进行观看。
阅读全文设置
由于初始博客并没有设置摘要的形式,因此博客首页会展示每篇博文的全文,显得十分冗长,为此设置阅读全文
能简化博客首页,且让博文能以简短的摘要进行展示。[1]
设置方法采用的是在博文中选择适当位置进行内容截断,填写以下内容:
<!-- more -->
这样首页便只会展示在截断位置前的内容。
分类板块
二级目录显示
在类别模块,往往只显示一种类别,但有时候博客之间归属一大类却各有差异,因此设计二级分类目录,使得类别简洁的同时又能将具体博文区别。因为Hexo原生支持父子分类,在博文撰写的md
文件首部categories
下原先的类别A下再写一个类别B,即可得到父子类的效果,A为父类,B为子类,示例如下[2]:
categories:
- 技术
- 博客搭建
评论系统使用utteranc
原先使用的是主题自带的gitalk
作为博客评论系统,而更改为utteranc
的原因有两个:
1)gitalk
存在原始配置泄露及访问授权等问题,utteranc
具备细粒度的权限控制,且接受隐私项目授权;
2)二者都是基于GitHub的issue系统进行评论,很好转换。
转换评论系统首先将gitalk
在../next/_config.yml
中设置为false
,将GitHub中授权的应用删除。安装utteranc
步骤如下[3]:
1)在GitHub APP中安装utterances
,链接为https://github.com/apps/utterances,安装后如图:
[图片上传失败...(image-b0aafc-1581396886730)]
2)安装插件,在hexo文件目录下打开git bash
,安装如下:
npm install theme-next/hexo-next-utteranc
3)在../next/layout/_third-party/comments/
中新建文件utterances.swig
,写入以下内容:
{% if theme.utteranc.enable %}
<script src="https://utteranc.es/client.js"
repo="{{ theme.utteranc.repo }}"
issue-term="{{ theme.utteranc.issue_term }}"
theme="{{ theme.utteranc.theme }}"
crossorigin="anonymous"
async>
</script>
{% endif %}
4)在../next/layout/_partials/comments.swig
中找到最后一句elseif
并在其中的<div></div>
后面增添以下内容:
{% elseif theme.utteranc.enable %}
<div class="comments" id="comments">
{% include '../_third-party/comments/utterances.swig' %}
</div>
5)在../next/_config.yml
添加下面的配置内容:
# Demo: https://utteranc.es/ http://trumandu.github.io/about/
utteranc:
enable: true
repo: linwhitehat/linwhitehat.github.io
pathname: pathname
# theme: github-light,github-dark,github-dark-orange
theme: github-light
cdn: https://utteranc.es/client.js
# If you want to modify priority, please config in **hexo**
#priority:
更新完博客配置后,便能看到之前使用gitalk留下的评论,同时也能发表新评论。
图片设置
- 图片放大查看的功能,这是默认功能,可以选择使用的插件
fancybox
或mediumzoom
,我使用后者,在../next/_config.yml
中搜索mediumzoom
,将false
改为true
。 - 图片标题说明,当前的配置情况下,即使使用下面展示的markdown语法中的图片说明也无法正常显示在博客中,其中
Optional title
是图片的title属性,若使用Next主题中的fancybox
插件则自动会显示,其他的配置则需要更改Hexo渲染组件。
![Alt text](../img.jpg "Optional title")
修改渲染配置步骤如下:
1)在../hexo/node_modules/marked/lib/marked.js
中进行下述修改,其中-
表示删除+
表示增加:
Renderer.prototype.image = function(href, title, text) {
- href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
- if (href === null) {
- return text;
-}
+ if (this.options.baseUrl && !originIndependentUrl.test(href)) {
+ href = resolveUrl(this.options.baseUrl, href);
+ }
+ var out = '<img src="' + href + '" alt="' + text + '"';
if (title) {
- out += ' title="' + title + '"';
+ out += '>' + '<i class="img-caption">' + '◎ ' + title + '</i';
}
out += this.options.xhtml ? '/>' : '>';
return out;
};
2)增加自定义CSS样式,在../source/_data/styles.styl
中增加以下内容:
.img-caption {
font-style: normal;
margin: 0 0 .7em;
font-size: 90%;
color: #555;
display: block;
text-align: center;
text-indent: 0;
font-family: STKaiti, serif;
}
- 图片居中[4]
在../next/source/css/_schemes/Mist/_posts-expanded.styl
中找到.posts-expand
中的下列内容:
.post-body img {
margin-left: 0;
}
将其修改为:
.post-body img {
margin: 0 auto;
}
博文脚注
脚注也可以叫注脚,Hexo自带的默认markdown编辑器渲染效果不支持脚注的显示,因此安装插件进行渲染支持,我使用的是hexo-reference,整体效果更可观,安装如下[5][6]:
npm install hexo-reference --save
在博客撰写的md文件中使用如下(^
和数字之间不需要空格):
博客脚注[^ 1]。
[^ 1]: 我的博客。
修改篇尾的标签符号
默认的标签符号是#
,可以使用自带的标签图案,修改方式即在../next/_config.yml
中将tag_icon
更改为true
。
[图片上传失败...(image-afa835-1581396886730)]
[图片上传失败...(image-a59243-1581396886730)]
修改分割线
原先的默认分割线是虚线,将其修改为实线,在../next/source/css/_common/scaffolding/base.styl
中将下属配置删除[7]:
background-image: repeating-linear-gradient(-45deg, white, white 4px, transparent 4px, transparent 8px);
页脚显示博客运行时间
在博客页脚显示博客运行时间[8],这个在默认主题配置中并没有,因此需要自己添加,修改配置文件是../next/layout/_partials/footer.swig
,在配置文件中找到你想显示在博客页脚的位置,比如我配置在主题版本信息下,显示效果如图:
不同配置位置可以自行尝试修改,具体添加代码如下:
<details>
<summary>点击查看具体代码</summary>
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("01/10/2019 00:13:14");//修改为自己的blog建站时间
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="本站已安全运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>
</details>
显示博客阅读数量
已经有许多教程,在博客主题配置中也有多种选择,根据网上教程的介绍,busuanzi插件只能在博文显示阅读数,因此我选择部署LeanCloud插件来显示阅读数,但是在部署过程中遇到不少问题,而且没有在任何教程中找到完整的说明,尽管网上也有可行的教程[9],我还是记录下来。
注册
在LeanCloud官网中进行注册并登录。
应用配置
进入控制台之后,点击创建应用
,填写应用名称,计价方案
选择开发版,创建成功之后,在对应应用右上角点击齿轮状的设置,如图:
[图片上传失败...(image-9b204e-1581396886730)]
在设置界面,选择存储
,选择创建Class
,Class名称
输入Counter
,因为这个类名与Next主题兼容,默认ACL权限设置为无限制
即所有用户可读可写。
在设置界面,选择设置
,选择应用Keys
,将界面显示的AppID
和AppKey
复制,在主题配置文件修改时需要使用。
在上述的设置
选项下选择安全中心
,在Web安全域名
的填写框中输入博客的完整域名,保证统计数据只在记录的域名中有效。
博客配置
在博客的../next/_config.yml
配置文件中,找到leancloud_visitors
,设置配置信息如下:
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id:
app_key:
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in lc counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set the `security` to `false`.
security: false
betterPerformance: true
app_id
处填写应用配置时复制的AppID
,app_key
填写应用配置时复制的AppKey
。
安全插件安装及部署
如果上述配置完成后,更新部署博客,能够正常显示阅读数量,后续的内容可以选择跳过。
如果上述配置不能正常显示阅读数量,且存在Counter not initialized! See more at console err msg.
的问题,此时在博客页面打开控制台(Chrome下按F12
或右键选择检查
),点击Console
查看是否存在下图显示内容:
[图片上传失败...(image-4529db-1581396886730)]
这是因为LeanCloud插件存在安全问题,需要安装另一个插件hexo-leancloud-counter-security
进行完善。
首先在../next/_config.yml
主题配置文件中的leancloud_visitors
找到security
选项,将其改为true
,同时确认同一配置文件下的valine
部分的enable
和visitor
是false
,因为这两者会产生冲突,如果使用valine
作为评论系统,可以参照网上教程进行冲突解决。
然后在博客根目录下打开git bash
或CMD
,安装插件:
npm install hexo-leancloud-counter-security --save
由于插件存在依赖性,出现Error: Cannot find module 'babel-runtime/regenerator'
错误时需要再安装模块babel-runtime
:
npm install babel-runtime --save
安装完成之后,注册用户,其中用户名
和密码
替换为你要设置的用户名和密码内容(不需要和LeanCloud的登陆名和登陆密码一样):
hexo lc-counter r 用户名 密码
之后修改博客配置文件../hexo/_config.yml
,添加以下内容(所有选项都必须填写,此处的username
和password
即刚刚注册的用户名和密码,网上有教程认为此处空白可等部署时输入,但我部署时会因为配置缺少导致出错,所以建议配置中直接写入),否则部署时会报错TypeError: Cannot read property ‘enable_sync’ of undefined
:
leancloud_counter_security:
enable_sync: true
app_id: <<your app id>>
app_key: <<your app key>
username: <<your username>>
password: <<your password>>
之后在同一配置文件下的deploy
部分,做以下修改:
deploy:
-
type: git
repo: https://github.com/username/username.github.io
branch: master
-
type: leancloud_counter_security_sync
由于搭建博客时已经部署到GitHub,要同时部署git和leancloud需要在配置文件中写清楚,其中git部分的username
是对应博客的GitHub用户名,可参照我的博客搭建个人博客(hexo+next+github)中的说明。
完成插件安装和配置修改后,到LeanCloud的应用中查看存储
下的_User
项,是否已经添加刚刚注册的用户,如图:
[图片上传失败...(image-376e33-1581396886730)]
存在用户后,查看Counter
项,对表权限进行修改,点击Counter
,选择权限
,点击修改
,分别修改add_fields
、create
和delete
。
add_fields
和create
两项的修改步骤一致:1)选择
指定用户
2)输入已注册的用户名,添加
[图片上传失败...(image-9b321d-1581396886730)]
3)查看已添加用户正常显示
[图片上传失败...(image-72632f-1581396886730)]
对于
delete
项,只保留上述第一个步骤即可,不需要添加用户。如果希望保护访问数据不被篡改,可以选择
云引擎
,选择部署
,选择在线编辑
,点击创建函数
,选项依次选择Hook
、beforeUpdate
和Counter
,在函数中添加以下内容:
var query = new AV.Query("Counter");
if (request.object.updatedKeys.indexOf('time') !== -1) {
return query.get(request.object.id).then(function (obj) {
if (obj.get("time") + 1 !== request.object.get("time")) {
throw new AV.Cloud.Error('Invalid update!');
}
})
}
[图片上传失败...(image-8b1d66-1581396886730)]
保存上述设置之后,可看到添加的函数,点击部署
,等待部署完成即可。
[图片上传失败...(image-b9cc3e-1581396886730)]
修改lean-analytics.swig配置
如果上述配置完成后正常显示阅读数可跳过这部分,若出现阅读数不正常且显示为0,可参照此部分[10],原因可能是LeanCloud接口出现变化。对..\next\layout_third-party\statistics\lean-analytics.swig
做以下修改:
# 修改第13行,-表示删除,+表示添加
- Counter('get', `/classes/Counter?where=${JSON.stringify({ url })}`)
+ Counter('get', `/classes/Counter?where=${encodeURIComponent(JSON.stringify({ url }))}&limit=1`)
# 修改第58行
- Counter('get', `/classes/Counter?where=${JSON.stringify({ url: { '$in': entries } })}`)
+ Counter('get', `?where=${encodeURIComponent(JSON.stringify({ url: { '$in': entries } }))}`)
设置中文缩进
中文撰写时习惯首行缩进,但是直接输入空格不能奏效,网上有教程可以设置自动缩进2 em
,但是这样设置后还需要对不需要缩进的位置进行单独设置,同时自动缩进可能对排版不友好的文章不友好,可能在不该缩进的地方都给缩进了,所以我选择在写博文时手动在需要缩进的地方进行设置,即手动输入空格,此处将习惯的space
即空格键输入换成 
或 
即可[11],输入两个即缩进两格,注意分号;
不要漏掉,其他空格替换符如下:
半方大的空白: ` ` or ` `
全方大的空白: ` ` or ` `
不断行的空白格: ` ` or ` `
静态代码压缩
为了让博客源码显得紧凑,也为了让网站加载速度变快,使用gulp
对博客源码进行压缩。[12]
1)安装gulp
插件
安装gulp
记得需要在全局环境下进行安装,不要只在博客根目录下的环境进行安装,否则会导致gulp
无法正常执行。
npm install gulp --save #安装gulp
2)安装功能模块
以下功能模块会在后续配置中使用,可以根据个人实际需要进行选择安装,一般建议html
和css
相关源码进行压缩,所以对应模块建议安装。
# 安装功能模块
npm install 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-env del --save
3)gulpfile.js
配置
在博客根目录../hexo
新建文件gulpfile.js
,添加以下配置信息,可根据自身需要进行修改:
<details>
<summary>点击查看具体代码</summary>
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/uploads 目录内图片
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",
"compressImage",
gulp.parallel("deploy")
)
);
// 默认任务
gulp.task(
"default",
gulp.series(
"clean",
"generate",
gulp.parallel("compressHtml", "compressCss", "compressImage", "compressJs")
)
);
</details>
4)部署
完成配置修改后,在博客根目录下打开git bash
,按照配置修改后更新部署即可。
友情链接
在Next.Mist
主题下,友情链接默认显示在站点概览
下方,在主题配置文件../next/_config.yml
中找到Blog rolls
设置块,其中links_settings
是对友链的样式进行配置,links
下按照以下格式添加即可添加友情链接:
林深时见璐: https://linwhitehat.github.io/
添加音乐
在分享博客时,一些文艺类型的博客可能适合添加背景音乐,既烘托文章意蕴,也让阅读者能欣赏雅乐。博客撰写是使用markdown,而markdown对html语法的支持是天然的,而为了在博客中样式更为美观,需要使用css进行一定设置,更多样式可参照此博客[13],博文中直接写入以下代码:
<iframe
frameborder="no" border="0" marginwidth="0"
marginheight="0" width=330 height=86
src="//music.163.com/outchain/player?type=2&id=461544312&auto=0&height=66">
</iframe>
效果如下:
<iframe
frameborder="no" border="0" marginwidth="0"
marginheight="0" width=330 height=86
src="//music.163.com/outchain/player?type=2&id=461544312&auto=0&height=66">
</iframe>
自定义设计思路
在../hexo/source/_data/
目录下可以自建自定义样式文件,在../next/_config.yml
主题配置文件中custom_file_path
即对应自定义配置文件信息,而调试的过程可以在浏览器的开发者模式下进行调试[14]。
自定义站点LOGO
默认的Hexo博客使用的是Hexo的Logo,在chrome浏览器访问博客时,标签页的图标即默认Logo,而Hexo博客本身支持使用自定义的图标,修改站点Logo步骤如下:
- 选取合适的图片,制作favicon图标,使用比特虫[15]生成
ico
格式文件; - 存储自定义的
ico
图片文件到../next/source/images
目录下; - 修改博客主题配置文件
../next/_config.yml
,找到favicon
选项,修改如下:
- small: /images/favicon-16x16-next.png
- medium: /images/favicon-32x32-next.png
+ small: /images/new-favicon-16x16.ico
+ medium: /images/new-favicon-32x32.ico
自定义字体
字体默认配置
博客默认的字体可能看起来不美观,可以在博客主题配置相关文件../next/source/css/_variables/base.styl
中查看默认的字体配置信息如下:
$font-family-chinese = "PingFang SC", "Microsoft YaHei";
$font-family-base = $font-family-chinese, sans-serif;
$font-family-base = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');
$font-family-logo = $font-family-base;
$font-family-logo = get_font_family('title'), $font-family-base if get_font_family('title');
$font-family-headings = $font-family-base;
$font-family-headings = get_font_family('headings'), $font-family-base if get_font_family('headings');
$font-family-posts = $font-family-base;
$font-family-posts = get_font_family('posts'), $font-family-base if get_font_family('posts');
$font-family-monospace = consolas, Menlo, monospace, $font-family-chinese;
$font-family-monospace = get_font_family('codes'), consolas, Menlo, monospace, $font-family-chinese if get_font_family('codes');
$font-family-icons = 'FontAwesome';
使用Googlr Fonts字体
通过在线加载字体的方式实现博客字体自定义(也可以选择本地字体,可见网上教程),Google Fonts提供的英文字体质量很高,同时近几年也开始提供多种中文字体(也有其他语言字体),尽管样式有限,但是质量还是不错的。Next主题中带有字体修改配置,在主题配置文件../next/_config.yml
中找到font
,可看到默认设置:
<details>
<summary>点击查看具体代码</summary>
font:
# Use custom fonts families or not.
# Depended options: `external` and `family`.
enable: false
# Uri of fonts host, e.g. //fonts.googleapis.com (Default).
host:
# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: x.x`. Use `em` as unit. Default: 1 (16px)
# Global font settings used for all elements inside <body>.
global:
external: true
family: Lato
size:
# Font settings for site title (.site-title).
title:
external: true
family:
size:
# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family:
size:
# Font settings for posts (.post-body).
posts:
external: true
family:
# Font settings for <code> and code blocks.
codes:
external: true
family:
</details>
修改配置步骤如下:
- 将
enable
选项修改为true
,host
可修改为国内镜像fonts.loli.net
; -
global
、title
、posts
等选项是对具体项的字体设置,建议参考以下设置:
- global: 网站全局字体设置,建议填写英文字体
- 其他类型可根据个人喜好
- 设置博客中文字体
在../next/source/css/_variables/base.styl
中修改默认中文字体,例如我选择中文字体为Noto Serif SC
,修改如下:
// Font families.
-$font-family-chinese = "PingFang SC", "Microsoft YaHei"
+$font-family-chinese = "Noto Serif SC", "PingFang SC", "Microsoft YaHei"
- 加载字体设置
在博客中载入设置的字体,在自定义文件../hexo/source/_data/head.swig
中加入以下内容:
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:400,500,700&display=swap&subset=chinese-simplified" rel="stylesheet">
加入的<link>
标签内容在Google Fonts中生成,选中一款字体后,点+
号选择,在底部会有一个选项框,点击一下会弹出字体设置框,点击CUSTOMIZE
,对字体进行自定义设置,然后在EMBED
中可以看到自动生成的<link>
代码,将其添加到上述对应位置,其中域名fonts.googleapis.com
可修改为国内镜像域名fonts.loli.net
。
自定义超链接样式
在自定义样式文件../hexo/source/_data/styles.styl
中添加以下内容,主要是颜色和下划线的设置,其他可以根据个人喜欢修改(颜色可参照RGB)[16]:
// 超链接样式
.post-body a {
color: rgb(32, 178, 170);
border-bottom: none;
&:hover {
color: rgb(30, 144, 255);
text-decoration: underline;
}
}
.posts-expand .post-meta a, .post-copyright a {
border-bottom: none;
&:hover {
color: rgb(30, 144, 255);
text-decoration: underline;
}
}
a {
border-bottom-color: rgb(80, 115, 184);
}
a:hover {
color: rgb(30, 144, 255);
border-bottom-color: rgb(30, 144, 255);
}
<span id="Update">配置修改后更新部署</span>
输入以下命令完成每次更新:
hexo clean
hexo g
gulp
gulp build
hexo d
结束
这篇博客基于hexo和next初始配置完成的情况对博客进行主题功能和外观的优化,撰写初衷是将自身搭建博客进行记录,因为Hexo主题更新频繁,不同版本之间的配置处理并不完全一致,根据已有的参考需要进行实际优化处理,同时也对Hexo结构了解更深刻,希望将来能更多的自定义实现渲染效果的设计,搭建更自主化的博客。