Umbraco의 요소 유형은 멋지고 페이지에 대한 사용자 지정 구성 요소 기반 콘텐츠를 구축하는 사용자 친화적인 방법으로 사용할 수 있습니다. 기본 차단 목록 편집기, 중첩된 콘텐츠, 문서 유형 표 편집기 또는 기타 요소 유형 기반 편집기를 사용하여 만들 수 있습니다.

그러나 몇 가지 제한 사항이 있습니다. 그 중 하나는 요소 유형에서 태그와 같은 내장 속성 편집기가 사용되는 것을 방지한다는 것입니다.



이 기사에서는 이를 우회하고 요소 유형 기반 구성 요소에서 태그를 계속 사용할 수 있는 방법을 보여줍니다.

하지만 기본 태그 편집기를 사용할 수 없는 이유는 무엇입니까?

태그 편집기는 특정 속성에 일부 텍스트 레이블을 추가하는 것 이상의 기능을 수행하기 때문에 요소 유형에서는 태그가 비활성화됩니다. 태그가 있는 노드를 저장하면 검색할 수 있도록 태그 및 관련 노드의 인덱스가 생성됩니다. 예를 들어 TagQuery with the Umbraco Helper 을 사용하여 codegarden 태그가 지정된 모든 노드를 찾을 수 있습니다. 이를 위해서는 노드가 실제 노드여야 합니다. 요소 유형 기반 노드는 그렇지 않습니다. 그것들은 노드에 저장된 json BLOB일 뿐이며 TagQuery는 그 안에서 태그를 찾을 수 없습니다.

방지는 속성 편집기 별칭을 기반으로 하므로 비표준 별칭이 있는 태그 편집기만 있으면 됩니다.

해결책 - 다른 별칭으로 복제본 만들기

일반적으로 - 적어도 내 관점에서는 - 요소 유형의 태그를 사용하여 특정 구성 요소 내부의 콘텐츠를 필터링하려고 합니다. 특정 태그의 기사 목록과 같습니다. 또는 편집기의 UI가 마음에 들어서 사용하고 싶을 수도 있습니다. 그래서 제 경우에는 태그 인덱싱 없이도 살 수 있고 에디터만 있으면 됩니다.

다행스럽게도 많은 작업 없이 기본 태그에서 항목을 상속하기만 하면 자신만의 태그 편집기를 만들 수 있습니다.

좋아하는 코드 편집기를 열고 원하는 package.manifest 폴더에 App_Plugins를 추가하십시오. 나는 이것을 App_Plugins\Tags.DataOnly\package.manifest에 만들었습니다. Don't know what a package.manifest is? The documentation has got you covered .

{
  "propertyEditors": [
    {
      "alias": "Umbraco.Tags.DataOnly",
      "name": "Tags (Data Only)",
      "icon": "icon-tags",
      "group": "tags",
      "editor": {
        "view": "tags"
      },
      // ...

모든 값은 default tag definition(18-22행)에서 한 번만 수정하면 해제됩니다. 별칭에 ".DataOnly"를 추가하고 이름에 "(Data Only)"를 추가하여 기본 태그 편집기와 구분했습니다.

또한 속성의 저장 유형 외에도 선택할 탭 그룹을 지정하기 위한 일부 구성 필드가 필요합니다.

      // ...
      "prevalues": {
        "fields": [
          {
            "label": "Tag group",
            "description": "Define a tag group",
            "key": "group",
            "view": "requiredfield"
          },
          {
            "label": "Storage Type",
            "description": "Select whether to store the tags in cache as JSON (default) or as CSV. The only benefits of storage as JSON is that you are able to have commas in a tag value",
            "key": "storageType",
            "view": "views/propertyeditors/tags/tags.prevalues.html"
          }
        ]
      },
      // ...

Umbraco 소스 코드의 TagConfiguration class에서 가져온 것입니다. 보기를 포함하여 모든 것을 복사하여 붙여넣는 방법에 유의하십시오.

마지막으로 기본 구성이 필요합니다. 이것을 생략할 수 있지만 경험이 기본값에 가까운 것이 마음에 들어 다음과 같이 추가됩니다.

      ...
      "defaultConfig": {
        "group": "default",
        "storageType":  "Json"
      }
      ...

기본 구성이 있는 상태에서 isParameterEditor property to my manifest 을 추가하기만 하면 이 편집기를 매크로에서 사용할 수도 있습니다.

이 모든 것이 준비되면 이제 Umbraco로 이동하여 요소 유형에서 내 태그 편집기로 새 태그(데이터 전용) 편집기를 사용할 수 있습니다.

ModelsBuilder를 동작하게 만들기 - 값 변환기 래핑

하지만 한 가지 빠진 것이 있습니다. 기본 편집기는 ModelsBuilder와 함께 사용할 때 문자열 목록을 반환하며 이 편집기도 동일하게 수행하고 싶습니다.

이것도 꽤 간단합니다.

기본 TagsValueConverter에서 단순히 상속하는 나만의 ValueConverter를 추가할 수 있습니다.

using Umbraco.Core;
using Umbraco.Core.Models.PublishedContent;
using Umbraco.Core.PropertyEditors.ValueConverters;
using Umbraco.Core.Services;

namespace TagsDataOnlyProject
{
    public class TagsDataOnlyValueConverter : TagsValueConverter
    {
        public TagsDataOnlyValueConverter(IDataTypeService dataTypeService) : base(dataTypeService)
        {
        }

        public override bool IsConverter(IPublishedPropertyType propertyType)
            => propertyType.EditorAlias.InvariantEquals(Constants.PropertyEditors.Aliases.Tags + ".DataOnly");
    }
}

Umbraco는 부팅 시 이를 자동으로 선택하며 이제 태그(데이터 전용) 편집기를 사용하여 모든 속성의 출력 유형으로 문자열 목록을 갖게 되었습니다.

Photo by rizki ramadhan on Unsplash