Το προσαρμοσμένο στοιχείο <devsite-catalog> παρέχει δυναμικό περιεχόμενο με δυνατότητα φιλτραρίσματος που περιλαμβάνει διεπαφή φιλτραρίσματος σε όλη την πλατφόρμα. Υποβάλλει ερωτήματα σε περιεχόμενο που ανήκει στον DevSite για να φορτώσει πόρους που σχετίζονται με ένα συγκεκριμένο θέμα σε μια σελίδα DevSite. Αυτό το προσαρμοσμένο στοιχείο μπορεί να φορτώσει πόρους από οποιονδήποτε μισθωτή DevSite, καθώς και εξωτερικούς πόρους που έχουν προστεθεί στο σώμα εξωτερικού περιεχομένου του DevSite.

Χρήση

Για να ξεκινήσετε να χρησιμοποιείτε το προσαρμοσμένο στοιχείο <devsite-catalog> , κάντε τα εξής:

1. Προσθέστε το προσαρμοσμένο στοιχείο στη σελίδα σας.
2. Απομονώστε το σύνολο δεδομένων σας με ένα ερώτημα δυναμικού περιεχομένου.
3. Προσθήκη φίλτρων.
4. Επιλέξτε τις επιλογές απόδοσης.
5. Προσθέστε ετικέτα στο περιεχόμενό σας.
6. Προσαρμογή διάταξης.

Προσθέστε το προσαρμοσμένο στοιχείο

Προσθέστε το προσαρμοσμένο στοιχείο <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>

Μπορείτε επίσης να χρησιμοποιήσετε ένα πεδίο custom_html εάν δεν χρειάζεστε άλλα πεδία σε επίπεδο στοιχείου, όπως heading ή description :

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

Χαμήλωση τιμής

Για αρχεία Markdown, το προσαρμοσμένο στοιχείο πρέπει να είναι τυλιγμένο σε ένα στοιχείο <div> ή <section> :

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

Απομονώστε το σύνολο δεδομένων σας

Προσδιορίστε ένα ερώτημα δυναμικού περιεχομένου που απομονώνει το πλήρες σύνολο δεδομένων που θέλετε να είναι διαθέσιμο στον κατάλογό σας και προσθέστε το στο χαρακτηριστικό ερώτημα στον νέο σας κατάλογο.

Για παράδειγμα, για να προσθέσετε έναν κατάλογο με όλα τα προϊόντα που αναφέρονται στο developers.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> επίσης για να βεβαιωθείτε ότι η διεπαφή χρήστη του φίλτρου που δημιουργήθηκε είναι σωστή.

Προσθέστε ένα στοιχείο <option> για κάθε τιμή φίλτρου στην καθορισμένη διάσταση στο γονικό στοιχείο <select> . Καθορίστε την τιμή με δυνατότητα φιλτραρίσματος στο χαρακτηριστικό value σε κάθε <option> . Προσθέστε ευανάγνωστες ετικέτες φίλτρων ανάμεσα στις ετικέτες <option> . Αυτά θα μεταφραστούν εάν η σελίδα σας είναι εντοπισμένη.

Ο παρακάτω κώδικας προσθέτει μια ενότητα φίλτρων τύπου εγγράφου και φίλτρων λέξεων-κλειδιών σε μια διεπαφή χρήστη φιλτραρίσματος στην πλευρά των αποτελεσμάτων:

<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 για να καθορίσετε ποια δεδομένα θέλετε να εμφανίζονται στην κάρτα του καταλόγου σας. Εκτός από τα fields που τεκμηριώνονται για <devsite-dynamic-content> , μπορείτε να καθορίσετε οποιονδήποτε από τους τεκμηριωμένους δομημένους χώρους ονομάτων λέξεων-κλειδιών για απόδοση των ετικετών που εφαρμόζονται σε κάθε έγγραφο σε αυτόν τον χώρο ονομάτων. Για παράδειγμα, ο καθορισμός product θα έχει ως αποτέλεσμα όλες οι ετικέτες προϊόντων που εφαρμόζονται σε κάθε σελίδα να αποδίδονται στην κάρτα για τη συγκεκριμένη σελίδα. Μπορείτε επίσης να καθορίσετε tags για να βλέπετε όλες τις ετικέτες Ονοματολογίας που εφαρμόζονται στο έγγραφο.

