Typecho prism等高亮代码pjax重载函数
之前用wordpress的时候，从来没遇到过这种问题。高亮代码后，不管怎么看都是高亮。自从用上typecho，发现有些主题直接访问文章页面有高亮代码；但是，进首页再点击文章页后，代码高亮消失，刷新才行。
后来，发现这些主题都有一个共同点，都支持pjax，并且我开启了pjax。pjax是一种无刷新式打开链接的方式，是对ajax+ pushState的封装。后来，又慢慢的了解到用了pjax后，某些js只会执行一次，甚至不执行。因为，一般typecho主题的pjax只刷新#main部分（每款主题有差别，就这个意思吧），而不刷新底部，顶部，边栏以及一些js。好在，pjax还有一个功能，即pjax重载。它可以将你未成功加载的js再次加载一遍。下面，就是本篇教程具体内容，针对Typecho高亮代码所写的pjax重载函数。
prismjs实现的高亮代码 主要包括自己设置的prism高亮代码以及CodeHighlighter，不管哪个，只要是prism，就可以通过以下内容重载。
主题设置pjax重载 这部分内容，需要你的主题后台，有设置pjax重载的选项。如果你的主题不支持设置pjax重载，请看footer.php添加部分所述。
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
for (var i = 0; i < pres.length; i++){
if (pres[i].getElementsByTagName('code').length > 0)
pres[i].className = 'line-numbers';}
Prism.highlightAll(true,null);}
footer.php添加pjax重载 如果主题不支持设置pjax重载，请打开主题的footer.php文件，在</body>前添加如下内容即可！
<script type="text/javascript">
$(document).on('pjax:complete', function() {
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
for (var i = 0; i < pres.length; i++){
if (pres[i].getElementsByTagName('code').length > 0)
pres[i].className = 'line-numbers';}
Prism.highlightAll(true,null);}
});
</script>当然，如果你魔改了主题很多地方，比如通过js实现了一些功能，发现有时候需要刷新才生效，那就是需要pjax重载。你可以将你的pjax重载添加到本文中的pjax重载函数中。不懂，请看下图以及代码举例。
<script type="text/javascript">
$(document).on('pjax:complete', function() {
重载一
重载二
重载三
});
</script>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-9-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读