程序员DJW

Hexo安装NexT主题

发表于 更新于 分类于 Valine：

上篇文章介绍了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

其中appid和appkey到valine官网申请，并替换成申请的值。

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
坚持原创技术分享，您的支持将鼓励我继续创作！