-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.page
executable file
·70 lines (55 loc) · 2.36 KB
/
about.page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
---
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; ?>
~~~