博客优化(Hexo博客Next主题设计)

博客搭建完成后,最初的博客雏形一般都比较朴素,功能也有限,所以可以通过优化主题来进行美化博客外观和拓展博客功能。本篇文章主要以可正常访问的Hexo.Mist原型博客为基础,根据自身需求加以优化,而最新版(V7.7)中其实包含很多美化设置,但是默认是关闭状态,同时个性化配置需要修改配置文件等,即使出现一个字母的差错也会导致失效,因此本文对配置文件会具体说明,而目录均是按照我的博客搭建博文中说明的目录结构,可以根据自身目录结构进行转换,博文中展示的图片可能来自参考文章,若参考文章内容与实际存在差异会附上实际图片。

优化主题

我的个人博客是林深时见璐,本文优化的效果可以访问博客进行观看。

阅读全文设置

由于初始博客并没有设置摘要的形式,因此博客首页会展示每篇博文的全文,显得十分冗长,为此设置阅读全文能简化博客首页,且让博文能以简短的摘要进行展示。[1]

设置方法采用的是在博文中选择适当位置进行内容截断,填写以下内容:

1
<!-- more -->

这样首页便只会展示在截断位置前的内容。

分类板块二级目录显示

在类别模块,往往只显示一种类别,但有时候博客之间归属一大类却各有差异,因此设计二级分类目录,使得类别简洁的同时又能将具体博文区别。因为Hexo原生支持父子分类,在博文撰写的md文件首部categories下原先的类别A下再写一个类别B,即可得到父子类的效果,A为父类,B为子类,示例如下[2]

1
2
3
categories:
- 技术
- 博客搭建

点击侧边栏头像返回首页

在Next V7.7.0版本配置中修改方式与以前版本存在差异,未测试之前版本效果,本人配置方式如下:
1)找到侧边栏配置文件../next/layout/_partials/sidebar/site-overview.swig
2)找到头像配置位置class="site-author-image"
3)设置点击头像跳转,需将对应头像配置修改如下:

1
2
3
4
+ <a href="/">
<img class="site-author-image" itemprop="image" alt="{{ author }}"
src="{{ url_for(theme.avatar.url) }}">
+ </a>

评论系统使用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,安装后如图:
utterance应用安装☆ utterance应用安装
2)安装插件,在hexo文件目录下打开git bash,安装如下:

1
npm install theme-next/hexo-next-utteranc

3)在../next/layout/_third-party/comments/中新建文件utterances.swig,写入以下内容:

1
2
3
4
5
6
7
8
9
{% 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>后面增添以下内容:

1
2
3
4
{% elseif theme.utteranc.enable %}
<div class="comments" id="comments">
{% include '../_third-party/comments/utterances.swig' %}
</div>

5)在../next/_config.yml添加下面的配置内容:

1
2
3
4
5
6
7
8
9
10
# 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留下的评论,同时也能发表新评论。

更新utteranc评论系统配置说明

1)新版配置简化,上述配置中3)4)部分可忽略,若忽略配置后未生效可尝试加上;
2)原先设置中pathname设置改为title,避免URL中带有中文字符编码导致评论issue显示中文为编码,修改后issue名称即博客文章标题。

图片设置

  1. 图片放大查看的功能,这是默认功能,可以选择使用的插件fancyboxmediumzoom,我使用后者,在../next/_config.yml中搜索mediumzoom,将false改为true
  2. 图片标题说明,当前的配置情况下,即使使用下面展示的markdown语法中的图片说明也无法正常显示在博客中,其中Optional title是图片的title属性,若使用Next主题中的fancybox插件则自动会显示,其他的配置则需要更改Hexo渲染组件。
    1
    ![Alt text](../img.jpg "Optional title")
    修改渲染配置步骤如下:
    1)在../hexo/node_modules/marked/lib/marked.js中进行下述修改,其中-表示删除+表示增加:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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中增加以下内容:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .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;
    }
  3. 图片居中
    ../next/source/css/_schemes/Mist/_posts-expanded.styl中找到.posts-expand中的下列内容[4]
    1
    2
    3
    .post-body img {
    margin-left: 0;
    }
    将其修改为:
    1
    2
    3
    .post-body img {
    margin: 0 auto;
    }

