Widget'lar: Katalog

<devsite-catalog> özel öğesi, platform genelinde filtreleme kullanıcı arayüzü içeren filtrelenebilir dinamik içerik sağlar. Bir DevSite sayfasında belirli bir konuyla ilgili kaynakları yüklemek için DevSite'nin sahip olduğu içerikleri sorgular. Bu özel öğe, herhangi bir DevSite kiracısından ve DevSite Harici İçerik kitaplığına eklenen harici kaynakları yükleyebilir.

Kullanım

<devsite-catalog> özel öğesini kullanmaya başlamak için aşağıdakileri yapın:

  1. Özel öğeyi sayfanıza ekleyin.
  2. Veri kümenizi Dinamik İçerik sorgusuyla izole edin.
  3. Filtre ekleyin.
  4. Oluşturma seçeneklerinizi belirleyin.
  5. İçeriğinizi etiketleyin.
  6. Düzeni ayarlayın.

Özel öğeyi ekleme

<devsite-catalog> özel öğesini sayfanızda istediğiniz konuma ekleyin.

HTML

HTML sayfaları için özel öğe, herhangi bir HTML öğesi gibi eklenebilir:

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

YAML

Özel öğeyle ilgili ek içeriğin bulunduğu bir açılış sayfası satırı için açılış sayfası satır seçeneklerinden açıklama-100 seçeneğine sahip tek öğeli bir satır kullanın.

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 veya description gibi öğe düzeyinde başka alanlara ihtiyacınız yoksa custom_html alanını da kullanabilirsiniz:

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

Markdown

Markdown dosyaları için özel öğe, bir <div> veya <section> öğesi içine yerleştirilmelidir:

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

Veri kümenizi izole edin

Kataloğunuzda kullanılabilir olmasını istediğiniz tüm veri kümesini izole eden bir Dinamik İçerik sorgusu belirleyin ve bunu yeni kataloğunuzdaki sorgu özelliğine ekleyin.

Örneğin, developers.google.com adresinde listelenen tüm ürünlerin yer aldığı bir kataloğu sayfanıza eklemek için aşağıdaki kataloğu sayfanıza ekleyin.

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

Filtre ekleme

Kataloğunuza filtre eklemek için aşağıdaki seçeneklerin her biri için aşağıdaki talimatları uygulayın:

Metin girişi kutusu Yan taraftaki onay kutusu filtreleri bölümü

Metin girişi filtresi

Kullanıcı metin girerken sonuçları filtreleyen bir giriş kutusu ekleyin. Filtreleme kutusu, her sonucun başlığı, açıklaması ve anahtar kelimelerindeki kullanıcı metnini eşleştirir.

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

Onay kutusu filtreleri

<devsite-catalog> öğenizde belge türü, ürün ve programlama dili gibi her filtrelenebilir boyut için bir <select> öğesi ekleyin. name özelliği, yapılandırılmış anahtar kelime ad alanına veya keywords gibi bir DevSite alan adına karşılık gelen filtreleme boyutunu belirler. Etiket özelliğini kullanarak okuyucularınız için bir boyut etiketi belirtin. Oluşturulan filtre kullanıcı arayüzünün doğru olduğundan emin olmak için her <select> öğesi için birden çok özellik belirttiğinizden de emin olun.

Üst <select> öğesinde belirtilen boyuttaki her filtre değeri için bir <option> öğesi ekleyin. Her bir <option> öğesindeki değer özelliğinde filtrelenebilir değerinizi belirtin. <option> etiketleriniz arasına okunabilir filtre etiketleri ekleyin; Sayfanız yerelleştirilmişse bunlar da çevrilir.

Aşağıdaki kod, sonuçların yan tarafına, filtreleme kullanıcı arayüzüne doküman türü filtreleri ve anahtar kelime filtrelerinden oluşan bir bölüm ekler:

<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>

İlk onay kutusu filtreleri

initial-checkbox-filters özelliği, ilk yüklemede gösterilecek sayı onay kutusu filtrelerini belirler. 3 varsayılandır.

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

Oluşturma seçeneklerinizi belirleme

<devsite-catalog>, Dinamik İçerik widget'ı için tüm oluşturma seçeneklerini ve özel öğe özelliklerini destekler.

Katalog kartınızda hangi verilerin görüntülenmesini istediğinizi belirtmek için fields özelliğini kullanın. <devsite-dynamic-content> için belgelenen fields öğesine ek olarak, söz konusu ad alanındaki her bir dokümana uygulanan etiketleri oluşturmak için belgelenen yapılandırılmış anahtar kelime ad alanlarından herhangi birini belirtebilirsiniz. Örneğin, product belirtildiğinde her sayfaya uygulanan tüm ürün etiketleri söz konusu sayfanın kartında oluşturulur. Dokümana uygulanan tüm Nomenklatür etiketlerini görmek için tags değerini de belirtebilirsiniz.

Aşağıdaki kod, yukarıdaki örneği 9 sonuç ve sayfa başına 9 ek sonuçla başlayan sayısal bir sayfalara ayrılmış kullanıcı arayüzüyle ve yenilik durumuna göre sıralanmış maksimum 1.000 sonuç sağlayacak şekilde yapılandırır. Sonuçları bir başlık, özet ve "Daha fazla bilgi" etiketli düğme içeren kartlar olarak oluşturulacak şekilde yapılandırır product ve api etiketlerinin yanı sıra

<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>

Ekibinizin UXE desteği varsa özel öğeye yeni bir Soya şablonu ekleyerek ve kataloğunuzdaki şablon özelliğini kullanarak yeni şablonunuzu belirterek katalog kartlarınız için özel bir şablon oluşturabilirsiniz.

İçeriğinizi etiketleme

Yalnızca filtrelerinize göre etiketlenmiş içerikler filtrelenebilir. Aşağıdaki boyutları kullanarak filtre eklemek mümkündür:

açıkça etiketlenmiş yapılandırılmış anahtar kelimeler (yapılandırılmamış) anahtar kelimeler page_type Nomenklatür grafiğinden elde edilen yapılandırılmış anahtar kelimeler Onay kutusu ve seçim stilindeki çoğu filtre, içeriği yapılandırılmış anahtar kelimelere göre filtreler. Burada filtre boyutunun yapılandırılmış anahtar kelime ad alanıyla eşleşmesi, filtre değerinin ise yapılandırılmış anahtar kelimenin geri kalanıyla eşleşmesi gerekir. Yapılandırılmış anahtar kelimeler ve desteklenen ad alanları hakkında daha fazla bilgi için Nomenklatür belgelerine bakın.

Bir sayfayı tüm kataloglardan gizlemek için hide_from_catalogs meta veri etiketini o sayfada true olarak ayarlayın.

Düzeni ayarla

Varsayılan sütun düzenini değiştirmek için (template="activity" öğeleri için iki sütun, aksi takdirde üç sütun) 1, 2, 3 veya 4 değerine sahip bir öğeler arası özellik ekleyin.

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

Görüntü alanı daraldıkça öğelerin düzeni, öğelerin emin olabilirsiniz. 3 veya 4 items-across değerleri için düzen, tabletlerde iki sütuna geçer ve tüm düzenler mobil cihazlarda tek bir sütuna geçer.

Örnekler

Aşağıda, <devsite-catalog> özel öğesinin temel özelliklerinin görünümünü ve işlevlerini gösteren örnekler verilmiştir.

Cloud Mimari Merkezi

Aşağıda, Cloud Architecture Center için kullanılan kataloğun bir örneği verilmiştir. title ve summary özelliklerine ek olarak, kartlara bu ad alanları için etiketler eklemek amacıyla fields özelliğinde product ve api belirtilir.

Demo

Tam boyutta göster

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

Codelabs Kataloğu

Aşağıda, düz anahtar kelimeler, numaralandırılmamış sayfalara ayırma ve metin filtresi girişi içermeyen bir kod laboratuvarı kataloğu örneği verilmiştir.

Demo

Tam boyutta göster

Önceden uygulanmış filtreler

Katalog widget'ı, sayfa URL'sindeki kullanıcılar tarafından uygulanan filtrelerin durumunu izleyerek belirli filtre yapılandırmalarının yer işareti konulmasına veya paylaşılmasına olanak tanır. Her filtre boyutu bir URL parametresiyle temsil edilir. URL parametreleri aşağıdaki gibi yapılandırılır:

Belirli bir stilde filtreler gibi tek bir değere sahip filtre kontrolleri için URL parametresi değeri, normalleştirilmiş filtre değeridir. Onay kutuları gibi birden çok değeri destekleyen filtre denetimleri için URL parametre değeri, normalleştirilmiş filtre değerlerinin virgülle ayrılmış bir listesidir. Diğer (filtre olmayan) URL parametreleri, Katalog widget'ından etkilenmez. Örneğin, bir kullanıcı "Büyük Veri" girmişse içine yazılarak ve Dil onay kutularından Python ve JavaScript'in seçilmesi durumunda, sayfa URL'si bu filtreleri "text=Big%20Data&language=python,javascript" sorgu dizesiyle yansıtır.

Katalog widget'ını içeren bir sayfa URL'deki filtre parametreleriyle yüklendiğinde, Katalog widget'ı ilgili filtre denetimlerini önceden doldurur ve sonuçları uygun şekilde filtreler.

Örneğin, Cloud Architecture Center demosunun URL'si aşağıda verilmiştir:

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

Aşağıda, bu URL'ye ekleyebileceğiniz sorgu dizelerine bazı örnekler verilmiştir:

?doctype=bestpractices, İçerik türü seçin bölümünde doctype filtre boyutuna karşılık gelen En İyi Uygulamalar onay kutusunu işaretler. ?doctype=bestpractices,blueprint, aynı bölümdeki En İyi Uygulamalar ve Şema onay kutularını işaretler. ?text=Cloud%20SQL, metin filtresi girişini "Cloud SQL" ile doldurur.

Filtre parametresi boyutları da birleştirilebilir. Aşağıdaki URL hem doctype hem de metin parametrelerini içerir:

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

Bu URL, uygun onay kutularını seçer ve aşağıdaki demoda gösterildiği gibi metin girişini doldurur.

Tam boyutta göster