Ο ακόλουθος κώδικας διαμορφώνει το παραπάνω παράδειγμα ώστε να παρέχει έως και 1000 αποτελέσματα ταξινομημένα κατά πρόσφατη συχνότητα με μια διεπαφή χρήστη αριθμητικής σελιδοποίησης που ξεκινά με 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, μπορείτε να δημιουργήσετε ένα προσαρμοσμένο πρότυπο για τις κάρτες του καταλόγου σας προσθέτοντας ένα νέο πρότυπο σόγιας στο προσαρμοσμένο στοιχείο και προσδιορίζοντας το νέο σας πρότυπο χρησιμοποιώντας το χαρακτηριστικό template στον κατάλογό σας.

Προσθέστε ετικέτα στο περιεχόμενό σας

Το περιεχόμενο μπορεί να φιλτραριστεί μόνο εάν έχει επισημανθεί σύμφωνα με τα φίλτρα σας. Είναι δυνατή η προσθήκη φίλτρων χρησιμοποιώντας τις ακόλουθες διαστάσεις:

δομημένες λέξεις-κλειδιά με ρητή ετικέτα (μη δομημένες) λέξεις-κλειδιά page_type δομημένες λέξεις-κλειδιά που συνάγονται από το γράφημα ονοματολογίας Τα περισσότερα φίλτρα πλαισίου ελέγχου και επιλογής στυλ θα φιλτράρουν το περιεχόμενο σύμφωνα με δομημένες λέξεις-κλειδιά, όπου η διάσταση φίλτρου πρέπει να ταιριάζει με έναν χώρο ονομασιών δομημένης λέξης-κλειδιού και η τιμή του φίλτρου πρέπει να ταιριάζει με το υπόλοιπο τη δομημένη λέξη-κλειδί. Ανατρέξτε στην τεκμηρίωση της Ονοματολογίας για περισσότερες πληροφορίες σχετικά με τις δομημένες λέξεις-κλειδιά και τους υποστηριζόμενους χώρους ονομάτων.

Για να αποκρύψετε μια σελίδα από όλους τους καταλόγους, ορίστε την ετικέτα μεταδεδομένων hide_from_catalogs σε true σε αυτήν τη σελίδα.

Προσαρμογή διάταξης

Για να αλλάξετε την προεπιλεγμένη διάταξη στήλης (η οποία είναι είτε δύο στήλες για τα στοιχεία template="activity" ή τρεις στήλες διαφορετικά), προσθέστε ένα χαρακτηριστικό αντικειμένων με τιμή 1 , 2 , 3 ή 4 .

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

Καθώς η θύρα προβολής στενεύει, η διάταξη των στοιχείων προσαρμόζεται για να διασφαλίσει ότι το περιεχόμενο των στοιχείων παραμένει προσβάσιμο. Για items-across τιμές 3 ή 4 , η διάταξη αλλάζει σε δύο στήλες σε tablet και όλες οι διατάξεις αλλάζουν σε μία στήλη σε κινητές συσκευές.

Παραδείγματα

Ακολουθούν παραδείγματα για την επίδειξη της εμφάνισης και της λειτουργικότητας των βασικών χαρακτηριστικών του προσαρμοσμένου στοιχείου <devsite-catalog> .

Cloud Architecture Center

Το παρακάτω είναι ένα παράδειγμα του καταλόγου που χρησιμοποιείται για το Cloud Architecture Center. Εκτός από title και summary , προσδιορίζει product και api στο χαρακτηριστικό fields για την προσθήκη ετικετών για αυτούς τους χώρους ονομάτων στις κάρτες.

Διαδήλωση

Βέλτιστες Πρακτικές Προσχέδιο Εννοια Πρότυπο Αρχιτεκτονική Αναφοράς Φροντιστήριο Βέλτιστες Πρακτικές Προσχέδιο Εννοια Πρότυπο Αρχιτεκτονική Αναφοράς Φροντιστήριο

