Curlybars를 사용하여 선택적으로 헬프 센터 구성 요소 숨기기

헬프 센터 기본서식 작성 언어 Curlybars가 추가됨에 따라 헬프 센터 페이지 렌더링에 동적으로 영향을 미칠 수 있는 조건문을 추가하는 기능이 공개되었습니다. 조건문을 사용하면 카테고리, 섹션, 문서, 주제 또는 게시물의 고유 ID 번호를 대상으로 지정하여 해당 항목을 숨기면서 다른 항목은 표시할 수 있습니다.

숨기고자 하는 항목의 ID를 찾아야 하는 경우 해당 항목의 페이지로 가서 URL을 찾습니다. /hc/en-us/categories/200420805-General 이와 비슷한 모양일 것입니다. 200420805는 내 카테고리의 ID입니다.

다음은 헬프 센터 홈 페이지의 카테고리를 숨길 때 달성하려는 작업을 강조하는 짧은 애니메이션입니다('카테고리 1' 시청).

코드

여기에서는 몇 가지 시나리오를 다루면서 사용 방법을 자세히 설명하겠습니다. 이 예에서는 Copenhagen 헬프 센터 테마에 있는 기본 코드를 사용하겠습니다. 저는 주로 isnt helper를 사용할 텐데, 기본적으로 값이 일치하지 않으면 표시된 코드를 렌더링하여 식별된 항목을 효과적으로 숨기거나 렌더링하지 않을 수 있기 때문입니다. 여기서 보듯이 홈 페이지의 특정 카테고리를 제외하고 싶기 때문에 isnt 문을 통해 전달했습니다.

이 예의 홈페이지 기본서식의 전체 코드를 여기에 첨부했습니다. 제 카테고리 ID를 여러분의 ID로 변경하면 카테고리를 숨기실 수 있습니다.

여러 항목 숨기기

하나의 조건문에 여러 개의 ID 번호를 전달할 수 없으므로 여러 개의 항목을 숨기면 코드가 몇 줄 더 추가됩니다. 그 대신 조건문을 중첩하면 적절하게 분석될 수 있습니다. 다음 예를 참조하세요.

여러 카테고리를 숨기기 위한 코드를 다운로드하려면 여기에서 해당 코드를 찾으세요.

문서가 포함된 또 다른 예

카테고리에 대해서는 꽤 많이 얘기했으니까 다른 공간에서 이를 구현하는 방법을 보여드리고 싶습니다. 제 시나리오는 특정 문서의 노출을 줄이고자 하지만 검색이나 고객에 대한 직접 링크를 통해서 액세스할 수 있도록 하는 것입니다. 현재 문서와 같은 섹션에 있는 다른 문서들이 아래와 같이 사이드바에 표시되는 Copenhagen 테마의 문서 페이지를 선택했습니다.

이미 섹션 수준에서 문서를 숨겼을 수도 있지만 여기에서 문서를 대상으로 하고 싶을 수도 있습니다.

그리고 다시 한번, 문서 기본서식에서 시도하려는 경우의 코드는 여기에서 다운로드하세요.

이 기능에 관한 몇 가지 기술 참고 사항

여기서 {{#each}} helper에 코드가 구현된 패턴은 요청되는 특정 항목의 배열을 반복하고 있음을 볼 수 있습니다. 각 helper는 handlebars.js에 기본으로 제공되며 여기에서 자세한 내용을 보실 수 있습니다. 위의 마지막 이미지에서 보이는 코드의 {{#each section.articles}}는 현재 섹션의 문서를 렌더링하지만 문서가 ID 219527708을 만나면 대신 해당 코드는 건너뛰고 렌더링이 다음 문서로 이동합니다.

비슷한 동작을 달성할 수 있는 몇 가지 다른 방법이 있을 수 있으므로 다른 조건부 helper를 자유롭게 사용해봐도 좋지만 이 방법이 시작하기에 좋습니다.