添加网页播放器 + 全站 pjax

前言

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

solo 官方文档

Pjax 使用

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

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

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

4. 调用 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 区域外。

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

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

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

现在修改文章页面，和第二步一样，先用 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 交互了，看看。

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

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

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

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

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

mobile.skin=nijigen
​

pjax 切换的时候网页标题只显示了标签墙，归档，友情链接。。。 我希望在后面加上我的博客名字，继续修改。。

修改/js/common.js 配置一下后缀

修改/js/lib/compress/pjax.min.js
先格式化代码 找到 2574 行，判断一下标题是否存在我的名字，防止标题出现 "幸运草 的博客 - 幸运草 的博客"

加入播放器

完成，最后加上播放器，在 footer 最后引入播放器 js

估计可以猜出来吧 ～

源码

最后附上免费播放器地址和修改后的 nijigen 主题源码。

免费网页播放器 nijigen 主题 layui-v2.4.3

哪位大佬有好的思路可以解决重复引入的问题，一起交流哦 ～

原文地址