about.page

---
title: Art
description: Creates a unique design on each page by adding custom CSS and JS code.
icon: 'M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z'
color: '#376200'
author: Taufik Nurrohman
type: Markdown
version: 3.0.2
...

### Usage

This extension allows you to apply specific styles to individual pages. To enable this feature, add `script.data` and/or
`style.data` files to a folder with the same name as the page name and on the same directory level. Write custom CSS
code in the `style.data` file and custom JS code in the `script.data` file:

~~~ .txt
.\
└── lot\
    └── page\
        ├── lorem-ipsum\
        │   ├── script.data
        │   └── style.data
        └── lorem-ipsum.page
~~~

These HTML classes are added to the root element if it has a `class` attribute, when the current page has custom CSS
and/or custom JS data. You can use this feature to create a specific look or response on your site from the client side
if the following classes are found in the root element:

`is:art`
: Will be added if custom CSS or JS data of the current page is not empty.

`not:art`
: Will be added if custom CSS and JS data of the current page is empty.

Example usage in CSS code:

~~~ .css
.not\:art a {
  color: #00f;
}
~~~

Example usage in JS code:

~~~ .js
if (document.documentElement.classList.contains('is:art')) {
    console.info('This page contains custom CSS/JS code.');
}
~~~

These additional conditional statements are available for use in layouts to show/hide elements on your site from the
server side:

`$site->is('art')`
: Returns `true` if the current page has custom CSS or JS.

`$site->not('art')`
: Returns `true` if the current page has no custom CSS and JS.

Example usage in HTML/PHP code:

~~~ .html.php
<?php if ($site->is('art')): ?>
  <p>
    <?= i('This page contains custom CSS/JS code.'); ?>
  </p>
<?php endif; ?>
~~~