Προβολή πλήρους μεγέθους

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

Κατάλογος Codelabs

Το παρακάτω είναι ένα παράδειγμα του καταλόγου των εργαστηρίων κωδικών που χρησιμοποιούν επίπεδες λέξεις-κλειδιά, μη αριθμημένη σελιδοποίηση και χωρίς εισαγωγή φίλτρου κειμένου.

Διαδήλωση

Βέλτιστες Πρακτικές Προσχέδιο Εννοια Πρότυπο Αρχιτεκτονική Αναφοράς Φροντιστήριο Βέλτιστες Πρακτικές Προσχέδιο Εννοια Πρότυπο Αρχιτεκτονική Αναφοράς Φροντιστήριο

Προβολή πλήρους μεγέθους

Προ-εφαρμοσμένα φίλτρα

Το γραφικό στοιχείο Catalog παρακολουθεί την κατάσταση των φίλτρων που εφαρμόζει ο χρήστης στη διεύθυνση URL της σελίδας, επιτρέποντας τη προσθήκη σελιδοδείκτη ή την κοινή χρήση συγκεκριμένων διαμορφώσεων φίλτρων. Κάθε διάσταση φίλτρου αντιπροσωπεύεται από μια παράμετρο URL. Οι παράμετροι URL δομούνται ως εξής:

Για στοιχεία ελέγχου φίλτρου που έχουν μία μόνο τιμή, όπως φίλτρα επιλογής στυλ, η τιμή της παραμέτρου URL είναι η κανονικοποιημένη τιμή φίλτρου. Για στοιχεία ελέγχου φίλτρου που υποστηρίζουν πολλαπλές τιμές, όπως πλαίσια ελέγχου, η τιμή της παραμέτρου URL είναι μια λίστα των κανονικοποιημένων τιμών φίλτρου διαχωρισμένη με κόμματα. Όλες οι άλλες παράμετροι URL (χωρίς φίλτρο) δεν επηρεάζονται από το γραφικό στοιχείο Catalog. Για παράδειγμα, εάν ένας χρήστης έχει εισαγάγει "Big Data" στο φίλτρο κειμένου και έχει επιλέξει Python και JavaScript από τα πλαίσια ελέγχου Γλώσσα, η διεύθυνση URL της σελίδας αντικατοπτρίζει αυτά τα φίλτρα με τη συμβολοσειρά ερωτήματος 'text=Big%20Data&language=python,javascript'.

Όταν μια σελίδα που περιέχει το γραφικό στοιχείο Catalog φορτώνεται με παραμέτρους φίλτρου στη διεύθυνση URL, το γραφικό στοιχείο Catalog προσυμπληρώνει τα αντίστοιχα στοιχεία ελέγχου φίλτρου και φιλτράρει κατάλληλα τα αποτελέσματα.

Για παράδειγμα, το ακόλουθο είναι το URL για την επίδειξη του Cloud Architecture Center :

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

Ακολουθούν μερικά παραδείγματα συμβολοσειρών ερωτήματος που θα μπορούσατε να προσαρτήσετε σε αυτήν τη διεύθυνση URL:

?doctype=bestpractices ελέγχει το πλαίσιο ελέγχου Βέλτιστες πρακτικές στην ενότητα Επιλογή τύπου περιεχομένου , που αντιστοιχεί στη διάσταση του φίλτρου doctype . ?doctype=bestpractices,blueprint ελέγχει τόσο τα πλαίσια ελέγχου Βέλτιστες πρακτικές όσο και τα πλαίσια ελέγχου 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 επιλέγει τα κατάλληλα πλαίσια ελέγχου και συμπληρώνει την εισαγωγή κειμένου, όπως φαίνεται στην παρακάτω επίδειξη.

Βέλτιστες Πρακτικές Προσχέδιο Εννοια Πρότυπο Αρχιτεκτονική Αναφοράς Φροντιστήριο Βέλτιστες Πρακτικές Προσχέδιο Εννοια Πρότυπο Αρχιτεκτονική Αναφοράς Φροντιστήριο

Προβολή πλήρους μεγέθους