Mecha CMS

Add extra functionality to the core engine.

Tag

Page tags.

This extension activates the tagging feature by utilizing the kind property on the page. This extension will also add several new routes such as https://mecha-cms.com/blog/tag/slug on every page to allow users to list all pages in the current folder by a tag.

Constant 

This extension will add a folder called tag in the .\lot folder, which will also automatically add a constant named TAG.

TAG

Method 

There are some methods added to the default classes:

Tags 

Get::tags(string $folder = TAG, …, $sort = [1, 'id'], …): Anemon;

Function arguments are the same as function Get::pages(), except the $folder parameter that uses TAG constant value by default, and the $sort parameter that uses id as the default sort key instead of time.

From 

From::tag($slug, $fail = false): int | $fail;

Get tag ID from the tag slug.

To 

To::tag($id, $fail = false): string | $fail;

Get tag slug from the tag ID.

Working with Tags 

Panel extension can help you to automate everything. But, if you have to, you can still make this extension work without the GUI feature. As the panel extension was created just to convert the generic files and folders interface into a rich graphical user interface. Just like the comparison between Command Prompt appearance to the desktop Windows appearance.

Before we start, you need to understand how this extension works.

Page Properties 

First, know that this extension will add query and tags properties to the page only if the page contains kind property that is not empty.

$page = [
    …
    …
    'kind' => [1, 2, 3], // [^1]
    'query' => ['foo', 'bar', 'baz'], // [^2]
    'tags' => [ // [^3]
        'foo' => [
            …
            …
            'id' => 1,
            'slug' => 'foo',
            'url' => 'https://mecha-cms.com/tag/foo'
        ],
        'bar' => [
            …
            …
            'id' => 2,
            'slug' => 'bar',
            'url' => 'https://mecha-cms.com/tag/bar'
        ],
        'baz' => [
            …
            …
            'id' => 3,
            'slug' => 'baz',
            'url' => 'https://mecha-cms.com/tag/baz'
        ]
    ]
];

// [^1]: These numbers will be used as the tag ID.
// [^2]: These queries are generated automatically based on the available tags.
// [^3]: These rich tags data are also generated based on the available tags.

File Structure 

Second, writing a tag file is no different than writing a page file. The only difference is that you must write the id property separately from the page.

lot\
└── tag\
    ├── bar\
    │   └── id.data
    ├── baz\
    │   └── id.data
    ├── foo\
    │   └── id.data
    ├── bar.page
    ├── baz.page
    └── foo.page

File Content 

Third, make sure to specify a unique number for each id.data file. These numbers, then will be used to connect the tag file with the kind property on every page.

Here’s an example of a tag file content:

---
title: Tag Name
description: Short description about this tag.
...

Long description about this tag.

Connections 

Fourth, to connect between tags with the current page, create a kind.data file in the corresponding folder, containing a list of tag’s ID written in a valid JSON format:

lot\
└── page\
    ├── test-page\
    │   └── kind.data
    └── test-page.page

Example content of kind.data file:

[1,2,3]

You can actually insert the kind property on the page header, but this method is a little inefficient in terms of performance:

---
title: Page Title
description: Page description.
author: Taufik Nurrohman
type: Markdown
kind: [1, 2, 3]
...

Page content goes here.

Tags List 

echo implode(', ', $page->query);
$tags = [];
foreach ((array) $page->tags as $v) {
    $tags[] = HTML::a($v->title, $v->url);
}
echo implode(', ', $tags);

Condition 

These page conditional statements are available:

  • $site->has('tags') → Return the $page->kind data from the current page.
  • $site->is('tags') → Return list of tag’s ID found in the current results.

Class 

These HTML classes will be added to the <html> element that has a class attribute:

  • has-tags → Will be added if current page has at least one tag.
  • is-tags → Will be added if there are pages to load in the tags page.

Dependency 

Extension