声明:本文为 Santa 原创文章,欢迎转载,请在明显位置注明出处。
推荐访问我的个人网站,排版简洁,内容更新更及时
下边介绍Next主题相关的一些配置
下载完成之后,打开/blog/_config.yml文件,查找**#Extensions**字段,修改如下:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
Hexo的主题路径是/blog/themes/
每种主题都在其下以文件夹的形式存在,所以Hexo切换主题是很方便的,只要修改一个参数值即可
这里我们还没有下载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
打开/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-github
E-Mail: jiangshengda@foxmail.com || fa fa-envelope
简书: https://www.jianshu.com/u/3aa0cb901bee ||fab fa-jianshu
CSDN: 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: true
animation: true
comment: 赞赏文章
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: true
family: Lato
size:
# Font settings for site title (.site-title).
title:
external: true
family:
size:
# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family:
size:
# Font settings for posts (.post-body).
posts:
external: true
family:
size: 0.8125
# Font settings for <code> and code blocks.
codes:
external: true
family:
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: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: far fa-eye
至此完毕,重新部署后查看页面效果