封面来源:碧蓝航线 永夜幻光 活动CG

0. 前言

0.1 本文须知

本博客采用Hexo框架进行搭建,使用hexo-theme-butterfly主题进行美化,同时对一些细节进行了魔改,博客部署在Gitee上,未来会将其部署在服务器上(先暂时白嫖一会😆 )。

博主在遇上问题时,会及时更新…

0.2 如何搭建博客

编写目的

最近没事的时候经常在交流群里宣传我的博客并互换友链,让我的博客流量增加了不少(也就几百😂),很多小伙伴看到我的博客后,都觉得还行,也想自己搭建一个博客,但是新手在第一次搭建博客的时候总会出一些问题,要么是不知道怎么搭建,要么看不懂主题的文档,抑或不知道插件的使用。

我原本以为根据网上的众多教程可以解决这些问题,可依旧有小伙伴来问我,因此,我决定写一下怎么搭建一个博客。

—— 本节编辑于 2020/08/13

搭建须知

如果仅搭建一个简单的博客,你的电脑上需要有Node.js和Git才可以搭建。

不会Git及其配置?没关系!在本博客搜索关键词Git即可,我写过一篇关于Git的简易使用教程。

如果你想要对搭建好的博客进行魔改美化,你还需要一定的HTML + CSS + JS 的知识。

如果不会以上提及的技术也没关系,我会给出参考教程如何搭建,一些魔改美化也可以自己去网上搜索。

还有一点,我们编写博客文章的工具使用的是Typora,这是一款高自定义化的、简洁的Markdown编辑工具。

什么?你没用过?没关系,在本博客搜索关键词Typora即可,我曾经写过一篇关于Typora和Markdown相关的文章。

那么!我们就开始了!👊

初步搭建

首先你需要先搭建出一个简单的博客,然后你才可以在这个基础上进行美化,参考教程看这里:

手把手教你从0开始搭建自己的个人博客

这是一个视频教程,讲的十分详细(感谢羊哥!),我当初也是跟着这个视频进行搭建的。

在这个视频最后,还给出了主题配置的步骤,如果你不喜欢视频中的主题,可以去GitHub上搜索 hexo theme ,就能找到许多好看的主题,配置方式与视频中类似。

配置图床

完成以上步骤后,博客基本就初步搭建好了,我们可以编写Markdown文件放进博客文章目录blog/source/_posts中,但是这下又出现了一个问题,博客中的图片应该怎么办呢?

.md文件中的图片都是引用的,图片是放在本地的,那我们怎么在博客中引用图片呢?

这就需要图床了,图床有很多,有使用Gitee或GitHub解决了,也有使用其他方式解决的,我选择的是国内的阿里OSS

既然如此,你得先注册一个阿里云账号,具体步骤就不说,这个很简单。

然后你可以查看这篇教程: 阿里云OSS PicGo 配置图床教程 超详细

上文给出的链接是配置阿里云OSS,然后将其与PicGo结合,这个就看个人使用习惯了,可以使用PicGo也可以不使用,我们重点是配置阿里云OSS的方法。

对了,还有一点,配置阿里云OSS不用购买什么流量包、储存包(这个我记得是不用购买的,我也忘记了,相信你肯定懂得随机应变😘),直接用就完事了,记得往里面充值几块钱,阿里云OSS默认是按量收费的,我们博客访问量较低,使用默认的就行。


当然,如果你想白嫖,可以使用 GitHub 或 Gitee 来搭建一个免费的图床,具体做法可以参考羊哥的这篇文章:

使用GitHub作为个人博客免费图床

使用emoji表情

这下图片的事情解决了,你会发现我在博客中使用了一些emoji表情,很有意思,这些表情可以直接在Typora中使用,但是部署到博客上就成了:kissing_heart:这样一段字符串,解决办法很简单,装一个插件就可以了。

具体做法参考这篇文章: Hexo中使用emoji表情

emoji表情的代码也可以参考我写过的 Typora和Markdown使用方法的文章。

主题配置

接下来就是美化我们的博客了,选取一个自己喜欢的主题,然后用它就完事了!

本站使用的是hexo-theme-butterfly主题进行美化,如果你不喜欢这个主题,可以去GitHub上搜索 hexo theme ,也可以找到许多好看的主题。

基本上主题都有对应的使用文档,一些主题的配置就不在此多说了,可以参看下面这些链接:

butterfly文档: hexo-theme-butterfly 安装文档(一)快速开始

butterfly主题魔改: Hexo博客之butterfly主题优雅魔改系列

下载了主题使用后,你会发现菜单栏的选项很少,只有什么归档之类的,甚至分类、标签都没有,你需要自己添加这些选项,做法在主题文档中也给出了,再给你一个参考链接: 短短1天我学会了如何修改Butterfly的配置文件

