文章目录
个人博客： https://mmmmmm.me
源码： https://github.com/dataiyangu/dataiyangu.github.io
效果
scrollReveal简单介绍以及简单操作
就是在鼠标滑动的时候，页面中的某个模块会动态的加载出来，不会显得那么突兀，增加页面的动态效果。
参考文档：
http://www.dowebok.com/134.html
https://blog.csdn.net/lp2659359879/article/details/52582892
next主题中加入scrollReveal
给article标签添加属性
进入目录themes/next/layout/_macro/post.swig
搜索到article标签的位置
<article data-scroll-reveal="enter bottom move 60px over 0.6s after 0.05s" class="{{ post_class }}" itemscope itemtype="http://schema.org/Article">
如上面的代码data-scroll-reveal="enter bottom move 60px over 0.6s after 0.05s”，具体的值自行修改。
给底部的不蒜子添加属性
{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% if theme.busuanzi_count.site_uv %}
<span data-scroll-reveal="enter left move 60px over 1s after 0.05s" class="site-uv">
{{ theme.busuanzi_count.site_uv_header }}
<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
{{ theme.busuanzi_count.site_uv_footer }}
</span>
{% endif %}
{% if theme.busuanzi_count.site_pv %}
<span data-scroll-reveal="enter right move 60px over 1s after 0.05s" class="site-pv">
{{ theme.busuanzi_count.site_pv_header }}
<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
{{ theme.busuanzi_count.site_pv_footer }}
</span>
{% endif %}
</div>
{% endif %}
注意这里最好设置为60px，因为太大的话会导致移动端的盒子变大，宽度就会被撑开了。
本地引入依赖并且编写启动函数
目录如图：
scrollReveal是我们需要引入的官方的js
my_scrollReveal.js（我自定义的启动函数）如下
tip:这里我尝试通过js将data-scroll-reveal动态的加入到article中，可能是因为 window.scrollReveal 初始化的操作，会导致报错（数组越界），所以最后通过直接在post.swig文件中添加属性。
//如果刷新的页面不是首页，即点进去的文章的话，就不进行scrollReveal的操作
//因为在点进去的文章还是article标签包着的。
//我这里是根据pathname即浏览器访问地址进行判断的
var pathname = window.location.pathname
if (pathname.indexOf("html") < 0) {
//config默认配置，不过我用着好像不起作用，这里没有研究明白
var config = {
enter: 'right',
move: '40px',
over: '3s',
after: '5',
reset: true,
init: true
};
//根据初始化配置创建一个scrollReveal对象
window.scrollReveal = new scrollReveal(config);
//初始化，会自动去页面中找到含有 data-scroll-reveal 属性的地方进行相关的操作。
scrollReveal.init();
}
修改require.js主函数
因为在我的next中我应用了require，所以经引用上面两个js的操作放到了这里。
//主函数
require.config({
waitSeconds: 0,
paths: {
"music": "/dist/music",
//目前会消耗较多的性能，以后可能会去掉。
"aplayer": "/js/src/aplayer",
"backgroudLine": "/js/src/backgroudLine",
"category": "/js/src/category",
"jquery.share.min":"/js/src/pjax/share/jquery.share.min",
/*不显示图标的话替换fonts*/
"share":"/js/src/pjax/share",
"css":"/js/src/pjax/css",
"comments":"/js/src/pjax/comments_git",
"love":"/js/src/love",
"eye":"/js/src/pjax/eye",
"header_left":"/js/src/pjax/header_left",
"article_top":"/js/src/pjax/article_top",
"easing":"/js/src/pjax/easing/jquery.easing.1.3",
"scrollReveal":"/js/src/pjax/scrollReveal/scrollReveal",
"my_scrollReveal":"/js/src/pjax/scrollReveal/my_scrollReveal",
},
shim: {
'share': {
deps: [
'css!/js/src/pjax/share/share.min','jquery.share.min'
]
},
'comments': {
deps: [
'css!/js/src/pjax/comments/gitalk'
]
},
'header_left': {
deps: [
'easing'
]
},
'my_scrollReveal':{
deps:[
'scrollReveal'
]
}
}
});
require(['backgroudLine','music','aplayer','category','jquery.share.min','share','css','comments','love','eye',
'header_left','article_top','easing','scrollReveal','my_scrollReveal'], function (){
});
在最后加入了scrollReveal和my_scrollReveal这两个函数，分别对应于引入官方的js和自定义的启动函数。
修改pjax的函数
如果没有加入pjax的看到上面就结束了，我这里应用的pjax所以记录下。
通过require引入的方式，发现并不能成功，
并且报错：
pjaxMain.js:78 Uncaught TypeError: scrollReveal is not a constructor
at pjaxMain.js:78
at Object.execCb (require.js:30)
at $.check (require.js:19)
at $.enable (require.js:24)
at $.init (require.js:18)
at require.js:27
也是是说并没有定义，而且有时候会出现pjax处理后第一次没问题，第二次就又会报出同样的错误。
最后解决的方法是将上面官方的js和自己写的js封装在一个函数中然后通过我的pjax函数进行引用（跳转和回退）。
/*pjax主函数*/
$(document).pjax('a[target!=_blank]', '#pjax-container', {
fragment: '#pjax-container',
timeout: 5000,
});
//用户通过浏览器的前进后退按钮，需要加载的js
$(window).on('popstate.pjax', function () {
/*必须加*/
// $(document).on('pjax:complete',
// function () {
pjax();
// })
})
$(document).on('pjax:start',
function () {
$(document).unbind('keyup')
})
$(document).on('pjax:complete',
function () {
require.config({
waitSeconds: 0,
paths: {
//这个是单独的
"jquery.share.min":"/js/src/pjax/share/jquery.share.min",
// "share":"/js/src/pjax/share",
//这个也是单独的
"css":"/js/src/pjax/css",
"pjax_function_public":"/js/src/pjax/pjax_function_public",
"comments":"/js/src/pjax/comments_git",
"love":"/js/src/love"
},
shim: {
'share': {
deps: [
'css!/js/src/pjax/share/share.min','jquery.share.min'
]
},
'comments': {
deps: [
'css!/js/src/pjax/comments/gitalk'
]
},
}
});
require(['jquery.share.min','share','css','pjax_function_public','comments'
], function () {
pjax();
});
})
function pjax() {
/*来必力评论*/
// comments_js();
/*gitalk评论*/
gitalk();
//护眼
eye_js()
//如果是文章，实现滚动效果
article_top_js();
//不蒜子
busuanzi_js();
//自己写的分享
pjaxshare();
// 分类的js
category_js();
// 局部刷新后文章内容不显示bug的js
opacity_js()
//点击有目录的文章sidebar不显示的bug解决
motion_js()
scrollspy_js()
//utils_js()
postdetails_js()
//lean数量统计的js，原来的js是在themes/next/layout/_third-party/analytics/lean-analytics.swig文件中
lean_analytics();
//百度推送js
baidutuisong();
// //右边sidebar滚轮效果消失了。
initSidebarDimension()
//懒加载
lazyLoad();
//捐赠的函数
donate();
//随鼠标的滚动文章动态出现的动画
my_scrollReveal_js();
}