新增網頁播放器 + 全站pjax
前言
本部落格使用solo開源部落格，最喜歡的nijigen主題自帶pjax，但是不完善。看了看官方面板開發指南。開始寫了
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區域外。
修改/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主題原始碼。
哪位大佬有好的思路可以解決重複引入的問題，一起交流哦～