主题的配置文档一定要认真读 ,内容很多,不同人的表述方式不同,认真读就知道作者说的什么意思了。

主题配置补充

虽然主题文档写的很详细了,但我还是有些地方需要说明,以免部分小伙伴看不懂主题文档,我们在此以butterfly主题的文档为参考,其他主题的文档应该也差不多。

在主题文档中,会涉及到这几个页面:

front-matter

这里出现了两种页面Page页和Post页,那它们指的是什么意思呢?(Front-matter指的是啥可以看主题文档的说明)

Page页指的就是我们的博客文章详情页 ,比如下图是博客文章在首页的样子,类似一张卡片,点一下可以查看文章的详细内容,跳转到的页面就是Page页(文章详情页)。

文章首页卡片:

文章首页卡片

Page页(文章详情页):

Page页

那Post页又是什么呢?

Post页就是我们点击菜单栏选项后跳转的页面。 Post页都是使用命令hexo new page xxxx创建的页面,首页是主题本来就有的,因此不属于Post页。

菜单栏选项(首页不属于Post页):

菜单栏选项

我们选中其中其中一个点击进去,就可以进入Post页,比如点击 “ 标签 ” :

标签页

进入了标签页,也叫Post页。

相信你明白了Page页和Post页的区别,你就可以对不同的页面进行不同的配置了。


我还要说明一下配置文件的区别

我们下载Hexo后,进入博客文件夹,会有这样一个名为_config.yml文件,目录结构:

主配置文件

这里的这个_config.yml文件是主配置文件,我们添加了一些插件之类的就要在里面添加一些配置。

在主题文件中,可能也有一个名为_config.yml的文件,目录:themes/主题名/_config.yml

主题配置文件

我们管这个_config.yml文件叫主题配置文件,每一个主题都有一个主题配置文件,不同的主题中主题配置文件的内容不一样。我们需要对主题进行一些设置时,一般都是在主题配置文件中进行修改。

还有很重要的一点: 这些配置文件都是YML文件,我们要注意.yml文件的正确书写方式,每个英文冒号后都要加一个空格,同级配置前的缩进保持一致。(如果你学过SpringBoot应该就懂我的意思了)


如果你阅读完上述内容,并成功实现了,一个博客基本就搭建完成了! 🎉

下文是我在搭建博客时遇到的一些问题和一些魔改,感兴趣可以阅读一下!😎

1. 问题

1.1 hexo-abbrlink插件

由来

Hexo框架中文章链接默认的生成规则是::year/:month/:day/:title,即:按照年、月、日、标题来生成的。如果标题中没有中文还好,如果有中文,URL链接也会是中文,但是复制后的链接会变成URL 编码形式表示的ASCII 字符(十六进制格式)。很长一串,十分不好看,这时候可以选用安装hexo-abbrlink插件来解决。

具体的安装方式参考:Hexo+Github 博客butterfly 和 matery 主题 搭建完全教程

问题描述

安装好插件后,给文章的font部分添加自定义abbrlink即可实现自定义文章链接。

但是我在第一次自定义abbrlink时,没有将自定义的地址书写规范。有一天发现后,便前往文章修改,修改之后使用hexo -g命令可以看到修改后的文件,但是推送到Gitee依旧是没有修改的,这就导致了在博客点击修改完的文章直接显示 404 错误。


问题示例:

修改前: abbrlink:Basic-CSS3-knowledge

修改为:abbrlink:Basic-CSS3-Knowledge

然后一波操作:hexo cleanhexo ghexo d,但在Gitee的仓库可以看到,文件的名字依旧没有改变,仍然是: abbrlink:Basic-CSS3-knowledge。然后前往博客网址,点击修改了地址的文章,发现出现 404 错误,地址栏是:https://xxxxxxx/Basic-CSS3-knowledge。😠

同时,在执行hexo d时,出现错误:😡

1
The file will have its original line endings in your working directory.

解决方法

  • 前往博客的文件夹,删除文件夹.deploy_git
  • 运行命令:git config --global core.autocrlf false
  • 然后继续一波操作:hexo cleanhexo ghexo d
  • 前往Gitee仓库查看,名字已经更改。

这种方式属于强制推送,会让你仓库的提交次数清零。


除了以上这种方式,还可以直接前往博客的文件夹,找到.deploy_git文件夹,在其中找到文章标题对应的文件夹,将文件夹名修改。

1.2 无法显示社交图标

问题描述

根据Butterfly的文档,可以在侧边栏添加社交图标,但是我的浏览器无法显示这些图标。同时,在文章页末尾可以设置分享按钮以分享文章,但我的浏览器也无法显示。最奇怪的是,使用手机是可以看到这些内容的。

