Metadata halaman
Halaman DevSite adalah unit konten tunggal di situs. Halaman dapat memiliki judul, isi, elemen header, dan atribut metadata yang mengontrol fitur situs. Saat pengguna mengunjungi URL untuk suatu halaman, situs akan merender halaman web lengkap berdasarkan properti halaman konten, dengan menambahkan elemen dinamis seperti header, footer, dan sidebar. Perilaku default dioptimalkan untuk halaman dokumentasi teknis, tetapi halaman juga dapat dikonfigurasi untuk kegunaan lain, seperti pemasaran dan halaman landing.
Struktur halaman
Halaman DevSite adalah halaman web yang tampilan dan fitur umumnya dikelola oleh situs tersebut. Halaman di Google Developers ditampilkan beserta beberapa area umum. (Tidak semua situs mendukung semua fitur.) Arahkan kursor ke diagram untuk label.
site header
Logo situs, widget login, kotak penelusuran, dan navigasi atas. Umum di seluruh situs.
project bar
Judul project atau produk, dan widget khusus project (seperti link "Masukan"). Area ini ditentukan oleh metadata project.
sidebar
Navigasi hierarkis seluruh buku. Area ini ditentukan oleh metadata buku.
body
Judul halaman, dan konten halaman.
page footer ("last updated")
Widget khusus halaman (seperti pemberitahuan "Terakhir diperbarui"). Dapat juga berisi pemberitahuan lisensi CC, yang merupakan atribut metadata project.
site footer
Link footer situs, widget pemilihan bahasa. Umum di seluruh situs.
File sumber HTML
<html devsite>
<head>
<title>Page title</title>
<meta name="project_path" value="/path/to/_project.yaml" />
<meta name="book_path" value="/path/to/_book.yaml" />
</head>
<body>
<p>Body content goes here, implemented as HTML.</p>
</body>
</html>
Atribut devsite dari elemen <html> memberi tahu DevSite bahwa ini harus dirender sebagai halaman DevSite, bukan kata demi kata sebagai aset HTML. Jika halaman Anda muncul tanpa format atau header atau footer, pastikan <html devsite> muncul di dekat bagian atas file.
Elemen <html>, <head>, dan <body> wajib ada serta harus memiliki tag pembuka dan penutup.
Halaman biasa juga harus memiliki elemen <title>, di dalam <head>. Lihat Judul halaman.
Tag <meta> spesifik mengontrol fitur halaman. Hal ini dijelaskan dalam referensi ini. Halaman biasa memiliki tag meta "project_path", yang mengacu pada file metadata _project.yaml, dan tag meta "book_path", yang mengacu ke file metadata _book.yaml. Lihat Project dan buku. Tag <meta> yang dikenali oleh DevSite biasanya tidak muncul di halaman akhir.
Elemen lain di <head> dan semua elemen di <body> dirender di halaman akhir.
File sumber Markdown
Project: /path/to/_project.yaml
Book: /path/to/_book.yaml
# Page title
Body content, specified in Markdown, goes here.
Halaman biasa harus memiliki judul (misalnya, # Page title). Lihat Judul halaman.
Tag meta tertentu mengontrol fitur halaman. Hal ini dijelaskan dalam referensi ini. Halaman biasa memiliki tag meta Project:, yang mengacu pada file metadata _project.yaml, dan tag meta Book:, yang mengacu ke file metadata _book.yaml. Melihat Project dan buku. Tag meta yang dikenali oleh DevSite biasanya tidak muncul di halaman akhir.
Proyek dan buku
Project dijelaskan oleh file metadata project yang bernama _project.yaml. Buku dijelaskan oleh file metadata buku bernama _book.yaml. File ini dipublikasikan ke situs bersama dengan file halaman dan aset, serta dapat diterjemahkan ke dalam beberapa bahasa. Lihat Metadata project dan Metadata buku untuk mengetahui informasi tentang struktur dan atribut file tersebut.
Untuk mengaitkan halaman dengan project, berikan atribut project_path. Nilainya adalah jalur konten ke file _project.yaml.
HTML
<meta name="project_path" value="/path/to/_project.yaml" />
Markdown
Project: /path/to/_project.yaml
Jika tidak memiliki atribut project_path, halaman akan dirender tanpa region project bar dan fiturnya. Halaman tidak akan dianggap sebagai bagian dari project.
Untuk mengaitkan halaman dengan buku, berikan atribut book_path. Nilainya adalah jalur konten ke file _book.yaml.
HTML
<meta name="book_path" value="/path/to/_book.yaml" />
Markdown
Book: /path/to/_book.yaml
Judul halaman
<head>
<title>Page title</title>
...
</head>
Atau gunakan elemen <h1> dengan class page-title di <body> halaman.
HTML
<h1 class="page-title">Page title</h1>
Markdown
# Page title
Halaman beranda proyek tidak perlu judul,
HTML
<meta name="no_page_title" value="true" />
Markdown
no_page_title: true
Dalam kasus khusus saat <h1> otomatis tidak diinginkan untuk tata letak khusus, tetapi halaman masih memerlukan judul jendela, Anda dapat mempertahankan judul, tetapi menyembunyikan judul dengan atribut "hide_page_heading":
HTML
<title>Page title</title>
<meta name="hide_page_heading" value="true" />
Markdown
hide_page_heading: true
# Page title
Deskripsi header
Banyak situs DevSite memiliki deskripsi di header. Atribut ini ditetapkan di file metadata _project.yaml dan secara otomatis ditampilkan di halaman landing DevSite. Dengan kata lain, halaman yang dibuat menggunakan template _index.yaml akan otomatis merender deskripsi di header, yang ditetapkan dalam file _project.yaml.
Deskripsi ini dapat diganti untuk halaman dengan menyetel description di root file _index.yaml, atau disembunyikan dengan menyetel hide_description: true dalam objek header dari objek landing_page.
Tata letak lebar penuh
Jika diperlukan kontrol lebih besar atas tata letak, Anda dapat memberi tahu DevSite untuk melepaskan kontrol atas tata letak untuk area di bawah header situs dan panel project serta di atas footer situs. Untuk melakukannya, setel atribut metadata "full_width" ke "true".
HTML
<meta name="full_width" value="true" />
Markdown
full_width: true
Tanggal terakhir diperbarui
Secara default, kecuali di halaman full-width, wilayah footer halaman otomatis menyertakan kolom "terakhir diperbarui" pemberitahuan. Pada umumnya, hal ini memberi pengguna sinyal langsung tentang keaktualan konten di halaman.
Dalam beberapa kasus, informasi ini mungkin membingungkan atau mungkin dianggap rahasia oleh tim produk. Untuk menonaktifkan pemberitahuan terakhir yang diperbarui pada suatu halaman, setel atribut hide_last_updated ke true:
HTML
<meta name="project_path" value="/time-travel/_project.yaml" />
<meta name="book_path" value="/time-travel/_book.yaml" />
<meta name="hide_last_updated" value="true" />
Markdown
Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
hide_last_updated: true
Anda dapat mengganti "terakhir diperbarui" yang dihitung secara otomatis tanggal dengan menyetel tag meta refresh_date ke tanggal dalam format ISO 8601:
HTML
<meta name="project_path" value="/time-travel/_project.yaml" />
<meta name="book_path" value="/time-travel/_book.yaml" />
<meta name="refresh_date" value="2017-03-27" />
Markdown
Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
refresh_date: 2017-03-27
Deskripsi halaman
Deskripsi halaman adalah ringkasan tekstual dari konten halaman. Untuk menetapkan deskripsi halaman, berikan elemen <meta name="description" content="DESCRIPTION" />. Perhatikan bahwa teks deskripsi dimasukkan ke atribut bernama content, bukan value; cocok dengan atribut standar web.
HTML
<meta name="description" content="It was the best of times, it was the blurst of times..." />
Markdown
description: It was the best of times, it was the blurst of times...
Menyetel deskripsi halaman akan menyebabkan tag <meta> disertakan pada halaman akhir
Jalur image
image_path adalah jalur ke gambar yang mewakili halaman ini di media sosial dan fitur DevSite seperti recommendations dan dynamic content. Jika ditetapkan, gambar ini akan digunakan sebagai gambar OpenGraph halaman, menggantikan setelan social media project dan setelan branding tenant site's.
HTML
<meta name="image_path" value="/site-assets/developers_64dp.png" />
Markdown
image_path: /site-assets/developers_64dp.png
Kata kunci
Kolom keywords adalah daftar string yang dipisahkan koma, yang mendeskripsikan halaman serta digunakan dalam fitur penelusuran dan penemuan seperti penelusuran situs dan Dynamic Content.
Kolom keywords mendukung kata kunci datar tanpa pengaitan dimensi (misalnya, gettingstarted) dan kata kunci terstruktur yang menggunakan namespace dimensi untuk mewakili hubungan antara dokumen dan entitas dunia nyata seperti bahasa pemrograman, produk, dan peristiwa (misalnya, product:ComputeEngine atau language:Python3). Anda dapat menambahkan kedua jenis keywords ke kolom kata kunci mana pun.
Jika Anda menyusun kata kunci yang tidak sesuai dengan persyaratan pemformatan, Anda akan melihat peringatan dengan versi kata kunci yang diformat dengan benar dalam output alat yang digunakan (biasanya alat command line DevSite atau Penayang Konten DevSite).
HTML
<meta name="keywords" value="spacetime,timetravel,product:Delorean" />
Markdown
keywords: spacetime, timetravel, product:Delorean