沐光

记录在前端之路的点点滴滴

博客搭建

前言

最近想着使用 github.io 来存放个人博客,因此参考一些博客搭建的文章,我也照着搭建了一个,这里记录一些搭建的配置,以便于主题替换升级时的参考。

需要的环境

  1. 个人的 github 账号
  2. 系统环境
    • git(需要 sshkey 绑定关联 github)
    • node & npm(需全局安装 hexo-cli)
    • vscode

生成 ssh 命令: ssh-keygen -t rsa -C "邮箱地址"

博客配置

这里分为两部分的配置,一部分为 hexo init 生成项目时的根目录里的 config.yml,这里描述为“用户信息”;另外一个是安装了 hexo 主题时,theme/next 文件夹内的 config.yml,这里描述为“主题信息”。

用户信息配置

网站配置

配置中文和中国时区

1
2
3
# Site
language: zh-CN
timezone: Asia/Shanghai
关联 Github

发布地址关联,需要在 github 中创建 github.io 仓库

1
2
3
4
deploy:
type: git
repository: git@github.com:githubName/githubName.github.io.git
branch: master
主题选用

这里选用的是 hexo-theme-next 主题

1
2
3
4
# 进入博客项目创建 theme 文件
mkdir themes
# 拷贝主题
git clone https://github.com/theme-next/hexo-theme-next themes/next

之后修改主题

1
theme: next

所有主题仓库传送门

字数统计

安装插件

1
yarn add hexo-symbols-count-time

用户信息添加如下配置:

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
exclude_codeblock: true

注:需要清空缓存重启:hexo clean & hexo g & hexo s

主题信息配置

页面样式
1
2
3
4
5
6
7
# schema 更改选中值
scheme: Gemini

## next 插件扩展
vendors:
# ...
# Some contents...

注: plugin 得自己添加,theme-config 中的插件添加参考 https://theme-next.org/docs/getting-started/

菜单扩展
1
2
3
4
5
6
7
8
9
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
schedule: /schedule/ || calendar
sitemap: /sitemap.xml || sitemap
# commonweal: /404/ || heartbeat

注意:将未启用的启用需要先创建对应的文件夹,例如:

1
2
3
4
hexo new page "about"
## 此会在 source 文件夹内创建一个 about 文件夹,默认有一个 index.md
## 修改此 index.md,在顶部的 data 下面新增一行 type: "about"
## 其余的可类比

注:type 与文件夹保持一致,about、categories、tags 需要 type

tag 云添加背景色

更改 tag 云配置

1
2
3
4
5
6
7
8
# TagCloud settings for tags page.
tagcloud:
# All values below are same as default, change them by yourself.
min: 14 # Minimun font size in px
max: 14 # Maxium font size in px
start: "#fff" # Start color (hex, rgba, hsla or color keywords)
end: "#fff" # End color (hex, rgba, hsla or color keywords)
amount: 200 # Amount of tags, change it if you have more than 200 tags

theme/next/layout 文件夹中添加文件 tag-color.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
27
28
29
30
31
32
33
<script type="text/javascript">
var alltags = document.getElementsByClassName('tag-cloud-tags');
var tags = alltags[0].getElementsByTagName('a');
var lastPos = tags.length - 1;
for (var i = lastPos; i >= 0; i--) {
var r = Math.floor(Math.random()*75+130);
var g = Math.floor(Math.random()*75+100);
var b = Math.floor(Math.random()*75+80);
tags[i].style.background = "rgb("+r+","+g+","+b+")";
}
</script>

<style>
.tag-cloud-tags {
font-family: Helvetica, Tahoma, Arial;
text-align: center;
counter-reset: tags;
}
.tag-cloud-tags a {
border-radius: 6px;
padding-right: 5px;
padding-left: 5px;
margin: 8px 5px 0px 0px;
}

.tag-cloud-tags a:hover {
border: none;
box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
transform: scale(1.1);
/*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/
transition-duration: 0.15s;
}
</style>

然后修改同级文件 page.swig,找到 class="tag-cloud",将该部分底部引入改配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="tag-cloud">
<div class="tag-cloud-title">
{{ _p('counter.tag_cloud', site.tags.length) }}
</div>
<div class="tag-cloud-tags">
{{ tagcloud({
min_font : theme.tagcloud.min,
max_font : theme.tagcloud.max,
amount : theme.tagcloud.amount,
color : true,
start_color: theme.tagcloud.start,
end_color : theme.tagcloud.end})
}}
</div>
{% include 'tag-color.swig' %}
</div>
其它扩展

官网以有详细的配置,详见 next-theme 官网配置,传送门

文档