博文脚注

脚注也可以叫注脚,Hexo自带的默认markdown编辑器渲染效果不支持脚注的显示,因此安装插件进行渲染支持,我使用的是hexo-reference,整体效果更可观,安装如下[5][6]

1
npm install hexo-reference --save

在博客撰写的md文件中使用如下(^和数字之间不需要空格):

1
2
博客脚注[^ 1]。
[^ 1]: 我的博客。

修改篇尾的标签符号

默认的标签符号是#,可以使用自带的标签图案,修改方式即在../next/_config.yml中将tag_icon更改为true
old_tag☆ old_tag
new_tag☆ new_tag

修改分割线

原先的默认分割线是虚线,将其修改为实线,在../next/source/css/_common/scaffolding/base.styl中将下属配置删除[7]

1
background-image: repeating-linear-gradient(-45deg, white, white 4px, transparent 4px, transparent 8px);

页脚显示博客运行时间

在博客页脚显示博客运行时间[8],这个在默认主题配置中并没有,因此需要自己添加,修改配置文件是../next/layout/_partials/footer.swig,在配置文件中找到你想显示在博客页脚的位置,比如我配置在主题版本信息下,显示效果如图:
博客运行时间☆ 博客运行时间显示效果
不同配置位置可以自行尝试修改,具体添加代码如下:

点击查看具体代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

显示博客阅读数量

已经有许多教程,在博客主题配置中也有多种选择,根据网上教程的介绍,busuanzi插件只能在博文显示阅读数,因此我选择部署LeanCloud插件来显示阅读数,但是在部署过程中遇到不少问题,而且没有在任何教程中找到完整的说明,尽管网上也有可行的教程[9],我还是记录下来。

注册

LeanCloud官网中进行注册并登录。

应用配置

进入控制台之后,点击创建应用,填写应用名称,计价方案选择开发版,创建成功之后,在对应应用右上角点击齿轮状的设置,如图:
LeanCloud应用设置☆ LeanCloud应用设置
在设置界面,选择存储,选择创建ClassClass名称输入Counter,因为这个类名与Next主题兼容,默认ACL权限设置为无限制即所有用户可读可写。
在设置界面,选择设置,选择应用Keys,将界面显示的AppIDAppKey复制,在主题配置文件修改时需要使用。
在上述的设置选项下选择安全中心,在Web安全域名的填写框中输入博客的完整域名,保证统计数据只在记录的域名中有效。

博客配置

在博客的../next/_config.yml配置文件中,找到leancloud_visitors,设置配置信息如下:

1
2
3
4
5
6
7
8
9
10
11
# 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处填写应用配置时复制的AppIDapp_key填写应用配置时复制的AppKey

安全插件安装及部署

如果上述配置完成后,更新部署博客,能够正常显示阅读数量,后续的内容可以选择跳过。
如果上述配置不能正常显示阅读数量,且存在Counter not initialized! See more at console err msg.的问题,此时在博客页面打开控制台(Chrome下按F12或右键选择检查),点击Console查看是否存在下图显示内容:
Count类未初始化问题☆ Count类未初始化问题
这是因为LeanCloud插件存在安全问题,需要安装另一个插件hexo-leancloud-counter-security进行完善。
首先在../next/_config.yml主题配置文件中的leancloud_visitors找到security选项,将其改为true,同时确认同一配置文件下的valine部分的enablevisitorfalse,因为这两者会产生冲突,如果使用valine作为评论系统,可以参照网上教程进行冲突解决。
然后在博客根目录下打开git bashCMD,安装插件:

1
npm install hexo-leancloud-counter-security --save

由于插件存在依赖性,出现Error: Cannot find module 'babel-runtime/regenerator'错误时需要再安装模块babel-runtime

1
npm install babel-runtime --save

安装完成之后,注册用户,其中用户名密码替换为你要设置的用户名和密码内容(不需要和LeanCloud的登陆名和登陆密码一样):

1
hexo lc-counter r 用户名 密码

