87 lines
3.3 KiB
Markdown
87 lines
3.3 KiB
Markdown
+++
|
|
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
|