PageFactory (Kirby Plugin)

Frontmatter

Each .md file may start with a "Frontmatter" section. Frontmatter may contain various parameters for the page:

  • In-page Styling instructions
  • In-page Javascript code
  • Instructions for loading asset files (.css, .js)
  • Variable definitions
  • etc.

Example:

// Frontmatter section:
scss:
body {...}
----
js:
var x = true;
----
... markdown starts here...

Supported Keywords:

css:

CSS styles that will be injected into the <head> element.

scss:

Like CSS, but first translated to CSS.

js:

JavaScript that will be wrapped into a <script> element and injected at the bottom of the <body> element.

jsready:

Like js, code but wrapped into document.addEventListener('DOMContentLoaded', function() { … });.

assets:

Asset files of type .css, .scss and .js.
Note: .scss-files will automatically be compiled

variables:

Definitions of Variables.

Example:

variables:
myName: Nobody
language:
    de: 'Deutsch'
    en: 'English'
----
head:

Injects given HTML code into the <head> element as is.

description:

Injects given text in <meta name="description" content="abc">

keywords:

Injects given text in <meta name="keywords" content="a,b,c">

author:

Injects given text in <meta name="author" content="abc">

robots:

Injects given text in <meta name="robots" content="noindex">.
Value true serves as shorthand for "noindex,nofollow,noarchive"

wrapperTag:

MD files are wrapped in DIVs by default. This option lets you chose another tag.
(wrapperTag:'' suppresses the wrapper)

wrapperClass:

Class applied to wrapperTag.

visibility:

Lets you define restrictions, i.e. who can see that page (resp. content of the .md file).
Available Criteria:
- localhost → only while working on localhost
- loggedin → only logged in visitors
- admin → only site admins
- {group} → only members of given group
Criteria can be combined, e.g. visibility: localhost|loggedin

Examples 

description: this website's purpose…
----
keywords: kirby, pagefactory, demo
----
author: Dieter Stokar
----
robots: false
----
head:
<meta http-equiv="refresh" content="30"> 
----
scss:
.pfy-large-screen {
    .box { min-width: 30em; }
}
----
jsready: 
const list = document.querySelector('.list');
----
visibility: members|localhost
----

PageFactory