|
|
- +++
- title = "Custom Layouts"
- description = "Menyesuaikan tata letak tanpa memodifikasi sumber tema."
- categories = ["customizing"]
- tags = ["layout", "templating", "style"]
- feature = ["code highlighter", "snippets", "related content"]
- [[copyright]]
- owner = "Josh Habdas"
- date = "2019"
- license = "agpl-3.0-or-later"
- +++
-
- After Dark menggunakan blok template untuk memfasilitasi pembuatan tata letak halaman yang unik di mana saja di dalam situs anda. Gunakan itu untuk menambah [Snippets](../snippets) ke setiap bagian halaman, secara selektif [Custom Styles](../custom-styles) atau tambahkan kira-kira satu bagian ke beranda.
-
- ## Bagaimana cara kerjanya
-
- Berikan 'block' berikut ini dengan nilai standart pilihan:
-
- ```go-html-template
- <title>{{ block "title" }}Judul Situs{{ end }}</title>
- ```
-
- Templates warisan dapat menghilangkan blok dan mempertahankan nilai standart atau menerangkan block untuk mengubah nilainya, seperti yang ditunjukan berikut ini:
-
- ```go-html-template
- {{ define "title" }}Judul Halaman | Site Title{{ end }}
- ```
-
- Digabungkan dengan {{< external href="https://gohugo.io/templates/lookup-order/" text="Lookup Order in Hugo" />}} block menjadi penting dalam menunjuk bagian dalam yang dapat diedit, dan meningkatkan penggunaan kembali file templates yang sudah ada.
-
- ## Diterapkan dalam konteks
-
- Inilah template yang digunakan untuk menampilkan sebuah halaman di After Dark:
-
- {{< highlight go-html-template >}}
- {{< include "themes/after-dark/layouts/_default/single.html" >}}
- {{< /highlight >}}
-
- Tidak banyak tentang itu. Sebagian besar kode diwarisi dari template lain, memberikan gambaran yang jelas tentang struktur halaman dan membuat modifikasi yang sepele.
-
- ## Membuat milik anda sendiri
-
- Bayangkan anda membuat bagian Buku Audio untuk situs anda dan menginginkan dua layout khusus baru: yang satu untuk membuat daftar klip audio dan yang lain untuk menjelaskan.
-
- Untuk mendapatkan hal tersebut dengan menggunakan template block, pertama buat bagian 'audiobook' dengan satu halaman untuk menggambarkan klip:
-
- ```sh
- $ hugo new audiobook/the-power-of-now.md
- ```
-
- Menghasilkan struktur pohon sebagai berikut:
-
- ```
- ├── assets
- ├── content
- │ └── audiobook
- │ └── the-power-of-now.md
- ├── layouts
- ```
-
- Jika sudah melayani situs anda bagian dan halaman audiobooks anda akan segera muncul menggunakan standart template block. Untuk menyesuaikan dari standart, tambahkan `list.html` dan `single.html` ke a `layouts/audiobook` di situs direktori anda.
-
- Jika file belum ada, salinlah dari tema standart:
-
- ```sh
- $ mkdir -p layouts/audiobook
- $ cp themes/after-dark/layouts/_default/list.html layouts/audiobook
- $ cp themes/after-dark/layouts/_default/single.html layouts/audiobook
- ```
-
- Menghasilkan struktur pohon`layouts` sebagai berikut:
-
- ```
- ├── content
- ├── layouts
- │ └── audiobook
- │ ├── list.html
- │ └── single.html
- ├── static
- ```
-
- Sesuaikan `list.html` dan `single.html` layouts dan gunakan [Custom Styles](../custom-styles) untuk mendapatkan hasil yang diinginkan. Gunakan referensi sumber daya berikut sebagai bantuan:
-
- - {{< external "https://gohugo.io/templates/" />}} untuk fungsi templating dan logika
- - {{< external "https://devdocs.io" />}} untuk HTML yang komprehensif dan CSS reference
- - {{< external "https://inclusive-components.design" />}} untuk ide pola design
|
