Kentico V8 自定义滑块 web 部件

Kentico V8 custom slider web part

我没有很强的 dotNet 背景,因为我只是一个 JS/CSS 的人。

我想将 slick.js 用作滑块插件,但我不知道如何使用。我想知道我是否在正确的轨道上。

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

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

我走对路了吗?如果是这样,我该如何开始。

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

可能想看看 Writing Transformations Documentation

您绝对是在正确的轨道上。我现在已经在几个网站上使用了 slick 并遵循了这个模式:

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

这是 Kentico 中使用 slick 文档的示例实现。我使用的是第 7 版,所以看起来会有些不同,并且会出现在不同的地方,但是通过谷歌搜索应该不难找出去哪里

首先,您需要获得 css 才能获得 slick。在这里,我刚刚将它添加到应用于 Kentico 中此站点的 CSS 文件中。:


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

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

并像这样设置中继器的 HTML 信封:

最后,创建您的转换:

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

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

您要做的是将您的 JS 文件添加到 JavaScript 应用程序中一个具有您网站代码名称的文件夹下。因此,如果您站点的代码名称是 "MySite",那么您可以在 Kentico 中打开 JavaScript 应用程序,并在自定义文件夹下添加一个名为 "MySite" 的新文件夹。然后在那里上传你的JS文件。

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

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

如果需要,还包括 jQuery 库。

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

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

这应该可以帮助您入门。