Ratodo

夜半观星

我的花园到处是星星的碎片
telegram
github
email
nintendo switch

處理PJAX局部刷新導致程式碼高亮失效的問題

前言#

在啟用 pjax 局部刷新後,進入下一個頁面時只需載入文章相關文件,大部分文件不需要重新載入,可以大幅降低網站的負載。對於訪問用戶來說,沒有生硬的界面跳轉,用戶體驗也很好。

但是如果同時啟用了 Prism 代碼高亮,進入文章頁時,prism.js 文件不會重新載入,這導致文章中的代碼高亮失效。

我這個主題自帶的 Prism 代碼高亮重新載入功能對於這種情況無效,只好尋找其他方案。

對於這種情況,網上有幾種解決方法,這裡針對 WordPress 提供其中一個最簡單的解決方法。

修改相關文件#

方法確實很簡單,只需修改一個文件,對於 Asky 系列主題來說,修改的文件位置是 /wp-content/themes/ASky/js/jquery.pjax.js,如果不是這類主題的話,建議去搜索看看這個 js 文件的名稱。

修改位置在第 312 行以下,如下圖所示。

Pic1

相關代碼如下:

//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,如果有的話記得帶上。

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。