我的博客的诞生（二）

发表于 更新于 分类于 阅读次数： 本文字数： 9.3k 阅读时长 ≈ 8 分钟

本文记录和讲解一下我的博客是如何进行个性化设置和配置的，可供参考。

本文对于文件（代码）变动的描述方式为 - 指删掉该行，+ 指增加改行（如果你是直接复制此行，请注意删掉 + 和上下文对齐），... 表示省略上下文。另外，本文对于文件（代码）变动的描述只针对当时的文件（代码）版本，请根据实际情况决定对自己的相应文件（代码）进行变动。

个性化设置和配置前的提示

个性化设置和配置了一处自己的博客，可以通过本地部署的方式（hexo s）查看相应效果，甚至可以直接修改一处，刷新一下查看效果，等都设置和配置完毕了再部署到 Github Pages 等平台（hexo g -d）。

Hexo 的个性化设置和配置

NexT 主题的下载和设置

默认的 landscape 主题并不好看，在网上搜索了一下，发现 NexT 主题是最受欢迎的。

在<博客构建目录>下进入终端，输入如下命令，等待 NexT 下载到当前文件夹下 themes 下 next 下。

1
git clone https://github.com/next-theme/hexo-theme-next themes/next

下载完成后，编辑 Hexo 的配置文件(_config.yml)：

1
2
3
4
5
6
7
...
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
-theme: landscape
+theme: next
...

原来文件夹 themes 下的 landscape 就可以删掉了，如果它还在的话。如果你是 2020 年 12 月 11 日之后开启个人博客之旅的话，默认的 landscape 主题是通过 npm 安装的，请行以下命令卸载掉它并手动删除其配置文件 _config.landscape.yml ，当然你想保留也行，毕竟美化的尽头是默认（bushi）。

1
npm uninstall hexo-theme-landscape

配置博客基本信息

编辑 Hexo 的配置文件，个性化配置自己的站点信息：

1
2
3
4
5
6
7
8
9
10
...
# Site
-title: Hexo
-subtitle: ''
-description: ''
-keywords:
-author: John Doe
-language: en
timezone:
...
1
2
3
4
5
6
7
8
9
10
...
# Site
+title: ql's blog
+subtitle: It's a beautiful day!
+description: 一尘不染不是不再有尘埃，而是尘埃让它飞扬，我自做我的阳光。
+keywords: 学习与生活
+author: ql
+language: zh-CN
timezone:
...

效果图：

配置博客站点基本信息.png

配置永久链接

默认的永久链接是年月日加文章标题，而我们文章的标题一般都是中文的，但是永久链接中的标题并不是中文的，而是转码过的，这样非常不利于链接的分享。

我的解决办法是配置永久链接为年月日加文章标题的英文翻译，编辑 Hexo 的配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
...
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
-url: http://yoursite.com
+url: https://blog.xxx.xx
root: /
-permalink: :year/:month/:day/:title/
+permalink: :year/:month/:day/:trans/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
...

之后记得在每篇博文的开头部分加上 trans 和文章标题的英文翻译：

trans.png

更换默认的 Markdown 渲染器[1]

默认的 Markdown 渲染器不支持脚注，于是我们执行以下命令换一个渲染器。

1
2
npm uninstall --save hexo-renderer-marked
npm install --save hexo-renderer-markdown-it

编辑 Hexo 的配置文件，追加以下内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
+# Markdown-it config
+## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
+markdown:
+  # 渲染设置
+  render:
+    # 置为true时，html内容保持不变；置为false时，html内容将被转义成普通字符串
+    html: true
+    # 是否生成与XHTML完全兼容的标签（不懂是什么意思）
+    xhtmlOut: false
+    # # 置为true时，每个换行符都被渲染成一个<br>（即Hexo的默认表现）；置为false时，每个换行符都被忽略，但两个换行符即空行可正常创建段落（GFM的默认表现）
+    breaks: false
+    # 是否自动识别链接并把它渲染成链接
+    linkify: true
+    # 是否自动识别印刷格式（例如(c)渲染为©）
+    typographer: true
+    quotes: '“”‘’'
+  # 设置所需插件
+  plugins:
+    - markdown-it-footnote

NexT 的个性化设置与配置

创建 NexT 的配置文件：

1
cp themes/next/_config.yml _config.next.yml

自 Hexo v5 开始，可以将主题的配置文件复制到博客构建目录下并重命名为 _config.<主题名字>.yml，创建一个新的配置文件，这样以后通过git pull更新主题时就不会发生冲突。

配置站点图标

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
...
favicon:
-  small: /images/favicon-16x16-next.png
-  medium: /images/favicon-32x32-next.png
-  apple_touch_icon: /images/apple-touch-icon-next.png
-  safari_pinned_tab: /images/logo.svg
...
1
2
3
4
5
6
7
...
favicon:
+  small: <自己图床的地址或者本地地址>
+  medium: <自己图床的地址或者本地地址>
+  apple_touch_icon: <自己图床的地址或者本地地址>
+  safari_pinned_tab: <自己图床的地址或者本地地址>
...

效果图：

配置站点图标.png

在页脚设定建站年份

编辑 NexT 的配置文件：

1
2
3
4
5
6
...
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
-  #since: 2015
+  since: 2020
...

效果展示（从设定的起始年份到当前年份）：

建站年份

在页脚添加备案信息

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
  # Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
  beian:
-    enable: false
+    enable: true
-    icp:
+    icp: 京ICP备20031573号-2
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url:
...

效果展示：

