Hexo及Next主题配置（最新版）

声明：本文为 Santa 原创文章，欢迎转载，请在明显位置注明出处。
推荐访问我的个人网站，排版简洁，内容更新更及时

下边介绍Next主题相关的一些配置

设置Next主题

下载完成之后，打开/blog/_config.yml文件，查找**#Extensions**字段，修改如下：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

Hexo的主题路径是/blog/themes/
每种主题都在其下以文件夹的形式存在，所以Hexo切换主题是很方便的，只要修改一个参数值即可
这里我们还没有下载next主题，可以提前先在这里写好

Next主题下载

Next主题的下载分为两种，npm形式和git形式，这里两种都提一下：
1.npm
If you’re using Hexo 5.0 or later, the simplest way to install is through npm.
Open your Terminal, change to Hexo site root directory and install NexT theme:

$ cd hexo-site
$ npm install hexo-theme-next

2.git
If you know about Git, you can clone the whole repository and update it in any time with git pull command instead of downloading archive manually.
Open your terminal, change to Hexo site root directory and clone the latest master branch of NexT theme:

$ cd hexo-site
$ git clone https://github.com/next-theme/hexo-theme-next themes/next

Next主题类型

打开/blog/themes/next/_config.yml文件，查找Scheme Settings字段并修改如下：

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini# Dark Mode
darkmode: false

如上，有四种不同形式的主题可供选择，而且可以设置黑暗模式

社交链接

打开/blog/themes/next/_config.yml文件，查找Social Links字段并修改如下：

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:GitHub: https://github.com/SantaJiang || fab fa-githubE-Mail: jiangshengda@foxmail.com || fa fa-envelope简书: https://www.jianshu.com/u/3aa0cb901bee ||fab fa-jianshuCSDN: https://blog.csdn.net/jsd581?spm=1010.2135.3001.5421 || fab fa-csdn#FB Page: https://www.facebook.com/yourname || fab fa-facebook#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow#YouTube: https://youtube.com/yourname || fab fa-youtube#Instagram: https://instagram.com/yourname || fab fa-instagram#Skype: skype:yourname?call|chat || fab fa-skype

最后的成品效果就是我左侧头像下边的链接。

捐赠

捐赠就是在我的每篇文章下边都会有的一个按钮，点开了之后就会弹出我的微信/支付宝转账页面，如果有读者喜欢这篇文章就可以通过捐赠来支持作者

同样的，打开/blog/themes/next/_config.yml文件，查找Donate (Sponsor) settings字段并修改如下：

# Donate (Sponsor) settings
# Front-matter variable (unsupport animation).
reward_settings:# If true, a donate button will be displayed in every article by default.enable: trueanimation: truecomment: 赞赏文章reward:wechatpay: /images/wechat.JPG#alipay: /images/alipay.png#paypal: /images/paypal.png#bitcoin: /images/bitcoin.png

字体调整

Next主题自带的字体是较大的，看起来有一些愣，我在多次调整后给出了一个比较合适的方案：
1.打开/blog/themes/next/source/css/_variables/base.styl文件，查找Font size字段，将**$font-size-large参数由1.125em改为1.0em
2.打开/blog/themes/next/_config.yml文件，查找Font Settings**字段并修改如下：

# ---------------------------------------------------------------
# Font Settings
# ---------------------------------------------------------------
# Find fonts on Google Fonts (https://fonts.google.com)
# All fonts set here will have the following styles:
#   light | light italic | normal | normal italic | bold | bold italic
# Be aware that setting too much fonts will cause site running slowly
# ---------------------------------------------------------------
# Web Safe fonts are recommended for `global` (and `title`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------font:enable: true# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).host:# Font options:# `external: true` will load this font family from `host` above.# `family: Times New Roman`. Without any quotes.# `size: x.x`. Use `em` as unit. Default: 1 (16px)# Global font settings used for all elements inside <body>.global:external: truefamily: Latosize:# Font settings for site title (.site-title).title:external: truefamily:size:# Font settings for headlines (<h1> to <h6>).headings:external: truefamily:size:# Font settings for posts (.post-body).posts:external: truefamily:size: 0.8125# Font settings for <code> and code blocks.codes:external: truefamily:size:

访问统计

访问统计设置完成后会出现在文章的副标题以及网站的底部
打开/blog/themes/next/_config.yml文件，查找**busuanzi_count:**字段并修改如下：

# Show Views / Visitors of the website / page with busuanzi.
# For more information: http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:enable: truetotal_visitors: truetotal_visitors_icon: fa fa-usertotal_views: truetotal_views_icon: fa fa-eyepost_views: truepost_views_icon: far fa-eye

至此完毕，重新部署后查看页面效果