Cara Membuat Daftar Isi pada HTMLy

22 Oktober 2021 | Kategori : Tutorial

Hai sobat semua, bagaimana kabarnya hari ini? semoga selalu dalam keadaan sehat wal afiat ya.. Oh iya sobat, pada kesempatan kali ini, saya akan berbagi tutorial tentang bagaimana cara membuat halaman daftar isi pada CMS HTMLy.

daftar-isi.png

Apa sih HTMLy itu?

Htmly merupakan sebuah csm (Content Management System) buatan anak negeri yang tidak menggunakan Database. Htmly pertama kali dibuat oleh kang Danang Probo Sayekti, kemudian beberapa distributor ikut serta mengembangkannya.

Balik ke topik ya sob, nah jika sobat ingin membuat daftar isi seperti ini, silahkan sobat ikuti langkah-langkah di bawah ini ya:

Langkah 1

Pertama silahkan sobat buka file functions.php yang ada pada folder system/includes, kemudian silahkan sobat tambahkan script di bawah ini pada akhir 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/kang jaz/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>';
    }
}

Setelah itu silahkan sobat simpan file tersebut. oh iya jangan lupa ganti kata kang jaz yang saya tandai warna merah dengan username sobat ya

Langkah 2

Langkah kedua ialah buat sebuah file dengan nama static--daftar-isi.html.php dan letakkan ke folder tema yang sobat gunakan. Untuk folder tema, ada di dalam folder themes ya sob. sebagai contoh bisa sobat lihat pada gambar di bawah ini :

themes.png

Karena saya menggunakan template / tema bikinan sendiri dan saya beri nama skyblue, maka saya membuat file static--daftar-isi.html.php pada folder themes/skyblue. Jika sobat sudah membuat file tersebut, silahkan sobat ketikkan script di bawah ini pada file tersebut:

<?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>

Kemudian silahkan sobat simpan

Langkah 3

Terakhir silahkan sobat buat sebuah static page melalui menu posts> static page> add new page. Lalu silahkan sobat isi seperti pada gambar di bawah ini :

static-page.png

Kemudian silahkan sobat publish.

Oh iya, untuk tampilan list nya akan berbeda-beda ya sob, sesuai tema yang sobat gunakan.

Baik sobat, saya rasa cukup ini yang bisa saya bagikan kali ini tentang cara membuat daftar isi pada htmly, semoga bisa bermanfaat buat sobat semua ya.