Kentico Xperience Xprospections: 요청한 Page Builder 모드 확인

In this post we'll be exploring how to determine the mode of a request in a Kentico Xperience 13.0 ASP.NET Core application, and also how to create a new class and interface to help us use this information in our code.

You can skip the post and jump right into the GitHub repository and NuGet package I've already created, or read on to see how it's made and how to use it 🧐!

우리의 여정 시작: 체험 페이지 생성기 모드
Kentico Experience 13.0에서는 Page Builder 몇 가지 모드가 있습니다.이러한 모드의 각 유형은 서로 다른 컨텍스트를 나타냅니다. 이 컨텍스트의 ASPNET 핵심 어플리케이션🤔.
컨텐트 관리자가 위젯을 업데이트하거나 편집 가능 영역에 새 파티션을 만들도록 요청하면 에서 구성됩니다.✍ '편집 모드.
마찬가지로, 요청이 preview URL에서 온 경우 게시되지 않은 컨텐트 업데이트나 Page Builder 구성을 볼 수 있지만 페이지를 편집할 수 없으면 Page Builder가 활성화됩니다.👀 '미리보기 모드.
컨텐츠 관리 애플리케이션의 Page Builder UI를 사용하거나 미리 보기 URL을 사용하지 않는 경우 요청이 실시간 웹 사이트 URL에 전송된 경우 Page Builder는 활성 상태로 간주됩니다.⚡ '생방송 모드.

심층 분석: Xperence의 API를 사용하여 Page Builder 모드 결정
우리 ASP에URL은 NET 핵심 응용 프로그램에서 Page Builder를 편집 또는 미리보기 모드로 배치할 때 항상 /cmsctx/로 시작하는 경로가 포함된 고유한 구조를 갖습니다.
요청에 ?editmode=1 조회 문자열 매개 변수가 있으면 요청은 편집 모드에 있고 그렇지 않으면 미리보기 모드에 있습니다.
그러나 Xperence와 ASP가 통합되어 있기 때문에 응용 프로그램 코드에서 이러한 URL을 본 적이 없습니다.NET Core 는 요청 URL 을 다시 작성했습니다. 이렇게 하면 우리가 그것을 해석할 염려가 없습니다🤓. 반면 시나리오에 기록된 API는 Page Builder 상태에 액세스하는 데 사용됩니다.
이러한 API는 Xperence가 ASP에 등록하도록 보장한 ASP.NET Core typeIHttpContextAccessor의 확장자로 사용할 수 있습니다.순핵심Dependency Injection container.
요청이 미리 보기 모드인지 확인하는 방법은 다음과 같습니다.

public class HomeController : Controller
{
    private readonly IHttpContextAccessor accessor;

    public HomeController(IHttpContextAccessor accessor) =>
        this.accessor = accessor;

    public ActionResult Index()
    {
        // Found in the Kentico.Content.Web.Mvc namespace
        bool isPreviewMode = accessor.HttpContext
            .Kentico()
            .Preview()
            .Enabled;
    }
}

마찬가지로 다음과 같이 요청이 편집 모드인지 여부를 결정합니다.

public class HomeController : Controller
{
    private readonly IHttpContextAccessor accessor;

    public HomeController(IHttpContextAccessor accessor) =>
        this.accessor = accessor;

    public ActionResult Index()
    {
        // Found in the Kentico.PageBuilder.Web.Mvc namespace
        bool isEditMode = accessor.HttpContext
            .Kentico()
            .PageBuilder()
            .EditMode;
    }
}

잡초 진입: 페이지 생성기 모드에 대한 정의를 밝힙니다
기술적으로 미리보기 모드는 Page Builder와 독립적입니다.😕, 미리 보기 기능은 표시되는 내용을 결정하는 데 사용되며, Page Builder 편집 기능은 Page Builder 페이지 템플릿, 섹션, 위젯 UI를 표시할지 여부를 결정하는 데 사용됩니다.

Note: Any time a content manager can view the "Page" tab in the Content Management application and also click the "Save" button, then the request to display the ASP.NET Core page, within the "Page" tab, will be in 'Edit' mode - it doesn't matter whether or not you are using Widgets, Page Templates, or any other Page Builder features on the Page 😮.

