Custom Layouts

Menyesuaikan tata letak tanpa memodifikasi sumber tema.

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 ke setiap bagian halaman, secara selektif Custom Styles atau tambahkan kira-kira satu bagian ke beranda.

Bagaimana cara kerjanya

Berikan ‘block’ berikut ini dengan nilai standart pilihan:

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

{{ define "title" }}Judul Halaman | Site Title{{ end }}

Digabungkan dengan 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:

{{/*
Copyright (C) 2019  VHS <vhsdev@tutanota.com>

This file is part of After Dark.

After Dark is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

After Dark is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/}}

{{ define "title" -}}
  {{ .Title }} | {{ .Site.Title }}
{{- end }}
{{ define "header" }}
  {{ partial "masthead.html" . }}
{{ end }}
{{ define "main" }}
  <header>
    <h1>{{ .Title }}</h1>
  </header>
  {{ .Content }}
{{ end }}
{{ define "footer" }}
  <small class="muted">
    {{ partial "copyright-notice.html" . }}
  </small>
{{ end }}

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:

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

$ 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 pohonlayouts sebagai berikut:

├── content
├── layouts
│   └── audiobook
│       ├── list.html
│       └── single.html
├── static

Sesuaikan list.html dan single.html layouts dan gunakan Custom Styles untuk mendapatkan hasil yang diinginkan. Gunakan referensi sumber daya berikut sebagai bantuan: