Hexo+Next博客升级

发表于 更新于 分类于 阅读次数：

本懒懒一直使用Hexo框架 + Next主题来搭建博客。最近发现Hexo从4.x升级到了5.x，Next主题也更新了。想着博客好久没更了，抽空也来升级一下（差生文具多，没辙哦）

升级Hexo

使用npm升级Hexo，执行以下命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 全局升级 hexo-cli
npm install hexo-cli -g

# 检查系统插件
npm install -g npm-check
npm-check

# 升级系统中的插件
npm install -g npm-upgrade
npm-upgrade

# 更新全局包
npm update -g

# 更新生产环境依赖包
npm update --save

# 查看 Hexo 版本
hexo v

更新完之后，执行hexo c && hexo g && hexo d，并查看博客有无问题。

参考：Hexo 博客和 NexT 主题版本升级

更新Next

NexT主仓库已从 iissnan 名下 迁移至 theme-next组织，不过发现git上还有一个认证过的next-theme，且最近有更新，所以就使用后者的仓库了。（其实是因为前者pull下来有问题）

克隆新仓库到hexo/theme中，命名需异于之前的next

1
git clone https://github.com/next-theme/hexo-theme-next  themes/next-reload

这样可以保留之前的next版本，方便出问题的时候一键切换。

在hexo的_config.yml配置文件中将hexo主题设置为新主题

1
theme: next-reloaded

修改配置文件

站点配置文件路径：hexo/_config.yml
主题文件配置路径：hexo/themes/next_reload/_config.yml

修改站点配置

站点描述

1
2
3
4
5
6
7
8
# Site
title: #网站标题
subtitle: #副标题
description: #描述
keywords:
author: #作者
language: zh-CN #语言
timezone: #时区

URL和deploy配置

1
2
3
4
5
6
7
8
9
10
11
12
# URL
url: http://xxx.github.io #网址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Deployment
deploy:
  type: git
  repo: https://github.com/xxx/xxx.github.io.git
  branch: master

修改主题配置

设置主题模板

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

设置菜单栏

1
2
3
4
5
6
7
8
9
10
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

设置社交链接

1
2
3
4
5
6
7
8
9
10
11
12
social:
  GitHub: https://yourname.com/8biiit || 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

设置打赏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 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: false
  comment: 赞助博主

reward:
  wechatpay: /images/wechatpay.png #微信二维码
  alipay: /images/alipay.png       #支付宝二维码
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

设置评论区gitalk

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
  active: gitalk
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: false
  # Modify texts or order for any navs, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    gitalk:
      order: -2

# Gitalk
# For more information: https://gitalk.github.io
gitalk:
  enable: true
  github_id: name # GitHub repo owner
  repo: name.github.io # Repository name to store issues
  client_id: x # GitHub Application Client ID
  client_secret: x # GitHub Application Client Secret
  admin_user: name # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # When the official proxy is not available, you can change it to your own proxy address
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # This is official proxy adress
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN


访问计数

1
2
3
4
5
6
7
8
9
10
# 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

许可协议

1
2
3
4
5
6
7
8
9
10
11
12
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
creative_commons:
  # Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
  license: by-nc-sa
  # Available values: big | small
  size: small
  sidebar: true
  post: true
  # You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
  # CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
  language:

文章设置

tag分类

1
2
3
4
5
6
7
8
---
title: 
date: 2021-01-01 00:00:00
tags:
- Hexo
categories: Hexo	
---

插入图片

npm install hexo-image-link --save
（也有说法是hexo-asset-image）

方法一：

1
2
3
_posts/post_name/image.jpg
{% asset_img image.jpg This is an image %}

方法二：

1
![This is an image](img.jpg)

This is an image