之后修改博客配置文件../hexo/_config.yml,添加以下内容(所有选项都必须填写,此处的usernamepassword即刚刚注册的用户名和密码,网上有教程认为此处空白可等部署时输入,但我部署时会因为配置缺少导致出错,所以建议配置中直接写入),否则部署时会报错TypeError: Cannot read property ‘enable_sync’ of undefined

1
2
3
4
5
6
leancloud_counter_security:
enable_sync: true
app_id: <<your app id>>
app_key: <<your app key>
username: <<your username>>
password: <<your password>>

之后在同一配置文件下的deploy部分,做以下修改:

1
2
3
4
5
6
7
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项,是否已经添加刚刚注册的用户,如图:
LeanCloud用户查看☆ LeanCloud用户查看
存在用户后,查看Counter项,对表权限进行修改,点击Counter,选择权限,点击修改,分别修改add_fieldscreatedelete
Counter权限修改☆ Counter权限修改
add_fieldscreate两项的修改步骤一致:
1)选择指定用户
2)输入已注册的用户名,添加
添加用户☆ 添加用户
3)查看已添加用户正常显示
用户添加成功效果☆ 用户添加成功效果
对于delete项,只保留上述第一个步骤即可,不需要添加用户。
如果希望保护访问数据不被篡改,可以选择云引擎,选择部署,选择在线编辑,点击创建函数,选项依次选择HookbeforeUpdateCounter,在函数中添加以下内容:

1
2
3
4
5
6
7
8
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!');
}
})
}

云引擎设置内容☆ 云引擎设置内容
保存上述设置之后,可看到添加的函数,点击部署,等待部署完成即可。
部署完成日志☆ 部署完成日志

修改lean-analytics.swig配置

如果上述配置完成后正常显示阅读数可跳过这部分,若出现阅读数不正常且显示为0,可参照此部分[10],原因可能是LeanCloud接口出现变化。对..\next\layout_third-party\statistics\lean-analytics.swig做以下修改:

1
2
3
4
5
6
7
# 修改第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即空格键输入换成&emsp;&#8195;即可[11],输入两个即缩进两格,注意分号;不要漏掉,其他空格替换符如下:

1
2
3
半方大的空白:   `&ensp;` or `&#8194;`
全方大的空白: `&emsp;` or `&#8195;`
不断行的空白格: `&nbsp;` or `&#160;`

静态代码压缩

为了让博客源码显得紧凑,也为了让网站加载速度变快,使用gulp对博客源码进行压缩。[12]
1)安装gulp插件
安装gulp记得需要在全局环境下进行安装,不要只在博客根目录下的环境进行安装,否则会导致gulp无法正常执行。

1
npm install gulp --save  #安装gulp

2)安装功能模块
以下功能模块会在后续配置中使用,可以根据个人实际需要进行选择安装,一般建议htmlcss相关源码进行压缩,所以对应模块建议安装。

1
2
3
4
# 安装功能模块
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,添加以下配置信息,可根据自身需要进行修改:

