天地阔远

学习使我快乐

0%

hexo搭建及配置

发表于 更新于 分类于
本文字数： 3.2k 阅读时长 ≈ 3 分钟

hexo安装

安装 Git

1
yum install git

yum安装的node和npm版本号低，不建议直接使用yum install nodejs安装

直接从官网下载源码进行使用：

1
2
3
wget https://nodejs.org/dist/v14.17.6/node-v14.17.6-linux-x64.tar.xz
tar -xvf node-v14.17.6-linux-x64.tar.xz
mv node-v14.17.6-linux-x64 node

将node和npm路径添加到环境变量 (实际安装路径)：

1
2
3
vi /etc/profile
export NODE_HOME=/root/npm/node  
export PATH=$NODE_HOME/bin:$PATH

检测node和npm版本，确保node.js版本大于10.13.0：

1
2
node -v 
npm -v

创建目录，并安装hexo：

1
2
3
hexo init <folder>
cd <folder>
npm install

hexo基础命令

1
2
3
hexo g			//生成文件
hexo clean		//清除文件
hexo s 			//

hexo升级

查看当前版本：hexo version
升级命令：npm i hexo-cli -g

hexo搜索功能（next主题）

在hexo的根目录下，安装搜索插件：

1
npm install hexo-generator-searchdb --save

修改全局配置文件_config.yml，添加：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主题配置文件/hexo/themes/next/_config.yml，启用local_search选项

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: 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阅读全文功能

在文章合适的位置添加<!-- more -->手动进行截断，文章简介即可截取部分内容

hexo引用本地文章

1
{% post_link 文章文件名（不要后缀） 文章标题（可选） %}

文字折叠

1
2
3
4
<details>
  <summary>标题</summary>
  	详细内容
</details>
标题 
1
详细内容

网页背景图片及样式自定义

修改文件/hexo/themes/next/source/css/main.styl，添加：

1
@import "_custom/style.styl"

新建文件夹_custom和文件/hexo/themes/next/source/css/_custom/style.styl，并修改style.styl内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//背景图片设置
body {
    background-image: url(/images/background.webp);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

//文章内容的透明度设置
.content-wrap {
  opacity: 0.8;
}
​
//侧边框的透明度设置
.sidebar {
  background-color: transparent;
  opacity: 0.8;
}
​
//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.8);
}

hexo字数统计功能

在hexo的根目录下，安装字符统计插件：

1
npm install hexo-symbols-count-time --save

修改全局配置文件_config.yml，添加：

1
2
3
4
5
6
7
8
9
10
# 设置博客单词统计
symbols_count_time:
  # 文章字数统计
  symbols: true
  # 文章阅读时间统计
  time: true
  # 站点总字数统计
  total_symbols: true
  # 站点总阅读时间统计
  total_time: true

修改主题配置文件/hexo/themes/next/_config.yml：

1
2
3
4
5
6
7
8
9
10
11
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
# 设置博客单词统计
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  # 平均字长
  awl: 2
  # 每分钟阅读字数
  wpm: 275

Hexo-网站地图

创建Google站点地图，进入hexo所在目录，运行如下命令：

1
npm install hexo-generator-sitemap --save

创建百度版本，进入hexo所在目录，运行如下命令：

1
npm install hexo-generator-baidu-sitemap --save

安装结束后，在hexo主目录下_config.yml中找到url，改成你自己的域名。

1
2
3
4
5
6
7
8
9
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://tiandi.site (改成当前网站域名)
root: /
permalink: :year/:month/:day/:title/
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

修改完成后，运行命令hexo g即可自动生成sitemap.xml和baidusitemap.xml, 分别提交至Google (https://search.google.com/search-console) 和百度 (https://ziyuan.baidu.com/site), 提交链接分别为域名/sitemap.xml和域名/baidusitemap.xml。