我现在的这个博客”晴雀堂”是2022年4月5日搭建的，到今天4月14日已经一个星期多了，也许没有人会注意这个博客其实在一个星期内发生了翻天覆地的变化，这其中也有许多辛酸的故事😂。
接下来，我来大致按照时间线来讲一讲博客的改变，把他们汇总起来几乎可以变成一篇完整的博客美化教程喽🤩
改名
名字是一个博客的灵魂，并不是说原来的名字不好听，而是我无意中又取了一个我自认为很好听又符合我胃口的名字。
在这里我也说一下怎么给博客改名，首先我们找到站点配置文件注意是站点配置文件不是主题配置文件，是在你的博客的根目录下的那个_config.yml
里面找到：
1
2
3
4
5
6
7
8
|
title: ？？？
subtitle: ''
description: '？？？'
keywords: ？？？
author: ？？？
language: zh-CN
timezone: ''
|
注意了啊这里打？？？的都是视情况而定的，就是说每个人的这部分都不同，你可以自定义。好，我们看一下：
title是站点的名字，比如说我的博客叫晴雀堂，那我就填成这样：title: 晴雀堂
一定要记得冒号后面加一个空格！！！
subtitle是副标题，据说next主题填这个没什么用，我也没试过其他的主题，大家就试着填吧。
description是描述比如说我的描述是𝖘𝖊𝖎𝖓 𝖟𝖚𝖒 𝖙𝖔𝖉𝖊（*ps:这是花体字，内容是原版德语的”向死而生”*），那我就把它填到description后面。
keywords是关键词，他有什么用呢？我也不知道….因为我看不到实际的效果，我猜想应该是用来搭配搜索引擎食用的，但是我的博客还没接到搜索引擎上，所以我看不到实际效果😂。
author是作者，这个挺好理解的，比如说我是晴雀，我就把晴雀填到author的后面
language建议填zh-CN，会将博客转为中文。
最后的timezone我不知道什么意思，跳过了…
动态背景
我已经讲过了哦
改字体
也讲过了
(*这篇文章我只是指出了我在改字体中的一个错误，请到文章中二次跳转到另外一个大佬的文章内进行学习)
搜索栏
安装教程
我们首先来安装hexo博客搜索所需要的插件
在博客根目录执行命令
npm install hexo-generator-search --save
安装好了之后呢，我们就在博客的根目录下添加以下内容：
1
2
3
| search:
path: search.xml
field: post
|
常见错误的解决
本地搜索功能突然不能用了
什么叫突然不能用了？就是刚开始搜索功能可以用，到了后来突然抽风用不了了。
我们先来看一位老哥的问题描述
通过上面的安装一般是可以实现本地搜索功能的，但是，我的问题出现了，刚刚开始的时候，我是在windows电脑上面配置hexo的博客的，但是，后面我迁移到了mac上，然后本地搜索功能突然就不能用了。
一般本地功能不能使用了，有以下几个原因
1.search.xml文件中有不符合规则的字符，导致不能解析。
2.search.xml中有错误，导致不能解析。
3.search.xml文件中有编码不一致的问题，导致xml解析失败。
（ps:以上的search.xml就是我们配置了本地搜索后，自动生成的xml格式的包含站点所有博客的文件，通过这个文件就可以进行本地搜索功能。)
解决办法：
第一步
找到站点配置文件：
1
2
3
| search:
path: search.xml
field: post
|
我们将将search.xml改为search.json格式。
第二步
找到你的博客主题的search.ejs模板文件，修改下面代码:
1
2
3
4
5
6
7
| <script type="text/javascript">
$(function () {
console.log("lets go！");
console.log("<%= config.root %>");
searchFunc("<%= config.root %>" + "search.xml", 'searchInput', 'searchResult');
});
</script>
|
也是改为json格式的文件。
1
2
3
4
5
6
7
| <script type="text/javascript">
$(function () {
console.log("lets go！");
console.log("<%= config.root %>");
searchFunc("<%= config.root %>" + "search.json", 'searchInput', 'searchResult');
});
</script>
|
最后一步
修改你的search的本地js文件，比如我的matery主题的就是在js文件夹下的search.js文件。
对这个文件进行json解析的修改，最终就可以成功解决问题
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
| var searchFunc = function (path, search_id, content_id) {
console.log("test");
$.ajax({
url: path,
dataType: "json",
success: function (datas) {
console.log("test!");
console.log(datas);
var $input = document.getElementById(search_id);
var $resultContent = document.getElementById(content_id);
$input.addEventListener('input', function () {
var str = '<ul class=\"search-result-list\">';
var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
$resultContent.innerHTML = "";
if (this.value.trim().length <= 0) {
return;
}
datas.forEach(function (data) {
var isMatch = true;
var content_index = [];
var data_title = data.title.trim().toLowerCase();
var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
var data_url = data.url;
var index_title = -1;
var index_content = -1;
var first_occur = -1;
if (data_title != '' && data_content != '') {
keywords.forEach(function (keyword, i) {
index_title = data_title.indexOf(keyword);
index_content = data_content.indexOf(keyword);
if (index_title < 0 && index_content < 0) {
isMatch = false;
} else {
if (index_content < 0) {
index_content = 0;
}
if (i == 0) {
first_occur = index_content;
}
}
});
}
if (isMatch) {
str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
var content = data.content.trim().replace(/<[^>]+>/g, "");
if (first_occur >= 0) {
var start = first_occur - 20;
var end = first_occur + 80;
if (start < 0) {
start = 0;
}
if (start == 0) {
end = 100;
}
if (end > content.length) {
end = content.length;
}
var match_content = content.substr(start, end);
keywords.forEach(function (keyword) {
var regS = new RegExp(keyword, "gi");
match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
});
str += "<p class=\"search-result\">" + match_content + "...</p>"
}
str += "</li>";
}
});
str += "</ul>";
$resultContent.innerHTML = str;
});
}
});
}
|
next主题更新
因为我当时创建博客时的一个疏忽，所以我不小心git clone了next主题的旧版本，为此，我又重新clone了一个新的，而且发现新的next主题集成了超多，超超超实用的功能，在这里列一下：
夜晚模式
夜晚模式！！它支持自动跟随系统，我们只需要在主题配置文件里边搜索
darkmode然后改成true
文章进度条
也是在主题配置文件里边，搜索，然后改成true