Table of Contents
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)
- Tags (requires
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.