Vic's Blog

code changes the world

0%

Hexo进阶设置

发表于 更新于 分类于 Valine：
本文字数： 4.5k 阅读时长 ≈ 4 分钟

部署平台选型

前言

GitHub和Gitee（码云）是国内外比较流行的代码托管平台，现都推出GitHub/Gitee Pages可以存放静态网页代码，因此可以用来搭建自己的博客。

优缺点

平台 优点 缺点
Github 全球最流行的平台，且免费 国内由于有墙，访问太慢
Gitee 国内访问快 阉割部分功能，提供有偿服务，比如自动部署、自定义域名等需要升级Gitee Pages Pro

giteepages.png

如上图所示，Gitee是需要付费的，但是考虑到部署到Github上，在国内访问真的太慢，经常加载要十几秒，最终折中了选择，即两个平台同时部署，国外的用户可以访问Github，国内的用户访问Gitee，从而优化访问速度。

修改_config.yml

1
2
3
4
5
deploy:
  type: git
  repo: 
    github: git@github.com:[username]/[username].github.io.git,master
    gitee: git@gitee.com:[username]/[username].git,master

其中，这里的 username指的是你在这两个网站上的用户名，只有以这种命名形式的仓库，才能够来访问我们的博客。

  • Github的仓库名要命名为：{username}.github.io
  • Gitee的仓库名要命名为：{username}

比如说，我的Github和Gitee的username是geekvic，那么在部署博客成功后，我就可以通过下边的url来访问我的Hexo博客：

主题选择

Hexo主题地址：https://hexo.io/themes/， 我们可以去挑选自己喜欢的主题，每个主题在github上面都开源了源码，下面主要以我选择的theme-next主题进行介绍。

找到Hexo文件的目录,如下图所示。

hexo.png

进入theme文件夹，执行命令

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

下载完成后，则会在themes文件夹下出现一个新的名为hexo-theme-next的文件夹，这就是我们刚下载的主题，返回hexo站点的配置文件_config.yml，修改配置：

1
theme: hexo-theme-next

再执行下命令，就可以看到更改后的主题

1
2
3
hexo clean //清除一下缓存
hexo g  //生成静态页面
hexo s //开启本地服务器

Hexo基础设置

配置网站基础信息

修改站点配置文件_config.yml中，修改：

1
2
3
4
5
6
7
8
# Site
title:          # 网站标题
subtitle:       # 网站副标题
description:    # 描述，介绍网站的
keywords:       # 网站的关键字
author:         # 博主姓名
language: zh-CN # 语言：zh-CN 是简体中文
timezone:       # 时区

Next主题进阶设置

配置主题

默认的主题配置文件_config.yml中，菜单只开启了首页和归档，我们根据需要，可以添加 about、tag、categories 等菜单

1
2
3
4
5
6
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

增加about页面

进入Hexo目录，执行hexo new page “about”，会发现在source目录下多了个about目录，在里面的index.md写入内容

增加tag页面

1
2
3
4
5
6
7
hexo new page "tags"
vim source/tags/index.md
---
title: 标签
date: 2020-05-20 17:06:19
type: tags
---

增加categories页面

1
2
3
4
5
6
7
hexo new page "categories"
vim source/tags/index.md
---
title: 分类
date: 2020-05-20 17:06:19
type: "categories"
---

配置 hexo 中 next 主题样式选择

Next 一共提供了 4 种首页样式，按照自己喜好选择一个，我使用的是Gemini

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

配置footer信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
footer:
  since: 2020   # 建站开始时间
  icon:
    name: heart      # 设置 建站初始时间和至今时间中间的图标，默认是一个'小人像'，更改user为heart可以变成一个心
    animated: true
    color: "#ff0000"  # 更改图标的颜色为红色  
  #显示版权作者
  copyright: vic
  powered:
    enable: true        # 开启hexo驱动显示
    version: true       # 开启hexo版本号
  theme:
    enable: true       # 开启主题驱动
    version: true       # 开启主题版本号
  beian:
    enable: true                # 开启备案号显示
    icp: 苏ICP备...              # 备案号

