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

作者 : IT 大叔 本文共2926个字,预计阅读时间需要8分钟 发布时间: 2020-09-24

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

简而言之,这是什么?

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

TL; DR?看起来像这样:

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

.NET Core网站中的实现

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

该过程与任何网站相同:

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

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

安装Kontent Smart Link SDK

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

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

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

Web Spotlight-Kontent中的可视页面编辑插图(2)

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

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

输入:标记助手。

作为.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-idkontent-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>

等等-Web Spotlight现在在界面内将我的代码段突出显示为可编辑,并允许我单击小编辑图标以对其进行就地编辑,而无需离开Web Spotlight实时预览界面。

Web Spotlight-Kontent中的可视页面编辑插图(4)

该代码段已突出显示,并带有虚线的蓝色轮廓,并在右上方添加了蓝色的编辑图标。

热门提示

如果您将Smart Link SDK添加到您的站点,但是您无权访问Web Spotlight,它将为您提供一个从预览站点直接进入Kontent(在新选项卡中)的“深层链接”,以编辑确切的项目和您选择要编辑的元素。对于您的编辑人员来说,这可以极大地改善生活质量,因此,即使没有完整的Web Spotlight功能,我也建议在您生产的每个Kontent网站上执行此操作。

可用性

现在可用!继续并立即实施Smart Link SDK,启用完整的Web Spotlight体验就是为您的项目轻松进行服务器端切换(但当然要付出代价,为此请与Kontent联系!)。

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » Web Spotlight-Kontent中的可视页面编辑

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论