Next主题美化

写作目的

网上关于Hexo的主题美化的博客已经很多也很全面了，但是在作者去一一尝试的时候，却发现有很多博客中提供的方法现在已经不支持或者过时了，为了避免大家和作者一样花费大量时间去一一尝试，所以作者考虑再三，决定将自己尝试过可靠的方法记录下来，与大家一起学习进步。

一、Next主题美化

Hexo支持很多主题风格，Hexo博客支持很多主题风格，其中Next主题是Github上Star最多的主题，其一直在更新维护，支持非常多的外部插件和功能选项。我目前使用的是Next6.0版本，下面我会介绍基于Next6主题的界面美化手法。

1、Next主题安装配置

Next主题配置安装方式很简单，只需要执行两步：

$ cd hexo文件目录
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

然后设置站点配置文件_config.yml:

$ theme: next

即可将我们的Hexo博客主题替换为Next主题。

2、主题简单配置

Next主题主要分为四种scheme，可以在主题文件的_config.yml文件中进行选择，分别是Muse、Mist、Pisces、Gemini；作者主要选用的是Gemini风格，效果如下：

3、Next常规配置

3.1、个人信息配置

在站点的_config.yml文件中进行配置：

title: 可乐&博客
subtitle: 生于忧患，死于安乐
description: 看得懂的书，请仔细看；看不懂的书，请硬着头皮看。
keywords:
author: 张泉
language: zh-CN # 主题语言
timezone: Asia/Shanghai #中国的时区，不要乱改城市

3.2、头像配置

将头像放置在themes/next/source/images/中，然后在主题中打开_config.yml文件中进行配置：

avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.png #将我们的头像图片放置在blog/themes/next/source/images目录下，填写具体地址
  # If true, the avatar would be dispalyed in circle.
  rounded: true #鼠标放在头像上时是否旋转
  opacity: 1 #头像放缩指数
  # If true, the avatar would be rotated with the cursor.
  rotated: true #头像是否设为圆形，否则为矩形

3.3 其它常规配置

# Table Of Contents in the Sidebar
toc:
  enable: true #是否自动生成目录
  # Automatically add list number to toc.
  number: false #目录是否自动产生编号
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false #标题过长是否换行
  # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.
  max_depth: 6 #最大标题深度

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12 #侧边栏相对主菜单像素距离
  # Back to top in sidebar.
  b2t: true #是否提供一键置顶
  # Scroll percent label in b2t button.
  scrollpercent: true #是否显示当前阅读进度
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false #手机上是否显示侧边栏

3.4、菜单栏配置

（1）在主题中打开_config.yml文件中进行配置：

menu:
  home: / || home
  # about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

（2）系统自动帮我们创建了home和archives页面，所以我们只需要使用终端创建tags和categories页面即可：

$ cd hexo文件目录
$ hexo new page "tages"
$ hexo new page "categories"

(3)创建好的页面在站点sources中，我们需要对相关页面进行type修改：

---
title: 分类
date: 2019-09-11 14:14:50
type: "categories"
---

---
title: 标签
date: 2019-09-11 14:14:28
type: "tags"
---

（4）在我们写的博客页面中进行相关参数的配置：

---
title: 手把手教你使用Hexo搭建github个人博客
date: 2019-09-11 19:06:18
comments: false
tags:
- 工具
- hexo
categories: 
- 工具
- hexo
---

效果如下：

二、添加搜索功能

1、安装 hexo-generator-searchdb 插件

$ cd 文件目录
$ npm install hexo-generator-searchdb --save

2、打开站点配置文件_config.yml,找到Extensions在下面添加:

# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3、打开主题配置文件_config.yml,找到Local search，将enable设置为true。

4、效果如下：

三、自定义博客图标

我们博客的默认图标是H，不过Next支持修改图标，下面是我的图标：

我们需要将我们的图标放置在/themes/next/sources/images目录下，并在主题配置文件中进行如下配置，只需要设置small和medium两个就可以：

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/favicon-128x128-next.png
  safari_pinned_tab: /images/logo.svg

四、添加点击效果

1、在/themes/next/source/js目录下，新建clicklove.js文件：

$ cd /themes/next/source/js
$ touch clicklove.js

2、将下面的代码粘贴进clicklove.js文件中：

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

3、在\themes\next\layout\_layout.swig文件末尾添加：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/clicklove.js"></script>

4、效果如下：

五、添加背景

1、下载相应的资源包：

$ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

