Web Spotlight-Kontent中的可视页面编辑

Web Spotlight对于Kontent是一个非常令人兴奋的发行版。作为纯粹的内容即服务平台，其内容管理功能完全适合“无头CMS”类别。这项新功能使您可以连接网站的“头部”，并获得丰富的视觉编辑体验，这些体验通常仅适用于传统的紧密耦合CMS平台。

简而言之，这是什么？

Kontent界面中的一个新模块，使您可以使用传统的“树”式导航来浏览站点，而这种导航在大多数以Web为中心的CMS中都可以看到。
新的“首页”和“页面”内容类型（可以根据需要修改或替换）和新的“子页面”元素，这些元素类似于链接的项目，但专门用于将网页彼此链接。
您的实时预览站点显示在Kontent内部，位于您所选页面的树旁边，带有可编辑的项目和字段，突出显示并与“编辑”图标链接。
无需离开Web Spotlight界面即可在此处编辑这些字段的功能。
无论您使用何种技术构建，都可以将其安装到预览站点中的“ Smart Link SDK”。Jamstack，静态，动态，PHP，.NET都没关系。

TL; DR？看起来像这样：

.NET Core网站中的实现

您可能已经读过，几年前我们在Kontent上建立了我们的网站。我们选择的技术是Azure Web Apps中托管的.NET Core MVC，它与一些最近流行的选择（例如使用静态网站生成器和Jamstack）有很大不同。幸运的是，这对我们几乎没有什么影响！

该过程与任何网站相同：

启用Web Spotlight（与您友好的本地Kontent销售代表联系）
使用新的Subpages元素将页面在内容模型中连接在一起
在预览站点中安装Smart Link SDK。

该文档很好地处理了第1项和第2项，因此今天我将简单介绍如何处理第3项-将其安装到我的.NET Core MVC网站中。

安装Kontent Smart Link SDK

安装Smart Link SDK可以分为三个步骤：

包括CSS样式表（来自CDN）
包括一个JS脚本文件（来自CDN）
将数据属性添加到标记中，以标记内容项和字段值在标记中的位置。

您希望您的预览站点中的标记最终被data-kontent-item-id和data-kontent-element-codename属性所困扰，例如：

有很多简单的方法可以在您的代码中执行此操作，但是我想实现它，以便：

它仅在我的预览环境中显示，而不在我的实时网站中显示
我的Razor视图尽可能保持清晰和可读性，几乎没有逻辑
只需几百或几百个视图，只需进行很小的更改，即可在整个网站上快速轻松地进行推广
在其他任何/未来的站点（无论是我的还是您的！）中实施起来都非常容易。

输入：标记助手。

作为.NET Core MVC标记帮助器实现

using Microsoft.AspNetCore.Razor.TagHelpers;
using System;

namespace Luminary.WebApp.TagHelpers
{
    [HtmlTargetElement(Attributes = "kontent-*")]
    public class KontentTagHelper : TagHelper 
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            base.Process(context, output);

            // only add data attributes if Web Spotlight should be active
            var environment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");
            var isPreview = (environment == "Preview" || environment == "Development");

            if (isPreview)
            {
                var elementCodename = context.AllAttributes["kontent-codename"];
                var itemid = context.AllAttributes["kontent-id"];
                if (elementCodename != null)
                {
                    output.Attributes.Add("data-kontent-element-codename", elementCodename.Value);
                }
                if (itemid != null)
                {
                    output.Attributes.Add("data-kontent-item-id", itemid.Value);
                }
            }

            // remove original taghelper attributes
            output.Attributes.RemoveAll("kontent-codename");
            output.Attributes.RemoveAll("kontent-id");
        }    
    }
}

这个自定义标签帮助程序使我可以仅使用kontent-id或kontent-codename轻松地将所需属性添加到标记中，并确保它们仅在我的开发和预览环境（而不是实时站点）中显示。为了对这个我正在演示的代码片段组件（非常元）启用上下文内编辑，我只需要添加自定义的kontent-id和kontent-element属性，如下所示：

@model CodeSnippet
@{
    Layout = null;
    var pluginClass = @Model.ShowLineNumbers.IsYes() ? "line-numbers" : "";
    var languageClass = @Model.Language;
}
<div class="ct-code-snippet" id="@Model.System.Codename" kontent-id="@Model.System.Id">
    <div class="container" kontent-codename="@CodeSnippet.CodeCodename">
        <pre class="@pluginClass"><code class="language-@languageClass">@Model.Code</code></pre>
    </div>
</div>