关于Hexo配置使用Next主题-阿里云开发者社区

前言

之前写了个如何搭建Hexo的博客，后来想了想，既然写了就写到底吧，我自己用的是next这款主题，所以就说一下有关next的配置问题。并且，使用这个主题的过程中，我真的踩了不少的水坑！

确认一下版本号

Hexo5.4.0

Next8.2.0

版本不同可能会有些差异

安装next主题

去next团队的主页去下载一个zip压缩包

完后将他放在themes目录下并且解压，重命名文件夹为next

themes/下是Hexo用来放主题的

修改站点配置文件

站点配置文件：_config.yml

参考Hexo文档中的说明，我们需要给博客设定主标题以及副标题、作者名称、语言、时区等，你可以参考以下我的设置。

# Site
title: Wangez-Blog  #网站标题
subtitle: 'Ned的个人博客'  #网站副标题
description: 'Ned的个人博客'  #网站描述
keywords:  #网站关键词
author: Ned  #您的名字
language: zh-CN  #语言
timezone: 'Asia/Shanghai'  #时区

启用Next主题

在站点配置文件中，找到 theme 属性，然后修改为 next 即可

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

修改主题配置文件

主题配置文件：themes/next/_config.yml

设定主题风格

Next提供了4种风格样式供我们选择。我个人偏好最经典且极简的Muse风格。你可以4种都体验以下。选择哪个风格，就删除掉对应风格名所在行前面的# ，可以参考我的配置：

# Schemes
# scheme: Muse
# scheme: Mist
scheme: Pisces
# scheme: Gemini

博客主标题上方的logo

这个我是没有设置的，有需要的可以自己设置一下，代码如下：

# Custom Logo (Warning: Do not support scheme Mist)主页logo
custom_logo: /uploads/logo.png

顺便一提，后面我们还会遇到引用图片地址的类似设置。/uploads/logo.png 对应的本地blog文件夹中位置是 \blog\themes\next\source\uploads\logo.png 其中 uploads 文件夹，和logo.png文件，都需要自己创建。

版权信息说明

网上的太繁琐了，其实不用改太多。

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# 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
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language:

设置导航栏菜单

我觉得设置多了太麻烦，于是就保留了主页 标签 关于 归档四个

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

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

启用哪个功能，就删除对应行前面的 #

侧边栏设置

我觉得左边挺好的，就没有改

sidebar:
  # Sidebar Position.
  position: left
  # position: right

设置侧边栏的头像，一般为作者的头像，和博客的logo有区别。

可以是方形或圆形，还可以选择鼠标停留时，魔性的转动（我没设置）。

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /uploads/avatar.jpg #头像图片地址 
  # If true, the avatar will be dispalyed in circle.圆形选true 方形选false
  rounded: true
  # If true, the avatar will be rotated with the cursor.魔性转动，打开选true
  rotated: false

侧边栏外链，可以指向某篇文章，或某个网址。这里可以用来展示其他发布渠道。

social:
  #GitHub: https://github.com/yourname || 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

social_icons:
  enable: true  #用来控制是否显示图标的
  icons_only: false
  transition: false

和外链样式不同的是友链。默认显示为友情链接我将其修改为我的朋友。

# Blog rolls
links_settings:
  icon: fa fa-link
  title: 我的朋友
  # Available values: block | inline
  layout: block
#友情链接
links:
  Ned: https://wangez.site

返回顶部按钮显示阅读进度

觉得没什么用，不过我还是用了（打脸ing）

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

关闭动画效果

我觉得博客，渲染的太华丽反而不好，于是就将其关了，如果想打开可以将enable的值设置为true。

motion:
  enable: false
  async: false

到此，配置差不多就结束了，如果你还想优化你的博客，可以继续看下去。

优化你的博客

优化文章链接

优化文章链接，为了避免链接中出现中文导致太长或者死链的情况出现，可以使用一个插件来避免这种情况

插件：hexo-abbrlink

首先在博客根目录运行Git Bash，输入以下指令安装hexo-abbrlink：

npm install hexo-abbrlink --save

打开站点配置文件_config.yml，修改permalink为：

permalink: posts/:abbrlink.html/

记得将原有的permalink注释掉或者删掉

在站点配置文件_config.yml中添加以下代码：

#abbrlink配置
abbrlink:
  alg: crc32 #support crc16(default) and crc32
  rep: dec   #support dec(default) and hex

到这，关于优化文章链接的操作我们就做完啦！

自定义文本内容

文件路径：themes/next/languages/zh-CN.yml

需要打开这个文件进行修改。

选择哪个语言文档取决于你的站点配置文件上的语言写的是什么！

我将所有的日志换成了文章理由是我觉得日志怪怪的，还是文章比较正常。

Ctrl+H 进行批量替换。（不会真有人一个一个改吧，不会吧不会吧）

添加访客统计、访问次数统计、文章阅读次数统计

打开主题配置文件

搜索找到busuanzi_count，把enable设置为true

# Show Views / Visitors of the website / page with busuanzi.#展示访问数
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true   #统计访客数
  total_visitors_icon: user
  total_views: true    #统计访问数
  total_views_icon: eye
  post_views: true   #统计文章阅读数
  post_views_icon: eye

同样是在主题配置文件下，搜索footer，在它底下添加counter，设值为true

  #统计
  counter: true

这个我一开始配置了，但是不生效，最后将它删了才生效的，如果你配置完有问题也可以将其删了试一试

来到themes\next\layout_partials，找到footer.swig文件，打开编辑，在底下添加代码

{% if theme.footer.counter %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}

这样，就设置完成了，站点访客数、访问次数显示在网址底部，文章阅读次数在文章开头。

关于Hexo配置使用Next主题

前言