Kentico 경험 - Page Builder를 사용하여 위젯 내용 재사용

켄티코 엑스퍼런스 웹사이트를 개발하는 과정에서 페이지마다 일부 작은 위젯 콘텐츠가 있다는 아이디어가 나왔다.이 부분의 내용은 페이지마다 같기 때문에 한 집중된 곳에서만 관리할 수 있다.이것은 합리적인 생각이다. 왜냐하면 우리는 기존의 작은 부품을 다시 사용할 수 있고, 내용도 개성화할 수 있기 때문이다.
내용을 저장하는 방법은 여러 가지가 있지만, 작은 위젯은 현재 페이지에서만 사용할 수 있습니다.작은 위젯은 Kentico의 페이지 생성기 기능의 일부분으로 내용은 문서표에 저장됩니다.이것은 여러 페이지에 걸쳐 작은 위젯 내용을 다시 사용할 수 있도록 유연성이 부족합니다.본고에서, 나는 작은 위젯의 내용을 쉽게 다시 사용할 수 있도록 페이지 생성기가 어떻게 작동하는지, 그리고 우리가 어떻게 그것을 더욱 유연하게 하는지 설명할 것이다.

Page Builder

Kentico Xperience는 응용 프로그램을 시작할 때 사용할 수 있는 일련의 기능을 제공합니다.페이지 생성기는 바로 이러한 기능 중의 하나로, 우리가 페이지에서 섹션과 작은 위젯을 사용할 수 있도록 한다.Page Builder를 사용하려면 여러 단계가 필요합니다. 각 단계마다 어떤 일이 일어나는지 가장 잘 알고 있어야 합니다.

Page Builder 기능 사용

페이지 생성기를 기능으로 사용하려면 프로그램이 시작될 때 UsePageBuilder 방법을 호출할 수 있습니다.설치 프로그램을 사용하여 Kentico를 설치한 경우 ApplicationConfig.cs라는 파일을 사용하여 이 작업을 수행할 수 있습니다.

public class ApplicationConfig
{
    public static void RegisterFeatures(IApplicationBuilder builder)
    {
        // Enables the page builder feature
        builder.UsePageBuilder();
    }
}

필요한 모든 서비스, 경로, 번들을 백그라운드에 등록합니다.

Page Builder 초기화

현재 페이지 생성기 기능이 활성화되어 있습니다. 페이지에서 사용할 수 있습니다.Kentico()HttpContext 확장을 통해 Page Builder에 액세스할 수 있습니다.우선 컨트롤러에서 페이지 생성기를 초기화하는 것이 중요하다.initialize 방법은 페이지 identifier 인자가 있습니다. 이 인자를 사용하면 페이지에 대한 필수 정보를 검색하고 저장할 수 있습니다.

HttpContext.Kentico().PageBuilder().Initialize(int pageIdentifier);

편집 가능 영역

초기화하면 뷰에서 편집 가능 영역을 설정할 수 있습니다.이 영역은 섹션과 작은 위젯의 용기를 충당할 것입니다.

@Html.Kentico().EditableArea("main")

편집 가능 영역에서 작성된 컨텐트는 데이터베이스 테이블dbo.CMS_Document에 JSON 문자열로 저장됩니다.구체적으로 [DocumentPageBuilderWidgets] 열에 저장됩니다.여기에 저장된 예는 다음과 같습니다.

{
   "editableAreas": [
      {
         "identifier": "main",
         "sections": [
            {
               "zones": [
                  {
                     "widgets": [
                        {
                           "type": "Kentico.Widget.RichText",
                           "variants": [
                              {
                                 "properties": {}
                              }
                           ]
                        }
                     ]
                  }
               ]
            }
         ]
      }
   ]
}

데이터 컨텍스트

Page Builder는 DataContext 객체를 사용하여 페이지를 초기화하는 컨텍스트별 정보를 포함합니다.이것도 메모리 바이트와 작은 위젯을 설정하는 곳이다.초기화DataContext할 때PageIdentifier는 이 설정을 검색하는 데 사용되며, 이 설정들은 페이지 생성기를 초기화하는 동안 설정됩니다.구체적으로 이 메서드를 호출할 때 설정됩니다.

HttpContext.Kentico().PageBuilder().Initialize(int pageIdentifier);

데이터 상하문은 언제 초기화됩니까?처음 사용했을 때.특히 처음이야.EditableAreahelper 방법은 데이터 상하문을 사용하는 방법의 예이다.그것은 데이터의 상하문을 호출하고 초기화를 터치합니다.
다음 코드 세션 예시에서, 페이지 생성기는 서로 다른 페이지 표지부를 사용하여 세 차례 초기화했다.매번 초기화할 때마다 지난번을 덮어쓰고 새 페이지 식별자를 설정합니다.이 때 작은 위젯에 대한 정보를 검색하지 못했습니다. 이것은 실제적으로 사용DataContext할 때 완성될 것입니다.

HttpContext.Kentico().PageBuilder().Initialize(111);
HttpContext.Kentico().PageBuilder().Initialize(222);
HttpContext.Kentico().PageBuilder().Initialize(333);
//Page builder is now set to use page with ID 333.

우리가 실현하고자 하는 것은 같은 상하문에서 여러 페이지를 보여주는 작은 위젯이다.다음 코드 세션에서, 나는 작은 위젯을 보여준 후에 페이지 생성기를 다시 초기화해서 여러 페이지의 작은 위젯을 보여 주려고 한다.

