Tutorial Membangun Blog dengan qEngine: Part 3

Tutorial Membangun Blog dengan qEngine: Part 3

Pada tutorial sebelumnya, kita telah belajar bagaimana untuk membuat sebuah blog dengan qEngine dan menyesuaikan tampilannya. Tapi bagaimana cara untuk menyesuaikan blog itu sendiri? Itulah topik kita untuk tutorial ini.

Bila kita menelusuri struktur file, kamu akan menemukan file-file ini:

  • /skins/default/outline.tpl
  • /skins/_common/body_default.tpl & /skins/_common/page_default.tpl
  • /skins/_common/body_news.tpl & /skins/_common/page_news.tpl

File tersebut digunakan oleh qEngine untuk menampilkan sebuah halaman. Misalnya, untuk tipe 'News', qEngine menggunakan body_news.tpl dan page_news.tpl, untuk halaman lain menggunakan body_default.tpl & page_default.tpl. Nah apa guna masing-masing file tersebut?

Struktur Template qEngin

Untuk memahami bagaimana qEngine menggunakan file-file tersebut, mari kita lihat laman "About Us". qEngine menggunakan file-file tersebut untuk:

  1. /skins/default/outline.tpl untuk menambahkan header seperti logo & menu navigasi , serta footer.
  2. /skins/_common/body_default.tpl untuk menampilkan navigasi pinggir, kotak pencarian, dll
  3. /skins/_common/page_default.tpl untuk menunjukkan halaman itu sendiri.
  4. Dan tentu saja konten database "About Us" itu sendiri.

PS: pada contoh ini kita menggunakan template default (skins/default). Setiap template dapat memiliki file body_default & page_default masing-masing (jika perlu).

Membuat Blog Template

Sekarang, seperti yang kita ketahui, bahwa setiap file template adalah sebenarnya file HTML dengan beberapa tag yang khusus. Mari kita membuat file template baru untuk "Blog".

Mulailah dengan menyalin file /skins/_common/body_default.tpl ke /skins/_common/body_blog.tpl. Dan modifikasi isinya sebagai berikut:

<!-- Psst.. to make things clearer, I remove everything else from this template, but you can add them if you need it. See body_default.tpl -->
<div class="container">
  <div class="row">
    <div id="body_left" class="col-sm-12 col-md-8">
      {$main_body}
    </div>
    <div id="body_right" class="col-sm-12 col-md-4">
      <div class="body_right_content blog_list">
        <h3>Older Blogs</h3>
        <!-- BEGINMODULE page_gallery -->
        limit = 15
        group_id = blog
        title = 1
        thumb = 1
        orderby = page_date
        sort = desc
        style = list
        <!-- ENDMODULE -->
      </div>

    </div>
  </div>
</div>

Juga salin /skins/_common/page_default.tpl ke /skins/_common/page_blog.tpl. Dan modifikasi isi sebagai berikut:

<!-- Psst.. to make things clearer, I remove everything else from this template, but you can add them if you need it. See page_default.tpl -->
<ol class="breadcrumb">
  <li><a href="http://www.c97.net"><span class="glyphicon glyphicon-home"></span></a></li>
  <li>{$page_cat}</li>
  <li class="active">Tutorial Membangun Blog dengan qEngine: Part 3</li>
</ol>

<h1>Tutorial Membangun Blog dengan qEngine: Part 3</h1>

<div style="clear:both"></div>

<img src="http://www.c97.net/public/image/{$page_image}" alt="Tutorial Membangun Blog dengan qEngine: Part 3" class="pg_main_image" />

<div style="margin-top:20px"></div>
{$page_body}


<hr class="hr-blog" />
<div class="div-blog">
  <div>{$l_posted_by}: <a href="http://www.c97.net/page.php?author=admin">admin</a></div>
  <div>{$l_posted_on}: Nov-28-2016 @ 10:55pm</div>
  <div>{$l_last_updated}: Nov-28-2016 @ 11:20pm</div>
