创建用于插入 JavaScript 的 Sitecore cshtml 渲染

Question

我需要创建一个 cshtml 呈现和 Sitecore 控件，允许我从 Sitecore 字段插入 JavaScript。然后我可以将此控件附加到布局以在页面上插入 JavaScript。

我尝试将<script> 插入到使用富文本编辑器的控件中，但Sitecore 默认从编辑器中删除<script>，这导致我采用了这个解决方案。

我知道基础知识——需要有 cshtml 渲染、模板（假设只有一个字段，多行文本字段）和带有 cshtml 文件路径的布局渲染，但仅此而已。

开发人员使用了 Glass Mapper，我不知道它是如何融入上述内容的，或者如何重新实例化它。这将是我的第一个控件。如果有帮助，这是一个示例 cshtml 文件：

@inherits Glass.Mapper.Sc.Web.Mvc.GlassView<Company.Model.TDS.sitecore.templates.User_Defined.Company.Platform.Modules.Common.Sidebar_Text_Callout>

    @if (Model != null)
    {
        <div class="sidebar-text-callout">
            <h3>@Editable(Model, x => x.Sidebar_Callout_Title)</h3>
            <p>@Editable(Model, x => x.Sidebar_Callout_Copy)</p>
            @if (Model.Sidebar_Callout_Link != null)
            {
                <div class="all-caps-callout">
                    <a class="link-with-icon" href="@Model.Sidebar_Callout_Link.Url" target="@Model.Sidebar_Callout_Link.Target">@Model.Sidebar_Callout_Link.Text <span class="svg">@Html.Partial("~/Views/Icons/arrowRight.cshtml")</span></a>
                </div>
            }
        </div>
    }

Answer 1

从您提供的示例代码中的模型命名空间来看，您的开发人员似乎使用了TDS 及其code generation 功能来生成Sidebar_Text_Callout 类。

我建议您坚持使用相同的流程来创建 JavaScript 渲染。创建基于 Glass 的视图渲染的说明过于宽泛，无法在此上下文中涵盖，因此我在下面包含了一些高级步骤。 Glass 网站以及 Sitecore 自己的文档应该更详细地介绍这一点。

1. 创建包含多行文本字段的数据模板。如果您希望脚本在所有语言中都相同（或启用回退），请确保在该字段上选中“共享”复选框。否则，请不要选中 shared 或不配置回退。
2. 在 Sitecore 中创建一个新的视图渲染，其路径指向您的 .cshtml 文件的位置。
3. 将视图渲染“数据源模板”字段设置为新模板，并配置其余字段。特别重要的是数据源位置（即您要存储数据源项的位置）、缓存（您可能至少需要检查Cacheable 和Vary By Data）
4. 如果您希望作者能够通过体验编辑器将视图渲染作为“允许的控件”添加到占位符中（注意：因为这是 JavaScript，您可以选择跳过此步骤）李>
5. 右键单击您的主 TDS 项目并选择“与 Sitecore 同步”。您应该会看到新的模板、布局以及您所做的任何其他更改。使用 sync buttons 将这些更改拉入 TDS。这个过程应该会自动为您生成新的 Glass Mapper 模型，您可以立即在视图中开始使用它。
6. 最后，在您的视图中，引用新模型并输出该字段的值。由于我们正在渲染 JavaScript，您可能需要在没有体验编辑器支持的情况下输出原始值。

示例视图

@inherits Glass.Mapper.Sc.Web.Mvc.GlassView<Company.Model.TDS.sitecore.templates.User_Defined.Company.Platform.Modules.Common.PageLevelJavaScript>

@if (Model != null)
{
    @Html.Raw(Model.MyJavaScriptField)
}