我曾一度认为是主题的Bug,一直等待修复,直到一次升级主题,使用其他浏览器访问了博客,奇怪的事情发生了:社交图标和分享按钮可以正常显示。

那么很显然就是浏览器的问题了。

问题原因

我最开始使用的是Chrome(谷歌浏览器),无法正常显示,然后使用QQ浏览器可以正常访问。难道是Chrome的问题?

可以说是,可以说不是。

经过短暂的排查,我在Chrome上安装了广告拦截插件AdGuard,就是因为这个插件对上面的内容进行了拦截才无法正常显示。

解决方法

  • 不使用插件AdGuard
  • 更换广告拦截插件为AdBlock
  • 自定义插件AdGuard拦截规则

错误关联

因为插件AdGuard的拦截效果,也导致文章搜索功能迟迟无法成功添加。

本地搜索插件一直被拦截,我曾一度以为是搜索插件或主题的问题。

1.3 本地运行错误

当我们下载好 hexo,执行 hexo init 并换上喜欢的主题后,执行:

1
2
3
hexo clean
hexo g
hexo s

在浏览器地址栏输入 localhost:4000 进行本地访问时,浏览器页面上出现以下字样,且没有跳转至博客界面:

1
extends includes/layout.pug block content include ./includes/mixins/post -ui.pug #recent posts.recent posts +postUI include includes/pagination.pug

只需要在博客目录下打开 git bash,然后下载以下插件:

1
npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

最后再次执行:

1
2
3
hexo clean
hexo g
hexo s

再次访问 localhost:4000 即可成功本地运行!

1.4 Node.js 版本过高?

当我们刚进行完 hexo init 后,会运行 hexo v 命令,查看一下 Hexo 的版本,结果出现以下问题:

1
2
Warning: Accessing non-existent property 'column' of module exports inside circular dependency
Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

或者当我们执行 hexo g 时,出现以下问题:

1
2
Warning: Accessing non-existent property 'column' of module exports inside circular dependency
Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

出现以上两种问题很有可能是 Node.js 版本过高的原因,建议换成低版本的 Node.js。

比如:我出现上述错误时,Node.js 的版本是 14.15,最后我将其卸载重新安装了12.18 版本的 Node.js 就解决了问题。

总的来说,不建议使用版本过于高的软件,指不定会出现什么错误,而且很有可能还找不到资料。

1.5 重建博客时运行错误

情况一:未按要求创建文件夹

在选定目录下执行完 hexo init 命令后,会生成博客的基本骨架,这个时候的 source 目录下有且仅有一个名为 _posts 的目录。如果曾经搭建过 Hexo 博客,很有可能会直接将旧博客目录下的 source 文件夹直接复制到新的博客目录下,但这很有可能会出现问题。

建议 在博客目录下执行 hexo new page tags 类似的命令生成对应的文件夹。前面的命令就是生成名为 tags 的文件夹,用于存放博客文章的分类,如果想要生成其他文件夹,只需要更改 tags 即可。

当然,如果曾经搭建过博客,执行命令生成完对应的目录后,可以将旧文件夹中的 index.md 等文件直接拷贝到对应的文件夹中。

如果没有搭建过博客,且使用了 butterfly 主题,可以参考:Butterfly 安裝文檔(二) 主題頁面

情况二:插件缺失

如果备份了旧博客目录资源,且由于某种原因需要重新搭建一个 Hexo 博客,并直接将旧博客的配置文件(全局配置文件、主题配置文件)直接复制到新的博客目录下时,运行 hexo g 后很有可能因为 缺失某些插件 而导致出现某些错误。

如果出现错误,建议检查插件是否缺失。

在此列举一下本站所使用的插件:

1、butterfly 主题必备渲染插件: pug 以及 stylus 的渲染器,安装命令:

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

2、文章字数统计插件,安装命令:

1
npm install hexo-wordcount --save

3、本地搜索插件,安装命令:

1
npm install hexo-generator-search --save

4、Markdown 渲染器与 emoji 表情显示插件,安装命令:

1
2
3
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
npm install markdown-it-emoji --save

5、地址栏美化,文章永久链接插件,安装命令:

1
npm install hexo-abbrlink --save

6、RSS 订阅插件,安装命令:

1
npm install hexo-generator-feed --save

7、Git 部署插件,安装命令:

1
npm install --save hexo-deployer-git

2. 一些魔改

2.1 移除文章页侧边栏滚动条

本次修改基于Butterfly主题!

前往blog – themes – Butterfly – layout – includes – sidebar.png进行修改,在下图所示的位置添加:(style="overflow: hidden;")即可。

移除文章侧边栏滚动条

2.2 查看网页RSS

本次修改基于Butterfly主题 3.0.0 !

