LV02-NexT-02-自定义一

发表于 分类于 本文字数： 7.7k 阅读时长 ≈ 28 分钟

本文主要是自定义NexT主题相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。

点击查看使用工具及版本
Windows windows11
Ubuntu Ubuntu16.04的64位版本
VMware® Workstation 16 Pro 16.2.3 build-19376536
点击查看本文参考资料
参考方向 参考原文
------
点击查看相关文件下载
--- ---

这是我整理之前的笔记，可能已经不适用于新版本的了，仅供参考吧。

一、主题显示

1. 主题样式修改

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 提供多种不同的外观。

1
2
3
4
#进入主题文件夹
cd ~/02MyBlog/hexofiles/themes/next
# 选择自己想要的主题
vim _config.yml

主题配置部分如下(具体怎样可以自己修改查看，我使用的是第三个)

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

2. 特效实现

2.1 鼠标点击小红心特效

按如下命令进入相应的文件夹

1
2
3
4
# 进入js文件夹
cd ~/02MyBlog/hexofiles/themes/next/source/js/
# 新建特效实现文件
vim myclicklove.js

在myclicklove.js中添加如下代码

1
!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);

进入调用该文件的文件夹并打开相应的引用文件

1
2
3
4
# 进入文件所在文件夹
cd ~/02MyBlog/hexofiles/themes/next/layout/
# 打开特效引用文件
vim _layout.swig

在文档末尾的<body></body>标签内(至少我目前还没有发现有问题，有问题再修改)添加如下代码：

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

2.2 动态下雪特效

2.2.1 准备工作

首先进入特效配置的文件夹中去

1
2
# 进入特效配置文件夹
cd ~/02MyBlog/hexofiles/themes/next/source/js/

在调用以下特效代码实现文件之前需要先引入jquery.min.js(我没有深究这到底是什么，能用就好，能用就好，哈哈哈)，否则特效不会生效。编辑引用文件_layout.swig

1
2
# 编辑_layout.swig
vim ~/02MyBlog/hexofiles/themes/next/layout/_layout.swig

在<body></body>标签内添加以下代码

1
<script type="text/javascript" src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

2.2.2 六边形雪花样式

说明：这个特效的代码可以实现雪花飘落，但是下拉的时速度大于雪花飘落速度的时候，雪花就消失了，等一会才会落下来。

1
2
# 新建六边形雪花实现文件
vim snow1.js

添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/*六边形雪花雪花飘落*/
(function($){
	$.fn.snow = function(options){
	var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
	documentHeight 	= $(document).height(),
	documentWidth	= $(document).width(),
	defaults = {
		minSize		: 10,
		maxSize		: 20,
		newOn		: 1000,
		flakeColor	: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
	},
	options	= $.extend({}, defaults, options);
	var interval= setInterval( function(){
	var startPositionLeft = Math.random() * documentWidth - 100,
	startOpacity = 0.5 + Math.random(),
	sizeFlake = options.minSize + Math.random() * options.maxSize,
	endPositionTop = documentHeight - 200,
	endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
	durationFall = documentHeight * 10 + Math.random() * 5000;
	$flake.clone().appendTo('body').css({
		left: startPositionLeft,
		opacity: startOpacity,
		'font-size': sizeFlake,
		color: options.flakeColor
	}).animate({
		top: endPositionTop,
		left: endPositionLeft,
		opacity: 0.2
	},durationFall,'linear',function(){
		$(this).remove()
	});
	}, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
	    minSize: 5, /* 定义雪花最小尺寸 */
	    maxSize: 50,/* 定义雪花最大尺寸 */
	    newOn: 300  /* 定义密集程度，数字越小越密集 */
    });
});

2.2.3 圆形雪花样式

说明：这个特效的代码好像是没有全屏显示，具体的可能是参数设置问题，我后边用的是樱花的一个特效，那个比较好用。

1
2
# 新建圆形雪花特效文件
vim snow2.js

添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*圆形，就那种毛茸茸的感觉*/
/* 控制下雪 */
function snowFall(snow) {
    /* 可配置属性 */
    snow = snow || {};
    this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
    this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
    this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
}
/* 兼容写法 */
requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) { setTimeout(callback, 1000 / 60); };

cancelAnimationFrame = window.cancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
	window.oCancelAnimationFrame;
