03. Making a Blog with qEngine: Part 3

On previous tutorials, we have learnt how to create a blog with qEngine and customize the output. But how to customize the blog itself? That's our topic for this tutorial.

When we browse the file structure, you will find these files:

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

Those files are used by qEngine to output your pages. For 'news' type, qEngine uses body_news.tpl & page_news.tpl, for other pages it uses body_default.tpl & page_default.tpl. If needed, you can create your own body & page template. But what are those files anyway?

qEngine Template Structure

To understand how qEngine uses those files, let's see "About Us" page. qEngine actually uses these files:

  1. /skins/default/outline.tpl to add header such as logo & navigation menu, and footer.
  2. /skins/_common/body_default.tpl to show sidebar such as side navigation, search box, etc.
  3. /skins/_common/page_default.tpl to show the page itself.
  4. And of course the database entry for "About Us".

PS: This is true for default skin (/skins/default). Each skin may have its own body_default & page_default files if necessary.

Creating a Blog Template

Now, as you know each template file is actually a HTML files with some special tags, thus this make things easier. Let's create some new template files for our blog.

Start by copying /skins/_common/body_default.tpl to /skins/_common/body_blog.tpl. And modify the contents as follow:

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

Also copy  /skins/_common/page_default.tpl to /skins/_common/page_blog.tpl. And modify the contents as follow:

<!-- 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="https://www.c97.net"><span class="glyphicon glyphicon-home"></span></a></li>
  <li>{$page_cat}</li>
  <li class="active">{$page_title}</li>
</ol>

<h1>{$page_title}</h1>

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

<img src="https://www.c97.net/public/image/{$page_image}" alt="{$page_title}" class="pg_main_image" />

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

<hr class="hr-blog" />
<div class="div-blog">
  <div>{$l_posted_by}: <a href="https://www.c97.net/page.php?author={$page_author}">{$page_author}</a></div>
  <div>{$l_posted_on}: {$page_date} @ {$page_time}</div>
  <div>{$l_last_updated}: {$update_date} @ {$update_time}</div>
</div>

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

Don't forget to edit /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}

Then go to ACP > Contents > Manage Type, and edit 'Blogs' type, modify the following settings:

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

Then reopen all your previous blogs, and modify the following settings:

  • Page template: page_blog.tpl

When you are done, open a blog from user interface (not ACP).

IMPORTANT! You may need to clear cache by going to ACP > Tools > Optimize DB > Optimize Now. Or, disable cache temporary by going to ACP > Tools > Site Configuration > Engine Settings > [Tab] Engine Settings > Regenerate Script Cache = 0. Otherwise you may not see any differences.

It looks really different, isn't it? As you can see, in new design we have: 'Older Blogs', much cleaner output, a line separator, and more.

Let's try opening some default pages, like "About Us". Other pages keep their default design, only 'Blogs' affected by these changes.

Please experiment modifying body_blog & page_blog templates to see it in action.

To Each of Its Own

You can create a different blog template for each skin. Simply create these files:

  1. /skins/_common/body_blog.tpl & /skins/_common/page_blog.tpl, these files are required.
  2. /skins/default/body_blog.tpl & /skins/default/page_blog.tpl
  3. /skins/myskin/body_blog.tpl & /skins/myskin/page_blog.tpl

Single Unique Page

If you only need a single unique page, you don't need to create a new type with new template files, simply override qEngine's default page manager. You can either:

Use Code Editor

When editing a page, set the following settings:

  • For 'Content Editor', pick 'Code Editor' (optional).
  • For 'Page template', pick 'Empty Template'.
  • Save the page.

The editor will switch to code editor which can be used to enter your own HTML tags manually.

Custom File

Alternatively, you can create a new custom template file, and naming it: /skins/default/page_[pageID].tpl. Eg /skins/default/page_10.tpl. Where [pageID] can be acquired by looking at the ID value in page editor.

Summary

In this tutorial, we have learnt how to customize the blog page itself. In the next tutorial, I will tell you how to customize the rest of qEngine output. Please stay tuned!


Posted On: Nov-17-2016 @ 12:00pm
Last Updated: Nov-17-2016 @ 08:04pm

There is no comment. Why not be the first?

More Comments/Post Your Own

Advertisement

Online Users

There are 115 users online.

Connect

Connect with us on Facebook

Newsletter

Subscribe to our newsletter for the latest updates and exciting promotions!