Hexo之Next主题优化改造

博客初步搭建完成，但是这个默认的主题实在丑的可以。还好Hexo是可以修改主题的。其中不乏一些非常优秀的主题。

NexT是Hexo的知名第三方主题,黑白极简风格四合一,有相当多的使用者。精于心，简于形标语说的是真的不错。使用NexT主题的人比较多，主题成熟。优化，配置，扩展很多都集成了，比较简单。

启用Next主题

下载Next主题包

在博客根目录下安装

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

以上代码的意思是从 https://github.com/iissnan/hexo-theme-next将next下载到当前博客根目录下的themes里面的next文件夹中。

修改Next主题

我的博客根目录是/hexo,在以下会有两个配置文件。请注意区分。

/hexo/_config.yml，为了描述方便，在以下说明中，将称为 站点配置文件

/hexo/themes/next/_config.yml，为了描述方便，在以下说明中，将称为 主题配置文件

在站点配置文件中搜索theme，由landscape默认主题修改为next

保存退出。

hexo一键三连

1	$ hexo clean && hexo s -g

访问页面，这就是Next的默认页面。

如果网页报错：

“ {% extends ‘_layout.swig‘ %} {% import ‘_macro/post.swig‘ as post_template %}“

原因是hexo在5.0之后把swig给删除了需要自己手动安装

1	npm i hexo-renderer-swig

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新
Gemini - 左侧网站信息及目录，块+片段结构布局

进入主题配置文件，搜索Scheme,注释掉默认的，启用你想用的。我用的是Gemini。

保存退出，重启Hexo服务，修改成功，左侧网站信息及目录，块+片段结构布局。

站点基本设置

编辑 站点配置文件。Site

菜单

设定菜单内容，对应主题配置文件中字段是 menu。菜单内容的设置格式是：item name: link。其中 item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。

NexT 默认的菜单项有：

键值	设定值	显示文本（简体中文）
home	`home: /`	主页
archives	`archives: /archives`	归档页
categories	`categories: /categories`	分类页
tags	`tags: /tags`	标签页
about	`about: /about`	关于页面
commonweal	`commonweal: /404.html`	公益 404

光设置菜单，无页面也不能跳转。about这个你是找不到网页的，因为你的文章中没有about这个东西。如果你想要的话，可以执行命令

1	hexo new page about

它就会在根目录下source文件夹中新建了一个about文件夹，以及index.md，在index.md中写上你想要写的东西，就可以在网站上展示出来了。

加个type属性，要与menu中的菜单项匹配。

注意：如果有集成评论服务，页面也会带有评论。若需要关闭的话，请添加字段 comments 并将值设置为 false，如：

如法炮制：

其中分类，标签，归档自动完成。只要每篇文章开头按照格式书写。

---
title: XXXX
date: XXXX-XX-XX XX:XX:XX
categories: XXXX
tags: [XXXX,XXXX,XXXX]
---

腾讯公益404自行百度代码添加。

本地搜索

在你站点的根目录下

1	$ npm install hexo-generator-searchdb --save

打开 站点配置文件,添加配置

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

打开 themes/next/_config.yml ,搜索关键字 local_search ,设置为 true：

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true

Favicon

默认图标是N，修改主题配置文件，只需要设置small和medium两个就可以：

favicon:
  small: /images/favicon.ico
  medium: /images/favicon.ico
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

支持本地路径图片/网络图片

头像

添加头像

编辑 主题配置文件，修改字段 avatar，值设置成头像的链接地址。其中，头像的链接地址可以是：

地址	值
完整的互联网 URI	`http://example.com/avatar.png`
站点内的地址	将头像放置主题目录下的 `source/uploads/` （新建 uploads 目录若不存在）配置为：`avatar: /uploads/avatar.png`或者放置在 `source/images/` 目录下配置为：`avatar: /images/avatar.png`

设置头像边框为圆形框

打开位于 themes/next/source/css/_common/components/sidebar/sidebar-author.syl 文件,修改如下:

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
 // 修改头像边框
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

特效：鼠标放置头像上旋转

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
 // 修改头像边框
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  // 设置旋转
  transition: 1.4s all;
}
// 可旋转的圆形头像,`hover`动作
.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

侧边栏社交链接

侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。两者配置均在 主题配置文件 中。

链接放置在 social 字段下，一行一个链接。其键值格式是 显示文本: 链接地址。

配置示例

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  # 等等

设定链接的图标，对应的字段是 social_icons。匹配键: Font Awesome 图标名称（不必带 fa- 前缀）。自行查找更换。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。

友情链接

编辑 主题配置文件 添加：

友情链接配置示例

网易云音乐插件

打开网易云网页版，找一首你喜欢的歌。点击生成外链。

复制代码，添加到hexo/themes/next/layout/_macro/sidebar.swig中

浏览页面的时候显示当前浏览进度

打开 主题配置文件 ,搜索关键字 scrollpercent ,把 false 改为 true。

1 2	# Scroll percent label in b2t button scrollpercent: true

fork me on github

选择样式GitHub Ribbons,修改跳转链接为自己的Github地址,复制代码。

打开 themes/next/layout/_layout.swig 文件，把代码复制到<div class="headband"></div>下面。

阅读全文

方法1. 主题配置文件中auto_excerpt字段改为true 。超过150字省略，增加阅读全文按钮。

方法2. 文章中加入

方法2的优先级大于方法1 所以一起使用效果如下：

文章末打赏功能

只需要 主题配置文件 中填入微信和支付宝收款二维码图片地址即可开启该功能。

打赏功能配置示例

数据统计与分析

编辑 主题配置文件 中的busuanzi_count的配置项。

当enable: true时，代表开启全局开关。若site_uv、site_pv、page_pv的值均为false时，不蒜子仅作记录而不会在页面上显示。

在站点的根目录下：
1
$ npm i --save hexo-wordcount
编辑 主题配置文件 中的post_wordcount的配置项。

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  #字数统计
  wordcount: true
  #阅读时长
  min2read: true
  #总字数,显示在页面底部
  totalcount: true
  separated_meta: true

评论系统

Valine是一款基于Leancloud的极简风评论系统。

注册登录Leancloud`
创建应用，开发版，名称随意。
选择刚刚创建的应用>设置>应用凭证，获取AppID和AppKey

点击设置 → 安全中心绑定web安全域名，防止恶意调用。

主题配置文件中，填写appid和appkey等valine参数

测试通过

并且数据支持后台查看/导出的。

注意事项

在 Hexo 博客中，评论的功能在所有页面都默认开启，但是有的时候我们在页面上不需要显示评论功能，例如分类，标记页面我们并不需要评论功能。可以通过comments属性设置true或false控制该页面或者是文章的评论功能是否打开，如下：

---
title: Tags
date: 2021-8-7 13:13:45
type: "tags"
comments: false
---

评论头像配置

Valine 目前使用的是Gravatar 作为评论列表头像。

请自行登录或注册Gravatar，然后修改自己的头像。

评论的时候，留下在Gravatar注册时所使用的邮箱即可。~~打不开就翻墙。~~

其实还有很多都是“抄作业”，这里直接给“作业”大家照抄就行。

看板娘(Live2D)

HEXO+icarus主题给博客添加看板娘(Live2D)

分享功能

Hexo NexT主题中添加百度分享功能

持续优化，持续更新吧现在比较大的问题就是首页文章的布局，一篇文章标题+图片占的篇幅太大文章多了之后没法一目了然。