备案信息

选择主题风格

编辑 NexT 的配置文件（喜欢什么风格的话把前面的 # 去掉即可，注意只能启用一种风格）：

1
2
3
4
5
6
7
...
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
...

各种主题风格展示：

MuseMist

Pisces

Gemini

添加标签和分类页面

编辑 NexT 的配置文件，添加标签和分类菜单项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
-  #tags: /tags/ || fa fa-tags
+  tags: /tags/ || fa fa-tags
-  #categories: /categories/ || fa fa-th
+  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat
...

在<博客构建目录>下进入终端，执行如下命令。

1
hexo new page tags

编辑生成的 index.md：

1
2
3
4
---
-title: tags
date: 2020-01-24 22:20:25
---
1
2
3
4
5
---
+title: 标签
date: 2020-01-24 22:20:25
+type: tags
---

在<博客构建目录>下进入终端，执行如下命令。

1
hexo new page categories

编辑生成的 index.md：

1
2
3
4
---
-title: categories
date: 2020-01-24 22:21:09
---
1
2
3
4
5
---
+title: 分类
date: 2020-01-24 22:21:09
+type: categories
---

编辑文章模板文件（为<博客构建目录>下 scaffolds 下 post.md）：

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags:
+categories:
---

以后想写文章（执行hexo new post <自定义名>，编辑相应生成的<自定义名>.md）时，只需自定义 tags 和 categories 的值（注意键值之间有空格），该文章就会在标签页面和分类页面被标记和分类起来。

设置侧边栏总是显示（只适合风格 Muse 或 Mist）

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
8
9
...
  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
-  display: post
+  display: always
...

头像

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
...
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
-  url: #/images/avatar.gif
+  url: <自己图床的地址或者本地地址>
  # If true, the avatar will be dispalyed in circle.
-  rounded: false
+  rounded: true
  # If true, the avatar will be rotated with the cursor.
-  rotated: false
+  rotated: true
...

添加社交链接

编辑 NexT 的配置文件，个性化添加自己的社交链接：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
+  blog: https://blog.imql.life/ || fas fa-blog
+  www: https://www.imql.life/ || fas fa-house-user
+  nav: https://nav.imql.life/ || fas fa-location-arrow
+  space: https://space.imql.life/ || fas fa-cube
-  #GitHub: https://github.com/yourname || fab fa-github
+  Github: https://github.com/ql-isaac || fab fa-github
-  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
+  E-Mail: mailto:834471527@qq.com || fa fa-envelope
...

添加友情链接

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
...
links:
-  #Title: http://yoursite.com
+  <标题1>: <地址1>
+  <标题2>: <地址2>
+  <标题3>: <地址3>
...

启用文章底部标签图标

编辑 NexT 的配置文件：

1
2
3
4
5
...
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
-tag_icon: false
+tag_icon: true
...

效果展示：

tag

集成在线编辑

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
8
...
# Post edit
# Easily browse and edit blog source code online.
post_edit:
-  enable: false
-  url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name # Link for view source
-  #url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name # Link for fork & edit
...
1
2
3
4
5
6
7
...
# Post edit
# Easily browse and edit blog source code online.
post_edit:
+  enable: true
+  url: https://github.dev/<自己的GitHub用戶名>/# # Link for view & edit
...

设置文本对齐方式为左对齐

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
8
9
...
# Set the text alignment in posts / pages.
text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
-  desktop: justify
+  desktop: left
-  mobile: justify
+  mobile: left
...

代码块设置

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: default
    dark: stackoverflow-dark
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
-    enable: false
+    enable: true
    # Available values: default | flat | mac
    style:
...

以上设置为个人偏好，请查看注释，通过本地部署的方式查看确定自己的偏好。

回到顶部按钮设置

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
8
9
...
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
-  scrollpercent: false
+  scrollpercent: true
...

在页面顶部显示浏览进度

编辑 NexT 的配置文件：

1
2
3
4
5
6
...
# Reading progress bar
reading_progress:
-  enable: false
+  enable: true
...

在右上角添加渲染本站的源码仓库传送门

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
8
9
...
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
-  enable: false
+  enable: true
-  permalink: https://github.com/yourname
+  permalink: https://github.com/<自己的GitHub用戶名>
  title: Follow me on GitHub
...

字体

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
font:
-  enable: false
+  enable: true
...
  # Global font settings used for all elements inside <body>.
  global:
    external: true
-    family: Lato
+    family:
    size:
...
  # Font settings for posts (.post-body).
  posts:
    external: true
-    family:
+    family: Noto Serif SC
...

优雅地查看图片

编辑 NexT 的配置文件：

1
2
3
4
5
6
...
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
-fancybox: false
+fancybox: true
...

开启图片懒加载

编辑 NexT 的配置文件：

1
2
3
4
5
6
...
# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://github.com/ApoorvSaxena/lozad.js
-lazyload: false
+lazyload: true
...

开启 busuanzi 统计

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
...
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
-  enable: false
+  enable: true
...

添加搜索功能

在<博客构建目录>下进入终端，输入如下命令安装 hexo-generator-searchdb。

1
npm install --save hexo-generator-searchdb

开启搜索功能：

1
2
3
4
5
6
7
...
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
-  enable: false
+  enable: true
...

设置 Note tag

编辑 NexT 的配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
...
# Note tag (bootstrap callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
-  style: simple
+  style: flat
-  icons: false
+  icons: true
...

参考

  1. 为 Hexo 博客添加脚注插件 ↩︎