Hexo-NexT主题配置

2019-08-18 本文已影响0人闲云a

小序

博客搭建，可以参考博文个人博客-GitHub-Pages
Hexo的配置文件_config.yml分两种：站点配置文件、主题配置文件。站点配置文件参考Hexo，主题配置文件参考NexT
本文主要讲解主题配置文件_config.yml（文件路径：hexo目录\themes\next\_config.yml）
GitHub hexo-theme-next

Site Information Settings

设置站点信息
favicon:修改网站图标，图片保存在目录\themes\next\source\images中。
footer:站点底部
since:2018站点创建时间
creative_commons:文章底部添加版权信息

Menu Settings

菜单项（名称和链接）
菜单项的显示文本
菜单项对应的图标。NexT使用的是Font Awesome提供的图标，Font Awesome提供了600+的图标，可以满足绝大多数的场景。

注意：菜单点击可能报Cannot GET **，创建page就可以了，命令如下：

// name为categories、tags、about等，文件存储路径为：root\source
hexo new page 'name'

在source目录下会生成菜单对应文件夹，修改文件夹中的index.md文件，新增type属性，如下：

---
title: 分类
date: 2018-12-16 17:03:04
type: "categories"
---

Scheme Settings

Scheme是NexT提供的一种特性，可以设置不同的外观。同时，几乎所有的配置都可以在Scheme之间共用。目前NexT支持以下几种Scheme:

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

Sidebar Settings设置侧栏

sidebar:侧栏的位置
sidebar:侧栏显示的时机
avatar:头像
social:社交链接 github_banner:（网站右上角显示关注GitHub图标）
Blog rolls友情链接
toc:文章目录

Post Settings

reward:打赏
wechat_subscriber:微信订阅

Third Party Services Settings

local_search:网站添加搜索

needmoreshare2:内容分享

git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton

主题配置文件中，搜索needmoreshare2:

评论系统

畅言官网

# changyan
changyan:
  enable: false
  appid:
  appkey:

Valine 官网

DaoVoice

修改文章内链接样式

在文件\themes\next\source\css\_common\components\post\post.styl末尾，添加如下代码：

// 文章内链接文本样式
.post-body p a{
  color: #0593d3; //原始链接颜色
  border-bottom: none;
  border-bottom: 1px solid #0593d3; //底部分割线颜色
  &:hover {
    color: #fc6423; //鼠标经过颜色
    border-bottom: none;
    border-bottom: 1px solid #fc6423; //底部分割线颜色
  }
}

修改文章底部带#的标签

实现效果图：

[图片上传失败...(image-321b05-1566118603859)]

\themes\next\layout_macro\post.swig中找到rel="tag">#，将#替换为

<i class="fa fa-tag"></i>

文章末尾添加结束标语

实现效果图：

[图片上传失败...(image-42414c-1566118603859)]

\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后，post-footer前，添加如下代码：

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

修改主题配置文件_config.yml，末尾添加如下内容：

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

网站底部添加总访客量、总访问量

方法一：

打开\themes\next\layout_partials\footer.swig文件，在copyright之前添加如下代码：

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

单个用户连续点击n篇文章，记录n次访问量。

<span id="busuanzi_container_site_pv">
  总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

单个用户连续点击n篇文章，只记录1次访客数。

<span id="busuanzi_container_site_uv">
  总访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

方法二：
主题配置文件_config.yml，搜索
busuanzi_count:
注：本地预览时，数字存在异常，部署云端即可恢复正常。

网站底部添加字数统计

npm install hexo-wordcount --save
打开文件\themes\next\layout_partials\footer.swig，末尾加上如下代码：

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

点击出现爱心效果

在目录\themes\next\source\js\src中新建文件love.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/src/love.js"></script>

添加网易云音乐

\themes\next\layout_macro\sidebar.swig
[图片上传失败...(image-c8d50d-1566118603859)]
[图片上传失败...(image-884f68-1566118603859)]

设置背景图片

图片来源：https://source.unsplash.com
打开文件themes\next\source\css_custom\custom.styl，添加如下代码：

body {
    background:url(https://source.unsplash.com/1600x900/daily?nature,water);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

添加依赖

在目录\themes\next下，开启Git Bash，执行命令。

设置动态背景

canvas_nest:

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

站点顶部进度条

pace:

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

参考

https://theme-next.org/