Cara Membuat Halaman Daftar Isi Artikel Pada HTMLy

Ketika membangun sebuah blog ada satu halaman yang wajib ada dan anda buat yaitu halaman sitemap atau peta situs atau daftar isi artikel dari semua artikel yang telah kita publikasikan di blog.

Halaman daftar isi artikel ini wajib ada didalam sebuah menu navigasi sebuah blog.

Tujuannya tidak lain dan bukan agar pembaca blog bisa dengan mudah mengetahui semua isi konten artikel yang ada diblog kita.

Juga sebagai internal link untuk tujuan mempercepat proses index ketika kita menuliskan sebuah artikel baru.

Nah untuk platform lain seperti blogger atau wordpress mungkin sudah begitu banyak tutorialnya.

Lalu bagaimana dengan HTMLy yang merupakan CMS Blogging Tanpa Databse, yang secara fungsi masih sederhana untuk keperluan blogging santuy apakah bisa membuat sebuah halaman peta situs?

Jawabannya tentunya bisa.

Kali ini saya memberikan tutorial bagaimana cara menambahkan sebuah halaman untuk daftar isi artikel blog anda yang menggunakan CMS HTMLy.

Membuat Halaman Daftar Isi/Peta Situs Artikel di HTMLy

Untuk bisa membuat halaman daftar isi atau sitemap untuk pengunjung kita perlu melakukan editing dan penambahan file manual, jadi silakan masuk ke cpanel web host kalian masing-masing terlebih dahulu.

Setelah itu masuk ke Pengelola File/File Manager dan masuk ke folder public_html (atau tempat folder HTMLy kalian)

Langkah Pertama

Silakan edit file functions.php untuk lokasinya berada pada folder system lalu masuk ke includes.

Silakan klik kanan dan pilih Edit.

Setelah file terbuka tambahkan kode dibawah ini pada baris kode paling terakhir pada file tersebut:

function daftar_isi()
{
    $filename = "cache/widget/category.list.cache";
    $tmp = array();
    $cat = array();

    $arr = get_category_info(null);
    foreach ($arr as $a) {
        $cat[] = array($a->md, $a->title);
    }
    asort($cat);
    $tmp = serialize($cat);
    file_put_contents($filename, print_r($tmp, true));

    $posts  = get_post_sorted();

    foreach ($cat as $k => $x) {

        echo '<p><b>' . $x[1] . ' :</b></p>';
        echo '<ol>';
        $i     = 0;
        foreach ($posts as $index => $v) {

            if ($v['dirname'] == 'content/masarif/blog/' . $x[0] . '/post') :
                $ar         = explode('_', $v['basename']);
                $replaced   = substr($ar[0], 0, strrpos($ar[0], '/')) . '/';
                $dt         = str_replace($replaced, '', $ar[0]);
                $t          = str_replace('-', '', $dt);
                $time       = new DateTime($t);
                $timestamp  = $time->format("Y-m-d H:i:s");

                // The post date
                $waktu = strtotime($timestamp);
                if (config('permalink.type') == 'post') {
                    $url = site_url() . 'post/' . str_replace('.md', '', $ar[2]);
                } else {
                    $url = site_url() . date('Y/m', $waktu) . '/' . str_replace('.md', '', $ar[2]);
                }

                $filepath = $v['dirname'] . '/' . $v['basename'];
                $content  = file_get_contents($filepath);
                $title    = get_content_tag('t', $content, 'Untitled: ' . date('l jS of F Y', $waktu));
                $new      = ($posts[$i]['basename'] == $v['basename'] && $i < 3) ? ' - <span style="color:red;font-family:sans-serif"><b><i>new!</i></b></span>' : '';
                echo '<li><a href="' . $url . '">' . $title . '</a>' . $new . '</li>';
            endif;
            $i++;
        }
        echo '</ol>';
    }
}

Silakan sesuaikan dan edit kode diatas pada

if ($v[‘dirname’] == ‘content/masarif/blog/’ . $x[0] . ‘/post’) :

silakan ganti dengan username akun admin HTMLy blog kalian.

Jika sudah silakan tekan Simpan.

Langkah Kedua

Langkah selanjutnya kita perlu menambahkan file baru didalam folder tema yang sedang anda gunakan saat ini untuk blog HTMLy kalian.

Misal saya menggunakan tema Logs maka saya masuk ke folder themes > logs

Baru disini saya akan membuat file baru dengan nama static–daftar-isi.html.php

Untuk isi kodenya sebagai berikut:

<?php if (login()) { echo tab($p); } ?>
<div class="post">
    <div class="main">
        <h1 class="title-post">Daftar Isi</h1>
        <div class="post-body">
            <?php echo daftar_isi(); ?>
        </div>
    </div>
</div>

Langkah Ketiga

Langkah terakhir kita tinggal membuat sebuah halaman static page baru untuk halaman daftar isi ini nantinya.

Seperti biasa masuk ke halaman admin blog kalian, lalu pada menu Posting > Halaman Static lalu silakan klik Add new page

Lalu untuk bisa menggunakan fungsi daftar isi artikel ini anda bisa mengisikan konten dengan kode:

<?php echo daftar_isi(); ?>

Judul dan url bisa anda isikan sesuai kebutuhan masing-masing.

Setelah itu publish untuk melihat hasilnya, kurang lebihnya seperti ini:

Daftar isi ini berdasarkan category dan otomatis memberikan label news untuk setiap artikel terbaru dari masing-masing category.

Mungkin itu dulu tutorial tentang cara membuat halaman daftar isi artikel untuk blog dengan platform HTMLy, semoga bisa bermanfaat.