Art Direction

Table of Contents

Create unique design for each blog posts by adding special CSS and JavaScript files.

Usage

To enable this feature, add css.data and js.data files to a folder that has the same name as the page slug and is stored in the same directory level:

.\
└── lot\
    └── page\
        ├── lorem-ipsum\
        │   ├── css.data
        │   └── js.data
        └── lorem-ipsum.page

Write custom CSS code in css.data file, and custom JavaScript code in js.data file.

Conditions

These page conditional statements are available:

$site->has('css') → Return true if current page has custom CSS.
$site->has('js') → Return true if current page has custom JS.
$site->is('art') → Return true if current page has custom CSS or JS.
$site->not('art') → Return true if current page don’t have custom CSS and JS.

Classes

These HTML classes will be added automatically if your <html> element has class attribute:

has:css → Will be added if custom CSS data of current page isn’t empty.
has:js → Will be added if custom JS data of current page isn’t empty.
is:art → Will be added if custom CSS or JS data of current page isn’t empty.
not:art → Will be added if custom CSS and JS data of current page are empty.