[🛠] Menyamakan hasil pencarian dengan kartu daftar artikel

✨ Ringkasan GPT-5.5 　

Catatan mengganti kartu hasil pencarian yang sebelumnya dirakit dengan string JavaScript menjadi kartu Liquid bersama, agar tanggal, kategori, jumlah dilihat, dan layout overlay mengikuti aturan yang sama dengan daftar biasa.

Hasil pencarian terlihat terlalu lama.

Di halaman utama dan halaman kategori, kartu artikel sudah lebih rapi. Di bawah judul ada tanggal, badge kategori, dan jumlah dilihat di baris meta yang sama.

Tetapi ketika pencarian dibuka, muncul UI lama.

Yang terlihat hanya judul dan kutipan. Waktu penulisan artikel tidak langsung terlihat. Kategori tidak ada. Jumlah dilihat juga tidak ada. Artikel yang sama punya konteks di daftar biasa, tetapi kehilangan konteks itu di hasil pencarian.

Penyebabnya adalah hasil pencarian masih dirender dengan string HTML JavaScript yang terpisah.

Render string JavaScript membuat hasil pencarian terlihat lama

Pencarian tetap ditangani oleh Lunr.

Untuk blog Jekyll statis, membuat search store saat build lalu membacanya dengan JavaScript di browser adalah struktur yang wajar.

Masalahnya, JavaScript juga membangun kartu hasilnya.

Daftar biasa dirender oleh _includes/archive-single.html, sedangkan hasil pencarian dirakit sebagai string di assets/js/lunr/lunr-en.js.

Strukturnya kurang lebih seperti ini:

Regular listing
-> Liquid include
-> archive__item
-> date, category, views

Search results
-> Lunr JS
-> hand-built HTML string
-> title and excerpt only

Itulah masalahnya.

Jika badge kategori ditambahkan ke daftar biasa, hasil pencarian tidak ikut berubah. Jika aturan tanggal diubah, hasil pencarian tetap sama. Jika metadata jumlah dilihat disesuaikan, hasil pencarian tetap tidak berubah.

Kartu artikel yang sama dipelihara di dua tempat.

Saya memisahkan kartu artikel menjadi include bersama

Alih-alih memperbesar JavaScript pencarian, saya membuatnya menghasilkan lebih sedikit HTML.

Saya menambahkan include kartu bersama.

_includes/archive-item-card.html
_includes/archive-item-meta-row.html
_includes/archive-item-categories.html

archive-item-card.html menerima satu dokumen dan merender struktur yang sama dengan daftar arsip.

list__item
archive__item
archive__item-title
archive__item-meta-row
archive__item-excerpt

archive-item-meta-row.html mengelompokkan tanggal, jumlah dilihat, dan kategori dalam satu baris. Tanggal dan jumlah dilihat tetap memakai page__meta.html, sementara kategori ditangani oleh archive-item-categories.html.

Lalu _includes/archive-single.html menjadi wrapper tipis.

{% include archive-item-card.html document=post type=include.type context="archive" %}

Sekarang daftar biasa dan hasil pencarian memakai HTML kartu dari include yang sama.

Saya menyimpan HTML kartu lengkap di Lunr store

Lunr tetap melakukan pencarian.

Tetapi JavaScript tidak lagi membangun HTML kartu hasil.

Saat build Jekyll, assets/js/lunr/lunr-store.js merender include kartu untuk setiap dokumen dan menyimpan hasilnya di field html.

title
excerpt
categories
tags
lang
locale
html
url
teaser

JavaScript pencarian sekarang hanya mengambil entry.html dan memasukkannya.

Sebelumnya, JS pencarian mencampur link judul, gambar teaser, pemotongan kutipan, dan perakitan string HTML.

var renderSearchResult = function (entry) {
  return entry.html || '';
};

Tanggung jawab JS pencarian tersisa untuk mencari, memfilter locale, menampilkan jumlah hasil, dan menyisipkan hasil.

Jumlah dilihat di hasil pencarian hanya ditampilkan, bukan dihitung

Perlu diputuskan apakah hasil pencarian juga menampilkan jumlah dilihat.

Awalnya saya mempertimbangkan untuk menghapusnya. Hasil pencarian bisa menjadi terlalu ramai, dan DOM yang disisipkan dinamis butuh timing tersendiri.

Tetapi jika kartu harus sama dengan daftar biasa, menghilangkan hanya jumlah dilihat juga terasa aneh.

Jadi hasil pencarian tetap menampilkan jumlah dilihat. Yang dipisahkan adalah tampilan dan pencatatan.

Search result exposure is not a visit.
The view count in search results is display-only.
Actual visit tracking belongs only to the currently opened page.

Elemen jumlah dilihat di blog ini memiliki data-page-view-path. Target pencatatan sebenarnya adalah elemen halaman saat ini dengan data-page-view-track="true".

Kartu hasil pencarian hanya memiliki data-page-view-path; tidak memiliki data-page-view-track="true".

Jadi artikel yang muncul di hasil pencarian tidak menaikkan jumlah dilihat artikel itu.

Angkanya hanya ditampilkan.

Saya menerapkan ulang jumlah dilihat pada hasil dinamis

Hasil pencarian tidak ada di DOM saat halaman pertama kali dimuat.

Hasil baru disisipkan setelah pengguna mengetik query. Jika script jumlah dilihat hanya mengumpulkan elemen sekali saat load, jumlah dilihat di hasil pencarian tidak akan terisi.

