Tema Open-Source untuk Blogger

Tema Blogger Dasar: BloggerPack.

Sangat sulit mencari komunitas pengembang tema Blogger yang memiliki semangat keterbukaan kode sumber seperti Saya. Selain karena Blogger bukan merupakan layanan blog yang terbuka, minimnya dokumentasi resmi akan kode-kode pada tema Blogger memaksa kita untuk menggunakan waktu dan tenaga yang banyak untuk mempelajari setiap kode yang ada secara otodidak dan tanpa bimbingan. Akibatnya, orang-orang yang berhasil tahu dan/atau menemukan sesuatu yang baru pada mesin Blogger lebih memilih untuk mengembangkan dan merilis tema-tema mereka secara mandiri dan bahkan sembunyi-sembunyi tanpa memberitahu kita tentang apa-apa saja yang telah mereka lakukan dan kembangkan pada tema yang mereka buat.

Topik-topik seperti cara menandai komentar administrator, cara menghapus CSS dan JavaScript bawaan Blogger, cara membuat komentar berbalas, dan cara menyisipkan kode CSS dan JavaScript kustom pada postingan tertentu pernah begitu populer sepanjang pengamatan Saya dari pertama kali Saya mengenal Blogger sampai sekarang.

Berat rasanya untuk membagikan temuan-temuan tersebut secara cuma-cuma karena kebanyakan dari kita selama ini memang hanya bisa menebak-nebak saja pada apa yang terjadi pada kode-kode XML Blogger dari sisi peladen dengan melihat melalui kode keluaran HTML-nya saja. Sangat memprihatinkan memang, tapi Saya bisa memaklumi hal tersebut karena dahulu Saya juga pernah menjadi seperti kalian.

Rasanya seperti sedang mencari harta karun. Ketika kalian berhasil menemukannya, maka kalian akan terburu-buru memberitahukannya kepada semua orang di seluruh alam semesta karena kalian takut nanti akan ada orang lain juga yang berhasil menemukannya setelah kalian namun lebih dahulu memberitahukannya. Ada semacam ambisi untuk menjadi yang pertama, dan temuan-temuan sederhana pada Blogger yang serba closed-source membuat kalian seolah layak untuk mendapatkan hak paten dari Pemerintah, sehingga orang lain yang ingin mengimplementasikan temuan kalian akan memiliki kewajiban untuk membayar royalti ratusan juta rupiah kepada kalian. Kalian kemudian akan menjadi orang yang kaya raya berkat Blogger.

Semangat-semangat semacam itulah yang kadang membuat para pengembang Blogger menjadi tertantang. Sampai sekarang Saya bahkan masih belum tahu tentang bagaimana cara mendeteksi kueri ?amp=1 pada URL blog.

Sudah cukup mengkhayalnya ya! Sekarang Saya mau memperkenalkan sebuah proyek tema Blogger dengan kode sumber yang terbuka dari Hermawan Yogi, namanya BloggerPack. Tema ini adalah tema mentah yang tidak bisa digunakan secara langsung tanpa dilakukan kompilasi dan pembangunan terlebih dahulu menggunakan alat pembangun (beliau menggunakan Grunt).

Dokumentasi tingkat lanjut dapat dipelajari pada halaman proyek. Di sini Saya hanya ingin menjelaskan garis besarnya saja untuk kalangan awam (para pengguna), sekedar untuk membantu memahami struktur kode sumber tema yang ada.

Struktur Sumber

Berikut ini adalah struktur berkas dan folder kode-kode mentah tema sebelum dilakukan kompilasi. Semua kode tersimpan di dalam folder src sebagai komponen-komponen yang terpisah:

.\
└── src\
    ├── _defaultmarkups\
    ├── _js\
    ├── _plugins\
    ├── _scss\
    ├── _views\
    ├── config.json
    ├── …
    └── theme.xml

