Rancho Blog

知行合一，致良知！

0%

Hexo使用优化

发表于 更新于 分类于 | 字数： 2k

说明

1
2
站点配置文件：位于站点根目录下，主要包含Hexo本身的配置
主题配置文件：位于主题目录下，主要用于配置主题相关的选项

版本说明, 当前配置基于以下版本进行修改，hexo代码环境打包在docker中，避免生产环境改变带来的问题。

1
2
3
hexo: 5.4.0
hexo-cli: 4.2.0
next: 7.8.0

hexo的一些规则

  1. 放在source下所有不以下划线开头的文件，在hexo g的时候会拷贝到public下面
  2. hexo默认渲染所有的html和markdown文件

使用next主题

网上一搜大部分都是Hexo+next的使用，本着站在前人的肩膀上原则，使用next主题。
主题下载：git clone https://github.com/Rancho333/hexo-theme-next.git themes/next
启用主题，打开站点配置文件，找到theme字段，修改为如下： 

1
theme: next

选择scheme

next提供4种不同外观，找到scheme字段，启用其中一种scheme，这里我选择Gemini. 

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

设置语言

在站点配置文件中找到language字段，修改为(中文，英文为：en)：

1
language: zh-CN

注意需要在themes/next/languages/下面有对应的语言文件，否则不生效（使用默认）

设置侧栏

找到sidebar字段，修改如下： 

1
2
3
4
5
sidebar:
  #靠左放置
  position: left
  #显示时机
  display: always

设置头像

在主题配置文件中，找到avatar字段，值设置成头像的链接地址

设置作者昵称

在站点配置文件中，找到author字段，进行设置

修改网址图标

可以在https://www.iconfont.cn/上找合适的图标，下载两个尺寸(16x16和32x32)的png格式图片，放到主题下的images文件夹中。在主题配置文件中找到：

1
2
3
favicon:                         
  small: /images/R-16x16.png  
  medium: /images/R-32x32.png

替换small和medium两项，分别对应两种尺寸的图标。

给文章添加”categories”属性

创建categories页面 

1
hexo new page categories

找到source/categories/index.md文件，里面的初始内容如下：

1
2
3
4
---                                       
title: categories
date: 2019-07-12 12:14:44
---

添加type: "categories"到内容中，添加后内容如下：

1
2
3
4
5
---                                               
title: categories
date: 2019-07-12 12:14:44
type: "categories"
---

给文章添加categories属性，打开任意一篇md文件，为其添加概述信，添加后内容如下：

1
2
3
4
5
6
7
8
9
---                                              
title: Linux查找so文件所在pkg 
date: 2019-07-14 20:17:03
categories: 
- Linux相关
tags:
- Linux
- so文件
---

hexo一篇文章只能属于一个分类，如添加多个分类，则按照分类嵌套进行处理。

给文章添加”tags”属性

创建tags页面

1
hexo new page tags

后面的操作与添加categories属性类似，一篇文章可以添加多个tags

关于图片

有时候会分享md文件给别人，这时候要求图片的标识是因特网可达的，而不能使用资源文件夹这种方式。可以将图片放在public/pictures文件夹中，hexo clean命令会删除该文件夹。图片调用：![](https://rancho333.github.io/pictures/arp_protocol.png)

  1. 将图片源文件放到source/pictures路径下（源码可以备份，hexo clean命令会删除public文件夹）
  2. hexo g会将source下面非下划线开头的文件或文件夹拷贝到public下面
  3. public里面的内容会上传到master分支，所以我们可以使用上面的链接进行访问

文章搜索功能

安装搜索功能插件：

1
npm install hexo-generator-searchdb --save

在站点配置文件中添加：

1
2
3
4
5
search:                                                                                                                                                                                          
  path: search.xml    搜索文件path，所有的可搜索内容都静态写到了该文件中
  field: post         搜索范围
  format: html
  limit: 100         限制搜索的条目

在主题配置文件中：

1
2
local_search:                                                                                       
  enable: true

查看插件以及脚本

hexo --debug可以查看插件以及使用的脚本

添加看板娘

安装插件hexo-helper-live2d
安装看板模型live2d-widget-model-shizuku
在站点配置文件中增加如下配置

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
# Live2D
# https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/ Relative)
 
  # 脚本加载源
  scriptFrom: local # 默认从本地加载脚本
  # scriptFrom: jsdelivr # 从 jsdelivr CDN 加载脚本
  # scriptFrom: unpkg # 从 unpkg CDN 加载脚本
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 从自定义地址加载脚本
  tagMode: false # 只在有 {{ live2d() }} 标签的页面上加载 / 在所有页面上加载
  log: false # 是否在控制台打印日志
 
  # 选择看板娘模型
  model:
    use: live2d-widget-model-shizuku  # npm package的名字
    # use: wanko # /live2d_models/ 目录下的模型文件夹名称
    # use: ./wives/wanko # 站点根目录下的模型文件夹名称
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 自定义网络数据源
  display:
    position: left # 显示在左边还是右边
    width: 100 # 宽度
    height: 180 # 高度
  mobile:
    show: false
  react:
    opacityDefault: 0.7 # 默认透明度

添加字数统计

安装插件npm install hexo-wordcount --save
在themes/next/layout/_macro/post.swig文件的busuazi所在的模块的endif前面加上：

1
2
<span class="post-meta-divider">|</span>
<span title="{{ __('post.wordcount') }}"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i></span>字数： {{ wordcount(post.content) }}</span>

在themes/next/layout/_partials/footer.swig文件的最后一行之前加上：

1
2
3
4
<div class="theme-info">
  <div class="powered-by"></div>
<span class="post-count">全站共 {{ totalcount(site) }} 字</span>
</div>

圆角设置

在 hexo/source/_data 目录下新建 variables.styl 文件，填写下面内容。

1
2
3
// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;

主题配置文件 next.yml 去除 variables.styl 的注释。

设置网站背景

除了设置背景图片，还需要设置博客文章博客文章透明度才能看到背景图片。
主题配置文件 next.yml 去除 style.styl 的注释。
在 hexo/source/_data/style.styl 文件中写入下面代码。

1
2
3
4
5
6
7
8
// 设置背景图片
body {
    background:url(/images/background.png);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover;      //填充
    background-position:50% 50%;
}

next 主题的博客文章都是不透明的，这样即使设置了背景图片也无法看到，在 hexo/source/_data/styles.styl 中写入下面内容，使博客文章透明化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

目录与跳转

使用doctoc工具可以自动生成md的目录，并支持跳转，安装方式如下：
npm i doctoc -g
使用方式doctoc file.md就会在文章顶层生成目录，需要手动调整位置。
如果目录更新,doctoc -u file.md

本地部署

hexo s可以开启本地部署，这样可以快速验证一些feature.

code标签页使能

在做交换机配置的时候往往要配置多台交换机，把所有配置贴出来长度太长，使用标签页每一台交换机占用一个标签。配置主题tabs项然后用相应的语法书写即可实现，主题配置如下：

1
2
3
4
5
6
7
# Tabs tag
tabs:
  enable: true 
  transition:
    tabs: true 
    labels: true 
  border_radius: 0

语法如下：

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,1 %}      // 默认显示标签1
<!-- tab R1-->        // 标签1名字是R1
*R1 infor*
<!-- endtab -->
<!-- tab R2-->       // 标签2名字是R2
*R2 infor*
<!-- endtab -->
<!-- tab R3-->       // 标签3名字是R3
*R3 infor*
<!-- endtab -->
{% endtabs %}

效果如下：

R1 infor

R2 infor

R3 infor

参考资料：
NexT官方