Kemas Kini Blog (Hugo)

Di sinilah perhatian beralih semenjak pengasingan diri dari dunia media sosial.

Maka, mengemaskini blog ini ialah antara perkara yang dapat saya fokuskan.

Antara benda yang dibuat adalah melesenkan blog ini, mengaplikasi paparan tarikh serta masa melalui objek sedia ada (built-in) dalam JavaScript iaitu Intl pada bahagian footer di bawah dan juga menulis apa yang akan saya bincangkan di sini khususnya.

Bagaimana untuk mendapatkan paparan tarikh, hari serta masa dalam Bahasa Melayu bagi semua siaran untuk blog Hugo?

Jawapannya ada di bawah.

Menurut penerangan di halaman Multilingual Mode | Hugo ini, Go masih belum menyokong locale antarabangsa untuk tarikh, namun ianya boleh diaturkan untuk disimulasikan di dalam laman blog yang dijana oleh Hugo.

Saya perlukan tiga fail yang akan digunakan untuk mengekstrak; ^[1] nama bulan, ^[2] nama hari dan juga ^[3] waktu pagi / petang (AM / PM) dalam Bahasa Melayu untuk paparan. Fail-fail ini boleh disimpan sama ada sebagai (format) TOML, YAML ataupun JSON, dan ditempatkan di dalam direktori data.

1. Nama bulan (laluan direktori data/bulan.toml):-
bulan.toml bulan.yaml bulan.json

1 = "Januari"
2 = "Februari"
3 = "Mac"
4 = "April"
5 = "Mei"
6 = "Jun"
7 = "Julai"
8 = "Ogos"
9 = "September"
10 = "Oktober"
11 = "November"
12 = "Disember"

1: Januari
2: Februari
3: Mac
4: April
5: Mei
6: Jun
7: Julai
8: Ogos
9: September
10: Oktober
11: November
12: Disember

{
    "1": "Januari",
    "2": "Februari",
    "3": "Mac",
    "4": "April",
    "5": "Mei",
    "6": "Jun",
    "7": "Julai",
    "8": "Ogos",
    "9": "September",
    "10": "Oktober",
    "11": "November",
    "12": "Disember"
}

2. Nama hari (laluan direktori data/hari.toml):-
hari.toml hari.yaml hari.json

Monday = "Isnin"
Tuesday = "Selasa"
Wednesday = "Rabu"
Thursday = "Khamis"
Friday = "Jumaat"
Saturday = "Sabtu"
Sunday = "Ahad"

Monday: Isnin
Tuesday: Selasa
Wednesday: Rabu
Thursday: Khamis
Friday: Jumaat
Saturday: Sabtu
Sunday: Ahad

{
    "Monday": "Isnin",
    "Tuesday": "Selasa",
    "Wednesday": "Rabu",
    "Thursday": "Khamis",
    "Friday": "Jumaat",
    "Saturday": "Sabtu",
    "Sunday": "Ahad"
}

3. Waktu pagi / petang (laluan direktori data/waktu.toml):-
waktu.toml waktu.yaml waktu.json

AM = "PG"
PM = "PTG"

AM: PG
PM: PTG

{
    "AM": "PG",
    "PM": "PTG"
}

Kemudian, nama-nama berkaitan tarikh, hari dan masa di atas perlu diindekskan ke dalam templat.

Hugo ada mengingatkan di halaman dateFormat bahawa, dateFormat tidak disokong sebagai sebahagian ciri-ciri berbilang bahasa (multilingual) yang ada pada Hugo. Hal ini bermaksud, sekiranya ditetapkan parameter bagi dateFormat di dalam fail konfigurasi Hugo sekalipun, mengindeks nama tarikh dalam Bahasa Melayu atau bahasa selain daripada Bahasa Inggeris akan mengeluarkan ralat.

Oleh itu, ada dua cara untuk mengindekskan fail-fail data yang telah dibuat ini bagi memaparkan Tarikh, Hari dan Masa seperti berikut (menggunakan waktu siaran ini ditulis sebagai contoh):-

13 Julai 2021, Selasa, 10:56 PG

1. Cara satu:-
   Menetapkan format tarikh datetime pada elemen <time> seperti di bawah.

   <time datetime="{{ .Date.Format `2006-01-02T15:04:05+08:00` | safeHTML }}">
     {{ .Date.Day }} {{ index $.Site.Data.bulan (printf "%d" .Date.Month) }} {{ .Date.Year }},
     {{ index $.Site.Data.hari (prinft "%s" .Date.Weekday) }},
     {{ .Date.Format "03:04" }} {{ index $.Site.Data.waktu (.Date.Format "PM") }}
   </time>

   • Haribulan diwakili oleh 02 pada format datetime dipanggil dengan fungsi {{ .Date.Day }};
   • Kemudian nama bulan diwakili 01 melalui fungsi {{ .Date.Month }} pula dipanggil dengan mengindeks namanya dalam Bahasa Melayu dari fail data yang telah dibuat dan dengan mencetak fungsi printf bagi Go;
   • Tahun yang diwakili oleh 2006 dipanggil dengan fungsi {{ .Date.Year }};
   • Fungsi bagi hari ialah {{ .Date.Weekday }};
   • Untuk memaparkan jam dalam format 24-Jam, boleh juga mengekstraknya melalui fungsi {{ .Date.Hour }}:{{ .Date.Minute }}:{{ .Date.Second }}. Walaubagaimanapun, paparan menjadi tidak cantik kerana nombor '0' di bahagian puluh akan ditinggalkan sekiranya jam, minit dan saat berdigit satu. Contohnya, jam 1:00 pagi apabila ditukarkan kepada format 24-Jam ialah 01:00:00. Maka, paparan jam akan berbentuk sebegini 1:0:0. Disebabkan itu, menggunakan fungsi {{ .Date.Format "15:04:05" }} adalah lebih baik untuk mengekalkan format dua digit, if it matters to you;
   • Perhatikan bahagian e.g. index $.Site.Data.XYZ. Nama fail bulan, hari dan waktu diberikan (menggantikan XYZ) sebelum memanggil fungsi tarikh, masa dan waktu.
   • Penerangan bagi fungsi printf:
     "%d" adalah mewakili kata kerja bagi perpuluhan asas 10 manakala "%s" pula merujuk kepada kata kerja bagi string.

ATAU
2. Cara kedua pula adalah lebih ringkas iaitu dengan menetapkan setiap satu fungsi {{ .Date.Format }} mengikut Tarikh, Hari dan Masa sebagaimana paparan tarikh di atas. Cara ini saya perolehi dari laman web yang ada saya nyatakan sebagai rujukan di bahagian bawah siaran ini.

   <time>
     {{ .Date.Format "02" }} {{ index .Site.Data.bulan (.Date.Format "1") }} {{ .Date.Format "2006" }},
     {{ index .Site.Data.hari (.Date.Format "Monday") }},
     {{ .Date.Format "03:04" }} {{ index .Site.Data.waktu (.Date.Format "PM") }}
   </time>

Sebagai makluman tambahan, ketiga-tiga data di atas boleh dikumpulkan di dalam satu fail; katakan ia diberi nama sebagai tm.toml / .yaml / .json (nama singkatan bagi ‘TarikhMasa’), berikut ialah cara menyimpan datanya:-

[bulan]
1 = "Januari"
2 = "Februari"
3 = "Mac"
4 = "April"
5 = "Mei"
6 = "Jun"
7 = "Julai"
8 = "Ogos"
9 = "September"
10 = "Oktober"
11 = "November"
12 = "Disember"

[hari]
Monday = "Isnin"
Tuesday = "Selasa"
Wednesday = "Rabu"
Thursday = "Khamis"
Friday = "Jumaat"
Saturday = "Sabtu"
Sunday = "Ahad"

[waktu]
AM = "PG"
PM = "PTG"

bulan:
  1: Januari
  2: Februari
  3: Mac
  4: April
  5: Mei
  6: Jun
  7: Julai
  8: Ogos
  9: September
  10: Oktober
  11: November
  12: Disember

hari:
  Monday: Isnin
  Tuesday: Selasa
  Wednesday: Rabu
  Thursday: Khamis
  Friday: Jumaat
  Saturday: Sabtu
  Sunday: Ahad

waktu:
  AM: PG
  PM: PTG

{
    "bulan":
        {
            "1": "Januari",
            "2": "Februari",
            "3": "Mac",
            "4": "April",
            "5": "Mei",
            "6": "Jun",
            "7": "Julai",
            "8": "Ogos",
            "9": "September",
            "10": "Oktober",
            "11": "November",
            "12": "Disember"
        },

    "hari":
        {
            "Monday": "Isnin",
            "Tuesday": "Selasa",
            "Wednesday": "Rabu",
            "Thursday": "Khamis",
            "Friday": "Jumaat",
            "Saturday": "Sabtu",
            "Sunday": "Ahad"
        },

    "waktu":
        {
            "AM": "PG",
            "PM": "PTG"
        }
}

<time datetime="{{ .Date.Format `2006-01-02T15:04:05+08:00` | safeHTML }}">
  {{ .Date.Day }} {{ index $.Site.Data.tm "bulan" (printf "%d" .Date.Month) }} {{ .Date.Year }},
  {{ index $.Site.Data.tm "hari" (prinft "%s" .Date.Weekday) }},
  {{ .Date.Format "03:04" }} {{ index $.Site.Data.tm "waktu" (.Date.Format "PM") }}
</time>

Antara ketiga-tiga format, format JSON-lah yang paling saya bersusah-payah sekali mahu sediakan data dengan betul. Asyik keluar ralat sahaja disebabkan oleh kekeliruan saya untuk memaparkan format datanya dengan tepat.

Puas mencari rujukan dan berpuluh kali jugalah menyunting sebagai cubaan. Cubaan terakhir yang mendatangkan hasil adalah selepas saya rujuk laman konfigurasi bagi Hugo.

Format yang paling mudah, ringkas dan straightforward pada saya ialah format YAML.

Sekian, itu sahaja. Terima kasih kerana membaca.