添加网页播放器 + 全站pjax

前言

本博客使用solo开源博客，最喜欢的nijigen主题自带pjax，但是不完善。看了看官方皮肤开发指南。开始写了

solo官方文档

Pjax 使用

引入 ${staticServePath}/js/lib/compress/pjax.min.js [已包含 jquery-3.1.0.min.js]
引入 ${staticServePath}/js/lib/nprogress/nprogress.css
页面中需要 pjax 的部分请参照以下代码进行修改

<div id="pjax">  
<#if pjax><!---- pjax {#pjax} start ----></#if>
我是需要 pjax 的内容
<#if pjax><!---- pjax {#pjax} end ----></#if>  
</div>

文章页面需把 id="pjax" 改为 id="pjaxArticle"；{#pjax} 改为 {#pjaxArticle}

调用 Util.initPjax

开始编写

主题源码在最下方

footer.ftl中引入nprogress.css和pjax.min.js，pjax.min.js已包含 jquery-3.1.0.min.js的话就把jqeury的引用注释掉。

把动态(dynamic.ftl),标签墙(tags.ftl),存档(archives.ftl),友链(links.ftl),归档详情(archive-articles),标签详情(tag-articles)的main区域(class="main")用pjax括起来（本人全部使用pjax，没搞懂pjaxArticle有什么用），side.ftl放在main区域内，该页面的js代码放在main区域内，footer.ftl全部放到main区域外。
imagepng

修改/js/lib/common.js，除了后台，自定义页面和RSS全部采用异步加载。

imagepng

修改footer.ftl，我将tags页面的js代码放入foorer中，因为tags页面没有引入jquery，所以我放在了footer--jquery下面。
使用Util.initPjax()，我写了两个回调方法，第一个是初始化导航，第二个就是一句打印语句，防止报错。。。

imagepng

这个时候就能体验到pjax了，但是只有导航页可以异步加载，接下来继续。

imagepng

现在修改文章页面，和第二步一样，先用pjax把main区域括起来，footer.ftl移到外面，然后在<@comment_script oId=article.oId>上面添加

<script type="text/javascript" src="${staticServePath}/js/lib/compress/pjax.min.js" charset="utf-8" />
<script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}" charset="utf-8" />
<script type="text/javascript" src="${staticServePath}/skins/${skinDirName}/js/common${miniPostfix}.js?${staticResourceVersion}" charset="utf-8">

这三个js其实在footer中有引入，但是为了防止文章页面报错，只是再次引入，此处有一个小问题，就是频繁切换文章的时候可能会引入多个相同的js，此处有待优化，如果您有好的方法可以一起交流。

macro-comments.ftl中添加，此处footer中也有定义，防止报错，也加上了。。。

var latkeConfig = {
	"servePath": "${servePath}",
	"staticServePath": "${staticServePath}",
	"isLoggedIn": "${isLoggedIn?string}",
	"userName": "${userName}"
};

现在就文章页面也可以进行pjax交互了，看看。

imagepng

发现问题，从其他页面跳转到首页的时候图片效果无法继续加载，像酱紫

imagepng

在index.ftl的main区域内中加上

<script type="text/javascript" src="${staticServePath}/skins/${skinDirName}/js/common${miniPostfix}.js?${staticResourceVersion}" charset="utf-8" />

放在这里就可以正常加载了。但是又是重复引用了。想到标签详情页和归档详情页文章多了的话会不会也出现同样的情况呢，顺便一起加上了。。。

imagepng

ok，继续完善，再次点击选中的导航时，会刷新页面，那我们就不让它刷新好了。
footer.ftl script标签内加上

$(function () {
	$("a").click(function () {
		var href=$(this).attr("href");
			if(href == location.href){
			return false;
		}
	})
})

完善: 动态页–>浏览动态未跳到指定锚点
修改/js/common.js 中 Util.initPjax 第一个pjax修改回调（因为我这里使用了一个pjax，第二个可以不改）

增加：

if (target.indexOf("#") \> -1) {  
  var position = target.substring(target.indexOf("#"), target.length);  
  location.href =  position;  
}

完善：多个js缓存时点击图片会打开多个页面，为了防止这种情况，我采用的是layer，因为layer只会在当前页面打开一个窗口，首先引入layui的layer，在footer.ftl中引入layui并在js脚本中初始化layer

var layer;
layui.use('layer', function(){
    layer = layui.layer;

});

修改/skins/nijigen/js/common.js 中Skin.init

$('body').on('click', '.content-reset img', function () {

}

移动到底部改为

window.onload = function () {

  $('body').on('click', '.content-reset img', function () {

	var img = new Image();

	img.src = $(this).attr("src");

	var width = img.width;
	var height = img.height;

	if (img.width > document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth * 0.9;
	}
	
	if (img.height > document.documentElement.clientHeight) {
		height = document.documentElement.clientHeight * 0.9;
	}

	layer.open({
		type: 1,
		title: false,
		closeBtn: 0,
		area: [''+width+'px', ''+height+'px'],
		skin: 'layui-layer-nobg', //没有背景色
		shadeClose: true,
		content: ""
	});

  })
}

完善：修改移动端默认主题medium为nijigen，如果移动端想用其他主题，再把其他主题按照本篇文章修改一下就好了。
solo.properties