silverbullet/website/Page Decorations.md

79 lines
3.6 KiB
Markdown
Raw Normal View History

2024-07-14 17:29:43 +08:00
---
pageDecoration:
prefix: "🎄 "
disableTOC: true
cssClasses:
- christmas-decoration
2024-07-14 17:29:43 +08:00
---
Page decorations allow you to “decorate” pages in various fun ways.
2024-07-14 17:29:43 +08:00
> **warning** Warning
> This feature is still experimental and may change in the (near) future.
# Supported decorations
* `prefix`: A (visual) string prefix (often an emoji) to add to all page names. This prefix will appear in the top bar as well as in (live preview) links to this page. For example, the name of this page is actually “Page Decorations”, but when you link to it, youll see its prefixed with a 🎄: [[Page Decorations]]
* `cssClasses`: (list of strings) Attaches one or more CSS classes the page's `<body>` tag, wiki links, auto complete items and [[Page Picker]] entries for more advanced styling through a [[Space Style]] (see below for an example for this page).
* `hide` When this is set to `true`, the page will not be shown in [[Page Picker]], [[Meta Picker]], or suggested for completion of [[Links]]. It will otherwise behave as normal - will be [[Plugs/Index|indexed]] and found in [[Live Queries]]. The page can be opened through [[All Pages Picker]], or linked normally when the full name is typed out without completion.
* `disableTOC` (not technically built-in, but a feature of the [[^Library/Core/Widget/Table of Contents]] widget): disable the [[Table of Contents]] for this particular page.
2024-07-14 17:29:43 +08:00
An example of using `cssClasses` on this page using [[Space Style]] (note the `pageDecoration.cssClasses` in this pages [[Frontmatter]]):
```space-style
/* Style page links */
a.christmas-decoration {
background-color: #b4e46e;
}
/* Style main editor components */
body.christmas-decoration #sb-top {
background-color: #b4e46e;
}
/* Style auto complete items */
.cm-tooltip-autocomplete li.christmas-decoration {
background-color: #b4e46e;
}
/* Style page picker item */
.sb-result-list .sb-option.christmas-decoration {
background-color: #b4e46e;
}
```
There are two ways to _apply_ decorations to pages.
2024-07-14 17:29:43 +08:00
# With [[Frontmatter]] directly
This is demonstrated in the [[Frontmatter]] at the top of this page, by using the special `pageDecoration` attribute. This is how we get the fancy tree in front of the page name. Sweet.
2024-07-14 17:29:43 +08:00
# With [[Object Decorators]]
The more useful way is to apply decorations to pages _dynamically_, for this we will leverage the more powerful [[Object Decorators]] feature. Read the [[Object Decorators]] page for a more in-depth explanation of how this feature works if youre interested (as you should be, because its pretty cool on its own).
2024-07-14 17:29:43 +08:00
For the purposes of [[Page Decorations]], let us limit simply to some useful examples.
## Example: page prefix
Lets say we want to put a 🧑 prefix on every page tagged with `#person`. We can achieve this as follows in our [[^SETTINGS]]:
2024-07-14 17:29:43 +08:00
```yaml
2024-07-30 17:46:22 +08:00
objectDecorators:
2024-07-14 18:19:31 +08:00
- where: "tags = 'person'"
2024-07-31 13:00:30 +08:00
attributes:
pageDecoration.prefix: '"🧑 "'
2024-07-14 17:29:43 +08:00
```
Note the (perhaps) strange double quoting there, both the `where` and the value for the attributes are [[Expression Language|expressions]] encoded inside of YAML. Its a bit weird, but it works.
2024-07-14 17:29:43 +08:00
## Example: disabling [[Table of Contents]]
Lets say that adding this `pageDecoration.disableTOC` to the front matter is too much effort to disable the TOC on some pages. Therefore, you would like to simplify this by simply adding a `#notoc` tag to your pages.
2024-07-14 17:29:43 +08:00
You can do this as follows:
2024-07-14 17:29:43 +08:00
```yaml
2024-07-30 17:46:22 +08:00
objectDecorators:
- where: 'tags = "notoc"'
attributes:
pageDecoration.disableTOC: "true"
```
## Example: Plug prefix
Here on silverbullet.md, we have a decoration like this for pages tagged with `#plug`: [[Plugs/Emoji]] and [[Plugs/Git]] for instance.
2024-07-14 17:29:43 +08:00