Kentico V8 自定义滑块 Web 部件答案

【问题标题】：Kentico V8 custom slider web partKentico V8 自定义滑块 Web 部件
【发布时间】：2016-01-06 05:51:20
【问题描述】：

我没有很强的 dotNet 背景，因为我主要是 JS/CSS 人。

我想使用 slick.js 作为滑块插件，但我迷路了。我想知道我是否走在正确的轨道上。

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

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

我在这里正确吗？如果是这样，我该如何开始。

【问题讨论】：

标签： jquery kentico

【解决方案1】：

您绝对是在正确的轨道上。我现在在几个网站上使用了 slick 并遵循以下模式：

设置转发器 Web 部件
将转发器的 HTML 信封设置为滑块的包装器
设置重复器的转换，以幻灯片的形式重复您要重复的文档内容
在 javascript webpart 或页面模板标记上设置滑块脚本（我的首选方法）

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

首先，您需要获得光滑的 css。在这里，我刚刚将它添加到 Kentico 中应用于此站点的 CSS 文件中。：

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

然后在设计标签中添加一个中继器：

然后像这样设置转发器的 HTML 信封：

最后，创建你的转换：

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

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

【讨论】：

Jerreck 的回答很好，即使是 v7 屏幕截图 :-)
哇，谢谢杰瑞克。我今天正在处理这个问题。如果/当我跌倒时，我可能会伸出援手。
这很棒。唯一对我不起作用的部分是由于转换。虽然我从屏幕截图中看到它加载了文档名称，但它是我无法显示的文档内容。到目前为止一切顺利！
@MarkHandy 您在显示什么内容时遇到问题？
@jerrick 我搞定了。至少到了我现在知道自己在做什么的程度。谢谢！

【解决方案2】：

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

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

）添加对 JS 文件的引用

<script type="text/javascript" src="/CMSPages/GetResource.aspx?scriptfile=/CMSScripts/Custom/MySite/my-js-file.js"></script>

如果需要，还可以包含 jQuery 库。

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

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

这应该可以帮助您入门。

【讨论】：

嗨 Brenden，在设置 ORDER BY by 时，我经常使用 NodeLevel、NodeOrder，但从不使用 NodeName，是吗？你能在同一个 NodeLevel 和 NodeOrder 上获得多个项目吗？这是为了帮助像 /% 这样的路径
嘿@DarrenS 通过添加节点名称，它将在级别和顺序之后按字母顺序排列节点项目。我总是使用它，它是 Kentico 推荐的，用于根据您的内容树设置进行排序。是的，您可以在节点中拥有多个名称相同或相似的项目，实际 URL 的别名会有所不同，但名称可以相同。
一如既往地感谢布伦登。

【解决方案3】：

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

可能想查看Writing Transformations Documentation

【讨论】：