이 페이지는 Cloud Translation API를 통해 번역되었습니다.

위젯: 카탈로그

<devsite-catalog> 맞춤 요소는 플랫폼 전체 필터링 UI를 포함하는 필터링 가능한 동적 콘텐츠를 제공합니다. DevSite 소유 콘텐츠를 쿼리하여 DevSite 페이지에서 특정 주제와 관련된 리소스를 로드합니다. 이 커스텀 요소는 모든 DevSite 테넌트의 리소스는 물론 DevSite 외부 콘텐츠 코퍼스에 추가된 외부 리소스를 로드할 수 있습니다.

사용

<devsite-catalog> 맞춤 요소를 사용하려면 다음 단계를 따르세요.

맞춤 요소 추가

페이지의 원하는 위치에 <devsite-catalog> 맞춤 요소를 추가합니다.

HTML

HTML 페이지의 경우 다른 HTML 요소와 마찬가지로 맞춤 요소를 추가할 수 있습니다.

<devsite-catalog query="project_url:/devsite"></devsite-catalog>

YAML

맞춤 요소와 관련된 추가 콘텐츠가 있는 방문 페이지 행의 경우 방문 페이지 행 옵션의 description-100 옵션과 함께 단일 항목 행을 사용합니다.

rows:
- options:
  - description-100
  heading: Row-level heading
  description: >
    Row-level description with an overview of the catalog.
  items:
  - heading: Catalog heading
    description: >
      <p>Additional lead-in copy.</p>
      <devsite-catalog query="project_url:/devsite"></devsite-catalog>

heading 또는 description과 같은 다른 상품 수준 필드가 필요하지 않은 경우 custom_html 필드를 사용할 수도 있습니다.

rows:
- custom_html: >
    <devsite-catalog query="project_url:/devsite"></devsite-catalog>

마크다운

마크다운 파일의 경우 맞춤 요소는 <div> 또는 <section> 요소로 래핑되어야 합니다.

<div>
  <devsite-catalog query="project_url:/devsite"></devsite-catalog>
</div>

데이터 세트 격리

카탈로그에 제공할 전체 데이터 세트를 격리하는 동적 콘텐츠 쿼리를 결정하고 이를 새 카탈로그의 쿼리 속성에 추가합니다.

예를 들어 developer.google.com에 등록된 모든 제품의 카탈로그를 페이지에 추가하려면 페이지에 다음 카탈로그를 추가하세요.

<devsite-catalog query="type:product"></devsite-catalog>

필터 추가

카탈로그에 필터를 추가하려면 다음 각 옵션에 대해 아래 안내를 따르세요.

텍스트 입력 상자 측면의 체크박스 필터 섹션

텍스트 입력 필터

사용자가 텍스트를 입력할 때 결과를 필터링하는 입력 상자를 추가합니다. 필터링 상자는 각 결과의 제목, 설명 및 키워드에 있는 사용자의 텍스트와 일치합니다.

<devsite-catalog query="type:product">
  <input type="text" placeholder="Filter results">
</devsite-catalog>

체크박스 필터

<devsite-catalog> 요소 내에서 문서 유형, 제품, 프로그래밍 언어 등 필터링 가능한 모든 측정기준에 <select> 요소를 추가합니다. name 속성은 구조화된 키워드 네임스페이스 또는 DevSite 필드 이름(예: keywords)에 해당하는 필터링 측정기준을 결정합니다. label 속성을 사용하여 리더의 크기 라벨을 지정합니다. 각 <select> 요소에 여러 속성을 지정해야 하며 생성된 필터 UI가 올바른지 확인해야 합니다.

상위 <select> 요소의 지정된 측정기준에서 각 필터 값에 <option> 요소를 추가합니다. 각 <option>의 값 속성에 필터링 가능한 값을 지정합니다. <option> 태그 사이에 읽을 수 있는 필터 라벨을 추가합니다. 페이지가 현지화되면 번역됩니다

다음 코드는 필터링 UI의 문서 유형 필터 및 키워드 필터 섹션을 결과 옆에 추가합니다.