配置头像信息

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/jin.png  
  # If true, the avatar will be dispalyed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: true

配置社交信息和友链

1
2
3
4
5
6
7
8
social: 
  GitHub: https://github.com/yourname || github
  E-Mail: mailto:yourname@gmail.com || envelope
social_icons:
  enable: true         # 显示社交图标
  # 仅显示图标 
  icons_only: true  # 只显示图标，不显示文字
  transition: true   # 动画效果

首页文章属性

1
2
3
4
5
6
7
post_meta:
  item_text: true    #  可以一行显示，文章的所有属性
  created_at: true    # 显示创建时间
  updated_at:
    enabled: true     # 显示修改的时间
    another_day: true  # 设true时，如果创建时间和修改时间一样则显示一个时间
  categories: true    # 显示分类信息

开启文章目录

1
2
3
4
5
6
toc: #侧栏中的目录
  enable: true #是否自动生成目录
  number: true #目录是否自动产生编号
  wrap: false  #标题过长是否换行
  expand_all: false
  max_depth: 6 #最大标题深度

Follow me on GitHub

1
2
3
4
github_banner:
  enable: true
  permalink: https://github.com/yourname
  title: Follow me on GitHub

字数统计、阅读时长

首先安装插件：

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

主题配置文件修改如下：

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true # 统计信息不换行显示
  item_text_post: true # 文章统计信息中是否显示“本文字数/阅读时长”等描述文字
  item_text_total: false # 底部footer站点统计信息中是否显示“本文字数/阅读时长”等描述文字
  awl: 4 # 平均字符长度
  wpm: 275 # 阅读速度, 一分钟阅读的字数

站点配置文件 新增如下：

1
2
3
4
5
6
7
8
# 新增文章字数统计
symbols_count_time:
  #文章内是否显示
  symbols: true # 文章字数
  time: true # 阅读时长
  # 网页底部是否显示
  total_symbols: false # 所有文章总字数
  total_time: false # 所有文章阅读中时长

显示当前浏览进度

右下角显示文章当前浏览进度，提供意见置顶功能，编辑主题配置文件，配置如下：

1
2
3
4
back2top:
  enable: true #是否提供一键置顶 
  sidebar: false
  scrollpercent: true # 是否显示当前阅读进度

阅读进度

Next主题支持页面滚动阅读进度指示器。 编辑主题配置文件，配置如下:

1
2
3
4
5
reading_progress:
  enable: true
  position: top
  color: "#37c6c0"
  height: 3px

设置代码高亮主题

Next 默认使用的是 白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties

1
2
3
4
5
6
codeblock:
  highlight_theme: normal
  copy_button:
    enable: true # 显示复制按钮
    show_result: true 
    style: mac  #按钮样式: default | flat | mac

本地搜索插件

安装插件

1
$ npm install hexo-generator-searchdb --save

修改站点配置文件，添加如下内容：

1
2
3
4
5
6
# 本地搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  • path：索引文件的路径，相对于站点根目录
  • field：搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面
  • limit：限制搜索的条目数

修改主题配置文件

1
2
3
4
5
6
7
8
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1 #每篇文章中显示的搜索数量
  unescape: false
  preload: false

数据分析与统计

Next内置了leancloud、firebase、busuanzi三种访客统计插件，前两种需要到官网注册获取网站颁发的appKey，相对麻烦。而不蒜子配置只需要将false改为true即可:

1
2
3
4
5
6
7
8
9
10
11
busuanzi_count:
  enable: true
  # 总访客数
  total_visitors: true
  total_visitors_icon: user
  # 总浏览量
  total_views: true
  total_views_icon: eye
  # 文章浏览量
  post_views: true
  post_views_icon: eye