Kentico V8自定义滑块Web部件

时间:2016-01-05 20:45:19

标签: jquery kentico

我没有非常强大的dotNet背景,因为我是JS / CSS的主要人物。

我想使用slick.js作为滑块插件,但我失去了一个如何。我想知道我是否走在正确的轨道上。

理想情况下,编辑器可以根据我创建的滑块模板创建新页面。每个页面都是一张新幻灯片。这些页面将位于站点树中的特定文件夹中。

我的网页部件会将这些页面拉入并呈现格式正确的代码并包含所需的JS。

我在这里是正确的吗?如果是这样,我该如何开始。

3 个答案:

答案 0 :(得分:5)

你绝对是在正确的轨道上。我现在在几个网站上使用了光滑,并遵循这种模式:

  • 设置转发器webpart
  • 将转发器的HTML信封设置为滑块的包装
  • 设置转发器的转换以重复要作为幻灯片重复的文档的内容
  • 在javascript webpart中设置滑块脚本或在页面模板的标记上设置(我的首选方法)

这是Kentico中使用光滑文档的示例实现。我正在使用版本7,所以事情看起来会有所不同,并且位于不同的地方,但是不应该太难以弄清楚用谷歌搜索去哪里

首先,你需要获得光滑的CSS。在这里,我刚刚将其添加到Kentico中应用于此站点的CSS文件中:

slick.css added to Kentico stylesheet

接下来,您需要设置页面模板:

enter image description here

然后在设计选项卡中添加转发器:

enter image description here

设置转发器的HTML Envelope如下:

enter image description here

最后,创建转型:

enter image description here

编辑:您还需要确保正确设置内容,并确保转发器的内容设置指向正确的路径。在这里,我将转发器设置为从当前路径./%下方拉出所有内容,这是光滑的文档。

enter image description here

它正在提供您在此处看到的测试文档:

enter image description here

答案 1 :(得分:3)

您所做的是将您的JS文件添加到包含您网站代码名称的文件夹下的JavaScript应用程序中。因此,如果您网站的代码名称是" MySite"然后在Kentico中打开JavaScript应用程序并添加一个名为" MySite"的新文件夹。在Custom文件夹下。然后在那里上传你的JS文件。

在您的页面模板上,使用JavaScript webpart和一些代码(如

)添加对JS文件的引用
<script type="text/javascript" src="/CMSPages/GetResource.aspx?scriptfile=/CMSScripts/Custom/MySite/my-js-file.js"></script>

如果需要,还包括jQuery库。

然后将转发器webpart添加到您的页面模板。在属性中,您需要设置以下属性:

  • 路径:拾取滑块/图像的路径
  • 页面类型:您将在路径中查找的页面类型(即:菜单项)
  • ORDER BY表达式:NodeLevel,NodeOrder,NodeName
  • 转换:应该是滑块中每个项目的转换。例如,如果您有一个无序列表,这将包括打开和关闭<li>标签及其所有内容。
  • 使用无序列表的开始和结束标记以及您可能需要的任何包装元素之前和之后的内容。

这应该让你开始。

答案 2 :(得分:0)

可以使用每张幻灯片的自定义页面类型并使用转发器和转换来完成。将转发器中的路径设置为包含您的页面的文件夹,然后将javascript文件添加到您的页面。

可能想查看Writing Transformations Documentation