Normal

Port of the default layout from Mecha version 1.x.x.

0 stars out of 5

0 0 0 0 0
  • Author Taufik Nurrohman
  • Maintainer 1
  • Member
  • Version 2.13.0
Table of Contents
  1. Features
  2. Widgets
  3. Grid System
  4. Embeds
  5. Image Alignments

This is the default layout used by Mecha version 1.x.x.

Features

  • Automatic menu navigation
  • Automatic set the home page view to /article
  • Comments (requires comment extension)
  • Page views counter (requires view extension)
  • Manual post excerpt (requires excerpt extension)
  • Widgets:
    • Tags (requires tag extension)
    • Random Posts
    • Recent Posts
    • Related Posts
    • Recent Comments (requires comment extension)
    • List (custom)

Widgets

To create a custom widget, open aside.php file then add this code just before the </aside> tag:

<?= self::widget([
    'id' => 'foo-bar', // Optional
    'title' => 'Your Custom Widget Title', // Optional
    'content' => '<p>Your custom widget content.</p>'
]); ?>

Example widget as advertisement container:

<?php

$content = <<<HTML

// Paste your ads code here!

HTML;

echo self::widget([
  'title' => 'Advertisement',
  'content' => $content
]);

?>

Example widget list:

<?= self::widget('list', [
    'title' => 'My List',
    'list' => [
        'List Item 1',
        'List Item 2',
        'List Item 3'
    ]
]); ?>

Example widget list as link list:

<?= self::widget('list', [
    'title' => 'My List',
    'list' => [
        '<a href="http://example.com/link-1">Link 1</a>',
        '<a href="http://example.com/link-2">Link 2</a>',
        '<a href="http://example.com/link-3">Link 3</a>'
    ]
]); ?>

Grid System

<div class="grids">
  <div class="grid span-6">6/6 Column</div>
</div>

<div class="grids">
  <div class="grid span-3">2/6 Column</div>
  <div class="grid span-3">2/6 Column</div>
</div>

<div class="grids">
  <div class="grid span-2">3/6 Column</div>
  <div class="grid span-2">3/6 Column</div>
  <div class="grid span-2">3/6 Column</div>
</div>

<div class="grids">
  <div class="grid span-1">1/6 Column</div>
  <div class="grid span-1">1/6 Column</div>
  <div class="grid span-1">1/6 Column</div>
  <div class="grid span-1">1/6 Column</div>
  <div class="grid span-1">1/6 Column</div>
  <div class="grid span-1">1/6 Column</div>
</div>

<div class="grids">
  <div class="grid span-1">1/6 Column</div>
  <div class="grid span-5">5/6 Column</div>
</div>

<div class="grids">
  <div class="grid span-2">2/6 Column</div>
  <div class="grid span-4">4/6 Column</div>
</div>

Embeds

Embedding a video:

<div class="video">
  <!-- Video embed code goes here… -->
</div>

Embedding an audio:

<div class="audio">
  <!-- Audio embed code goes here… -->
</div>

Image Alignments

<img alt="" class="align-right" src="/path/to/image.jpg">
<img alt="" class="align-center" src="/path/to/image.jpg">
<img alt="" class="align-left" src="/path/to/image.jpg">

0 Comments

No comments yet.