Karena itu saya juga mengubah assets/js/custom/visitor-stats.js.

Alih-alih menyimpan document.querySelectorAll("[data-page-view-path]") sekali di bagian atas, script sekarang mencari elemen itu lagi setiap kali merender jumlah dilihat.

Payload analytics juga disimpan.

latestAnalyticsPayload

Setelah hasil pencarian dirender, script pencarian memicu event hyuk:search-results-rendered.

Visitor stats mendengarkan event itu dan, jika sudah memiliki payload, menerapkan ulang jumlah dilihat pada DOM baru.

API tidak dipanggil ulang.

Jika setiap perubahan input memanggil API jumlah dilihat, UI pencarian akan mengganggu sistem counter. Hasil pencarian sering berubah, jadi request jaringan tidak boleh mengikuti setiap tombol.

Alurnya menjadi:

Page load
-> receive analytics payload once
-> render views for existing listing/current page

Search results render
-> dispatch event
-> reuse cached payload for newly inserted DOM

Dengan ini, hasil pencarian tidak mencemari counter.

Metadata pencarian multibahasa mengikuti locale

Setelah pekerjaan blog multibahasa, situs ini punya halaman dan collection locale seperti /en/, /ja/, dan /zh-Hans/. Pencarian tidak boleh mencampur locale.

Search store berisi lang dan locale, dan HTML kartu memakai locale dokumen untuk label metadata. Di bahasa Inggris tampil Views, di Jepang 閲覧数, dan di Indonesia Dilihat.

Kategori juga mengikuti aturan yang sama.

Prefix locale tidak boleh muncul sebagai badge kategori, jadi archive-item-categories.html melewati segment locale dan menampilkan kategori asli saja.

Saya mengembalikan sidebar dan lebar hasil di overlay pencarian

Menyamakan kartu saja belum cukup.

Saat pencarian dibuka, lebar hasil masih terlalu sempit. Walaupun HTML kartu sama dengan daftar biasa, ruang kanan tidak digunakan.

Ada masalah lain yang lebih besar. Saat pencarian dibuka, kategori sidebar ikut hilang.

Overlay pencarian bukan lapisan di atas body yang sudah ada. Saat pencarian dibuka, .initial-content disembunyikan dan area terpisah #site-search ditampilkan.

Artinya sidebar di halaman normal juga ikut hilang. Walaupun kartunya sudah berbagi komponen, layar pencarian tetap terasa berbeda jika layout sekitarnya berbeda.

Jadi saya memasukkan sidebar ke dalam _includes/search/search_form.html.

<div class="search-content__inner-wrap">
  {% include sidebar.html %}
  <div class="archive search-content__archive">
    ...
  </div>
</div>

Area hasil juga dibungkus dengan archive search-content__archive agar hasil pencarian mengikuti layout archive.

Lalu saya melepas CSS yang mengecilkan kartu.

Minimal Mistakes punya aturan pencarian seperti ini:

.search-content .archive__item {
  @include breakpoint($large) {
    width: 75%;
  }

  @include breakpoint($x-large) {
    width: 50%;
  }
}

Tampilan lama bukan hanya disebabkan HTML kartu. Di layar besar, kartu hasilnya sendiri dipotong sampai separuh lebar.

Di SCSS custom, kartu hasil pencarian kembali memakai lebar penuh.

.search-content .archive__item {
  width: 100%;
}

Masih ada satu masalah layout.

Archive normal menyisakan ruang kanan dengan padding-inline-end untuk sidebar kanan. Overlay pencarian tidak punya sidebar kanan. Jika padding ini dibiarkan, hasil pencarian kembali sempit.

Jadi padding kanan itu dihapus hanya untuk archive overlay pencarian.

.search-content .search-content__archive {
  padding-inline-end: 0;
}

Aturan render kartu tetap dibagi dengan daftar biasa, sementara layout overlay disesuaikan untuk layar pencarian.

Saya memeriksa desktop dan mobile

Saya menjalankan build dan pemeriksaan sintaks.

bundle exec jekyll build
node --check _site/assets/js/lunr/lunr-store.js
node --check _site/assets/js/lunr/lunr-en.js
node --check _site/assets/js/custom/visitor-stats.js

Search store yang dihasilkan berisi page__views dan data-page-view-path.

HTML kartu pencarian tidak berisi data-page-view-track="true", agar kemunculan di pencarian tidak tercampur dengan pencatatan kunjungan.

Lalu saya membuka pencarian di beberapa halaman locale dan mencoba query seperti:

References
Keymory
Daily review

Kartu hasil menampilkan tanggal, kategori, dan jumlah dilihat di baris meta yang sama dengan daftar biasa. Label mengikuti masing-masing locale: Views, 閲覧数, Dilihat, dan lainnya.

Di dalam hasil pencarian tidak ada data-page-view-track="true". Di halaman artikel sebenarnya, elemen tracking halaman saat ini tetap muncul satu kali.

Overlay pencarian juga memiliki sidebar lagi. Pada desktop 1280px, sidebar memiliki 22 item, dan lebar kartu hasil mencapai sekitar 974px.

Pada mobile 390px, sidebar menumpuk di atas, dan kartu hasil memakai lebar 345px untuk judul, meta, dan kutipan.

Tidak ada error di console browser.