syntaxhighlighter 动态加载

syntaxhighlighter 是一个高亮代码的好工具,我没有使用 wordpress 中的插件,而是自己去集成了它,不过每次都加载,是很慢的,于是就希望其能动态加载,官方在3.0版本里提供了动态加载的方法(autoloader 方法),不过也是在预先加载两个核心 JS 的情况下才能实现的,这样的减肥方法不太吸引人,于是在网上寻找方法,看到下面文章:在WordPress指定页面加载指定JavaScript或CSS代码

文章中提到使用自定义字段的方法来动态加载 css 或者 js,这就是一个可以利用的地方,打造开始:

  • 首先,在主题的 function.php 下添加如下函数,函数的作用是根据传递的参数来加载不同文件。其中的 $type 参数,可以是自己需要的字段,比如”cpp",“php"等,我仅仅需要以下的几个,如果您想添加更多,仿照即可, shCore_all.css 是合并了 shCore.css 和 shThemeDefault.css 后的文件,您可以选择不合并,那么就需要加载两个 css 文件。

  • 第二步,即是在主题的header.php文件内添加判断代码,如果当前页面是单个日志或者页面,go on,获得日志的关于"code"的自定义字段的值。如果不为空就传递给上述我们所定义的函数,函数根据字段来判断输出哪个高亮文件。这段代码可以添加在 <?php wp_header() ?> 之后,也可以在<?php wp_footer() ?> 之前,自己决定吧。

  • 第三步就是在撰写日志时在下面的自定域内添加名称为"code"的自定义域,值为函数内的字段,比如c++为cpp,php为php,您可以根据自己的函数定义来填写。之后我们就实现了在不同页面加载不同的高亮文件了,当然,没有自定义域”code"的文章是不加载的,因此也提高了速度。

作者: 勿慢牛

安全方向,化學/化工專業,主要關注學佛、計算化學、C++、Python、計算機、古文化、哲學、思維方向,渴求與有共同興趣的朋友交流,詳情請查看“關于”頁面。

《syntaxhighlighter 动态加载》有2个想法

  1. 不错的思路,赞一个!请教一下,如果文章中是用<pre class="brush: js">这种调用方法,提取字段的地方应该怎么写?

    1. 不好意思,邮件通知有点问题,所以回复晚了。
      如果你在function.php的判断函数里面加入了js的判断的话,可以将这个字段与函数里的东西对应即可,比如
      elseif ($type == “js”) { ?>
      那么只需要在code字段里面填上js就可以了

发表评论

电子邮件地址不会被公开。 必填项已用*标注