//Initialize page with identifier 111
@{ Request.RequestContext.HttpContext.Kentico().PageBuilder().Initialize(111); }

//Render widgets by using the DataContext
@Html.Kentico().EditableArea("main")

//Initialize page with identifier 222
@{ Request.RequestContext.HttpContext.Kentico().PageBuilder().Initialize(222); }

//Render widgets by using the DataContext
@Html.Kentico().EditableArea("main")

문제는 첫 번째와 두 번째 편집 가능 구역에 111페이지의 작은 위젯이 나타난다는 것이다.첫 번째 편집 가능한 영역을 표시할 때 기초 데이터 상하문이 한 번만 초기화되기 때문이다.두 번째 편집 가능한 영역이 호출되었을 때 데이터 상하문이 초기화되었고 새로운 페이지 식별자는 사용되지 않습니다.

솔루션:데이터 컨텍스트 지우기

데이터 상하문이 한 번만 실례화되면 다른 페이지의 작은 위젯을 다시 사용할 수 없습니다.다행히도 반사를 통해 초기화 사이의 데이터 상하문을 제거함으로써 이 문제를 극복할 수 있다.이 코드 세션에서 내부 mDataContext 변수를 확장된 방법으로 검색하고 그 값을 null 로 설정합니다.

public static class PageBuilderFeatureExtensions 
{
    public static void ClearDataContext(this IPageBuilderFeature feature)
    {
        var prop = feature.GetType().GetField("mDataContext", BindingFlags.NonPublic | BindingFlags.Instance);

        if (prop != null)
            prop.SetValue(feature, null);
    }
}

그 작업 원리를 다시 설명하기 위해 데이터의 상하문이 null일 때 호출될 때 자동으로 자신을 초기화하고 PageIdentifier를 사용하여 초기화한다.확장 방법을 사용하면 필요할 때 데이터 상하문을 null로 설정할 수 있습니다.이것은 우리가 한 페이지의 작은 위젯을 보여주고 데이터 상하문을 null로 설정한 다음에 다른 페이지의 작은 위젯을 보여줄 수 있다는 것을 의미한다.
다음 코드 세션은 우리가 이전에 사용한 코드 세션과 기본적으로 같지만, 현재 첫 페이지의 작은 위젯을 보여준 후에 데이터 상하문이 null로 설정되어 있습니다.

//Initialize page with identifier 111
@{ Request.RequestContext.HttpContext.Kentico().PageBuilder().Initialize(111); }

//Render widgets using DataContext
//Widgets of page 111 are rendered
@Html.Kentico().EditableArea("main")

//Sets the DataContext to null
@{ Request.RequestContext.HttpContext.Kentico().PageBuilder().ClearDataContext(); }

//Initialize page with identifier 222
@{ Request.RequestContext.HttpContext.Kentico().PageBuilder().Initialize(222); }

//Render widgets using DataContext
//Widgets of page 222 are rendered
@Html.Kentico().EditableArea("main")

만세.🎉!! 두 페이지에 저장된 작은 위젯이 한 페이지에 표시됩니다.

조심스럽게 편집 모드

여러 페이지의 작은 위젯이 정면 사이트에서 정확하게 나타나지만, 한 번에 여러 페이지의 작은 위젯을 편집하는 것은 불가능하다.따라서 현재 페이지가 아닌 작은 위젯을 보일 때 편집 모드를 확인하는 것이 좋습니다.예를 들어 111페이지가 현재 페이지이고 222페이지가 내용 트리의 다른 페이지라면 위아래 문장이 편집 모드에 있지 않을 때만 222페이지의 작은 위젯을 보여 주기를 원합니다.

//Only render widgets of page 222 when not in edit mode
@if (!Request.RequestContext.HttpContext.Kentico().PageBuilder().EditMode)
{
    Request.RequestContext.HttpContext.Kentico().PageBuilder().ClearDataContext();

    Request.RequestContext.HttpContext.Kentico().PageBuilder().Initialize(222);

    @Html.Kentico().EditableArea("main")
}

구현 전 권장 사항

데이터 상하문을 지우고 초기화함으로써 작은 위젯의 내용을 보여주는 데 많은 용도가 있다.그러나 그것은 곧 엉망이 될 것이니, 불필요하게 사용하지 말고 간단하게 유지하는 것을 권장합니다.
데이터 상하문이 페이지의 생명주기에 문제가 되지 않도록 하기 위해서 다른 페이지의 내용을 보여준 후에 현재 페이지 식별자를 사용하여 데이터 상하문을 다시 초기화하는 것을 권장합니다.데이터 컨텍스트가 현재 페이지로 설정되지 않은 경우 컨텐트를 렌더링할 때 예기치 않은 결과가 발생할 수 있습니다.
Kentico의 더 높은 버전은 페이지 생성기에 더 많은 유연성을 도입할 수 있습니다.본 문서에서 기술한 모든 기술을 사용하기 전에 Kentico 버전에서 유사한 기능을 지원하지 않는지 확인하십시오.

결론

페이지 생성기는 기능이 강한 기능이지만, 상대적으로 새것이어서 사용하기 어려울 수도 있다.본문을 읽은 후에, 너는 그것의 작업 원리와 그것을 어떻게 효과적으로 사용하는지 더 많이 이해할 수 있기를 바란다.여러 페이지에서 작은 위젯을 보여줄 수 있는 것은 도구 상자의 또 다른 도구입니다.나는 그것이 창조적인 실현을 구축하는 데 쓰이는 것을 보고 매우 기뻤다.