Take a look at the private bool TryGetUrl(out string url) method in CMS\CMSModules\Content\CMSDesk\MVC\Edit.aspx.cs to see how the Preview/Edit mode is set for a URL in the Pages module of the Content Management application 🤓.

현재 요청 모드를 확인하는 것은 좀 까다롭다😖 위의 API만 검사하는 것이 아니라, 반대로, 우리는 보통 이 두 API를 동시에 검사해야 한다.
다음 두 테이블에서는 두 API 중 하나만 검사하여 요청의 내용을 확인할 수 있습니다.
요청 유형
미리보기().==true 사용
미리보기().==false 사용
사이트 방문자
거짓
맞다
읽기 전용 컨텐트 관리자
?
거짓
편집 컨텐트 관리자
?
거짓
요청 유형
PageBuilder().EditMode==true
PageBuilder().EditMode==false
사이트 방문자
거짓
?
읽기 전용 컨텐트 관리자
거짓
?
편집 컨텐트 관리자
맞다
거짓
API 하나만 검사하면 불완전한 정보를 얻을 수 있습니다.

찾기 경로: IPageBuilderContext
요청이 현재 처한 패턴을 진정으로 확인하기 위해 두 개의 API를 검사해야 한다는 것을 잊기 쉽기 때문에 이 문제를 완화시키는 데 도움을 줄 새로운 추상화 IPageBuilderContext 를 만듭니다.💪🏽.
다음은 그 모습을 볼 수 있습니다.

public interface IPageBuilderContext
{
    /// <summary>
    /// True if either IsLivePreviewMode or IsEditMode is true. 
    /// Also the opposite of IsLiveMode
    /// </summary>
    bool IsPreviewMode { get; }

    /// <summary>
    /// True if IsLivePreviewMode and IsEditMode is false.
    /// Also the opposite of IsPreviewMode
    /// </summary>
    bool IsLiveMode { get; }

    /// <summary>
    /// True if the current request is being made for
    /// a preview version of the Page with editing disabled
    /// </summary>
    bool IsLivePreviewMode { get; }

    /// <summary>
    /// True if the current request is being made for
    /// the Page Builder experience
    /// </summary>
    bool IsEditMode { get; }

    /// <summary>
    /// The current Mode as a PageBuilderMode value
    /// </summary>
    PageBuilderMode Mode { get; }

    /// <summary>
    /// The value of Mode as a string
    /// </summary>
    string ModeName();
}

/// <summary>
/// The various states that a request for a Page can be in,
/// in relation to the Page Builder
/// </summary>
public enum PageBuilderMode
{
    Live,
    LivePreview,
    Edit
}

추상을 정의한 다음 구현을 살펴보겠습니다.

public class PageBuilderContext : IPageBuilderContext
{
    private readonly IHttpContextAccessor accessor;

    public PageBuilderContext (IHttpContextAccessor accessor) =>
        this.accessor = accessor;

    public bool IsPreviewMode => 
        accessor.HttpContext
            .Kentico()
            .Preview()
            .Enabled;

    public bool IsLivePreviewMode => IsPreviewMode && !IsEditMode;

    public bool IsEditMode => 
        accessor.HttpContext
            .Kentico()
            .PageBuilder()
            .EditMode;

    public bool IsLiveMode => !IsPreviewMode;

    public PageBuilderMode Mode => 
        IsLiveMode
            ? PageBuilderMode.Live
            : IsLivePreviewMode
                ? PageBuilderMode.LivePreview
                : PageBuilderMode.Edit;

    public string ModeName() => 
       Enum.GetName(
           typeof(PageBuilderMode), 
           Mode) ?? "";
}

목적지: IPageBuilderContext 사용
현재, 우리는 Xperence 프로그램에서 요청하는 다양한 패턴을 이해했고, 이 상태를 유연하게 공개하는 사용자 정의 추상화를 가지고 있으며, 코드에서 이를 활용할 수 있다👍🏾.
우선 ASP를 사용하여 유형을 등록하고 싶습니다.NET Core 종속 주입 시스템:

// Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton<
        IPageBuilderContext, 
        PageBuilderModeContext
    >();
}

