Z8MB1E
51f7c803e0
WikiTemplates gains two fields: an optional css code field injected on pages that use the template (selectors auto-scoped to a hash-based .ptf-tpl-* class so templates never collide with each other or the app shell), and a developer-only html field rendered verbatim (sanitized) in place of the markdown body when transcluded. - templateCss.ts scopes/sanitizes CSS, incl. nested at-rules; pages and the editor live preview inject scoped styles and drop the Card chrome in favor of a full-width article - templateHtml.ts sanitizes HTML and splits prepared markdown around expansion sentinels so raw HTML renders without rehype-raw - templates.ts adds extractTemplateNames/extractPlaceholders/ extractDirectiveNames; prepareMarkdown threads an htmlTemplates map - markdown pipeline gains rehype-highlight for fenced code blocks - styles.css adds wiki prose typography + infobox demo styling - docs: demo article and Infobox template authoring guide
92 lines
2.9 KiB
Markdown
92 lines
2.9 KiB
Markdown
# Wiki template: Infobox
|
|
|
|
A Wikipedia-style right-hand info card. Renders as a floated card on the
|
|
right of the article with a title, optional image, and a field/value
|
|
metadata table. Content wraps around it; on screens under 640px it becomes
|
|
a full-width block.
|
|
|
|
## Creating it
|
|
|
|
Payload admin panel → **Wiki** → **Wiki Templates** → *Create New*:
|
|
|
|
- **Name**: `Infobox`
|
|
- **Description**: Wikipedia-style info card. Place `{{Infobox}}` near the
|
|
top of an article body, then replace the `{{...}}` markers and table rows
|
|
with real content.
|
|
- **Body**: paste the block below exactly (the `::::` fence lines are part
|
|
of it).
|
|
- **CSS**: optional. Paste the block below (or write your own).
|
|
|
|
## Body
|
|
|
|
```
|
|
::::infobox
|
|
**{{Title}}**
|
|
|
|
|
|
|
|
| {{Section}} | {{Value}} |
|
|
| ----------- | --------- |
|
|
| {{Field 1}} | {{Value 1}} |
|
|
| {{Field 2}} | {{Value 2}} |
|
|
| {{Field 3}} | {{Value 3}} |
|
|
| {{Field 4}} | {{Value 4}} |
|
|
| {{Field 5}} | {{Value 5}} |
|
|
|
|
{{One-line summary of the subject.}}
|
|
::::
|
|
```
|
|
|
|
## CSS
|
|
|
|
```css
|
|
.infobox {
|
|
/* The shell already styles .infobox (float, card look, field table).
|
|
Add template-specific tweaks here, e.g.: */
|
|
}
|
|
.infobox table {
|
|
font-size: 0.875rem;
|
|
}
|
|
```
|
|
|
|
## The CSS scoping contract
|
|
|
|
Every template's **CSS** field is auto-scoped at render time. Each rule's
|
|
selector gets prefixed with a hash-based scope class derived from the
|
|
template **name**, e.g. for a template named `Infobox`:
|
|
|
|
```css
|
|
/* what you write in the admin panel */
|
|
.infobox table { font-size: 0.875rem; }
|
|
|
|
/* what actually ships to the browser */
|
|
.ptf-tpl-rpev9a .infobox table { font-size: 0.875rem; }
|
|
```
|
|
|
|
Consequences:
|
|
|
|
- **No collisions**: two templates defining the same class can never
|
|
override each other, and template CSS can never leak into (or override)
|
|
the app shell outside wiki article content.
|
|
- **Write plain selectors**: do **not** add `.wiki-markdown` or the scope
|
|
class yourself — the renderer adds the prefix to every selector,
|
|
including inside `@media`/`@supports` blocks.
|
|
- **@keyframes/@font-face** are passed through untouched (animation names
|
|
are global; prefer unique names).
|
|
- **Dynamic HTML**: classes added at runtime by markdown directives (e.g.
|
|
`infobox` from `::::infobox`) keep their literal names — the scoping
|
|
prefixes selectors, it does not rename classes.
|
|
- **Deliberate overrides** of other templates or shell styles belong in the
|
|
**Shims** collection, not here.
|
|
|
|
## Usage notes
|
|
|
|
- Place `{{Infobox}}` as the first line of the article body so the card
|
|
floats beside the lead paragraphs.
|
|
- Delete the image line if the article has no image.
|
|
- The header row of the table renders as a section band; use it for a
|
|
grouping label (e.g. "Service record") or keep it as Field/Value.
|
|
- Wikilinks and templates expand inside the card as usual — e.g.
|
|
`[[Factions|faction]]` works in a value cell.
|
|
- `{{...}}` markers left unedited render as literal text — replace or
|
|
delete every marker before publishing.
|