Mendekorasi Tema Hugo Menggunakan SCSS

Bagian paling menyenangkan dari membuat web template adalah mendekor tampilan sehingga lebih nyaman dan mudah untuk pengunjung memilah informasi yang ditampilkan. Pada bagian ini kita akan mendekor template yang telah kita buat menggunakan CSS (Cascading StyleSheet). Disini saya anggap kita semua telah memahami html dan css, jadi disini kita tidak akan membahasnya lebih detail.

Disini kita akan menggunakan fitur hugo untuk membuat stylesheet, yaitu dengan menggunakan StyleSheet Preprocessor SCSS. SCSS akan memudahkan kita untuk menulis css dengan file dan kode yang lebih terorganisasi. Disini kita akan menggunakan fitur dasar dari scss, jadi yang perlu kita ketahui adalah dasar css seperti variabel, selector (id, class) dan attribut css layout, jadi bisa membedakan ketika menulis css biasa dan menggunakan preprocessor SCSS.

Struktur Direktori StyleSheet

Hugo tidak menyediakan kerangka untuk kita membuat stylesheet, tapi stylesheet hugo pada umumnya diletakkan pada folder assets pada tema. StyleSheet yang akan kita buat akan dibagi menjadi beberapa file agar lebih mudah untuk di edit dan mencari file mana yang menyimpan styling untuk elemen tertentu.

Di folder tema hugo yang kita buat, buat folder assets dan buat struktur untuk stylesheet kita seperti berikut:

themes/kaltheme
├── archetypes
│   └── default.md
├── assets               <-- folder template asset
│   ├── main.scss        <-- file utama stylesheet
│   └── _scss
│       ├── base.scss    <-- file styling dasar atau css reset
│       ├── footer.scss  <-- stylesheet untuk footer
│       ├── header.scss  <-- stylesheet untuk header
│       ├── list.scss    <-- stylesheet untuk daftar artikel
│       └── single.scss  <-- stylesheet untuk halaman artikel
├── layouts
│   ├── 404.html
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html.bak
│   └── partials
│       ├── footer.html
│       ├── header.html
│       └── head.html
├── LICENSE
├── static
│   ├── css
│   └── js
└── theme.toml

Seperti halnya template html, disini kita juga akan membagi setiap stying halaman menjadi beberapa file. Setiap file disimpan didalam direktori _scss sehingga memudahkan kita mencari styling mana yang perlu kita ubah styling-nya dan digabungkan menggunakan file main.scss yang berada di asset direktori.

Kamu bisa saja hanya menggunakan main.scss jika tidak ingin membagi styling halaman, tapi di tutorial ini kita akan menggunakan file styling terpisah untuk pengembangan, untuk hasil produksinya kita akan menggunakan hugo untuk menggabungkannya menjadi satu file css.

Menggunakan scss Variabel

Scss variabel memudahkan kita untuk mengubah properti styling pada halaman tanpa harus mengubah semua properti pada setiap css selector. Scss variabel yang akan kita gunakan disimpan dalam file main.scss, sehingga memudahkan kita mengakses variabel tanpa harus mencarinya di setiap file.

@charset "utf-8";

// ==== SCSS VARIABLE ====
// Define defaults for each variable.
$base-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !default;
$mono-font-family: "SFMono-Regular",Consolas,"Liberation Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace !important;
$heading-font-family: Georgia, 'Times New Roman', Times, serif !important;
$base-font-size: 1rem !default;
$base-font-weight: 400 !default;
$small-font-size: $base-font-size * 0.875 !default;
$base-line-height: 1.5 !default;
$spacing-unit: 30px !default;

// Width of the content area
$content-width: 600px !default;

// Mixin template for font size
@mixin relative-font-size($ratio) {
    font-size: $base-font-size * $ratio;
}

// ==== CSS VARIABLE ====
:root{
    --body-bg: #FCFDFF;
    --text-color: #01060A;
    --secondary-text-color: #2b3652;
    --link-color: #006874;
    --link-color-hover: #842300;
    --link-hover-bg: #f1f1fc;
    --header-bg: #fcfcfc;
    --border-color: #d7eaff;
}

// Import partials from `_scss` directory
@import
"_scss/base",
"_scss/header",
"_scss/list",
"_scss/single",
"_scss/footer"
;

Seperti yang bisa dilihat pada contoh, kita menggunakan dua jenis variabel.

Variabel SCSS, untuk membantu kita mengubah nilai properti css yang menggunakannya hanya pada fase pengembangan. Setelah dikompile menjadi sebuah file css yang statis, nilai variabel akan digabungkan kedalam properti yang menggunakan variabel tersebut dan kita tidak bisa mengubahnya kembali ketika scss sudah dikompile.
Variabel CSS, untuk mengubah nilai properti css yang mengguakannya di saat fase produksi. Ini adalah fitur bawaan css, jadi ketika dikompile kita masih bisa mengubah nilai dari variabel melalui browser. Salah satu contoh penggunaan variabel scss yaitu untuk membuat Dark mode untuk website, dimana halaman bisa berganti warna background dan foreground sesuai keinginan pengguna.

Jadi perbedaan yang paling jelas dari keduanya adalah Variabel SCSS hanya bisa diubah di pengembangan melalui teks editor yang kita pakai dan CSS variabel bisa kita ubah baik di saat pengembangan ataupun ketika halaman blog kita disajikan di browser. Tujuan keduanya pada dasarnya sama yaitu memudahkan akses untuk mengkostumisasi stylesheet yang telah kita buat.

Selain css dan scss variable, di main.scss kita juga menggabungkan semua file yang berada pada direktori _scss menggunakan keyword scss import.

Menggunakan Basis CSS atau Reset

Setiap browser memiliki cara untuk menampilkan halaman html yang berbeda, jadi umumnya ketika membuat styling untuk halaman html kita perlu menyamakan tampilan dasar html di semua browser. Banyak sekali CSS reset yang bisa kita gunakan dan temukan di internet atau umumnya ada di github. Cukup salin ke file ini jika kamu memiliki salah satu css reset tersebut.

Untuk tutorial ini kita hanya akan meggunakan css reset yang sederhana saja dan disimpan di file _scss/base.scss. saya tidak menjamin tampilan disemua browser akan sama menggunakan css reset ini. Tapi disini kita juga menggunakan variabel yang telah kita definisikan di file main.scss sehingga mudah untuk mengubah setiap properti hanya melalui variabel tersebut.

/**
 * Reset some basic elements
 */
 body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {
   margin: 0;
   padding: 0;
 }

 /**
   * Basic styling
   */
 body {
   font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
   color:var(--text-color) !important;
   background-color: var(--body-bg) !important;
   -webkit-text-size-adjust: 100%;
   -webkit-font-feature-settings: "kern"1;
   -moz-font-feature-settings: "kern"1;
   -o-font-feature-settings: "kern"1;
   font-feature-settings: "kern"1;
   font-kerning: normal;
   margin: 0 auto;
   padding: 0;
 }



 /**
   * Set `margin-bottom` to maintain vertical rhythm
   */
 h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure,
 %vertical-rhythm {
   margin-bottom: $spacing-unit / 2;
 }


 /**
   * Images
   */
 img {
   max-width: 100%;
   vertical-align: middle;
   margin: 0 auto;
 }

 /**
   * Lists
   */
 ul, ol {
   margin-left: $spacing-unit;
 }

 /**
   * Headings
   */
 h1, h2, h3, h4, h5, h6 {
   font-family: $heading-font-family;
   font-weight: $base-font-weight;
   &:hover {
     position: relative;
   }
 }



 /**
   * Links
   */
 a {
   color: var(--link-color);
   text-decoration: none;

   &:visited {
     color: var(--link-color);
   }

   &:hover {
     color: var(--link-color-hover);
     text-decoration: underline;
   }
 }

 /**
   * Code formatting
   */

 pre {
   padding: 8px 12px;
   white-space: pre-wrap;
   font-size: 0.85rem;
   user-select: text;
 }


 /**
   * Tables
   */
 table {
   margin-bottom: $spacing-unit;
   width: 100%;
   text-align: left;
   color: inherit;
   border-collapse: collapse;
   border: 1px solid var(--border-color);

   tr {
     &:nth-child(even) {
       background-color: var(--widget-bg);
     }
   }

   th, td {
     padding: 4px 10px;
   }

   th {
     background-color: var(--header-bg);
     border: 1px solid var(--border-color);
     border-bottom-color: var(--border-color);
   }

   td {
     border: 1px solid var(--border-color);
   }
 }

 header,#content, footer{
  max-width: $content-width;
  margin: 0 auto;
 }

Disini kamu juga bisa menambahakan properti yang sering digunakan seperti pada contoh yaitu header, content dan footer memiliki propert styling yang sama jadi bisa kita tulis satu kali seperti pada akhir kode diatas.

Menerapkan Styling ke template HTML