이제 초기 예로 돌아가서 사용HomeController:

public class HomeController : Controller
{
    private readonly IPageBuilderContext context;
    private readonly IProgressiveCache cache;
    private readonly IEventLogService service;

    public HomeController(
        IPageBuilderContext context,
        IProgressiveCache cache,
        IEventLogService service)
    {
        this.context = context;
        this.cache = cache;
        this.service = service;
    }

    public ActionResult Index()
    {
        if (context.IsEditMode)
        {
            return View(Calculate());
        }

        string name = $"calc|mode:{context.Mode}";

        var cs = new CacheSettings(
            cacheMinutes: 10,
            cacheItemNameParts: name);

        int calculation = cache.Load(Calculate, cs);

        return View(calculation);
    }

    private int Calculate(CacheSettings cs)
    {
        if (context.IsLiveMode)
        {
            log.LogInformation("Calculation", "CACHE_MISS");
        }

        // Define the cache dependency keys

        // Do something that takes some time to compute

        return calculation;
    }
}

이 예에서는 요청이 '편집' 모드에 있는지 확인하기 위해 IPageBuilderContext 를 사용합니다. 만약 그렇다면, 우리는 캐시를 완전히 건너뛰고 (비싼) 계산 결과를 되돌려줍니다.
그렇지 않으면 캐시를 사용합니다. 캐시 항목 이름을 통해 '실시간 미리 보기' 모드와 '실시간' 모드에 별도의 캐시 항목이 있는지 확인합니다.

The cache item name could look like "calc|mode:LivePreview" or "calc|mode:Live".

LivePreview 모드에서 캐시를 사용하는 이유는 페이지를 신속하게 미리 보기를 원하기 때문입니다. 특히 URL이 방문자 사이에서 공유되는 상황에서😊.
그러나 실시간 모드에서 모든 캐시 미명중을 기록하여 실시간 사이트에서 캐시를 사용하는 효율을 확인하기를 바랍니다.
페이지 미리 보기가 로그에 영향을 미치는 것을 원하지 않기 때문에, 우리는 두 개의 다른 캐시 값을 가지고 있다🧠.
...
만일 우리가 전체 응용 프로그램에서 접근 요청 모드가 필요하다는 것을 발견한다면 IPageBuilderContext 추상적인 용도는 명백히 알 수 있다👏!

결론
Kentico Xperience 플랫폼에는 특히 페이지 생성기를 사용할 때 많은 것들이 있습니다!
세부 사항을 깊이 연구하고 답을 찾아낼 만하다🧐 어떻게, 왜 이런 식으로 일을 하는지, 특히 우리가 응용 프로그램의 코드가 플랫폼을 정확하게 사용하기를 원할 때.
Xperence는 ASP 요청 모드를 결정하는 방법을 제공합니다.NET 핵심 응용 프로그램은 다시 사용할 수 있는 추상적인 것을 만든다. 예를 들어 IPageBuilderContext 플랫폼이 공개한 정보에 더 많은 의미를 부여하는 데 도움을 줄 수 있다.
후속 글에서 저는 IPageBuilderContext를 사용하여 사용자 정의ASP.NET Core Tag Helper를 만드는 방법을 보여 드리겠습니다. 저희가 C# 코드에서 사용한 것처럼 Razor 보기에서 사용할 수 있습니다.
그 전에 읽어주셔서 감사합니다.🙏!

도구책

Enabling Xperience Preview Mode

Using the Request mode when Querying for Pages

Xperience Page Builder Mode Tag Helper 저장소

Xperience Page Builder Mode Tag Helper NuGet 번들

사진 작성자Jordan Madrid 가 Unsplash
우리는 이미 개발자 자원 명세서Kentico's GitHub account를 열거했다.가보자!
다른 Kentico 콘텐츠를 찾고 있다면 DEV에서 Kentico 또는 Xperence 태그를 확인하십시오.
.ltag__tag__id__5339.작업 따르기 버튼
배경색:!중요
색상:!중요
테두리 색상:!중요
}
# kentico
.ltag__tag__id__57801.작업 따르기 버튼
배경색:!중요
색상:!중요
테두리 색상:!중요
}
# xperience
또는 나의, 예를 들면: