请注意,本站并不支持低于IE8的浏览器,为了获得最佳效果,请下载最新的浏览器,推荐下载 Chrome浏览器
欢迎光临。交流群:166852192

必备模块Vandelay Industries(二):Vandelay Classy


       本篇文章着重讲解Vandelay Industries模块中的第二个模块:Vandelay Classy模块的使用,这个模块的功能是可以对特定内容类型进行特定的渲染为其加入指定的CSS、脚本等,这是一个非常有用的功能,比如你的希望你的某个类型的文章和其他的不一样,或者我的一个部件和其他的部件显示风格或者用户体现不同,就可以使用这个模块,它可以添加到任何的内容类型中,让我们的页面更加更富个性化;
      模块下载地址:http://gallery.orchardproject.net/List/Modules/Orchard.Module.Vandelay.Industries
首先下载启用此模块:这是一个集合模块,安装完后启用其中的Vandelay Classy 模块;启用后在内容-》内容元件中就能看到此元件,如下图:

看到如上图就说明您的模块已经启动成功,下面我们就演示一下如何使用这个模块,我们用部件中的HtmlWidgets作为例子,给大家进行说明
首先将这个模块加入HtmlWidgets内容类型,如下图:

点击 内容-》内容类型-》HtmlWidget-》编辑,在弹出页面点击“新增元件”,如下图:

在新窗口,添加CutormCSS元件,如下图:

这样我们就添加为HtmlWidget添加完成,Custom Css字段了,下面我们讲一下如何进行设置使用;
进入部件-》选择区域-》添加 Htmlwidget,如下图:

进入添加页面我们将会看到额外的属性内容,如下图:

在上面红色区域部分,我们就可以添加对应的ID,CSS,ScriptUrl,点击保存后,进入首页刷新页面,看到页面的源码内容如下:

这样我们就完成了一个自定义风格的部件,通过这个模块,可以让我们网站化腐朽为神奇,增加更强大的视觉效果及用户体验。
最后我们简单来介绍一下如何实现该功能的,看源码我们不难发现,核心的东西在CustomCssHandler这个类里面,他继承与ContentHandler, 通过重写BuildDisplayShape事件使之可以添加classse,id,这看起来是一件很简单的事情 如下图:

脚本的属性有点不同,需要作一个单独的解释,一些用户想利用现有的JavaScript组件添加脚本到一个特定的部件或页面,但是还不想通过建立一个完整的模块,有时候宁愿使用HTML编辑器。
这种做法的问题之一是,JavaScript文件共享资源:例如,如果多个部件都包含一个同样的文件,你不希望该文件将包含超过一次,它是一种浪费并可能有一些副作用。
不过该模块添加新的脚本列表,添加脚本通过果园的资源管理器,将删除重复。
您可以包含您自己的脚本(一定要使用.js扩展名),或您可以使用在库中已经的注册名称(如“jQuery的”或“jQueryUI”)等。

作者原创内容不容易,如果觉得内容不错,请点击右侧“打赏”,赏俩给作者花花,也算是对作者付出的肯定,也可以鼓励作者原创更多更好内容。
更多详情欢迎到QQ群 166852192 交流。