3 Januari 2025

Tutorial Membuat Fitur Baca Juga di Hexo

Cara membuat fitur baca juga — Image: generated with AI

Bila Anda terbiasa menggunakan blogging platform seperti WordPress, pasti familiar dengan fitur “Baca Juga”. Di WordPress, kita hanya perlu memasukkan URL artikel dan voila, artikel tersebut akan disematkan lengkap dengan judul, featured image, dan excerpt-nya.

Sayangnya, bila kita menggunakan SSG seperti Hexo yang notabene kontennya menggunakan Markdown, hal tersebut tidak mungkin dilakukan.

Namun, tidak perlu khawatir karena JavaScript cukup sakti, jadi kita bisa ngoding sendiri.

Cara Kerja

Cara kerjanya sama seperti di WordPress itu tadi. Kita hanya perlu memasukkan URL artikel ke dalam file Markdown dengan sintaks tag plugin yang akan kita buat.

<!-- Contoh penggunaan tag plugin di Markdown -->
{% langit_read_also beginilah-cara-saya-membuat-featured-image-untuk-blog/ %}

Hexo melalui tag plugin akan mencari artikel dengan URL tersebut di dalam “database” kemudian menampilkan semua data yang kita definsikan. Menjadi seperti ini:

Beginilah Cara Saya Membuat Featured Image untuk Blog

Membuat Fitur “Baca Juga” di Hexo

Walaupun tidak memiliki fitur “Baca Juga” secara default dan tidak punya database, kita dapat memanfaatkan API locals variable bawaan Hexo untuk mengambil data artikel dan tag plugin untuk membuat fiturnya.

Langkah 1: Buat Database

Untuk membuat fitur ini kita perlu “database”. Bila Anda belum punya, bisa buat terlebih dahulu dengan mengikuti langkah-langkah di artikel cara mengonversi Markdown ke JSON.

Kita akan menggunakan file post-data.json yang telah dibuat untuk database. Database di folder ./source/_data inilah yang nanti akan dikonsumsi oleh tag plugin.

Langkah 2: Buat Tag Plugin

Tag plugin di Hexo adalah fitur yang memungkinkan kita memasukkan elemen khusus ke dalam Markdown. Selain elemen HTML seperti biasa, tag plugin juga dapat digunakan untuk mengakses beberapa data.

Bila Anda belum punya file-nya, buat file tag-plugin.js di folder themes/theme-anda/scripts. Bila sudah punya, tambahkan saja di sana. Atau, Anda juga dapat membuat file khusus untuk fitur ini, misalnya read-also.js.

Di file ini, kita akan mendaftarkan tag register baru untuk tag plugin fitur “Baca Juga”. Masukkan script di bawah ini:

// ./themes/anda/scripts/tag-plugin.js
const fs = require("hexo-fs");
const path = require("path");
const cheerio = require('cheerio');

// Function to clean HTML using cheerio
const cleanHTML = html => {
  const $ = cheerio.load(html);
  
  $('code').each(function() {
    const codeContent = $(this).text();
    $(this).replaceWith(`\`${codeContent}\``); 
  });

  return $.text().trim();
};

hexo.extend.tag.register('langit_read_also', function(args) {
  const url = args[0] || '';
  
  const jsonFilePath = path.join(hexo.source_dir, '_data', 'post-data.json');
  let data = [];

  // Periksa keberadaan file sebelum membaca
  if (!fs.existsSync(jsonFilePath)) {
    console.error(`File JSON tidak ditemukan: ${jsonFilePath}`);
    return `<p>JSON file not found!</p>`;
  }

  try {
    // Membaca dan mem-parsing file JSON
    const fileContent = fs.readFileSync(jsonFilePath, { encoding: 'utf-8' });
    data = JSON.parse(fileContent);
} catch (error) {
    if (error instanceof SyntaxError) {
        console.error('JSON format error:', error);
        return `<p>Error parsing JSON: ${error.message}</p>`;
    } else if (error.code === 'ENOENT') {
        console.error('File not found error:', error);
        return `<p>File not found: ${jsonFilePath}</p>`;
    } else {
        console.error('Error membaca file JSON:', error);
    }
    return `<p>Error fetching or parsing data!</p>`;
}

  // Mencari data berdasarkan URL
  const post = data.find(item => item.path === url);

  if (!post) {
    console.log('Post not found for URL:', url);
    return `<p>Post not found for URL: ${url}</p>`;
  }

  const title = post.title || 'No title';
  const permalink = post.permalink || '#';
  const image = post.image || 'https://ik.imagekit.io/langit/hexo/dekstop-10.webp?updatedAt=1735823544725';
  const excerpt = cleanHTML(post.excerpt || post.content.slice(0, 270)) + '...' || 'No excerpt';

  return `
  <div class="read-also">
    <figure class="read-also__figure">
      <img src="${image}" alt="${title}" class="read-also__image">
    </figure>
    <div class="read-also__content">
      <p class="read-also__info">BACA JUGA:</p>
      <p class="read-also__title line-clamp-2"><a href="/${url}" class="absolute-link">${title}</a></p>
      <p class="read-also__excerpt">${excerpt}</p>
    </div>
  </div>
  `;
}, { ends: false, escape: false });

Anda bisa mengganti nama tag plugin dari langit_read_also dengan nama atau web Anda sendiri.

Di Hexo, post.path mengacu pada relative URL, contoh: judul-artikel/. Sedangkan post.permalink adalah absolute URL, misalnya: https://langitamaravati.dev/judul-artikel/.

Untuk return di bagian HTML yang akan di-render, Anda bisa mengaturnya sedemikian rupa agar sesuai dengan tampilan yang diinginkan. Juga bisa menambahkan elemen lain, tombol misalnya. Hal yang terpenting adalah saat memasukkan datanya. Data di sini mengacu pada locals variable yang diambil dari front-matter.

Oh ya, meski saya menggunakan Tailwind, khusus untuk tag plugin, saya menggunakan vanilla CSS karena kalau pakai Tailwind, setiap perubahan di file tag-plugin.js, web harus dibangun ulang.

Untuk CSS, atur-atur sendiri aja lah, ya. 😅

Langkah 3: Masukkan Tag Plugin ke Konten Markdown

Sekarang, Anda dapat memasukkan tag plugin tersebut ke dalam Markdown seperti ini:

{% langit_read_also judul-artikel/ %}

Perhatikan bahwa untuk path, kita tidak akan menggunakan awalan /, ini merupakan konfigurasi default Hexo. Saya sengaja menggunakan path, bukan permalink, agar fitur “Baca Juga” dapat diperiksa/diakses di baik local maupun di live server. Penggunaan relative URL seperti ini juga berguna apabila misalnya kita berganti domain.

Langkah 4: Build Ulang

Jalankan perintah hexo clean && hexo generate di CLI atau terminal agar web Hexo dibangun ulang. Kemudian jalankan kembali server dan lihat apakah fitur “Baca Juga” sudah tampil atau belum.

Jika sudah, akan tampil seperti ini: