在这一节我们将实现科技改变生活这个模块,并且向广大的Joomla爱好者揭示Joomla自定义HTML模块的一个BUG.

1,本节目标


使用自定义HTML模块来实现科技改变生活这个模块

2,奇怪的BUG


目标网站的科技改变生活这一部分是使用自定义HTML来做的。因此,我们直接在模块管理中新建一个自定义HTML模块,在模块中录入内容即可。但实际的操作,可能会让你很疑惑。

首先我们来看一下目标网站的“科技改变生活”模块:

目标网站科技改变生活.png

在这个模块的下面出现了一行小字,“注意:请使用codemirrow编辑器来编辑该模块

这是什么意思?为什么这个模块下有一行字,其他的模块没有呢?

为了搞清楚这个问题,我们首先来看一下(TinyMCE编辑器)模块内容。截图如下:

Joomla自定义HTML模块编辑器.png

如果对比前台显示效果大家可能会看出一点什么

Joomla自定义HTML模块的前台效果.png

你可以看到,后台的文字和前台显示的都对上了,但是文字上的图标却没有出现。这个是为什么呢?

做过网页的都知道,图标是使用字体来做出来的,现在已经有很多的开源字体图标库了,并且joomla也自带了一个字体图标库,我们要做的就是在需要的地方引用这个图标。

引用图标的办法 一般使用 <i class="icon icon-home"></i> <span class="icon icon-home"></span> 之类的标签。这些代码只能在源码中被查看。

那么我点击编辑下方的切换编辑器,来看看此时模块的源码,截图如下:

JoomlaHTML查看源码.png

如果你有过HTML的使用经验,那么就可以很快的看到问题的所在了。这个上面没有 插入字体图标的代码。依据代码不会说谎的原则,此时,系统不可能在前台显示图标的。但实际上,我们的模块在前台真的显示了图标了。难道代码说谎了?这是一个很有意思的问题,可以和大家讨论一下。

代码不会说谎,如果在前台显示了字体图标的代码,那么说明我们这个模块的自定义HTML中一定有对应的代码。(大家可以通过查看页面源码来确认)。那么问题出在了什么地方呢?

实际上是编辑器的问题,当我们要编辑这个模块的额时候,系统会从数据库中读取这个模块的数据,然后这些数据会经过编辑器的处理,最后展现给我们。在Joomla中,编辑器会过滤掉<i><span>等空白标签,(

我认为这是非常不明智的 ,所以当我们使用TinyMCE编辑打开的时候就看不到了。

最神奇的时候,发生在下面。如果此时你不点击保存,那么一切都可以正常,一旦你点击了保存,你再次刷新前台界面后,你将会看到页面都被变了。

虽然,你什么都没有修改,但这个模块显示的内容已经和之前不一样了(因为系统存储了被编辑器处理过的代码了)。这就是为什么在某一些模板中,当仅仅是修改了模块的位置,保存按钮后,前台界面发生奇怪变化的原因了。

3,如何解决?


 那么如何解决这个问题呢?使用codemirror编辑器或者none编辑器。

前往系统 ->全局设置 前台编辑器设置中更换编辑为cideNurrir或者none均可。如图:

Joomla更换编辑器.png

保存完成后,我们再次编辑模块,你就会看到最终的代码了:

JoomlaCodeMirror编辑器.png

在这种编辑器模式下,你的修改才会被系统原封不动的保存。

 由于这种编辑器是直接显示源码的,不利于编辑文章,所有,在编辑完模块后,建议你将其修改会TinyMCE编辑器。

 

用户评分: 0 / 5

不活动星星不活动星星不活动星星不活动星星不活动星星