Hexo之NexT主题实现点击按钮滚动到指定位置

前言

• 本次主要实现的功能是，点击index页面中的标题或者其他组件，页面会自动向下滚动至文章版块。主要使用JavaScript插件jquery实现
• 使用本教程之前记得先将博客备份，以免出现不可逆损失
• Hexo版本：4.2.0
• NexT版本：7.7.1
• jquery版本：1.11.1

具体步骤

1）下载jquery插件

本次使用的jquery插件下载地址：https://wow.techbrood.com/libs/jquery/jquery.min.js

在使用浏览器下载时，可以通过Ctrl+s组合键将其保存为.js文件

下载完成之后将此插件放入Hexo根目录的source文件夹的某个路径下，为了便于引用，我直接存放在source文件夹下

2）创建swig文件

custom.swig：先在Hexo根目录的themes\next\layout路径下创建.swig文件，此文件主要用于存放将要加入index.html页面中的代码。本次创建的文件名为custom.swig，其中代码主要为：

<script type="text/javascript" src="jquery.min.js"></script>
<script>
	$(document).ready(function (){
		$(".typewriter-content").click(function (){
			$('html, body').animate({
				scrollTop: $(".posts-expand").offset().top
			}, 500);
		});
	});
</script>

也可以使用下载地址的方式引入插件，如：

<script src="//wow.techbrood.com/libs/jquery/jquery.min.js"></script>

参数介绍：其中typewriter-content是需要实现点击功能组件的class ID，posts-expand是需要滚动至的组件的class ID

可以在浏览器中使用开发者模式（F12）来查看各个组件的class ID，如：

<div class="typewriter-container">
	<div class="typewriter">
		<span class="typewriter-content"></span>
	</div>
</div>

3）引入自定义的swig文件

在Hexo根目录的themes\next\layout路径下找到index.swig文件，此文件专门用于控制生成的index.html文件内容，遵循swig语法。在其中合适空行加入以下命令：

{# 在index.html页面的加入点击滚动功能 #}
{% include 'custom.swig' %}

4）重新生成博客

hexo clean && hexo g && hexo s

---

End~