Normal · Mecha CMS

Table of Contents

Features
Widgets
Grid System
Embeds
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">