M' Blog

人生天地间，忽如远行客

Hexo 博客 Next 主题个性化配置

发表于 更新于 分类于

近期升级了 Hexo 以及 Next 主题的版本，发现 Next 主题的变化比较大，记录一下自己的主题配置文件 _config.yml 的内容。

只体现自己关心的配置，其它无关或不重要的信息省略。

1. 网页图标自定义

1
2
3
4
5
6
7
8
9
# For example, you put your favicons into `hexo-site/source/images` directory.
# Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
favicon:
  small:  /images/favicon-16x16-next.png
  medium:  /images/favicon-32x32-next.png
  apple_touch_icon:  /images/apple-touch-icon-next.png
  safari_pinned_tab:  /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

一般将自己想要展示的图标文件放到 next 主题安装路径 themes/next 下的 source/images 文件夹下。

主题路径下的 source 包含了网站主题配置所需的各种文件：

1
2
3
4
5
6
7
➜  next git:(master) ✗ tree source -L 1
source
├── css
├── fonts
├── images
├── js
└── lib

2. 网页页脚信息设置

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
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since:  2016
  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see:https://fontawesome.com/v4.7.0/icons
    # `heart` is recommended with animation in red(#ff0000).
    name:  heart
    # If you want to animate the icon, set it to true.
    animated:  true
    # Change the color of icon, using Hex Code.
    color:  "#808080"
  # If not defined, will be used `author` from Hexo main config.
  copyright:
  # -------------------------------------------------------------
  powered:
    # Hexo link (Powered by Hexo).
    enable:  true
    # Version info of Hexo after Hexo link (vX.X.X).
    version:  true
  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable:  true
    # Version info of NexT after scheme info (vX.X.X).
    version:  true
  # -------------------------------------------------------------
  # Any custom text can be defined here.
  #custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a>

3. 边栏头像设置

1
2
3
4
5
6
7
8
9
10
11
12
# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url:  /images/avatar.png  #/images/avatar.gif
  # If true, the avatar would be dispalyed in circle.
  rounded:  false
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity:  1
  # If true, the avatar would be rotated with the cursor.
  rotated:  true

4. 边栏显示目录：

1
2
3
4
5
6
7
# Table Of Contents in the Sidebar
toc:
  enable:  true
  # Automatically add list number to toc.
  number:  false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap:  false

5. 文章浏览进度显示

1
2
3
4
# Back to top in sidebar (only for Pisces | Gemini).
b2t:  true
# Scroll percent label in b2t button.
scrollpercent:  true

6. Donate 二维码

1
2
3
4
5
# Reward
#reward_comment: Donate comment here
wechatpay:  /images/wechatpay.jpg
alipay:  /images/alipay.jpg
#bitcoin: /images/bitcoin.png

7. 本地搜索

1
2
3
4
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable:  true

8. 阅读进度条显示

1
2
3
4
5
6
# Reading progress bar
# Dependencies: https://github.com/theme-next/theme-next-reading-progress
reading_progress:
  enable:  true
  color:  "#37c6c0"
  height:  2px

9. 页面加载进度条显示

1
2
3
4
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
pace:  true
  pace_theme:  pace-theme-minimal

10. 待续。。。