Blog_Building_Log

发表于 分类于

这几日打算再优化优化博客，但有的功能就是思来想去无从下手，一看官网竟然有插件实现了想要的功能，遂将从前自己实现的功能都查了查，发现都有对应实现！想想已然被我改的面目全非的布局、配置文件，决定重新构建一下博客环境，并尽可能使用插件实现功能。当然，日志是必要的，不然但我发现博客环境发生问题时，就无处下手了。

界面调控

对Next主题的显示内容，如邮箱等内容进行了设置

Live2d!

Live2d用到了插件live2d-widget，需按照以下指令进行安装：

1
2
3
4
5
# 安装插件
npm install live2d-widget --save

#安装模型
npm install live2d-widget-model-shizuku --save

并在Hexo配置文件中添加如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#二次元
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-shizuku
  display:
    position: left
    width: 225
    height: 450
  mobile:
    show: false

搜索

添加搜索功能分为两个部分，1)开启hexo的搜索功能2)在主题中开启搜索入口

1
2
3
4
5
6
# 1)开启hexo的搜索功能
search:
  path: search.json
  field: post
  format: html
  limit: 1000
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 2)Next主题下，开启入口

# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true #此处改为True
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

主页生成器

通过插件hexo-generator-index-custom，生成主页，并实现hide与top功能

1
2
3
4
5
# 卸载自带的
npm uninstall hexo-generator-index

# 安装额外插件
npm install hexo-generator-index-custom --save 
1
2
3
4
5
6
7
8
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  pagination_dir: page
# pagination_dir: URL format.
# default: 'page'
# awesome-page makes the URL ends with 'awesome-page/' for second page and beyond.

自动目录化

使用hexo-auto-category插件实现更具博客路径生成目录。首先安装插件。

1
npm install hexo-auto-category --save

然后在hexo的配置文件中写入如下配置：

1
2
3
4
5
6
# Generate categories from directory-tree
# Dependencies: https://github.com/xu-song/hexo-auto-category
# depth: the max_depth of directory-tree you want to generate, should > 0
auto_category:
 enable: true
 depth:

添加目录与标签

目录与标签功能无需另外安装插件，直接配置启用即可。

首先建立新Page

1
2
3
hexo new page categories

hexo new page tags

修改其内容，设置type属性

1
2
3
4
5
6
# categories/index.md
---
title: categories
type: "categories"
---

1
2
3
4
5
6
# categories/index.md
---
title: tags
type: "tags"
---

markdown绘图支持

我们常常使用markdown中的mermaid进行一些流程图、UML图的绘制，这在hexo中需要hexo-filter-mermaid-diagrams插件支持。

1
npm install hexo-filter-mermaid-diagrams --save
1
2
3
4
5
6
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "7.1.2" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

文件结构管理

最开始写hexo博客时，我按照hexo的默认设置，将所有博客直接存放在source/_post文件夹下。时间长了，博客大量堆积，再加之每篇博客都有对应的资源文件夹，_post文件夹下变得混乱不堪，难以寻址。于是，我计划对博客的源文件位置进行从新编排。

过程中用到一个插件：

  • hexo-auto-category: 根据文章所在文件夹自动设置目录

然后，对生成文件路径进行配置：

首先修改permalink，这边以所属目录为根目录，保证服务器文件的简洁性，另外后续使用post_title，而非title,避免源文件的相对路径影响到服务器文件的相对路径。

1
permalink: :category/:post_title/

然后，再修改new_post_name为:title/:title.md。这样可以生成如下文件结构:

  • title:
    • title-assets
    • title.md

可以保证博客的资源文件与博客文件存储在博客名下的文件夹内，避免分离。

1
new_post_name: :title/:title.md

Next部分

在next部分中，我们可以对next主题界面中的元素进行更改与修饰。

在menu中，可以通过配置theme配置文件添加新的选项——Game、Academic、Photos等等。

如下，我们添加了一个选项game，将其连接至根目录/，并附加图标fa fa-gamepad——此处图标来源于FontAwesome。

1
2
3
4
5
6
7
8
9
10
11
12
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  game: / || fa fa-gamepad
  #dairy: / || fa fa-l
  academic: / || fa fas fa-graduation-cap
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat