Extension · Mecha CMS

Add extra functionality to the core engine.

Type

Author: Taufik Nurrohman · 971 Views

Tweet

Custom content types.

Download Development Version

Supported Page Types 

  • Audio
  • Comic
  • Gallery
  • Image
  • Link
  • Log
  • Quote
  • Video

Audio 

Convert audio links into native HTML5 audio player.

Basic 

Set audio URL as the page content.

---
title: Non-Stop Nyan Cat!
type: Audio
...

http://mecha-cms.com/lot/asset/ogg/nyan.ogg
http://mecha-cms.com/lot/asset/mp3/nyan.mp3

Set audio link as the page content.

---
title: Non-Stop Nyan Cat!
type: Audio
...

<a href="http://mecha-cms.com/lot/asset/ogg/nyan.ogg">Nyan OGG</a>
<a href="http://mecha-cms.com/lot/asset/mp3/nyan.mp3">Nyan MP3</a>
HTML 

You can also use raw <audio> markup as the page content.

---
title: Non-Stop Nyan Cat!
type: Audio
...

<audio controls>
  <source src="http://mecha-cms.com/lot/asset/ogg/nyan.ogg" type="audio/ogg">
  <source src="http://mecha-cms.com/lot/asset/mp3/nyan.mp3" type="audio/mpeg">
</audio>

Comic 

TODO

Gallery 

Like the Image type, but it will show as multiple images.

Basic 
---
title: People
type: Gallery
...

http://mecha-cms.com/lot/asset/png/people/1.png
http://mecha-cms.com/lot/asset/png/people/2.png
http://mecha-cms.com/lot/asset/png/people/3.png
HTML 

Use an <img> tag to store the image URL in its src attribute or use an <a> tag to store the image URL in its href attribute, so that when someday you decided to remove this extension, the result will fall back to the raw HTML markup gracefully.

Link text will becomes the image alt value.

---
title: People
type: Gallery
...

<img alt="1" src="http://mecha-cms.com/lot/asset/png/people/1.png">
<img alt="2" src="http://mecha-cms.com/lot/asset/png/people/2.png">
<img alt="3" src="http://mecha-cms.com/lot/asset/png/people/3.png">
---
title: People
type: Gallery
...

<a href="http://mecha-cms.com/lot/asset/png/people/1.png">1</a>
<a href="http://mecha-cms.com/lot/asset/png/people/2.png">2</a>
<a href="http://mecha-cms.com/lot/asset/png/people/3.png">3</a>

Image 

This type will search for the first HTML <img> tag in the page content and tries to get the src value. If no image was found in the page content, this plugin will search for the first HTML <a> tag and tries to get the href value, then tries to guess whether it is an image URL or not by checking the file extension. If none was found, this plugin will search for the first URL text in the page content and use it as the image URL.

Basic 
---
title: Autumn
type: Image
...

http://mecha-cms.com/lot/asset/png/autumn.png

Result:

<figure class="image">
  <img alt="autumn" src="http://mecha-cms.com/lot/asset/png/autumn.png">
</figure>
Caption 

Using description data as the image caption.

---
title: Autumn
description: There goes some description about this image.
type: Image
...

http://mecha-cms.com/lot/asset/png/autumn.png
HTML 

Use an <img> tag to store the image URL in its src attribute or use an <a> tag to store the image URL in its href attribute, so that when someday you decided to remove this extension, the result will fall back to the raw HTML markup gracefully.

Image alt attribute will becomes the caption if there is no description data provided. Link text will becomes the image alt value and the caption if there is no description data provided.

---
title: Autumn
type: Image
...

<img alt="autumn" src="http://mecha-cms.com/lot/asset/png/autumn.png">
---
title: Autumn
type: Image
...

<a href="http://mecha-cms.com/lot/asset/png/autumn.png">autumn</a>

TODO

Log 

Use this type to quickly publish a status message. All HTML tags will be removed. Two line break will be treated as a paragraph, single line break will be treated as a hard break. Text link will be converted into a clickable link. Image link will be converted into an image.

It is recommended to format the file name as a time format like 2017-08-28-21-59-26.page, or as a unique ID that has no meaning at all like 59a42ffbce123.page or 96fc518719a1eb1924ef4cbd0bc6026a0fcdb332.page.

---
type: Log
...

OMG I'm so gay.

Quote 

Basic 

All HTML tags will be removed except inline HTML tags listed in the HTML_WISE_I constant. Two line break will be treated as a paragraph, single line break will be treated as a hard break. A quote can contain text with a pair of straight double quotation mark for aesthetics or not at all. The first straight double quotation mark will be replaced by &#x201C; and the second straight double quotation mark will be replaced by &#x201D;. A pair of straight single quotation mark will be replaced by &#x2018; and &#x2019;, the rest will be replaced by &#x2019;.

---
type: Quote
...

I forgive people but that doesn't mean I accept their behavior or trust them. I forgive them for me. So, I can let go and move on with my life. Forgiveness doesn't always mean a second chance.
Citation 

Cite the original author by adding a line of text at the top of your quote as the author name, followed by a colon.

---
type: Quote
...

Jason Dawg:

"I forgive people but that doesn't mean I accept their behavior or trust them. I forgive them for me. So, I can let go and move on with my life. Forgiveness doesn't always mean a second chance."

Convert author name into clickable link by adding link data to the page header.

---
type: Quote
link: http://example.com
...

Jason Dawg:

"I forgive people but that doesn't mean I accept their behavior or trust them. I forgive them for me. So, I can let go and move on with my life. Forgiveness doesn't always mean a second chance."
HTML 

If there are some paragraph or block quote tags contained in the page content, no conversion will be attempted (a typical content generated by a WYSIWYG editor).

---
type: Quote
...

<blockquote class="test">
  <p>"I forgive people but that doesn't mean I accept their behavior or trust them. I forgive them for me. So, I can let go and move on with my life. Forgiveness doesn't always mean a second chance."</p>
</blockquote>

Video 

Convert video links into native HTML5 video player.

Basic 

Set video URL as the page content and put the poster image in the image property (optional).

---
title: Non-Stop Nyan Cat!
type: Video
image: http://mecha-cms.com/lot/asset/jpg/nyan.jpg
...

http://mecha-cms.com/lot/asset/mp4/nyan.mp4
http://mecha-cms.com/lot/asset/webm/nyan.webm
http://mecha-cms.com/lot/asset/ogv/nyan.ogv

Set video link as the page content.

---
title: Non-Stop Nyan Cat!
type: Video
image: http://mecha-cms.com/lot/asset/jpg/nyan.jpg
...

<a href="http://mecha-cms.com/lot/asset/mp4/nyan.mp4">Nyan MP4</a>
<a href="http://mecha-cms.com/lot/asset/webm/nyan.webm">Nyan WebM</a>
<a href="http://mecha-cms.com/lot/asset/ogv/nyan.ogv">Nyan OGG</a>
HTML 

You can also use raw <video> markup as the page content.

---
title: Non-Stop Nyan Cat!
type: Video
...

<video poster="http://mecha-cms.com/lot/asset/jpg/nyan.jpg" controls>
  <source src="http://mecha-cms.com/lot/asset/mp4/nyan.mp4" type="video/mp4">
  <source src="http://mecha-cms.com/lot/asset/webm/nyan.webm" type="video/webm">
  <source src="http://mecha-cms.com/lot/asset/ogv/nyan.ogv" type="video/ogg">
</video>

Dependency 

Extension 

Plugin