Hexo安装NexT主题

上篇文章介绍了Hexo个人博客的安装,可以看出来,Hexo默认的功能和界面很简洁,如果我们想拥有更个性化点儿的功能和主题,那么对于Hexo来说这也是一件很轻松的事。

Hexo官网提供了主题库,大家可以从里边选出自己心仪的主题下载到本地,并经过一步设置即可切换到新的主题。

本文推荐一款挺好用的主题NexT。推荐理由:界面简洁漂亮、社区活跃(目前:Start 15.2k)、集成许多实用的组件,如:字数统计、评论、分享、访问量等等。
最终效果部分截图:

paste image
paste image

安装NexT主题

下载主题

1
2
3
4
5
6
# 切换到博客根目录
cd blog
# 创建next主题目录
mkdir themes/next
# 下载最新稳定版next主题
curl -s https://api.github.com/repos/theme-next/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

启用主题

配置文件分两类:

  1. 站点配置文件:是_config.yml
  2. 主题配置文件:是themes/next/_config.yml

打开站点配置文件, 找到theme字段,并将其值更改为next

1
theme: next

paste image
Hexo的NexT主题已经安装完成,整体界面看起来已经美观了许多,下面我们通过配置让Hexo更加美观,功能更加强大,比如:评论、分类、标签、快速搜索等等。

配置NexT主题

关闭底部提供者的显示

1
2
3
footer:
# -- 关闭底部提供者的显示
powered: false

文章版权

1
2
3
4
5
6
7
# -- 文章版权
creative_commons:
license: by-nc-sa
sidebar: false
# -- 文章末尾显示版权
post: true
language:

整体布局

四种可选,默认是Muse,个人更喜欢Pisces。可以分别切换到不同的布局,喜欢哪个用哪个。

1
2
3
4
5
6
# 整体布局
scheme: Pisces
#scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

菜单

  1. 删除对应菜单的注释#

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # -- 菜单
    menu:
    home: / || home
    #about: /about/ || user
    tags: /tags/ || tags
    categories: /categories/ || th
    archives: /archives/ || archive
    #schedule: /schedule/ || calendar
    #sitemap: /sitemap.xml || sitemap
    #commonweal: /404/ || heartbeat
  2. 创建菜单对应的文件,在博客目录执行命令:

    1
    2
    npx hexo new page tags
    npx hexo new page categories

    生成的文件在source/[page]/index.md

  3. 修改生成的两个文件:
    source/tags/index.md---之间添加type: tags
    source/categories/index.md---之间添加type: categories

侧边栏头像

1
2
3
4
5
6
7
8
# -- 侧边栏头像
avatar:
# Replace the default image and set the url here.
url: /images/avatar.gif
# If true, the avatar will be dispalyed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: true

侧边栏社交,开启Github和E-Mail

1
2
3
4
5
6
7
8
9
10
11
12
# -- 侧边栏社交,开启Github和E-Mail
social:
GitHub: https://github.com/duan847 || github
E-Mail: mailto:554343346@qq.com || envelope
#Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

打赏和打赏的二维码

1
2
3
4
5
6
7
8
9
10
11
12
# -- 打赏
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true
animation: false
comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
# -- 打赏的支付宝和微信二维码
reward:
wechatpay: http://cnd.duanjw.com/1.jpg
alipay: http://cnd.duanjw.com/2.jpg
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png

减小移动端边距

1
2
# -- 减小移动端边距
mobile_layout_economy: true

回到顶部

1
2
3
4
5
6
7
# -- 回到顶部
back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true

阅读进度条

1
2
3
4
5
6
7
# -- 阅读进度条
reading_progress:
enable: true
# Available values: top | bottom
position: top
color: "#37c6c0"
height: 3px

评论-valine

其中appidappkeyvaline官网申请,并替换成申请的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# -- 评论
valine:
enable: true
appid: vSi1IOTCf47TtcrvcukzHqna-gzGzoHsz
appkey: hMGeHNm52fXTIKs0NqC2hp0s
notify: false # Mail notifier
verify: false # Verification code
placeholder: 好想说点儿什么 # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: # Language, available values: en, zh-cn
visitor: false # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0

本地搜索

添加本地搜索,高效模糊搜索博客内容。
paste image

  1. 安装依赖

    1
    npm install hexo-generator-searchdb --save
  2. 站点配置文件中添加配置:

    1
    2
    3
    4
    5
    6
    # -- 本地搜索
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
  3. 修改主题配置文件

    1
    2
    3
    # -- 本地搜索
    local_search:
    enable: true

关闭加载动画

1
2
motion:
enable: false

修改cdn地址

valine的js有时候会访问不到,所以切换cdn保证可用性。

1
2
vendors:
valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
坚持原创技术分享,您的支持将鼓励我继续创作!