Sampai disini kita perlu menerapkan atau menggunakan CSS yang telah kita buat ke template html, sehingga kita bisa dengan mudah melihat perubahan tampilan atau mem-preview melalui browser dan menyesuaikannya kembali melalui editor.

Untuk menggunakan CSS, kita perlu menambahakan elemen link pada <head> tag template html, lebih spesifiknya yaitu pada partials/head.html. Karena kita mengunakan CSS preprocessor maka hugo menggunakan sintak tersendiri dan sedikit berbeda dengan penggunaan css lainnya.

<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 }}">

    {{- $css := resources.Get "main.scss" | toCSS | minify  -}}
    <link rel="stylesheet" href="{{ $css.Permalink }}" >
</head>

Untuk mengakses file main.scss kita bisa menggunakan fungsi yang telah disediakan oleh hugo. Hugo mengenali folder assets sebagai global resources dimana resources bisa berupa berbagai macam asset seperti gambar, file javascript, css dan resources lainnya yang ingin kita proses menggunakan fitur hugo.

Disini kita resources yang ingin kita proses adalah file styling kita yaitu main.css. Hugo akan memproses file tersebut menjadi css menggunakan fungsi toCSS dan mengkompres file menggunakan fungsi minify. Hugo juga bisa memberikan fingerprint di setiap file untuk membedakan versi file yang di sajikan menggunakan fungsi fingerprint, tapi disini kita tidak akan menyimpan setiap versi css di cache browser jadi kita tidak terlalu memerlukan fingerprinting.

Terakhir kita menggunakan css yang telah diproses dengan html link elemen seperti pada umumnya.

Melihat tampilan halaman dengan styling

Jalankan perintah hugo server di root direktori blog yang kita buat jika kamu belum menjalankannya. Kemudian buka browser dan kunjungi http://localhost:1313.

Jika kamu telah melakukan hal tersebut, biarkan perintah tersebut tetap berajalan dan browser tetap terbuka. Hugo memiliki fitur fresh reload (hot reload), jadi ketika kita mengubah di suatu file pada project kita, maka browser secara otomatis merefresh halaman blog kita.

Saat ini, tampilan blog kita agak sedikit berbeda dari sebelum menggunakan css, beberapa styling pada base.scss telah digunakan di halaman tersebut.

Memoles Tampilan Tema Blog

Setelah kita membuat basis template base.scss, sekarang kita lebih mudah dalam memberikan style untuk masing - masing elemen blog kita. Kode yang akan kita gunakan akan sangat simple, jadi akan sangat mudah untuk dibaca dan dipahami.

Header blog

Header yang kita buat sangatlah simple (header.scss), yang kita perlukan adalah membuat judul blog dan navigasi terpisah sehingga memudahkan untuk dibedakan.

header{
    display: flex;
    justify-content: space-between;
    padding: 20px 0 10px 0;
    border-bottom: 1px solid var(--border-color);

    .judul-blog{
        color: inherit;
        text-decoration: none;
    }
}

.navigasi a{
    padding: 0 5px;
}

Disini kita menggunakan properti css display flex untuk membagi penempatan kedua elemen yaitu judul dan navigasi, kemudian meletakkan keduanya dengan sisa jarak tampilan layar yang tersisa di antara kedua elemen tersebut.

Untuk styling lainnya kamu bisa sesuaikan dengan detail setiap elemen yang diperlukan untuk blog kamu, seperti padding, warna dan lainnya.

Daftar Artikel

Selanjutnya tampilan daftar artikel (list.scss), disini kita hanya perlu memberikan jarak antar artikel yang ditampilkan sebagai daftar sehingga lebih mudah dibedakan.

.daftar-artikel{
    padding:10px 0;

    h2{
        margin: 0;
    }

    .tanggal{
        font-size: $small-font-size;
    }
}

.paginator{
    display: flex;
    justify-content: space-between;
}

Disini kita sangat beruntung dengan menggunakan base.scss kita tidak perlu memberikan jarak antar item artikel, base.scss telah memberikan jarak yang cukup pada elemen paragraf <p>. Yang kita perlukan disini yaitu memberikan jarak daftar artikel dengan header dan footer pada halaman yaitu 10px. Di template daftar artikel (_default/list.html) kita juga memiliki paginator, yang terdiri dari dua link berbeda. Kita bisa memisahkannya cukup dengan properti css display flex seperti pada halnya header.

Halaman Artikel

