웹 Spotlight - Kontent에서 비주얼 페이지 편집(하루 미만)
11332 단어 headlesscmscmsmvcnetcore
요컨대 이것은 무엇입니까?
TL;박사님?보아하니 이렇다.
배경 읽기:
a의 실현.NET 핵심 웹 사이트
보시다시피 몇 년 전에 Kontent에 저희 사이트를 만들었습니다.우리가 선택한 기술은NET Core MVC가 Azure Web Apps에 호스팅되는 것은 정적 사이트 생성기와 Jamstack 사용과 같은 최근 유행하는 선택과는 매우 다르다.다행히도, 이것은 거의 다르지 않다!
이 프로세스는 모든 웹 사이트와 동일합니다.
Kontent Smart Link SDK 설치
Smart Link SDK 설치는 다음 세 단계로 요약됩니다.
코드에는 이것을 할 수 있는 간단한 방법이 많지만, 나는 그것을 실현하고 싶다.
하나의 전체적인 실시로서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 코드 이름만 사용하면 필요한 속성을 태그에 쉽게 추가할 수 있고 실시간 사이트가 아닌 개발 및 미리보기 환경에만 표시할 수 있도록 합니다.상하문에서 제가 설명하는 이 코드 세션 구성 요소 (매우 meta) 를 편집할 수 있도록 사용자 정의 kontent id와 kontent 요소 속성을 추가해야 합니다. 아래와 같습니다.@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>
Et voila – Web Spotlight는 현재 인터페이스 내의 코드 세그먼트를 편집 가능한 것으로 표시하고 웹 Spotlight live 미리 보기 인터페이스를 떠나지 않고 편집 아이콘을 눌러서 편집할 수 있도록 합니다.코드 세그먼트가 파란색 점선으로 강조 표시되고 오른쪽 위 모서리에 파란색 편집 아이콘이 추가됩니다.
열단
Smart Link SDK를 웹 사이트에 추가하지만 웹 Spotlight에 액세스할 수 있는 권한이 없는 경우 미리 보기 웹 사이트에서 Kontent(새 탭에 있는)까지 직접 딥 링크를 제공하여 편집할 항목과 요소를 편집합니다.이것은 당신의 편집자에게 있어서 커다란 삶의 질 향상이다. 그래서 나는 당신이 만든 모든 Kontent 사이트에서 완전한 인터넷 스포트라이트 기능이 없어도 이렇게 하는 것을 건의한다.
활용성
그것은 지금 사용할 수 있습니다!이제 Smart Link SDK를 시작하여 완전한 웹 Spotlight 체험을 실현하려면 서버에서 프로젝트를 전환하기만 하면 됩니다(물론 비용이 듭니다. Kontent에 문의하십시오!).
아직 Kontent 고객이 아니라면 myspecial link를 사용하여 시험 기간을 연장할 수 있습니다.
Reference
이 문제에 관하여(웹 Spotlight - Kontent에서 비주얼 페이지 편집(하루 미만)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kentico-kontent/web-spotlight-visual-page-editing-in-kontent-in-less-than-a-day-10hk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)