用 Hexo 和 GitHub Pages 搭建博客 - 个人博客 - 不看会后悔的实用技巧分享 | Aayu Yain = 学无止境 = 世界上大部分事，都没太大意义。真理与热爱除外

# 前言

参考了诸多教程，并在已有教程的基础上进行了一些改进，记录与此～

# 给文章增加结束语

新增文件 source/_data/post-body-end.njk

	<div>
	<div>
	-----------------------本文结束感谢您的阅读-----------------------
	</div>
	</div>

修改 _config.next.yml

	custom_file_path:
	postBodyEnd: source/_data/post-body-end.njk

# 脚注添加网站运行时间

新增文件 source/_data/footer.njk

	<div>
	<span id="timeDate" style="">载入天数...</span><span id="times">载入时分秒...</span>
	</div>
	<script>
	var now = new Date();
	function createtime() {
	var grt= new Date("05/20/2020 00:00:00");// 在此处修改你的建站时间，格式：月 / 日 / 年时：分：秒
	now.setTime(now.getTime()+250);
	days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
	hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
	if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
	mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
	seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
	snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
	document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
	document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
	}
	setInterval("createtime()",250);
	</script>

修改 _config.next.yml

	custom_file_path:
	footer: source/_data/footer.njk

# 添加友链

创建 hexo new page links
在 _config.next.yml 中的 menu 添加 links: /links/ || fa fa-link
创建 source/_data/languages.yml
增加中文描述

	# language
	zh-CN:
	# items
	menu:
	links: 友链

# 添加自定义图标（Bilibili）

参考：Custom Icon Image

样式编辑如下：

	.fa-bilibili {
	background: url(/images/bilibili.svg);
	//background-position: 50% 50%;
	//background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 1em;
	width: 1em !important;
	margin-bottom: -1px;
	margin-right: 3px !important;
	}

# 添加标签云

文档地址：Hexo Tag Cloud

安装 npm i hexo-tag-cloud -S
在 source/_data/sidebar.njk 文件中添加

修改 _config.next.yml ，放开 custom_file_path 中的 sidebar 注释
在 _config.yml 添加

	# hexo-tag-cloud
	tag_cloud:
	textFont: Trebuchet MS, Helvetica
	textColor: '#333'
	textHeight: 15
	outlineColor: '#E2E1D1'
	maxSpeed: 0.05
	pauseOnSelected: true # true 意味着当选中对应 tag 时，停止转动

然后使用 hexo clean && hexo g && hexo s 来享受属于你自己的独一无二的标签云吧。

# 添加看板娘

参考：Hexo -5- 添加 live2d 看板动画

# 文章置顶

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
在需要置顶的文章的 Front-matter 中加上 top: true 或者 top: 任意数字 ，比如：（top 中数字越大，文章越靠前）

	reward_settings:
	enable: true
	comment: Buy me a coffee
	top: 10

在 layout\_partials\post\post-meta.njk 文件中编辑如下

<!--swig5-->

# 音乐播放器

参考：Hexo NexT 主题中添加网页音乐播放器功能

点击访问 Aplayer 源码：GitHub Aplayer。下载到本地，解压后将 dist 文件夹复制到 themes\next\source 文件夹下。
新建 themes\next\source\dist\music.js 文件，添加内容：

	const ap = new APlayer({
	container: document.getElementById('aplayer'),
	fixed: true,
	autoplay: false,
	audio: [
	{
	name: "PDD洪荒之力",
	artist: '徐梦圆',
	url: 'http://up.mcyt.net/?down/39868.mp3',
	cover: 'http://oeff2vktt.bkt.clouddn.com/image/84.jpg',
	},
	{
	name: '9420',
	artist: '麦小兜',
	url: 'http://up.mcyt.net/?down/45967.mp3',
	cover: 'http://oeff2vktt.bkt.clouddn.com/image/8.jpg',
	},
	{
	name: '风筝误',
	artist: '刘珂矣',
	url: 'http://up.mcyt.net/?down/46644.mp3',
	cover: 'http://oeff2vktt.bkt.clouddn.com/image/96.jpg',
	}
	]
	});

在 layout\_partials\post\body-end.njk 文件中编辑如下：

	<link rel="stylesheet" href="/dist/APlayer.min.css">
	<div id="aplayer"></div>
	<script type="text/javascript" src="/dist/APlayer.min.js"></script>
	<script type="text/javascript" src="/dist/music.js"></script>

为了解决切换页面播放中断问题，只需要在 _config.next.yml 中，将 pjax: false 改为 pjax: true 即可～

# 目前的缺陷

修改了 NexT 的源码，主要是 changyan.js 、 footer.njk 和 post-mate.njk ，后面会用 inject 技术解决这个问题。

# 参考链接

用 Hexo 和 GitHub Pages 搭建博客
hexo 博客搭建浅谈
又见苍岚
Hexo
NexT
Hexo 功能增强插件