/* 开始下雪 */
snowFall.prototype.start = function(){
    /* 创建画布 */
    snowCanvas.apply(this);
    /* 创建雪花形状 */
    createFlakes.apply(this);
    /* 画雪 */
    drawSnow.apply(this)
}
/* 创建画布 */
function snowCanvas() {
    /* 添加Dom结点 */
    var snowcanvas = document.createElement("canvas");
    snowcanvas.id = "snowfall";
    snowcanvas.width = window.innerWidth;
    snowcanvas.height = document.body.clientHeight;
    snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
    document.getElementsByTagName("body")[0].appendChild(snowcanvas);
    this.canvas = snowcanvas;
    this.ctx = snowcanvas.getContext("2d");
    /* 窗口大小改变的处理 */
    window.onresize = function() {
        snowcanvas.width = window.innerWidth;
        /* snowcanvas.height = window.innerHeight */
    }
}
/* 雪运动对象 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
    this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
    this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
    this.size = Math.random() * flakeSize + 2;          /* 形状 */
    this.maxSize = flakeSize;                           /* 最大形状 */
    this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
    this.fallSpeed = fallSpeed;                         /* 坠落速度 */
    this.velY = this.speed;                             /* Y方向速度 */
    this.velX = 0;                                      /* X方向速度 */
    this.stepSize = Math.random() / 30;                 /* 步长 */
    this.step = 0                                       /* 步数 */
}
flakeMove.prototype.update = function() {
    var x = this.x,
        y = this.y;
    /* 左右摆动(余弦) */
    this.velX *= 0.98;
    if (this.velY <= this.speed) {
        this.velY = this.speed
    }
    this.velX += Math.cos(this.step += .05) * this.stepSize;

    this.y += this.velY;
    this.x += this.velX;
    /* 飞出边界的处理 */
    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
        this.reset(canvas.width, canvas.height)
    }
};
/* 飞出边界-放置最顶端继续坠落 */
flakeMove.prototype.reset = function(width, height) {
    this.x = Math.floor(Math.random() * width);
    this.y = 0;
    this.size = Math.random() * this.maxSize + 2;
    this.speed = Math.random() * 1 + this.fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
};
// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
flakeMove.prototype.render = function(ctx) {
    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
    snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
    snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
    snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
    ctx.save();
    ctx.fillStyle = snowFlake;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
};
/* 创建雪花-定义形状 */
function createFlakes() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes = [],
        canvas = this.canvas;
    for (var i = 0; i < maxFlake; i++) {
        flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
    }
}
/* 画雪 */
function drawSnow() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes;
    ctx = this.ctx, canvas = this.canvas, that = this;
    /* 清空雪花 */
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var e = 0; e < maxFlake; e++) {
        flakes[e].update();
        flakes[e].render(ctx);
    }
    /*  一帧一帧的画 */
    this.loop = requestAnimationFrame(function() {
        drawSnow.apply(that);
    });
}
/* 调用及控制方法 */
var snow = new snowFall({maxFlake:60});
snow.start();

2.2.4 引用

以上两种样式，选一种用就可以了，然后修改调用特效代码引用文件_layout.swig。

1
vim ~/02MyBlog/hexofiles/themes/next/layout/_layout.swig

在上边引入的调用jquery.min.js文件的下方添加如下代码，src="/js/snow1.js表示要调用的特效实现文件的位置，我这里用了六边形雪花的特效，这里添加了一个屏幕宽度判断。

1
2
3
4
5
6
7
8
<!-- 雪花特效实现 -->
<script type="text/javascript">
  var windowWidth = $(window).width();
  if (windowWidth > 480) 
  {
    document.write('<script type="text/javascript" src="/js/snow1.js"><\/script>');
  }
</script>

2.3 樱花飘落特效

该特效的实现过程与上边的雪花特效类似，我比较喜欢这一个，所以后来换成了这个。

2.3.1 特效实现脚本

由于所用的代码源码名称为sakura所以所有的特效文件名称也按这个名字来。

1
2
3
4
5
6
# 进入相应的文件夹
cd ~/02MyBlog/hexofiles/themes/next/source/js/
# 新建js文件
vim sakura.js
# 后续修改可以使用以下命令
vim ~/02MyBlog/hexofiles/themes/next/source/js/sakura.js

