沐光

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

博客搭建

更新于 分类于 Valine： 本文字数： 883 阅读时长 ≈ 1 分钟

前言

最近想着使用 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, 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 官网配置，传送门

文档