Layout

Table of Contents

Layout reference.

Mecha is designed to construct a single site. Means that we don’t have any mechanism to switch the theme. Only one theme per site available. This limitation was made because Mecha prefers minimalism over liberalism.

A standard layout should at least contains files that structured like this:

.\
└── lot\
    └── layout\
        ├── 404.php
        ├── about.page
        ├── page.php
        └── pages.php

In most cases, you may want to separate the top and bottom parts of the page into separate files to avoid repetition:

.\
└── lot\
    └── layout\
        ├── 404.php
        ├── about.page
        ├── after.php ✔
        ├── before.php ✔
        ├── page.php
        └── pages.php

That way you can include the top and bottom parts of the page in 404.php, page.php and pages.php this way:

<?= self::before(); ?>
<!-- Content of the page goes here… -->
<?= self::after(); ?>

To add separate CSS and JavaScript files, store them in .\lot\layout\asset folder:

.\
└── lot\
    └── layout\
        ├── asset\ ✔
        │   ├── .htaccess
        │   ├── layout.css
        │   └── layout.js
        ├── 404.php
        ├── about.page
        ├── after.php
        ├── before.php
        ├── page.php
        └── pages.php

Note: The .htaccess file is required to enable access of the asset files publicly. It only contains this command:
allow from all

Include assets to the page using the asset hook in an index.php file. You can also add new features through the file:

.\
└── lot\
    └── layout\
        ├── asset\
        │   ├── .htaccess
        │   ├── layout.css
        │   └── layout.js
        ├── 404.php
        ├── about.page
        ├── after.php
        ├── before.php
        ├── index.php ✔
        ├── page.php
        └── pages.php

<?php

Asset::set('layout.css');
Asset::set('layout.js');

Error

Minimum requirements for 404.php file:

<?= self::before(); ?>
<p>404 not found!</p>
<?= self::after(); ?>

Before

Minimum requirements for before.php file:

<!DOCTYPE html>
<html class>
  <head>
    <meta charset="<?= $site->charset; ?>">
    <link href="<?= $url; ?>/favicon.ico" rel="icon">
    <title><?= $t; ?></title>
  </head>
  <body>
    <header>
      <h1><?= $site->title; ?></h1>
      <p><?= $site->description; ?></p>
    </header>

After

Minimum requirements for after.php file:

    <footer>
      <p>&#x00A9; <?= $date->year; ?></p>
    </footer>
  </body>
</html>

Page

Minimum requirements for page.php file:

<?= self::before(); ?>
<main>
  <article>
    <h3><?= $page->title; ?></h3>
    <div><?= $page->content; ?></div>
  </article>
  <nav><?= $pager; ?></nav>
</main>
<?= self::after(); ?>

Pages

Minimum requirements for pages.php file:

<?= self::before(); ?>
<main>
  <?php if ($pages->count > 0): ?>
    <?php foreach ($pages as $page): ?>
    <article>
      <h4>
        <a href="<?= $page->url; ?>">
          <?= $page->title; ?>
        </a>
      </h4>
      <div>
        <?= $page->content; ?>
      </div>
    </article>
    <?php endforeach; ?>
    <nav><?= $pager; ?></nav>
  <?php else: ?>
    <p>No pages yet.</p>
  <?php endif; ?>
</main>
<?= self::after(); ?>

About

Minimum requirements for about.page file:

---
title: Layout Name
description: Layout description.
author: Layout Maker
type: Markdown
link: 'http://example.com'
version: 1.0.0
...

Usage, external credits, etc.