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可以分为三个步骤:
您希望您的预览站点中的标记最终被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>
等等-Web Spotlight现在在界面内将我的代码段突出显示为可编辑,并允许我单击小编辑图标以对其进行就地编辑,而无需离开Web Spotlight实时预览界面。
该代码段已突出显示,并带有虚线的蓝色轮廓,并在右上方添加了蓝色的编辑图标。
热门提示
如果您将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
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。