Berkas-berkas tersebut tidak bisa digunakan secara langsung karena setiap komponen masih terpisah-pisah dan dibuat dengan sintaks kode pra-produksi seperti sintaks SCSS untuk membentuk kode CSS dan sintaks modul ES6 untuk membentuk kode JavaScript versi peramban.

Tujuan kita memisahkan berkas-berkas tema sebagai komponen-komponen individu adalah untuk memudahkan para pengembang dalam menambahkan dan/atau mengurangi fitur tema yang ada. Tapi mungkin itu hanya akan memudahkan dari sisi pengembang saja, sedangkan dari sisi pengguna biasanya akan berpendapat kalau hal-hal tersebut dirasa terlalu rumit.

Pengguna pada dasarnya hanya ingin tahu di sebelah mana dia bisa menemukan tombol mengunduh tema dan bagaimana cara memasang tema tersebut. Pengguna tidak mau tahu seluk-beluk proses pengembangannya secara rinci, mereka hanya peduli pada hasil akhirnya saja dan oleh karena itu penjelasan-penjelasan Saya pada beberapa paragraf di bawah mungkin tidak akan berguna bagi Anda yang hanya berniat untuk segera menggunakan tema. Silakan langsung meloncat pada penjelasan mengenai folder dist.

Konfigurasi

Kita menggunakan Grunt untuk menggabungkan berkas-berkas pada folder src. Berkas-berkas tersebut nantinya akan dibentuk menjadi beberapa berkas baru yang siap pakai (biasanya sudah dalam bentuk kode yang sudah dikompres dan digabung menjadi satu, terutama pada kode CSS dan JavaScript tema). Berkas-berkas tersebut nantinya akan tersimpan secara otomatis pada folder dist.

Sebelum menjalankan perintah ‘bangun’, terlebih dahulu Anda buka berkas config.json untuk melakukan konfigurasi tema, terutama pada bagian atribusi, versi dan waktu perilisan. Cantumkan nama tema dan nama pembuatnya sesuai kehendak (di bawah lisensi MIT):

{
  "theme": {
    "name": "Tema Pribadi",
    "version": "2.0.0",
    "date": "5 Oktober 2019",
    "homepage": "https://dte-feed.blogspot.com",
    "author": {
      "name": "Taufik Nurrohman",
      "url": "https://github.com/tovic"
    },
    …
    …
  }
}

Setelah selesai, jalankan perintah $ grunt. Saya tidak akan menjelaskannya secara rinci di sini. Silakan pelajari sendiri pada dokumentasi tema dan situs web resmi Grunt bagi Anda yang ingin serius mengembangkan tema ini.

Struktur Produk

Berikut ini adalah struktur berkas dan folder kode-kode tema setelah dilakukan kompilasi dan pembangunan. Semua kode tersimpan di dalam folder dist:

.\
└── dist\
    ├── css\
    ├── js\
    ├── …
    └── theme.xml

Di situ terdapat berkas bernama theme.xml yang dapat kalian pasang ke Blogger. Folder css dan js berisi hasil akhir dari kompilasi dan pembangunan kode-kode SCSS dan modul ES6 pada folder src. Berkas-berkas tersebut pada dasarnya tidak ada gunanya karena kode-kode CSS dan JavaScript yang sama juga sudah tergabung ke dalam berkas theme.xml secara inline. Berkas-berkas CSS dan JavaScript yang terpisah tersebut hanya akan berguna ketika kalian berniat untuk menyimpan mereka ke ruang penyimpanan web tertentu di luar Blogger, untuk kemudian dapat dimuat melalui tag <link href="./jalur/ke/main.min.css" rel="stylesheet"> dan <script src="./jalur/ke/main.min.js"></script>.

Dokumentasi dan tutorial bawaan masih belum sepenuhnya selesai. Kalian bisa memberikan kontribusi dengan cara membuat permintaan dorong atau membuat isu baru di GitHub.