Pada artikel sebelumnya, template yang kita buat sudah bisa menampilkan daftar artikel dan halaman artikel terentu melalui link yang tersedia di daftar artikel. Disini kita akan melanjutkan manambahkan header dan footer sehingga pengguna bisa lebih mudah bernavigasi dan blog kita lebih terlihat seperti blog pada umumnya.

themes/kaltheme/layouts
├── 404.html
├── _default
│   ├── baseof.html
│   ├── list.html
│   └── single.html
├── index.html.bak
└── partials
    ├── footer.html  <-- footer blog
    ├── header.html  <-- header blog
    └── head.html    <-- Html Meta / document head

Menambahkan Blog Header

Header pada website, pada umumnya berisi link menuju halaman utama dan navigasi ke kategori konten lainnya, sehingga penggunjung blog bisa lebih mudah kembali ke daftar artikel entah itu halaman utama ataupun halaman daftar artikel menurut kategori atau topik tertentu.

Untuk menambahkan header pada blog yang kita buat, kita bisa mengubah file partials/header.html yang terdapat di template blog yang kita buat dengan menambahkan kode berikut:

<header>
    <div class="brand">
        <a href="{{.Site.BaseURL}}" class="judul-blog">{{.Site.Title}}</a>
    </div>
    {{- with .Site.Sections -}}
    <div class="navigasi">
        {{- range . -}}
        <a href="{{.Permalink}}" class="link-nav">{{.Title}}</a>
        {{- end -}}
    </div>
    {{- end -}}
</header>

Pada contoh, yang kita tambahkan hanya judul blog dan link ke setiap section artikel. Kamu bisa menambahkan elemen lain di header seperti mengubah daftar section menjadi categori atau tag dan elemen lainnya.

Disini saya menggunakan section karena saya anggap lebih mudah untuk mengorganisasikan artikel menurut topik pembahasan, tapi seperti yang telah dijelaskan sebelumnya kamu bisa mengubah sesuai kebutuhan blog yang dibuat.

Blog footer umumnya menampilkan mark copyright, di bagian ini kamu juga bisa menambahkan link atau informasi lainnya. Pada contoh disini kita hanya akan menampilkan mark copyright jadi di partials/footer.html kita cukup menambahkan kode berikut:

<footer>
    <div class="copy">
        &copy; {{- .Date.Format "2006-" -}} {{ .Site.Title -}}
    </div>
</footer>

Meta Heading

Semua website memiliki meta dokumen heading, dimana fungsinya untuk menerangkan kepada browser apasaja yang perlu digunakan untuk menampilkan halaman dan menerangkan kepada bot crawler yang mengunjugi halaman blog kita. Elemen html ini memang tidak banyak berpengaruh pada tampilan pengguna karena memang lebih ditujukan kepada bot crawler dan browser. Elemen ini lebih sering disinggung ketika membahas tentang SEO (Search Engine Optimization).

Karena kita tidak akan membahas tentang SEO, maka kita cukup menambahkan elemen yang kita butuhkan untuk membuat blog sederhana pada partials/head.html.

<head>
    {{- $description := .Description | default .Summary | default .Site.Params.description | plainify | safeHTML -}}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ if and (.Page.Title) (not .IsHome) }}{{ .Page.Title }} - {{ end }}{{ .Site.Title }}</title>
    <meta name="description" content="{{ $description }}">
</head>

Disini kita menambahkan beberapa informasi yang paling umum pada sebuah document html diantaranya yaitu <title> untuk menampilkan judul halaman pada tab bar browser, meta viewport dan document character set, metadata tambahan khusu untuk browser bawaan windows dan meta deskripsi yang wajib untuk crawler sehingga tampilan pada search engine lebih sedikit seragam dengan situs web lainnya.

Selanjutnya

Situs blog kita hampir selesai, yang hanya kita lakukan adalah memberikan stylesheet untuk mendekor blog kita agar tampilannya lebih menarik di browser. Jadi pada lanjutan tutorial berikutnya kita akan mendekor blog yang kita buat.

Setelah mengikuti tutorial ini, mungkin kamu berfikir hasil tampilan blog yang kita buat disini sangat jauh dari situs blog pada umumnya. Saya tentu setuju dengan apapun pendapat kamu, blog yang kita buat disini tidak akan terlihat menarik jika blog kita masih memiliki sedikit konten.

Jadi jika kamu ingin blog yang kamu buat lebih menarik, terus tambahkan konten artikel di blog kamu. Setelah blog memiliki banyak artikel dan niche (tema pembahasan utama blog) sudah jelas, kamu bisa menambahkan fitur menarik lainnya ke template blog tersebut, Karena dari situlah kita mengetahui apa saja yang perlu ditampilkan di halaman sehingga lebih menarik.

Tapi jika kamu ingin mempublikasikan tema yang kamu buat di internet, satu trik yang sering digunakan yaitu dengan menambahkan dummy konten, entah itu konten artikel, placeholder ataupun blank link yang sifatnya untuk mempercantik tampilan. Semua kembali ke tujuan kita membuat tema (template).