前言#
在啟用 pjax 局部刷新後,進入下一個頁面時只需載入文章相關文件,大部分文件不需要重新載入,可以大幅降低網站的負載。對於訪問用戶來說,沒有生硬的界面跳轉,用戶體驗也很好。
但是如果同時啟用了 Prism 代碼高亮,進入文章頁時,prism.js 文件不會重新載入,這導致文章中的代碼高亮失效。
我這個主題自帶的 Prism 代碼高亮重新載入功能對於這種情況無效,只好尋找其他方案。
對於這種情況,網上有幾種解決方法,這裡針對 WordPress 提供其中一個最簡單的解決方法。
修改相關文件#
方法確實很簡單,只需修改一個文件,對於 Asky 系列主題來說,修改的文件位置是 /wp-content/themes/ASky/js/jquery.pjax.js
,如果不是這類主題的話,建議去搜索看看這個 js 文件的名稱。
修改位置在第 312 行以下,如下圖所示。
相關代碼如下:
//Prism Reload
if (container.contents.find("code[class*='language-']").length > 0)
$.getScript("/wp-content/plugins/ank-prism-for-wp/out/prism-js.min.js");//Your Prism.js location
由於使用的是 Prism 插件,所以最後一行的文件位置就是插件中使用的 prism.js 位置。
設置完成後即可正常使用代碼高亮,此外如果使用了 CDN 的話,緩存可能會久一點,可以手動去 CDN 控制台刷新這個文件,刷新時注意看網站加載的 jquery.pjax.js 文件後面是否有 ?ver=x.x.x
,如果有的話記得帶上。