웹 Spotlight - Kontent에서 비주얼 페이지 편집(하루 미만)

Web Spotlight는 Kontent의 매우 감동적인 버전입니다.단순한 컨텐츠 즉 서비스 플랫폼으로서 컨텐츠 관리 기능은 "헤드 없는 CMS"범주에 완전히 부합됩니다.이 새로운 기능은 한 사이트의'머리'를 연결할 수 있고 풍부한 시각적 편집 체험을 얻을 수 있으며 통상적으로 전통적인 긴밀한 결합된 CMS 플랫폼에만 보존된다.

요컨대 이것은 무엇입니까?

  • Kontent 인터페이스의 새로운 모듈로 전통적인 트리식 네비게이션을 사용하여 사이트를 조회할 수 있습니다. 이것은 대부분의 웹 중심의 CMS에서 볼 수 있습니다.
  • 새 홈 페이지와 페이지 내용 유형(필요에 따라 수정하거나 바꿀 수 있음) 및 링크된 항목과 유사하지만 웹 페이지를 서로 링크하는 데 사용되는 새로운 하위 페이지 요소.
  • 귀하의 실시간 미리 보기 사이트는 Kontent에 표시되며, 선택한 페이지의 트리와 인접하며, 항목과 필드를 편집할 수 있으며, "편집"아이콘과 연결됩니다.
  • 웹 Spotlight 인터페이스를 사용하지 않고도 이러한 필드를 편집할 수 있습니다.
  • Smart Link SDK는 어떤 기술을 사용하든 미리 보기 사이트에 설치할 수 있습니다.Jamstack, 정적, 동적, PHP.NET, 그건 중요하지 않아요.
  • TL;박사님?보아하니 이렇다.



    배경 읽기:

  • 켄티코 자신의 Web Spotlight microsite
  • Kontent의 하나introductory webinar에서 실제 상황을 나타냈다
  • documentation(나처럼 어떻게 일하는지 알고 싶은 책벌레에게)
  • Aguide to implementation in existing websites 작성자: Tomas 및 Jan, Kentico
  • a의 실현.NET 핵심 웹 사이트


    보시다시피 몇 년 전에 Kontent에 저희 사이트를 만들었습니다.우리가 선택한 기술은NET Core MVC가 Azure Web Apps에 호스팅되는 것은 정적 사이트 생성기와 Jamstack 사용과 같은 최근 유행하는 선택과는 매우 다르다.다행히도, 이것은 거의 다르지 않다!
    이 프로세스는 모든 웹 사이트와 동일합니다.
  • 네트워크 스포트라이트 활성화(현지 Kontent 영업 담당자와 대화)
  • 새로운 하위 페이지 요소
  • 를 사용하여 내용 모델에서 페이지를 연결합니다
  • 미리 보기 사이트에 Smart Link SDK를 설치합니다.
  • 문서는 1항과 2항을 잘 처리했기 때문에 오늘은 3항을 어떻게 처리하는지 제 시스템에 설치하는 것만 이야기하고 싶습니다.NET 핵심 MVC 웹 사이트.

    Kontent Smart Link SDK 설치


    Smart Link SDK 설치는 다음 세 단계로 요약됩니다.
  • CSS 스타일시트(CDN으로부터)
  • 포함
  • JS 스크립트 파일(CDN으로부터)
  • 포함
  • 태그에 데이터 - 속성을 추가하여 태그의 내용 항목과 필드 값을 표시합니다.
  • 미리 보기 사이트의 태그는 최종적으로 데이터 내용 항목 id와 데이터 내용 요소 코드 이름 속성으로 가득 차 있습니다. 아래와 같습니다.

    코드에는 이것을 할 수 있는 간단한 방법이 많지만, 나는 그것을 실현하고 싶다.
  • 내 실시간 사이트가 아닌 내 미리 보기 환경에만 표시됩니다.
  • 내 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 코드 이름만 사용하면 필요한 속성을 태그에 쉽게 추가할 수 있고 실시간 사이트가 아닌 개발 및 미리보기 환경에만 표시할 수 있도록 합니다.상하문에서 제가 설명하는 이 코드 세션 구성 요소 (매우 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를 사용하여 시험 기간을 연장할 수 있습니다.

    좋은 웹페이지 즐겨찾기