首页 » 建站手册 » Typecho prism等高亮代码pjax重载函数

Typecho prism等高亮代码pjax重载函数

谷歌已收录,更新于2019年02月25日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

说明

之前用wordpress的时候,从来没遇到过这种问题。高亮代码后,不管怎么看都是高亮。自从用上typecho,发现有些主题直接访问文章页面有高亮代码;但是,进首页再点击文章页后,代码高亮消失,刷新才行。

后来,发现这些主题都有一个共同点,都支持pjax,并且我开启了pjaxpjax是一种无刷新式打开链接的方式,是对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);}

Typecho prism等高亮代码pjax重载函数

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>

Typecho prism等高亮代码pjax重载函数

后续说明

由于我的代码高亮不是插件实现,是jscss纯代码实现的,所以有些没考虑到的,陆续补充吧!如果,你有任何需要pjax重载的需求,请下方评论,并告知插件或相关代码,有时间我帮你看看!

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

已有 14 条评论

  1. ahxx ahxx说道:

    大佬请问你的看图是用的什么插件 :razz:

  2. Kiwiape Kiwiape说道:

    不错不错,一步到位搞定问题,感谢大佬 :roll:

    1. 枂下 枂下说道:

      那是必然的

  3. YAMADIE YAMADIE说道:

    感谢分享

    1. 枂下 枂下说道:

      多谢支持 :mrgreen:

  4. 台庄资讯 台庄资讯说道:

    主题给我分享一下 :oops:

    1. 枂下 枂下说道:

      你不是用wordpress吗,这是typecho主题啊
      主题下载
      http://www.offodd.com/17.html

  5. typecho模板 typecho模板说道:

    像那种一个单词高亮的是怎么设置? 我记得有个主题是这样的

    1. 左岸 左岸说道:

      markdown行内代码的语法就是这样 `高亮代码`

    2. 枂下 枂下说道:

      typecho编辑文章,这样写就是高亮了
      `typecho`

  6. BigCoke BigCoke说道:

    我昨晚睡得早,沙发就被抢了,不服 :twisted:

    1. 枂下 枂下说道:

      热板凳给你留着呢 :roll:

  7. 烨 说道:

    来抢沙发 :wink:

    1. 枂下 枂下说道:

      终于不是bigcoke那货了,真皮沙发献上 :smile:

返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