点击查看具体代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
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")
)
);
4)部署 完成配置修改后,在博客根目录下打开`git bash`,按照[配置修改后更新部署即可](#Update)。

友情链接

Next.Mist主题下,友情链接默认显示在站点概览下方,在主题配置文件../next/_config.yml中找到Blog rolls设置块,其中links_settings是对友链的样式进行配置,links下按照以下格式添加即可添加友情链接:

1
林深时见璐: https://linwhitehat.github.io/

添加音乐

在分享博客时,一些文艺类型的博客可能适合添加背景音乐,既烘托文章意蕴,也让阅读者能欣赏雅乐。博客撰写是使用markdown,而markdown对html语法的支持是天然的,而为了在博客中样式更为美观,需要使用css进行一定设置,更多样式可参照此博客[13][14],博文中直接写入以下代码(外链不可生成情况可能无法播放):

1
2
3
4
5
<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>

效果如下:

博客发表按时间进行文件目录存放

默认情况下发表博客都会存放在_post目录下,刚开始时博客较少比较容易查看,但是随着时间积累,博客增多,因此建议按照时间进行存放发表的博客,根据发表时间查找对应博客,对于后续更新修改比较方便,修改位置是../hexo/_comfig.yml,具体设置如下:

1
2
- new_post_name: :title.md
+ new_post_name: :year/:month/:day/:title.md

而发布文章之后,希望同样按照时间子目录存储,可以设置如下:

1
2
- permalink: :title.html
+ permalink: :year/:month/:day/:title.html

博客菜单栏页面存在“安全问题”

Q:当访问博客菜单栏某页面,chrome浏览器显示“访问存在安全问题: provisional headers are shown”,如我的About页面,但是证书、https都是正常的,在使用 Github Page 部署时也强制全站https部署,这个安全问题为何会出现?
A:问题存在于使用外链资源,一般是图片、音视频等,可以将资源放到自身博客目录下引用,便不存在chrome的安全警告了。而这个问题引起安全警告的本质是引用外链产生的跨域请求被拦截导致的。[26]

博客页脚样式修改

../next/source/css/_schemes/Mist目录下找到配置文件_layout.styl,定位到Footer,修改.footer-inner如下:

1
2
3
.footer-inner {
- text-align: left;
+ text-align: center;

主题自定义设计思路

Next主题本身有不少默认配置,但是如果对前端设计有更多想法可以实现主题自定义即“魔改”,要实现主题自定义可以对任意内容做修改,而写这篇博文是想总结自定义的思路,因为Next的版本更替会有配置修改变化,同时要实现自定义就需要对博客的配置全貌了解。在../hexo/source/_data/目录下可以自建自定义样式文件,在../next/_config.yml主题配置文件中custom_file_path即对应自定义配置文件信息,而调试的过程可以在浏览器的开发者模式下进行调试[15]

默认的Hexo博客使用的是Hexo的Logo,在chrome浏览器访问博客时,标签页的图标即默认Logo,而Hexo博客本身支持使用自定义的图标,修改站点Logo步骤如下:

  1. 选取合适的图片,制作favicon图标,使用比特虫[16]生成ico格式文件;
  2. 存储自定义的ico图片文件到../next/source/images目录下;
  3. 修改博客主题配置文件../next/_config.yml,找到favicon选项,修改如下:
1
2
3
4
- small: /images/favicon-16x16-next.png
- medium: /images/favicon-32x32-next.png
+ small: /images/new-favicon-16x16.ico
+ medium: /images/new-favicon-32x32.ico

自定义404

在主题配置文件中添加404页面,有两种方式添加404页面,一种是基于markdown解析,一种是基于html解析,网络教程还提供更多javascriptcss样式进行自定义,使页面更加美观,可参照[17][18][19]

  1. markdown解析
    与生成归档分类的方法相同,可以在主题配置文件../next/_config.yml中找到menu,添加:
    1
    commonweal: /404/ || heartbeat
    ../hexo/source/目录下新建404目录,目录下新建index.md,或者在博客根目录打开git bash,执行:
    1
    hexo new page "404"
    ../source/404/index.md中添加以下内容:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    ---
    title: 404 Not Found:该页无法显示
    toc: false
    comments: false
    permalink: /404
    ---
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>404</title>
    </head>
    <body>
    <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回首页" homePageUrl="https://www.nickyam.com"></script>
    true</body>
    </html>
  2. html解析
    不使用默认的markdown解析404页面,而是自定义一个独立页面,使用腾讯公益作为404页面内容,同时加上返回博客字样及跳转。
    hexo/source/下新建404.html,需要避免markdown渲染,在404.html开头加上layout: false,html内容如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    layout: false
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>404</title>
    </head>
    <body>
    <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回博客"></script>
    </body>
    </html>

自定义字体

字体默认配置

博客默认的字体可能看起来不美观,可以在博客主题配置相关文件../next/source/css/_variables/base.styl中查看默认的字体配置信息如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$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,可看到默认设置:

点击查看具体代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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:
修改配置步骤如下: 1. 将`enable`选项修改为`true`,`host`可修改为国内镜像`fonts.loli.net`; 2. `global`、`title`、`posts`等选项是对具体项的字体设置,建议参考以下设置:
1
2
- global: 网站全局字体设置,建议填写英文字体
- 其他类型可根据个人喜好
  1. 设置博客中文字体

../next/source/css/_variables/base.styl中修改默认中文字体,例如我选择中文字体为Noto Serif SC,修改如下:

1
2
3
// Font families.
-$font-family-chinese = "PingFang SC", "Microsoft YaHei"
+$font-family-chinese = "Noto Serif SC", "PingFang SC", "Microsoft YaHei"
  1. 加载字体设置

在博客中载入设置的字体,在自定义文件../hexo/source/_data/head.swig中加入以下内容:

1
<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[20]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 超链接样式
.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);
}