实现:增加社交图标RSS,点击可查看网页RSS。

操作步骤

  • 下载插件hexo-generator-feed
1
npm install hexo-generator-feed --save
  • 在hexo的主配置文件_config.yml中任意位置添加以下代码:
1
2
3
4
5
6
7
8
9
10
11
12
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png
autodiscovery: true
template:
  • 修改butterfly主题配置文件_config.yml ,添加RSS的图标:
1
2
social:
fa fa-rss: /atom.xml || RSS链接

参考链接:hexo-generator-feed

2.3 分割线图标更换

本次修改基于Butterfly主题 3.0.0 !

将图标更换为“太空飞船”。

操作步骤

修改butterfly主题配置文件_config.yml

1
2
3
4
hr_icon:
enable: true
icon: '\f197' # the unicode value of Font Awesome icon
icon-top: -10px

icon-top常用数值:

-20px:图标位于分割线上方

-10px:图标位于分割线中间

0px:图标位于分割线下方

效果图:

分割线图标

2.4 实现 CheckBox

前言

Hexo 默认的 Markdown 渲染引擎名为:hexo-renderer-marked,但这个引擎无法实现 emoji 表情,因此我将它换了,使用了另外一种渲染引擎。这个引擎名为:hexo-renderer-markdown-it,据说它比默认的引擎渲染速度更快,它也支持很多插件,可以实现 emoji 表情的使用。

某日,我想利用Markdown实现 CheckBox,列出自己的计划,但是 markdown-it 引擎默认是不支持 CheckBox,需要使用第三方插件。

实现

在 GitHub 上选了三种插件,最终选择了 markdown-it-checkbox 插件,另外的两个插件是 markdown-it-task-listsmarkdown-it-task-checkbox,但这两个插件的使用效果都不太好。

Markdown 语法必须是 - [ ] 才会渲染成功,但是这样前面又会多出 <ul> 无序列表的黑点,不符合我的审美(或许是我使用方式出了问题)。

因此最终我选择了 markdown-it-checkbox 插件来渲染出 CheckBox,但这个插件也有问题,需要进行个人美化。

在博客根目录下安装插件:

1
npm install markdown-it-checkbox --save

在博客主题文件夹下 \source\css 创建一个 CSS 文件,将下面的代码复制到文件中,最终在主题配置文件引用这个 CSS 文件(这里是以 Butterfly 主题为例,其他主题目录或许存在差异)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
input[type="checkbox"] {
display: none !important;
}
input[type="checkbox"] + label::before {
content: '\a0';
display: inline-block;
margin-right: 0.2em;
border: 1px solid;
border-radius: 0.2em;
width: 0.8em;
height: 0.8em;
vertical-align: 0.1em;
text-indent: 0.1em;
line-height: 0.7;
cursor: not-allowed;
}
input[type="checkbox"]:checked + label::before {
content: '\2714';
}

到此,美化就完毕了。这个时候的 CheckBox 并不是只读的,如果想要设置成只读,可以在博客主题文件夹下 \source\js 创建一个 JS 文件,将下面的代码复制到文件中,最终在主题配置文件引用这个 JS 文件(这里是以 Butterfly 主题为例,其他主题目录或许存在差异)。

1
2
3
4
5
6
/*设置 checkbox 为只读*/
$(function() {
$("input[type='checkbox']").click(function() {
this.checked = !this.checked;
});
});

最终效果可以在本站的【计划】一栏中看到效果。

从 Butterfly 3.4.0 开始,移除了 JQuery,因此我们需要采用原生 JS 的方式实现上述 JQuery 代码:

1
2
3
4
5
6
7
8
9
10
window.onload = function(){
var inputs = document.getElementsByTagName("input");
for(var i = 0;i < inputs.length; i++){
if(inputs[i].type == "checkbox"){
inputs[i].onclick = function() {
this.checked = !this.checked;
}
}
}
}

语法

这种插件的 CheckBox 语法和 Typora 语法不一样。

Typora 语法是:-空格[空格] 实现。

该插件语法是:[空格] 实现,就是没有前面的 -

要实现选择的话,[x] 就可以了。

2.5 添加图片边框

本节内容基于 Hexo 主题 Butterfly 5.2.1,不同的主题、不同的版本使用的 CSS 选择器可能不同,请根据自己的情况进行修改。

在博客主题文件夹下 \source\css 创建一个 CSS 文件,将下面的代码复制到文件中,最终在主题配置文件引用这个 CSS 文件(这里是以 Butterfly 主题为例,其他主题目录或许存在差异)。

1
2
3
4
5
6
7
/* 文章图片增加边框*/
#post img[class^=entered][class$=loaded]{
display: block;
border: 5px solid #ddd;
padding: 5px;
background: #fff;
}