hexo主题next及其基本配置

发表于 更新于 分类于 ， 阅读次数： 本文字数： 2.2k 阅读时长 ≈ 2 分钟

hexo 主题

hexo 主题
next 官方文档

更换主题为next

  1. 下载next主题
    在站点文件夹下，以下命令任选一种
    npm：npm install hexo-theme-next
    git：git clone https://github.com/next-theme/hexo-theme-next themes/next

注意，不要直接修改主题的所有文件，只可以改变站点文件夹下的其他内容

  1. 修改_config.yml文件
    将theme的内容改为next
    1
    2
    3
    4
    5
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    # theme: landscape
    theme: next

个性化配置

以下内容是修改主题配置文件（注意和站点配置文件区分）
不推荐：修改node_modules/hexo-theme-next/或themes/next/目录下的_config.yml文件。
推荐：复制上面的_config.yml到站点并改名为_config.next.yml，直接修改该文件配置相关内容
这里只介绍了部分配置，更多配置可以阅读官方文档自行探索

scheme 方案

next主题可以选择4种scheme，这里选择的是Gemini

1
2
3
4
5
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

menu下面的选项，去掉前面的注释即可开启菜单

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  # about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  # categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

avatar 自定义头像

  1. 将头像放在站点source/images/下并修改相应的url/images/xxx.jpg

  2. 图片的互联网地址

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/xxx.jpg
  # If true, the avatar will be displayed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

social 社交账号

social下面的选项，去掉前面的注释并修改相应的url即可

1
2
3
4
5
6
7
8
9
10
11
social:
  GitHub: https://github.com/tongruibin || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #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

footer下面可以自定义图标，copyright，服务支持，备案信息等等，这里不做展示

reward 打赏设置

reward_settings下的enable先设置为true，comment是讨饭宣言
reward下面可以设置微信收款码，支付宝收款码等等
将收款码图片复制到站点source/images/下，修改相应的url的内容即可

1
2
3
4
5
6
7
8
9
10
11
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: false
  comment: 饥来驱我去，不知竟何之 <br /> 富婆，饿饿，饭饭，QAQ

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png