</div>

<!-- BEGINBLOCK list -->
<!-- qEngine requires all BEGINBLOCK/ENDBLOCK intact, please don't remove it even if it's empty -->
<!-- ENDBLOCK -->

Jangan lupa untuk mengedit /skins/default/style.css:

.blog_list ul{list-style: none;margin:0; padding:0;}
.blog_list ul li{margin-bottom:10px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hr-blog{border-top:1px solid #8c8b8b;text-align:center;margin-top:50px}
.hr-blog:after{content:'§';display:inline-block;position:relative;top:-14px;padding:0 10px;background:#fff;color:#8c8b8b;font-size:18px;-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);transform:rotate(60deg)}
.div-blog{margin-top:6px; background:#eee;padding:10px 5px; border-bottom:solid 3px #888;}
.div-blog div{color:#666;font-size: 10px}

Kemudian masuk ke ACP > Contents > Manage Type, dan edit entri 'Blog', ubah pengaturannya:

  • Main template: body_blog.tpl
  • Page default template: page_blog.tpl

Kemudian buka kembali semua entri blog kamu sebelumnya, dan modifikasi pengaturannya:

  • Page template: page_blog.tpl

Ketika Anda selesai, bukalah blog dari antarmuka pengguna (bukan dariACP).

PENTING! Anda mungkin perlu menghapus cache dengan masuk ke ACP > Tools > Optimize DB > Optimize Now. Atau, matikan cache sementara melalui ACP > Tools > Site Configuration > Engine Settings > [Tab] Engine Settings > Regenerate Cache = 0.

Tampilannya benar-benar berbeda, bukan? Pangling banget. Seperti yang kamu lihat, dalam desain baru kita memiliki: 'Older Blogs', output-nya pun jauh lebih bersih.

Coba membuka beberapa halaman default, seperti "About Us". Halaman lain tetap menggunakan desain lama, hanya 'Blog' yang memiliki tampilan keren ini.

Silahkan coba memodifikasi file template body_blog & page_blog untuk melihat perubahan lainnya.

Untuk Masing-Masing Sendiri

Anda dapat membuat template blog berbeda untuk setiap skin. Cukup buat file ini:

  1. /skins/_common/body_blog.tpl & /skins/_common/page_blog.tpl, file-file ini harus ada.
  2. /skins/default/body_blog.tpl & /skins/default/page_blog.tpl
  3. /skins/myskin/body_blog.tpl & /skins/myskin/page_blog.tpl

Satu Halaman yang Unik

Jika kamu hanya perlu satu halaman unik, kamu tidak perlu untuk membuat Content Type baru dengan file template baru, cukup gunakan trik berikut:

Gunakan Kode Editor

Sewaktu mengedit halaman, gunakan pengaturan berikut:

  • Untuk 'Content Editor', pilih 'Code Editor' (opsional).
  • Untuk 'Page Template', pilih 'Empty Template'.
  • Simpan halaman.

Editor akan beralih ke editor kode yang dapat digunakan untuk memasukkan tag HTML Anda sendiri secara manual.

File Kustom

Atau, Anda dapat membuat file kustom, dan menamainya: /skins/default/page_[pageID].tpl. Misalnya /skins/default/page_10.tpl. Dimana [pageID] dapat diperoleh dengan melihat nilai ID di editor halaman.

Ringkasan

Dalam tutorial ini, kita telah belajar bagaimana untuk menyesuaikan halaman blog itu sendiri. Dalam tutorial berikutnya, kita akan belajar bagaimana menyesuaikan tampilan qEngine lainnya. Nantikan yah!

This tutorial is also available in English.
This translation is made possible with Bing Translator.


Posted By: admin
Posted On: Nov-28-2016 @ 10:55pm
Last Updated: Nov-28-2016 @ 11:20pm

There is no comment

More Comments/Post Your Own