添加链接中的代码到sakura.js文件中。sakura特效代码：sakura.js

2.3.2 引用

1
2
# 打开引用文件
vim ~/02MyBlog/hexofiles/themes/next/layout/_layout.swig

这里注意，我把之前的两种效果都给屏蔽掉了，采用的方式是直接删除，但是通过这一个特效的添加发现其实可以通过变量来配置是否开启相应的特效效果。在刚才的_layout.swig文件中<body></body>内部引用以下代码。

1
2
3
4
<!-- 樱花特效 -->
{% if theme.sakura.enable %}
    <script async src="/js/sakura.js"></script>
{% endif %}
  • 主题配置文件修改
1
2
# 打开主题配置文件
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

添加以下代码：

1
2
3
# 樱花飘落动特效
sakura:
  enable: true

3. 基本配置

3.1 设置菜单

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。NexT 使用的是 Font Awesome 提供的图标，Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下图标模糊的问题。

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

1
2
# 编辑相应主题配置文件
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

文件如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# ------------------------------------------------------
# Menu Settings
# ------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for t
# Value before `||` delimiter is the target link, value 
# When running the site in a subdirectory (e.g. yoursite
# External url should start with http:// or https://
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

以下列出几项作为说明

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

以简体中文为例，若需要添加一个菜单项，比如 search。那么就需要修改简体中文对应的翻译文件 languages/zh-CN.yml，在 menu 字段下添加一项

1
2
3
4
5
6
7
8
9
10
menu:
   home: 首页
   archives: 归档
   categories: 分类
   tags: 标签
   about: 关于                                           
   search: 搜索
   schedule: 日程表
   sitemap: 站点地图
   commonweal: 公益 404

3.2 设置头像

URI就是头像的地址，地址可以是以下的两种：

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

打开主题配置文件进行修改。

1
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

修改为以下内容。

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: #/images/avatar.gif
  # If true, the avatar will be dispalyed in circle.
  rounded: true                                        
  # If true, the avatar will be rotated with the cursor.
  rotated: true

用该图片作为头像

img

3.3 Menu增加关于、标签、分类页面

3.3.1 新建相关的页面

1
2
3
hexo new page "about"
hexo new page "tags"
hexo new page "categories"

新建完成之后会发现 ~/02MyBlog/hexofiles/source/文件夹中多了三个文件夹

3.3.2 修改相应的文件

分别进入刚才新建的三个文件夹，修改index.md文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--about中的index.md-->
---
title: 关于
type: "about"
---
<!--tags中的index.md-->
---
title: 标签
type: "tags"
---
<!--tags中的index.md-->
---
title: 分类
type: "categories"
---

3.4 设置背景图片和透明度

3.4.1 修改主题配置文件

1
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

