首页 > 分享发现 > 使用CDN来加载js等文件

使用CDN来加载js等文件

博客里常常会带有一些代码演示的内容,这时候就希望代码里的关键词能够高亮显示。

 

Syntaxhighlighter 就是这样一款提供代码高亮功能的插件,不过安装了这个插件之后会发现它加载的 js 文件很多,小空间能节省就节省点,于是想办法找了个 CDN 从外部来加载这部分 js 内容。

 

安装插件后在 /wp-content/plugins/syntaxhighlighter 目录下找到 syntaxhighligher.php 文件,原始文件中的 // Register brush scripts 内容如下:


// Register brush scripts
wp_register_script( 'syntaxhighlighter-core', plugins_url( $this->shfolder . '/scripts/shCore.js', __FILE__ ), array(), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-as3', plugins_url( $this->shfolder . '/scripts/shBrushAS3.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-bash', plugins_url( $this->shfolder . '/scripts/shBrushBash.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-coldfusion', plugins_url( $this->shfolder . '/scripts/shBrushColdFusion.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-cpp', plugins_url( $this->shfolder . '/scripts/shBrushCpp.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-csharp', plugins_url( $this->shfolder . '/scripts/shBrushCSharp.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-css', plugins_url( $this->shfolder . '/scripts/shBrushCss.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-delphi', plugins_url( $this->shfolder . '/scripts/shBrushDelphi.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-diff', plugins_url( $this->shfolder . '/scripts/shBrushDiff.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-erlang', plugins_url( $this->shfolder . '/scripts/shBrushErlang.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-groovy', plugins_url( $this->shfolder . '/scripts/shBrushGroovy.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-java', plugins_url( $this->shfolder . '/scripts/shBrushJava.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-javafx', plugins_url( $this->shfolder . '/scripts/shBrushJavaFX.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-jscript', plugins_url( $this->shfolder . '/scripts/shBrushJScript.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-perl', plugins_url( $this->shfolder . '/scripts/shBrushPerl.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-php', plugins_url( $this->shfolder . '/scripts/shBrushPhp.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-plain', plugins_url( $this->shfolder . '/scripts/shBrushPlain.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-powershell', plugins_url( $this->shfolder . '/scripts/shBrushPowerShell.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-python', plugins_url( $this->shfolder . '/scripts/shBrushPython.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-ruby', plugins_url( $this->shfolder . '/scripts/shBrushRuby.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-scala', plugins_url( $this->shfolder . '/scripts/shBrushScala.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-sql', plugins_url( $this->shfolder . '/scripts/shBrushSql.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-vb', plugins_url( $this->shfolder . '/scripts/shBrushVb.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-xml', plugins_url( $this->shfolder . '/scripts/shBrushXml.js', __FILE__ ), array('syntaxhighlighter-core'), $this->agshver );

 

上面的内容可以替换成如下这样,引用源改为BootCDN

// Register brush scripts
wp_register_script( 'syntaxhighlighter-core',             'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shCore.min.js',             array(),                         $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-as3',        'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushAS3.min.js',         array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-bash',       'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js',        array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-coldfusion', 'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushColdFusion.min.js',  array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-cpp',        'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js',         array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-csharp',     'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js',      array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-css',        'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js',         array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-delphi',     'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushDelphi.min.js',      array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-diff',       'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushDiff.min.js',        array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-erlang',     'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushErlang.min.js',      array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-groovy',     'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushGroovy.min.js',      array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-java',       'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js',        array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-javafx',     'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushJavaFX.min.js',      array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-jscript',    'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js',     array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-perl',       'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushPerl.min.js',        array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-php',        'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js',         array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-plain',      'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js',       array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-powershell', 'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.min.js',  array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-python',     'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js',      array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-ruby',       'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.min.js',        array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-scala',      'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushScala.min.js',       array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-sql',        'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushSql.min.js',         array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-vb',         'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushVb.min.js',          array('syntaxhighlighter-core'), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-xml',        'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js',         array('syntaxhighlighter-core'), $this->agshver );

 

除了 js 可以从外部加载之外,syntaxhighlighter 的css 也可以从改为从外部加载,同样是在 syntaxhighligher.php 里,将 // Register theme stylesheets 下面的内容改成如下即可

// Register some popular third-party brushesnull
wp_register_script( 'syntaxhighlighter-brush-clojure',    plugins_url( 'third-party-brushes/shBrushClojure.js',           __FILE__ ), array('syntaxhighlighter-core'), '20090602'     );
wp_register_script( 'syntaxhighlighter-brush-fsharp',     plugins_url( 'third-party-brushes/shBrushFSharp.js',            __FILE__ ), array('syntaxhighlighter-core'), '20091003'     );
wp_register_script( 'syntaxhighlighter-brush-latex',      plugins_url( 'third-party-brushes/shBrushLatex.js',             __FILE__ ), array('syntaxhighlighter-core'), '20090613'     );
wp_register_script( 'syntaxhighlighter-brush-matlabkey',  plugins_url( 'third-party-brushes/shBrushMatlabKey.js',         __FILE__ ), array('syntaxhighlighter-core'), '20091209'     );
wp_register_script( 'syntaxhighlighter-brush-objc',       plugins_url( 'third-party-brushes/shBrushObjC.js',              __FILE__ ), array('syntaxhighlighter-core'), '20091207'     );
wp_register_script( 'syntaxhighlighter-brush-r',          plugins_url( 'third-party-brushes/shBrushR.js',                 __FILE__ ), array('syntaxhighlighter-core'), '20100919'     );

// Register theme stylesheets
wp_register_style(  'syntaxhighlighter-core',             'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shCore.min.css',             array(),                         $this->agshver );
wp_register_style(  'syntaxhighlighter-theme-default',    'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css',     array('syntaxhighlighter-core'), $this->agshver );
wp_register_style(  'syntaxhighlighter-theme-django',     'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shThemeDjango.min.css',      array('syntaxhighlighter-core'), $this->agshver );
wp_register_style(  'syntaxhighlighter-theme-eclipse',    'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.min.css',     array('syntaxhighlighter-core'), $this->agshver );
wp_register_style(  'syntaxhighlighter-theme-emacs',      'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shThemeEmacs.min.css',       array('syntaxhighlighter-core'), $this->agshver );
wp_register_style(  'syntaxhighlighter-theme-fadetogrey', 'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shThemeFadeToGrey.min.css',  array('syntaxhighlighter-core'), $this->agshver );
wp_register_style(  'syntaxhighlighter-theme-midnight',   'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shThemeMidnight.min.css',    array('syntaxhighlighter-core'), $this->agshver );
wp_register_style(  'syntaxhighlighter-theme-rdark',      'https://cdn.bootcss.com/SyntaxHighlighter/3.0.83/styles/shThemeRDark.min.css',       array('syntaxhighlighter-core'), $this->agshver );

 

上面的源都是引用的 BootCDN的,你可以在  BootCDN 去搜索找到需要外部加载的公共内容,上面除了 Syntaxhighligher 还有很多别的公共资源,例如 jQuery 还有 font-awesome 等,之前如果是本地加载的文件的话都可以替换成如上的外部源文件。

 

当然除了 bootcdn ,你还可以使用 cloudflare 作为加载源,可以去 CloudFlare 搜搜看。

留言板 当前主题:0

留言审核后可见.

相关杂记
快递查询插件--快递管家(支持国际件,自动提醒)

双十一到了,剁手族们的购物车内肯定囤积了很多的待购商品,可以想象之后快递员又有的忙了。这里放出一个自制的浏览器插件

阅读更多>>
javascript 里的 new 操作和继承(全记录)

主要是记录下 js 里关于 new 和 继承的细节,因为网上的资料都比较分散,这里汇总下,并且加上了思考的过程。

阅读更多>>
使用CDN来加载js等文件

博客里常常会带有一些代码演示的内容,这时候就希望代码里的关键词能够高亮显示。

阅读更多>>
DOS快餐店连载系列下载

这是很早之前《电脑爱好者》杂志上连载的内容,一共12期,主要是以小故事的形式讲解了 windows 下命令行工具的使用。例如批量重命名,循环等。

阅读更多>>
ionic3 自定义图标文件(亲测可用)

首先准备好用来做图标的 svg 文件,你可以自己用 ai 画或者去网上下载就行啦,如下图所示:

阅读更多>>