网站首页出现与插件的JS冲突简单解决办法

Python& AI 2018-11-08 30,965 次浏览 Comments Off on 网站首页出现与插件的JS冲突简单解决办法

前几天给网站换用了Enlighter插件来更方便的实现代码高亮,但是启用插件后发现首页在短暂显示正常后变成白屏,无法正常显示,而网站的其他页面均显示正常,由于页面能短暂的显示正常,说明是在页面加载一个文件后出现了冲突。
运用排除法,查看启用和关闭Enlighter插件后的首页源代码,发现启用插件后后,页面多出了

<script type='text/javascript' src='http://photo.imzifeng.cn/wp-content/plugins/enlighter/resources/mootools-core-yc.js?ver=3.8.1'></script>

<script type='text/javascript' src='http://photo.imzifeng.cn/wp-content/plugins/enlighter/resources/EnlighterJS.min.js?ver=3.8.1'></script>

<script type="text/javascript">/* <![CDATA[ */EnlighterJS_Config = {"selector":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"language":"generic","theme":"git","indent":2,"hover":"hoverEnabled","showLinenumbers":true,"rawButton":true,"infoButton":false,"windowButton":true,"rawcodeDoubleclick":false,"grouping":true,"cryptex":{"enabled":false,"email":"mail@example.tld"}};!function(){var a=function(a){var b="Enlighter Error: ";console.error?console.error(b+a):console.log&&console.log(b+a)};return window.addEvent?"undefined"==typeof EnlighterJS?void a("Javascript Resources not loaded yet!"):"undefined"==typeof EnlighterJS_Config?void a("Configuration not loaded yet!"):void window.addEvent("domready",function(){EnlighterJS.Util.Init(EnlighterJS_Config.selector.block,EnlighterJS_Config.selector.inline,EnlighterJS_Config)}):void a("MooTools Framework not loaded yet!")}();;/* ]]> */</script>

可以看到,分别是对两个插件依赖js脚本的引用、一个使enlighter插件正常显示的代码。打开开发者工具,修改网页源代码。逐个删除三段代码中的一个,发现在删除

<script type='text/javascript' src='http://photo.imzifeng.cn/wp-content/plugins/enlighter/resources/EnlighterJS.min.js?ver=3.8.1'></script>

后首页显示正常, 说明添加这个js会导致首页异常。但是该js是插件使用所必需的。查看插件后台设置,发现插件支持关闭在网页头中添加对js的引用

关闭后首页正常打开,但插件无法正常使用。之后在插件BETA选项卡中找到,按需加载js和css的脚本,但启用后无效。

解决办法:由于插件在全页面加入的三条代码仅影响首页的正常显示,而文章和其他页面不受影响,故只需要在首页之外的其余页面中加入这几行代码即可。考虑到首页没有评论区块,而文章和页面页有评论区块。故可以在评论区块中自动加入这几行代码即可解决问题。

打开网站主题文件夹,找到comments.php文件,在内容结尾处加入上面三行代码。并设置插件为不自动添加引用代码。问题解决。

微信扫一扫,分享到朋友圈

网站首页出现与插件的JS冲突简单解决办法
梓沨

站长 INTP,生物搬砖工