MFIKC
0%

Hexo NexT主题优化

发表于 更新于

1.使用next主题

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
# 更新npm
npm update

# 若不存在hexo则执行
npm install -g hexo-cli

# 存在直接执行
hexo init my-blog
cd my-blog
npm install

# 在`my-blog`目录下 安装next主题
git clone https://github.com/theme-next/hexo-theme-next themes/next

# 打开`blog\_config.yml`, 修改`themes`为`next`
theme: next

# 找到`#site`
title: MFIKC
subtitle: 个人博客
description: 涉及前端、后端、运维
keywords: 前端,后端,运维
author: MeverikC
language: zh-CN
timezone: 'Asia/Shanghai'

2. 更换风格

1
2
# 打开 `blog\themes\next\_config.yml`, 找到`Schemes`
scheme: Gemini

3. 动态背景

1
2
3
4
5
6
7
cd blog\themes\next

git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

# 打开`themes\next\_config.yml`, 找到`canvas_ribbon`
canvas_ribbon:
  enable: true # true 打开

4. 文章加密

1
2
3
4
5
6
7
8
9
cd blog
npm install --save hexo-blog-encrypt
# blog\themes\next\_config.yml
encrypt:
  enable: true
  default_abstract: 这篇文章已加密，请输入密码查看。
  default_message: 请输入密码访问。
# 在`.md`文件头添加
password: mypassword

5. 搜索

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 安装依赖
npm install hexo-generator-searchdb

# 打开`blog\_config.yml`, 添加
search:
  path: search.xml
  field: post
  content: true
  format: html
  
# 打开`blog\themes\next\_config.yml`, 找到`local_search:`, 修改为
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

6. 标签样式

1
2
# 打开`blog\next\_config.yml`, 找到`tag_icon: false`, 改为
tag_icon: true

7. 头像

1
2
3
4
5
6
# 把头像照片放进`blog\next\source\images`下, 起名为`avatar.jpg`
# 打开`blog\next\_config.yml`, 找到`# Sidebar Avatar`
avatar:
  url: /images/avatar.jpg # 添加头像
  rounded: true # 为true则圆形展示 
  rotated: true # 为true则随光标旋转

8. 代码块

1
2
3
4
5
6
7
8
9
10
# 打开`blog\next\_config.yml`
codeblock:
  highlight_theme: night blue
  # 复制按钮
  copy_button:
    enable: true
    # 展示复制结果
    show_result: true
    # 可用值: default | flat | mac
    style: mac

9. 链接样式

1
2
3
4
5
6
7
8
9
10
11
12
# 打开`themes\next\source\css\_common\components\post\post.styl`, 在末尾添加如下css样式：
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

10. 主页文章顺序设置

1
2
3
4
5
6
7
8
# 主页设置
# path: 你的博客索引页的根路径。(默认 = '')
# per_page: 每页显示的文章数。(0 = 禁用分页)
# order_by: 文章排序方式。(默认按日期降序排列)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

11. 归档目录排序

1
2
3
# 打开`blog\_config.yml`, 添加:
archive_generator:
  order_by: -top # top为每篇文章前的yml配置

12. 部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
cd blog

npm install hexo-deployer-git --save

# 打开`blog\_config.yml`, 找到`deploy:`
deploy:
  type: git
  repo: 
  	github: https://github.com/MeverikC/meverikc.github.io.git
  	gitee: https://gitee.com/你的用户名/你的仓库名.git,分支名
  branch: master
  message: "Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"

# 部署到github上
hexo clean #清除之前生成的东西
hexo generate  #生成静态文章，缩写hexo g
hexo deploy  #部署文章，缩写hexo d