自定义独立页面

相信在404页面部分,已经初步了解了独立页面的设计,在博客中可以自定义设计很多独立页面,可以加上自定义的css样式和javascript脚本渲染,比如加入相册、视频等,而要做到独立站点且渲染效果和自己设计的一致,最重要的是避免博客默认的markdown渲染[21][22]。避免渲染的方式有很多,网上教程会介绍在html页面起始加上layout: false,但我更推荐另一种方法即skip_render参数设置,这种方法合适各种不需要博客默认解析的配置文件,具体操作是在博客根目录的配置文件../hexo/_config.yml找到skip_render,做出以下修改,DIY_folder即自定义独立页面所在文件夹,**表示该文件夹下所有文件:

1
skip_render: [README.md,DIY_folder/**]

自定义个人主页

在正常 Hexo 博客搭建后,使用 Github Page 部署,默认的博客首页即name.github.io对应的页面即博客首页,效果见个人首页。而如果想域名指向自定义的个人首页,由首页访问博客链接跳转。就像古代的家庭,进门会有个门面,转而才见黄金屋。这样博客整体会让人感觉更完整,在此也推荐默认主题便带有这种美感的网站框架Hugo,基于此的博客可参考友链中的reuixiy荷戟独彷徨,本部分教程参考[24][25]并根据实际情况修改。

言归正传,使用 Hexo 搭建博客后,要修改博客域名执行的首页,主要包含两部分:

  1. 建立自定义主页;
  2. 迁移博客到新地址。

建立自定义主页

新建index.html文件,内容包含博客的跳转如<a href="https://linwhitehat.github.io/Blog" target="_self">Blog</a>,可以自定义添加js内容,作为主页展示。

迁移博客

  1. 在 GitHub 中新建仓库,我命名为Blog,初始化仓库完成在Setting中配置Github Page
  2. 修改博客配置../hexo/_config.yml中的URLDeployment如下:
1
2
3
4
5
6
7
8
9
10
# URL
- url: https://linwhitehat.github.io
- root: /
+ url: https://linwhitehat.github.io/Blog
+ root: /Blog/

# Deployment
deploy:
- repo: https://github.com/linwhitehat/linwhitehat.github.io
+ repo: https://github.com/linwhitehat/Blog
  1. 将 GitHub 原先的博客仓库name.github.io清空,将自定义首页的html文件及修饰文件都上传到当前仓库name.github.io中;
  2. 在博客根目录打开git bash,执行博客更新部署

注意:
迁移博客内容到新地址之后,使用相对地址引用博客图片及资源需要修改为正确路径,例如我原先路径为linwhitehat.github.com/修改后显示为linwhitehat.github.com/Blog,在本地即/对应修改后路径应为/Blog/,否则将不会正常显示。

配置修改后更新部署

输入以下命令完成每次更新:

1
2
3
4
5
hexo clean # 涉及配置文件修改
hexo g
gulp
gulp build
hexo d

结束

这篇博客基于hexo和next初始配置完成的情况对博客进行主题功能和外观的优化,撰写初衷是将自身搭建博客进行记录,因为Hexo主题更新频繁,不同版本之间的配置处理并不完全一致,根据已有的参考需要进行实际优化处理,同时也对Hexo结构了解更深刻,希望将来能更多的自定义实现渲染效果的设计,搭建更自主化的博客。

点击刷新