Hexo Next主题优化

Next主题风格

next提供了四种主题风格，需要在主题配置文件中themes/next/_config.yml文件中进行选择，分别是Muse、Mist、Pisces、Gemini

自定义博客图标

Next默认图标是H，但是可以修改图标

博客网站的图标可以在bitbug、iconfont等网站选择和制作，然后选择或者创建相应大小的图标文件，放置在/themes/next/sources/images目录下，并在主题配置文件中进行如下配置，只需要修改主题文件夹下面的_config.yml中的small和medium两个就可以：

favicon:
  small: /images/16x16.png
  medium: /images/32x32.png

鼠标点击特效

在/themes/next/source/js下新建文件 clicklove.js ，接着把下面的代码拷贝粘贴到 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);

在\themes\next\layout\_layout.swig文件末尾添加:

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

增加动态背景

动态背景有很多，Next支持其他修改。需要现在文件夹中下载对应的动态资源包

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

然后在/themes/next/_config.yml增加或修改成如下配置

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

修改作者头像

/themes/next/_config.yml修改

avatar:
  url: /images/head.jpg  #将我们的头像图片放置在/themes/next/source/images目录下，填写具体地址
  rounded: true #鼠标放在头像上时是否旋转
  opacity: 1 #头像放缩指数
  rotated: true #头像是否设为圆形，否则为矩形

增加文章结束标志

在路径 \themes\next\layout\_macro 中新建 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>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后(END POST BODY)， post-footer 之前添加如代码：

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

然后在/themes/next/_config.yml增加或修改成如下配置

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

增加相关网站的链接

格式为链接名:链接地址 || 链接图标，其中链接图标必须是FontAwesome网站中存在的图标名。在/themes/next/_config.yml增加或修改成如下配置。

social:
  CSDN: https://blog.csdn.net/yk80695816 || crosshairs

增加文章版权信息

在/themes/next/_config.yml增加或修改成如下配置。

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

设置博客底部布局

在/themes/next/_config.yml增加或修改成如下配置。

footer:
  since: 2019 #建站时间
  icon:
    name: heart  #作者图标（默认是author人像)
    # If you want to animate the icon, set it to true.
    animated: true #图标是否闪动
    # Change the color of icon, using Hex Code.
    color: "#808080" #图标颜色
  copyright: XXX #别填bool型，最后显示的东西是copyright || author，即左边没有设置的话就显示作者
  powered:
    enable: false #是否显示 Powered by hexo
    version: false #是否显示Hexo版本
  theme:
    enable: false #是否显示主题信息
    version: false #是否显示主题版本
  beian:
    enable: false #是否显示网站备案信息
    icp:

添加打赏

在/themes/next/_config.yml增加或修改成如下配置。

reward:
  enable: true
  comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
  wechatpay: /images/wechatpay.jpg
  alipay: /images/alipay.jpg
  #bitcoin: /images/bitcoin.jpg

设置代码块样式

对于代码块的主题我们还能设置其背景，增加复制按钮等，在/themes/next/_config.yml增加或修改成如下配置。

highlight_theme: night
codeblock:
  border_radius:
  copy_button:
    enable: true
    show_result: true

设置阅读是时长，字数等

npm install hexo-symbols-count-time

修改/themes/next/_config.yml文件：

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
# 设置博客单词统计
symbols_count_time:
  # 是否另起一行（true的话不和发表时间等同一行）
  separated_meta: true
  # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
  item_text_post: true
  # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
  item_text_total: false
  # 平均字长
  awl: 4
  # 每分钟阅读字数
  wpm: 275

修改_config.yml文件：

# 设置博客单词统计
symbols_count_time:
  # 文章字数统计
  symbols: true
  # 文章阅读时间统计
  time: true
  # 站点总字数统计
  total_symbols: true
  # 站点总阅读时间统计
  total_time: false
  exclude_codeblock: false

增加搜索功能

npm install hexo-generator-searchdb --save

修改站点_config.yml文件：

# 搜索服务
search:
  path: search.xml
  field: post   # 搜索的范围
  format: html   #页面内容的形式
  content: true # 是否包含每篇文章的全部内容。如果false，生成的结果只覆盖标题和其他元信息，没有主体。默认为true
  limit: 10000

修改/themes/next/_config.yml文件：

local_search:
  enable: true