2、在主题配置中做相关参数修改：

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: # 网络背景
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,0' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 150 # the number of lines

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
  enable: false
  size: 300
  alpha: 0.6
  zIndex: -1

3、效果如下

六、添加更多按钮

因为在你的博客主页会有多篇文章，如果你想让你的文章只显示一部分，多余的可以点击阅读全文来查看，那么你需要在你的文章中添加

<!--more-->

其后面的部分就不会显示了，只能点击阅读全文才能看。效果如下：

七、添加RSS订阅

1、安装RSS插件

$ cd 文件目录
$ npm install --save hexo-generator-feed

2、打开站点配置文件_config.yml，进行相关参数修改：

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

3、打开主题配置文件_config.yml，进行相关参数修改：

$ rss: /atom.xml //注意：有一个空格

4、效果如下：

八、添加社交信息

打开主题配置_config.yml，进行相关参数修改：

social:
  GitHub: 自己的GitHub地址 || github #
  CSDN: 自己的CSDN地址 || crosshairs
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

social_icons:
  enable: true #是否显示社交图标
  icons_only: false #是否仅显示社交图标
  transition: true 

九、增加页面宠物

1、在站点目录下执行：

$ npm install -save hexo-helper-live2d

2、打开主题配置_config.yml，添加下列相关参数：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-tororo
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

use对应的参数，可以对照着lived2d进行选择，效果如下：

十、增加文章结束标志

1、在路径/themes/next/layout/_macro文件夹中新建passage-end-tag.swig文件：

//切换到路径_macro
$ cd [_macro路径]
//创建passage-end-tag.swig文件
$ touch passage-end-tag.swig

2、打开passage-end-tag.swig文件，添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

3、打开/themes/next/layout/_macro/post.swig，在post-body之后，post-footer之前，添加以下代码：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

4、然后打开主题配置文件_config.yml,在末尾添加：

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

5、效果如下：

十一、添加文章版权信息

打开主题配置_config.yml，进行相关参数设置：

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true

效果如下：

十二、增加阅读次数和访客数

博客阅读次数和访客数使用的是不蒜子提供的相关服务，使用非常简单。

1、打开 themes/next/layout/_partial/footer.swig，将下面这段代码添加到footer.swig最后面：

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
  <span class="post-meta-divider">|</span>
  本站总访问量<span id="busuanzi_value_site_pv"></span>次
  <span class="post-meta-divider">|</span>
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
  <span class="post-meta-divider">|</span>
  本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</div>

2、打开主题配置_config.yml，进行相关参数设置：

busuanzi_count:
  enable: true  #是否开启不蒜子统计功能
  total_visitors: false
  total_visitors_icon: user
  total_views: false
  total_views_icon: eye
  post_views: false
  post_views_icon: eye

3、效果如下：

十三、增加文章字数统计

在next中推荐的是hexo-symbols-count-time，而在本篇中使用的是功能更加强大的hexo-wordcount。

1、安装hexo插件：

$ cd 文件目录
$ npm install hexo-wordcount --save

2、在/themes/next/layout/_partials/footer.swig末尾添加代码：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

3、打开主题配置_config.yml，进行相关参数设置：

symbols_count_time:
  separated_meta: true #分隔符|
  item_text_post: true #是否统计站点总字数
  item_text_total: true #是否同级文章总字数
  awl: 2 #平均每个字符的长度
  wpm: 300 #words per minute

3、打开站点配置_config.yml，进行相关参数设置：

symbols_count_time:
  symbols: true #是否统计字数
  time: false #是否统计阅读时长
  total_symbols: true #是否统计总字数
  total_time: false #是否统计总阅读时长

3、效果如下：

十四、自定义头部背景区域

1、将图片文件放在/themes/next/source/images中，打开/themes/next/source/css/_schemes/Pisces/_brand.styl,添加

background-image: url(/images/blogHead.jpg);
 @media(min-width: 992px){
    background-image: url(/images/blogHead.jpg);
    }

2、效果如下：

十五、添加右上角github绑带

1、打开主题配置_config.yml，进行相关参数设置：

# Value after `||` delimeter is the title and aria-label name.
github_banner: https://github.com/nightmaredimple || Follow me on GitHub #添加右上角github绑带

2、效果如下：

参考资料

Next设置中文文档：http://theme-next.iissnan.com/theme-settings.html

Hexo主题网站：https://hexo.io/themes/

Next主题美化：https://blog.csdn.net/nightmare_dimple/article/details/86661502