去掉styles.styl一行前边的#

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_da    ta` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

3.4.2 新建并修改styles.styl文件

在站点根目录的source目录下新建_data文件夹，并新建styles.styl文件

1
2
3
4
5
6
7
8
# 进入文件夹
cd ~/02MyBlog/hexofiles/source/
# 新建 _data 文件夹
mkdir _data
# 新建并修改styles.styl文件
vim styles.styl
# 后续用以下命令直接修改
vim ~/02MyBlog/hexofiles/source/_data/styles.styl

在styles.styl文件添加如下内容

1
2
3
4
5
6
7
8
9
10
// Custom styles.
// 整体背景设置
body {
    background:url(/images/background.jpg);  // 设定背景图片,images同处于source文件夹下
    background-repeat: no-repeat;  // 设定背景图片非重复填充
    background-attachment:fixed;   // 设置背景图片不随页面滚动
    background-position:50% 50%;   // 设置背景图片位置
    opacity: 0.8;
	background-size: cover// 设置保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
}

在生成静态页面的时候并会有如下警告(有说是因为node和npm版本太高)，但是并不影响背景的正常显示，可以忽略。

1
2
3
4
5
6
7
(node:10806) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:10806) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:10806) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:10806) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:10806) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:10806) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

3.5 文章目录

我这边自己写文章的时候已经写了编号，所以需要关闭显示的时候的自动编号。

1
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

修改主题配置文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: false                                         
  # If tr false [ID]     ll placed on next lines if head
  wrap: false
  # If true, all level of TOC in a post will be displaye
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

3.6 代码高亮主题

需要先将站点配置文件高亮代码设置打开，后边会说到，再编辑主题配置文件。

1
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

选择相应的高亮的主题

1
2
3
4
# Code Highlight theme
# Available values: normal | night | night eighties | 
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night

3.7 代码块复制

 在NexT7.x及以上的版本中直接开启复制功能即可。

1
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

将以下设置为true，并选择代码块的风格。

1
2
3
4
5
6
copy_button:
  enable: true
  # Show text copy result.
  show_result: true
  # Available values: default | flat | mac
  style: mac

3.8 侧边栏显示阅读进度

  • 打开scrollpercent即可
1
2
# 打开主题配置文件
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

修改部分如下:

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

我打开之后，好像没有效果，应该是没有显示top按钮，这里把这个按钮在侧边栏开关打开，修改如下：

1
2
# Back to top in sidebar.
sidebar: true
  • 效果如下图
img

4. 涉及源码修改

4.1 添加版权说明

该段的优化，可以实现版权的正常显示，但是复制文章链接的功能只能在刷新后才可以使用，原因是后边添加音乐播放器的时候开启了pjax这就导致了后面鼠标点击后的复制操作不会被加载，目前还没有解决，只能刷新后恢复正常。

  • （1）创建一个my-copyright.swig文件
1
2
3
4
5
6
# 进入目标文件夹
cd ~/02MyBlog/hexofiles/themes/next/layout/_macro/
# 新建mycopyright.swig，名字随意，下边对应就好
vim my-copyright.swig
# 后续可以用以下命令直接修改该文件
vim ~/02MyBlog/hexofiles/themes/next/layout/_macro/my-copyright.swig

文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>文章标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
	});
    });  
</script>
{% endif %}

<i class="far fa-copyright"></i>这句话是在许可协议这行的，这是一个Font Awesome 的版权的图标。

  • （2）新建一个my-post-copyright.styl文件
1
2
3
4
5
6
# 进入目标文件夹
cd ~/02MyBlog/hexofiles/themes/next/source/css/_common/components/post/
# 新建my-post-copyright.styl，名字随意，下边对应就好
vim my-post-copyright.styl
# 后续可以用以下命令直接修改该文件
vim ~/02MyBlog/hexofiles/themes/next/source/css/_common/components/post/my-post-copyright.styl

内容如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}
  • （3）引用模板
1
2
# 打开引用文件
vim ~/02MyBlog/hexofiles/themes/next/layout/_macro/post.swig

在以下代码之间

1
2
3
4
5
6
<!-- 在以下之后 -->
{%- if theme.follow_me %}
        {{ partial('_partials/post/post-followme.swig', {}, {cache: theme.cache.enable}) }}
{%- endif %}
<!-- 在以下之前 -->
<footer class="post-footer">

添加以下代码

1
2
3
4
5
6
<!--添加版权信息-->
<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>
  • （4）引用样式文件
1
2
# 打开引用文件
vim ~/02MyBlog/hexofiles/themes/next/source/css/_common/components/post/post.styl

在结尾添加以下代码：

1
@import "my-post-copyright"
  • （5）设置新建文章自动显示版权声明
1
2
# 打开相应文件
vim ~/02MyBlog/hexofiles/scaffolds/post.md

修改如下：

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags:
copyright: true #新增copyright
---
  • （5）最终效果如下
img

4.2 添加结束标记

  • 新建一个结束标记实现文件
1
2
3
4
5
6
# 进入目标文件夹
cd ~/02MyBlog/hexofiles/themes/next/layout/_macro/
# 新建实现文件
vim passage-end-tag.swig
# 后续可以用以下命令直接修改该文件
vim ~/02MyBlog/hexofiles/themes/next/layout/_macro/passage-end-tag.swig

在文件中添加以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">--------------------------本文结束<i class="fa fa-heart"></i>感谢您的阅读--------------------------</div>
    {% endif %}
</div>
  • 引用
1
2
# 打开引用文件
vim ~/02MyBlog/hexofiles/themes/next/layout/_macro/post.swig

在以下代码之间

1
2
3
4
5
6
<!-- 在以下之后 -->
{%- if theme.follow_me %}
        {{ partial('_partials/post/post-followme.swig', {}, {cache: theme.cache.enable}) }}
{%- endif %}
<!-- 在以下之前 -->
<footer class="post-footer">

添加以下代码

1
2
3
4
5
6
<!--结束标记-->
<div>
    {% if not is_index %}
      {% include 'passage-end-tag.swig' %}
    {% endif %}
 </div>
  • 配置主题配置文件
1
2
# 打开主题配置文件
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

添加以下代码：

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

https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/TheOldArticles/Hexo/NexT/003Scrollpercent.png)

4.3 修改底部#标签

  • 打开相应显示文件
1
vim ~/02MyBlog/hexofiles/themes/next/layout/_macro/post.swig

找到如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<footer class="post-footer">
  {%- if post.tags and post.tags.length %}
    {%- if theme.tag_icon %}
      {%- set tag_indicate = '<i class="fa fa-tag"></i>' %}
    {% else %}
      {%- set tag_indicate = '#' %}
    {%- endif %}
    <div class="post-tags">
      {%- for tag in post.tags.toArray() %}
        <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
      {%- endfor %}
    </div>
  {%- endif %}

  {{ partial('_partials/post/post-footer.swig', {}, {cache: theme.cache.enable}) }}
                                                                                                                                        
  {{ post_nav(post) }}
</footer>

发现在主题配置文件中打开tag_icon就可以了。

  • 配置主题配置文件
1
2
# 打开主题配置文件
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

修改如下：

1
2
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

4.4 去掉底部的由Hexo…强力驱动字样

  • 按以下修改相应文件
1
2
# 打开相应的文件
vim ~/02MyBlog/hexofiles/themes/next/layout/_partials/footer.swig

找到以下代码，注释掉中间的部分即可。

1
2
3
4
5
6
7
8
9
10
{%- if theme.footer.powered %}
<!--<div class="powered-by">
    {%- set next_site = 'https://theme-next.org' %}
    {%- if theme.scheme !== 'Gemini' %}
      {%- set next_site = 'https://' + theme.scheme | lower + '.theme-next.org' %}
    {%- endif %}
    {{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'}) + ' & ' + next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'})) }}
  </div>
  -->
{%- endif %}

其实也可以在主题配置文件中将footer中的powered设置为false

4.5 更换网页顶栏默认图标

  • 制作图片

我使用的是一个在线图标制作免费软件，这个就是比特虫，网址如下：

1
http://www.bitbug.net/

目标尺寸32x32就可以，然后填写附加码，再生成保存就可以了文件可以直接保存到以下位置。

1
~/02MyBlog/hexofiles/themes/next/source/images/
  • 修改该图标引用文件
1
vim ~/02MyBlog/hexofiles/themes/next/layout/_partials/head/head.swig

找到如下代码：

1
2
3
4
5
6
{%- if theme.favicon.medium %}                          
  <link rel="icon" type="image/png" sizes="32x32" href="    {{ url_for(theme.favicon.medium) }}">
{%- endif %}
{%- if theme.favicon.small %}
  <link rel="icon" type="image/png" sizes="16x16" href="    {{ url_for(theme.favicon.small) }}">
{%- endif %}

可以看到，这里有两种图标大小，由判断条件theme.favicon.medium可知，在主题配置文件中有相应的地方来设置该参数。

  • 配置主题配置文件
1
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

修改部分如下：

1
2
3
4
5
6
7
8
9
favicon:
  # small: /images/favicon-16x16-next.png
  # medium: /images/favicon-32x32-next.png
  small: /images/favicon16.ico
  medium: /images/favicon32.ico                        
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml
  • 效果如下所示
img

4.6 页脚增加网站运行时间统计

  • 修改footer.swig文件
1
vim ~/02MyBlog/hexofiles/themes/next/layout/_partials/footer.swig

  在适当的位置添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!--添加运行时间-->
<span id="sitetime"></span>
<script language=javascript>
	function siteTime(){
		window.setTimeout("siteTime()", 1000);
		var seconds = 1000;
		var minutes = seconds * 60;
		var hours = minutes * 60;
		var days = hours * 24;
		var years = days * 365;
		var today = new Date();
		var todayYear = today.getFullYear();
		var todayMonth = today.getMonth()+1;
		var todayDate = today.getDate();
		var todayHour = today.getHours();
		var todayMinute = today.getMinutes();
		var todaySecond = today.getSeconds();
		/* 
		Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
		year - 作为date对象的年份，为4位年份值
		month - 0-11之间的整数，做为date对象的月份
		day - 1-31之间的整数，做为date对象的天数
		hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
		minutes - 0-59之间的整数，做为date对象的分钟数
		seconds - 0-59之间的整数，做为date对象的秒数
		microseconds - 0-999之间的整数，做为date对象的毫秒数
        */
		var t1 = Date.UTC(2020,02,13,15,00,00); //北京时间2018-2-13 00:00:00
		var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
		var diff = t2-t1;
		var diffYears = Math.floor(diff/years);
		var diffDays = Math.floor((diff/days)-diffYears*365);
		var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
		var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
		var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
		document.getElementById("sitetime").innerHTML=" 已安全运行"+/*diffYears+" 年 "+*/diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
	}
	siteTime();
</script>

5. 需要安装插件

5.1 添加搜索功能

  • 安装两个插件
1
2
3
4
5
# 在站点根目录下分别安装插件
npm install hexo-generator-search  --save
npm install hexo-generator-searchdb --save
# 编辑相应文件
vim ~/02MyBlog/hexofiles/_config.yml
  • 配置站点文件

在站点配置文件中添加如下内容

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  • 修改next主题配置文件_config.yml
1
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

将 enable: false改为enable: true

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-gener
local_search:
  enable: true                                          
  # If au true [ID]      ch by changing input.
  # If manual, trigger search by pressing enter key or s
  trigger: auto
  # Show top n results per article, show all results by 
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

5.2 字数统计与阅读时长

  • 安装hexo-symbols-count-time插件

插件地址：hexo-symbols-count-time

1
https://github.com/theme-next/hexo-symbols-count-time

在站点根目录中执行以下命令安装该插件.

1
npm i hexo-symbols-count-time --save
  • 修改主题配置文件
1
2
# 打开主题配置文件
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

修改主题配置文件部分如下：

1
2
3
4
5
6
7
8
# Post wordcount display settings
 # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true  
  item_text_post: true 
  item_text_total: false 
  awl: 2
  wpm: 275

参数说明:

参数 说明
separated_meta 是否换行显示字数统计和阅读时长
item_text_post 文章的字数统计、阅读时长用图标还是文本表示
item_text_total 博客底部统计字数统计、阅读时长使用图标还是 文本表示
awl(Average Word Length) 设定多少字符统计为一个字（word），中文博客需要设置为 2
wpm(Words Per Minute) 阅读时长1分钟需要统计多少字（word），官方阅读参考为:Slow ≈ 200;Normal ≈ 275;Fast ≈ 350
  • 实现效果
image-20230618082730417

5.3 设置RSS订阅

  • 安装hexo-generator-feed插件

在站点根目录下执行以下命令：

1
npm install hexo-generator-feed --save
  • 配置站点配置文件
1
vim ~/02MyBlog/hexofiles/_config.yml

修改部分如下(添加plugins: hexo-generate-feed)：

1
2
3
4
5
6
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/                      
# theme: landscape
theme: next
plugins: hexo-generate-feed
  • 配置主题配置文件
1
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

修改部分如下(去掉RSS的注释)：

1
2
3
4
5
6
7
# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  #Twitter: https://twitter.com/username || fab fa-twit     ter
  #Telegram: https://t.me/channel_name || fab fa-telegr     am
  #WeChat: /images/wechat_channel.jpg || fab fa-weixin
  RSS: /atom.xml || fa fa-rss

5.4 添加音乐播放器

名称 点击链接访问相应网址
APlayer Aplayer
APlayer中文文档 APlayer中文文档
hexo-tag-aplayer hexo-tag-aplayer
hexo-tag-aplayer中文文档 hexo-tag-aplayer中文文档
theme-next-pjax theme-next-pjax
  • 安装hexo-tag-aplayer
1
npm install hexo-tag-aplayer --save
  • 修改_layout.swig文件
1
vim ~/02MyBlog/hexofiles/themes/next/layout/_layout.swig

添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 引用依赖 -->
<link rel="stylesheet" 
 href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>

<!-- APlayer本体 -->
<div class="aplayer" 
  data-id="7274703654" 
  data-server="tencent" 
  data-type="playlist" 
  data-fixed="true" 
  data-autoplay="true" 
  data-order="random" 
  data-volume="0.55" 
  data-theme="#cc543a" 
  data-preload="auto" >
  </div>
  <!--如果将本体放在body里面导致页面加载出现问题，请尝试放到body体后面-->

这里支持不同的音乐平台，id就是自己歌单地址中的那一串数字。

选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式：all, one,none
order list 列表播放模式： list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放，移动端浏览器暂时不支持此功能
mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式，可选项： none, metadata, auto
theme #ad7a86 播放器风格色彩设置
  • 修改站点配置文件
1
vim ~/02MyBlog/hexofiles/_config.yml

添加以下代码：

1
2
aplayer:
  meting: true
  • pjax全局播放插件

该插件可以使站点进行跳转的时候不继续播放(这里要注意,主题根目录中的.gitignore文件中忽略了所有的扩展包，如果不想重新下载，就可以修改文件，将其也添加到版本库中)。

1
2
3
4
# 进入主题文件夹根目录
cd ~/02MyBlog/hexofiles/themes/next
# 下载插件源码
git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

修改主题配置文件，打开pjax。

1
vim ~/02MyBlog/hexofiles/themes/next/_config.yml

修改如下：

1
2
3
# Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
pjax: true

二、站点设置

1. 配置参数说明

站点的一些配置参数如下

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。支援多个关键词。
author 名字
language 网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone 网站时区。Hexo 默认使用电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

2. 设置中文显示

目前 NexT 支持的语言如以下表格所示：

语言 代码 设定示例
English en language: en
简体中文 zh-Hans language: zh-CN
Français fr-FR language: fr-FR
Português pt language: pt or language: pt-BR
繁體中文 zh-hk 或者 zh-tw language: zh-hk
Русский язык ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id
Korean ko language: ko

编辑站点配置文件，将 language 设置成需要的语言。

1
vim ~/02MyBlog/hexofiles/_config.yml

修改如下

1
2
3
4
5
6
7
8
# Site
title: 一世繁华
subtitle: 记录点点滴滴
description: 选择远方，便只顾风雨兼程
keywords:
author: qidaink
language: zh-CN                                         
timezone: Asia/Shanghai

3. 持久化链接

使用Hexo后，默认的链接是http://url/年/月/日/hello-world这种类型的，这是由年/月/日/标题组成。如果调整过日期会变化，另外标题是中文或存在特殊符号的时候这样的链接可能就有问题。

  • 安装插件
1
npm install hexo-abbrlink --save
  • 修改站点配置文件
1
vim ~/02MyBlog/hexofiles/_config.yml

添加修改如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
# URL
## If your site is put in a subdirectory, set url as 'ht    tp://example.com/child' and root as '/child/'
url: http://example.com
root: /
  #permalink: :year/:month/:day/:title/
permalink: post/:abbrlink.html
abbrlink:
  alg: crc32 # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
permalink_defaults:
pretty_urls:                                            
  trailing_index: true # Set to false to remove trailing
  trailing_html: true # Set to false to remove trailing

4. 开启代码高亮

编辑站点配置文件

1
vim ~/02MyBlog/hexofiles/_config.yml

修改部分如下，文字自动检测默认不启动，所以改成true使其起作用。

1
2
3
4
5
6
7
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace: ''
  wrap: true
  hljs: false

5. 图片延迟加载

访问到图片的时候才会去请求图片资源，可以提高博客的访问速度。

  • 安装hexo-lazyload-image插件

在站点根目录下执行以下命令：

1
npm install hexo-lazyload-image --save
  • 配置站点配置文件
1
vim ~/02MyBlog/hexofiles/_config.yml

增加内容如下：

1
2
3
4
5
# 插件实现图片懒加载，提高博客访问速度
lazyload:
  enable: true
  onlypost: false
  loadingImg:  # eg. ./images/loading.png

onlypost：是否仅文章中的图片做懒加载, 如果为 false, 则主题中的其他图片, 也会做懒加载, 如头像, logo 等任何图片.

loadingImg：图片未加载时的代替图.