맞춤형 Umbraco 속성 편집기를 구축하는 것이 복잡할 필요는 없습니다.

TL:DR: https://github.com/filipbech/dayofweek

저는 새로운 백오피스를 좋아하고, 프런트엔드 개발자로서 진심으로 빌드 도구인 TypeScript를 매우 좋아합니다. 프로젝트를 더욱 확장 가능하고 즐겁게 작업할 수 있게 만드는 모든 것. 하지만 때로는 (여러 번) 모든 것이 필요하지 않을 때도 있습니다. 여기 AngularJS 속성 편집기를 변환하는 예가 있습니다. NPM도 없고, Vite도 없고, TypeScript도 없고, 빌드 파이프라인도 없습니다! 내가 변환한 내용을 보려면 <=13 버전을 확인하세요: https://github.com/Frost117/UmbracoDayOfWeek/tree/v13.0.3

JavaScript는 Umbraco의angularJS 시절 이후로 많이 향상되었습니다. 이 예에서는 내보내기, 가져오기(가져오기 맵 포함), 클래스(비공개 필드 포함), HTTP 호출 가져오기, 템플릿 리터럴 및 선택적 체인 등 그 당시에는 꿈만 꾸던 모든 항목을 사용하고 있습니다.

간단한 속성 편집기

코어에 있는 속성 편집기는 두 개의 파일입니다. Umbraco가 서버에서 수행할 작업과 클라이언트에 로드할 JavaScript 파일을 알기 위해 읽는 umbraco-package.json 파일입니다. 그리고 바로 그 JavaScript 파일(이 예에서는 day-of-week.js라고 함)입니다.

umbraco-package.json 문서를 읽어 모든 옵션을 알아볼 수 있지만 이에 대한 몇 가지 의견이 있습니다.

23행 : 설정을 사용합니다. 이전의 사전 값과 유사하며 그 자체를 속성 편집기로 사용하여 기본값을 설정합니다(29행).
16행: 데이터를 문자열(Umbraco.Plain.String)로 저장합니다. - 값을 숫자로 저장했을 수도 있습니다. 그게 더 정확했을 수도 있습니다. :-D
35행: 인라인 지역화를 사용합니다. 이전과 같이 파일을 가리키도록 선택할 수 있지만(XML 대신 javascript임) 레이블이 몇 개밖에 없다면 그냥 거기에 직접 넣는 것이 좋습니다

그리고 주석이 포함된 자바스크립트 파일

5행: 내보내고 맞춤 요소 이름을 지정하는 것은 모두 단일 클래스입니다(48행)
5행: 클래스는 위에서 가져온 UmbLitElement에서 확장됩니다. Umbraco(이 예에서는 현지화 부분)와 Lit(템플릿 등)에서 몇 가지 편리한 방법을 얻기 위해 이렇게 합니다.
6행: 정적 필드에서 속성을 정의하는 것은 Lit에게 어떤 속성이 반응적이어야 하는지 알려주는 방법입니다.
26행: UmbLitElement로 인해 this.localize.term()을 사용할 수 있으며 번역 키를 문자열 인수로 사용합니다.
32행: this.requestUpdate()를 호출하는 것은 뷰를 변경한 후 Lit에게 뷰를 다시 렌더링하도록 지시하는 방법입니다(AngularJS 시절 $scope.$apply()를 호출할 때와 약간 비슷함).
37행: UmbPropertyValueChangeEvent를 전달하는 것은 저장할 새 값이 있음을 Umbraco에 알리는 방법입니다.
41행: 렌더링 메서드는 Lit에게 표시할 내용을 알려주는 방법입니다. 이 예에서는 실제로 Umbraco UI 라이브러리의 구성 요소에 대한 displayList를 구문 분석하고 로컬 값을 업데이트하고 Umbraco에 알리는 변경 이벤트를 수신합니다.

그렇습니다! 여기에서 이 단순화된 코드를 확인하세요: https://github.com/filipbech/dayofweek. Eric, Tony 및 실제 패키지 뒤에 있는 팀은 그 이상으로 인증 등을 추가했습니다. 따라서 실제 패키지를 보려면 원본 저장소를 따르세요.

아름다운 것의 시작

이 접근 방식의 장점은 단순성입니다. 최신 JavaScript 기능과 새로운 백오피스 구현을 활용함으로써 복잡한 빌드 도구나 프레임워크 없이도 강력하고 재사용 가능한 속성 편집기를 만들 수 있습니다.

이 정보가 여러분이 Umbraco 백오피스를 사용해 보는 데 영감을 주기를 바랍니다. 배워야 할 몇 가지 새로운 구문이 있지만 그 외에는 "예전"처럼 개념 증명을 실행하는 것이 쉽다고 생각합니다.

공유하고 싶은 생각이 있으시면 알려주세요. CMS의 기능을 확장하는 놀라운 것들을 계속 만들어 볼까요?

저는 Filipbech로 BlueSky(및 대부분의 다른 소셜 미디어)에 있습니다. 모두가 토론을 통해 배울 수 있도록 공개적으로 연락해 주세요!

위 내용은 맞춤형 Umbraco 속성 편집기를 구축하는 것이 복잡할 필요는 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!