<devsite-catalog query="project_url:/devsite">
  <select name="doctype" label="Choose a content type" multiple>
    <option value="BestPractices">Best Practices</option>
    <option value="Blueprint">Blueprint</option>
    <option value="Concept">Concept</option>
    <option value="Pattern">Pattern</option>
    <option value="ReferenceArchitecture">Reference Architecture</option>
    <option value="Tutorial">Tutorial</option>
  </select>
  <select name="keywords" label="Choose a keyword" multiple>
    <option value="BestPractices">Best Practices</option>
    <option value="Blueprint">Blueprint</option>
    <option value="Concept">Concept</option>
    <option value="Pattern">Pattern</option>
    <option value="ReferenceArchitecture">Reference Architecture</option>
    <option value="Tutorial">Tutorial</option>
  </select>
</devsite-catalog>

초기 체크박스 필터

initial-checkbox-filters 속성은 초기 로드 시 표시할 숫자 체크박스 필터를 결정합니다. 기본값은 3입니다.

<devsite-catalog query="project_url:/devsite" initial-checkbox-filters="5">
  ...
</devsite-catalog>

렌더링 옵션 선택

<devsite-catalog>는 동적 콘텐츠 위젯의 모든 렌더링 옵션과 맞춤 요소 속성을 지원합니다.

fields 속성을 사용하여 카탈로그 카드에 표시할 데이터를 지정합니다. <devsite-dynamic-content>에 문서화된 fields 외에도 문서화된 구조화된 키워드 네임스페이스를 지정하여 네임스페이스의 각 문서에 적용된 태그를 렌더링할 수 있습니다. 예를 들어 product를 지정하면 각 페이지에 적용된 모든 제품 태그가 해당 페이지의 카드에 렌더링됩니다. tags를 지정하여 문서에 적용된 모든 Nomenclature 태그를 확인할 수도 있습니다.

다음 코드는 위의 예를 구성하여 날짜순으로 정렬된 최대 1,000개의 결과를 제공하며, 숫자 페이지로 나누기 UI는 페이지당 9개의 결과와 9개의 추가 결과로 시작합니다. 결과가 제목, 요약, '자세히 알아보기' 라벨이 지정된 버튼이 있는 카드로 렌더링되도록 구성합니다. product 및 api 태그도 포함됩니다.

<devsite-catalog query="project_url:/devsite"
                 maxresults="1000"
                 sortorder="recency"
                 items-per-page="9"
                 fields="title summary product api"
                 pagination-type="numeric"
                 link-type="button"
                 button-label="Learn more"
                 template="card">
  <select name="doctype" label="Choose a content type" multiple>
    <option value="BestPractices">Best Practices</option>
    <option value="Blueprint">Blueprint</option>
    <option value="Concept">Concept</option>
    <option value="Pattern">Pattern</option>
    <option value="ReferenceArchitecture">Reference Architecture</option>
    <option value="Tutorial">Tutorial</option>
  </select>
  <select name="keywords" label="Choose a keyword" multiple>
    <option value="BestPractices">Best Practices</option>
    <option value="Blueprint">Blueprint</option>
    <option value="Concept">Concept</option>
    <option value="Pattern">Pattern</option>
    <option value="ReferenceArchitecture">Reference Architecture</option>
    <option value="Tutorial">Tutorial</option>
  </select>
</devsite-catalog>

팀에서 UXE를 지원하는 경우 맞춤 요소에 새 Soy 템플릿을 추가하고 카탈로그의 템플릿 속성을 사용하여 새 템플릿을 지정하여 카탈로그 카드 맞춤 템플릿을 만들 수 있습니다.

콘텐츠 태그하기

필터에 따라 태그가 지정된 콘텐츠만 필터링할 수 있습니다. 다음 측정기준을 사용하여 필터를 추가할 수 있습니다.

명시적으로 태그가 추가된 구조화된 키워드 (구조화되지 않은) 키워드 page_type Nomenclature 그래프에서 추론한 구조화된 키워드 대부분의 체크박스 및 선택 스타일 필터는 구조화된 키워드에 따라 콘텐츠를 필터링합니다. 여기서 필터 측정기준은 구조화된 키워드 네임스페이스와 일치해야 하고 필터 값은 구조화된 키워드의 나머지 부분과 일치해야 합니다. 구조화된 키워드와 지원되는 네임스페이스에 대한 자세한 내용은 Nomenclature 문서를 참조하세요.