Halaman ini merupakan halaman yang sangat kompleks hingga detail yang terkecil, seperti tampilan tabel, gambar, daftar list, dan elemen pendukung lainnya bahkan hingga typografi teks untuk mempresentasikan artikel agar mudah untuk dibaca oleh pengguna. Tapi pada tutorial ini kita akan menyerahkan tugas tersebut kepada base.scss yang kita gunakan untuk saat ini, Atau ini akan jadi PR kamu untuk menuliskannya di file single.scss ini.

.artikel{
    padding: 10px 0;

    h2{
        margin:0;
        border-bottom: 1px solid var(--border-color)
    }
}

.artikel-header{
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;

    .tanggal{
        font-size: $small-font-size;
    }

    h1{
        margin:0;
    }
}

Seperti yang telah dijelaskan kita tidak akan memberikan style untuk halaman ini semuanya. Jadi disini kita hanya akan memberi style pada artikel headernya saja. Dan untuk lebih mudah membaca artikel kita juga menambahkan sedikit untuk styling pada heading didalam artikel menggunakan border.

Jika kita perhatikan kembali pada template html yang kita buat untuk menampilkan artikel (_default/single.html) kita juga memiliki paginator disana, tapi tampilannya sudah cukup sempurna. Hal ini dikarenakan paginator tersebut menggunakan css class yang sama yang digunakan oleh paginator pada _default/list.html.

Kasus seperti ini akan sangat membingungkan ketika kita membagi file menjadi beberapa bagian sperti yang kita lakukan seperti ini. Agar tidak membingungkan kamu bisa membuat file terpisah untuk styling paginator dan mengimportnya di main.scss jika diperlukan.

Cara lain yaitu mendeklarasikannya kembali di block class .artikel, jadi nanti stylingnya akan diperlakukan berbeda. Sehingga mengubah paginator di:

list.scss hanya untuk merubah paginator di halaman daftar artikel
dan single.scss untuk merubah paginator di halaman single artikel.

Memberikan style di blog, sepenuhnya menjadi keputusan masing - masing pemiliknya. Di tutorial ini, saya hanya bisa memberikan contoh sederhananya saja, jadi jika penjelasannya agak berputar - putar saya mohon maaf. Saya hanya berusaha memberikan solusi dan tips untuk melanjutkan proyek blog kamu, semuanya kembali ke kebutuhan blog yang akan kamu buat.

Elemen terakhir yang perlu kita selesaikan adalah footer blog, di tutorial ini kita hanya memiliki footer yang hanya menampikan mark copyright. Jadi Tidak banyak styling kode disini.

footer{
    padding: 20px 0 10px 0;
    border-top: 1px solid var(--border-color);
}

Disini kita hanya menempatkan footer menggunakan padding sehingga terlihat dengan jelas dan dapat dibedakan dari informasi lainnya yang ditampilkan di halaman blog kita.

Penutup

Setelah menulis empat artikel untuk tutorial ini, tidak terasa tutorial ini telah selesai. Saya kira akan banyak sekali artikel yang perlu ditulis untuk membuat sebuah blog dan tema blognya sesederhana mungkin. Saya sangat puas dengan hugo, dimana platformnya sengat memudahkan penggunanya untuk membuat website. Kurang dari 1000 baris kode yang telah ditulis di tutorial ini dan hasilnya sudah cukup untuk membuat sebuah template blog. Jika kamu bisa menghitungnya lebih detail silakan beritahu saya di komentar.

Tips & Saran

Tentu tutorial ini masih jauh dari sempurna untuk membuat blog yang kita inginkan. Tutorial ini pada dasarnya adalah awal untuk mengembangkan blog yang kita buat. Banyak sekali hal yang belum dibahas di tutorial ini, khususnya tentang teknologi web frontend. Sebagai contoh saat ini banyak css framework yang bisa kita gunakan seperti Bootstrap, Tailwind, dan sebagainya. Service worker untuk menyajikan website secara offline, javascript librari yang bisa kita gunakan untuk frontend website dan masih banyak lagi.

Silakan bereksperimen dengan teknologi yang berbeda untuk melanjutkan membuat blog yang menarik dengan Hugo, atau jelajahi dokumentasi hugo untuk melihat potensi lainnya membuat website menggunakan hugo.

Akhir kata

Tutorial ini akan saya cukupkan disini, jika ada kesempatan di lain hari untuk membahas hugo, saya akan menambahkan artikel di section Hugo di blog ini. Siapapun kamu yang telah mengikuti tutorial ini dan menyempatkan membaca tutorial ini hingga akhir, saya sangat berterimakasih telah memutuskan memilih artikel ini. Karena itulah harapan saya menulis tutorial ini, yaitu berharap agar tutorial ini berguna dan memberikan manfaat kepada pembaca blog ini.