모든 카탈로그에서 페이지를 숨기려면 해당 페이지에서 hide_from_catalogs 메타데이터 태그를 true로 설정합니다.

레이아웃 조정

기본 열 레이아웃 (template="activity" 항목의 경우 2개 열, 그렇지 않으면 3개 열)을 변경하려면 값이 1, 2, 3 또는 4인 항목 전체 속성을 추가합니다.

<devsite-catalog items-across="2" query="type:product"></devsite-catalog>

표시 영역이 좁아지면 항목의 레이아웃이 적절하게 조정되어 콘텐츠에 계속 액세스할 수 있습니다 items-across 값이 3 또는 4이면 레이아웃이 태블릿에서 두 개의 열로 전환되고 모든 레이아웃이 휴대기기에서 단일 열로 전환됩니다.

예

다음은 <devsite-catalog> 맞춤 요소의 기본 기능의 모양과 기능을 보여주는 예입니다.

클라우드 아키텍처 센터

다음은 클라우드 아키텍처 센터에서 사용되는 카탈로그의 예시입니다. title 및 summary 외에도 fields 속성에 product 및 api를 지정하여 이러한 네임스페이스의 태그를 카드에 추가합니다.

데모

원본 크기 보기

<span class="devsite-heading" role="heading" aria-level="4">Source</span>

Codelabs 카탈로그

다음은 플랫 키워드, 번호가 지정되지 않은 페이지로 나누기, 텍스트 필터 입력 없음을 사용하는 Codelab 카탈로그의 예입니다.

데모

원본 크기 보기

사전 적용된 필터

카탈로그 위젯은 페이지 URL에서 사용자가 적용한 필터의 상태를 추적하여 특정 필터 구성을 북마크하거나 공유할 수 있게 해줍니다. 각 필터 측정기준은 URL 매개변수로 표시됩니다. URL 매개변수는 다음과 같이 구성됩니다.

선택 스타일 필터와 같이 단일 값을 갖는 필터 컨트롤의 경우 URL 매개변수 값은 정규화된 필터 값입니다. 체크박스와 같이 여러 값을 지원하는 필터 컨트롤의 경우 URL 매개변수 값은 쉼표로 구분된 정규화된 필터 값의 목록입니다. 다른 모든 (필터가 아닌) URL 매개변수는 카탈로그 위젯의 영향을 받지 않습니다. 예를 들어 사용자가 '빅데이터'를 입력한 경우 를 텍스트 필터에 입력하고 언어 체크박스에서 Python 및 JavaScript를 선택하면 페이지 URL에 쿼리 문자열 'text=Big%20Data&language=python,javascript'와 함께 해당 필터가 반영됩니다.

카탈로그 위젯이 포함된 페이지가 URL의 필터 매개변수와 함께 로드되면 카탈로그 위젯이 해당 필터 컨트롤을 미리 채우고 결과를 적절하게 필터링합니다.

예를 들어 클라우드 아키텍처 센터 데모의 URL은 다음과 같습니다.

https://developers.google.com/devsite/reference/widgets/catalog/architecture

다음은 해당 URL에 추가할 수 있는 쿼리 문자열의 예입니다.

?doctype=bestpractices은 콘텐츠 유형 선택 섹션에서 doctype 필터 측정기준에 해당하는 권장사항 체크박스를 선택합니다. ?doctype=bestpractices,blueprint은 동일한 섹션에서 권장사항 및 청사진 체크박스를 모두 선택합니다. ?text=Cloud%20SQL는 텍스트 필터 입력을 'Cloud SQL'로 채웁니다.

필터 매개변수 측정기준을 결합할 수도 있습니다. 다음 URL에는 doctype 및 text 매개변수가 모두 포함되어 있습니다.

https://developers.google.com/devsite/reference/widgets/catalog/architecture?doctype=bestpractices%2Cblueprint&text=Cloud%20SQL

이 URL은 다음 데모에 표시된 것처럼 적절한 체크박스를 선택하고 텍스트 입력을 채웁니다.

원본 크기 보기