{page.title}
-
{pages("articles/**").reverse().map(a =>
- {a.title} {a.date} )}
`, and leave `` to the root layout:
```jsx
// articles/_layout.jsx
(content) =>
```
### Choosing a layout explicitly
Set `layout` in a page's data to skip the folder layouts and use a specific one.
The value is a path from the site root, without the extension:
```markdown
---
layout: about/_wide
---
```
`layout: ""` turns layouts off entirely, which is what feeds and other non-HTML
pages want.
A layout can also set `layout` (with `data()` in JSX, or frontmatter in a
template layout). When it does, the remaining folder layouts are dropped and the
named layout is applied next. This lets one layout hand off to a specific chain:
```jsx
// about/_layout.jsx
data({ layout: "_layouts/wide" });
(content) => ![]()
`, ``, and `
` are self-closed. ### Escaping and `raw()` Text and attribute values are escaped, so a title with `&` or `"` is safe anywhere, including in attributes and XML feeds. Text inside `
{content}
```
Go template layouts (`_layout.tmpl`) get the content through `[[ content ]]`.
## Partials
Partials are reusable pieces of markup you can include in pages, layouts, and
other partials. Any `_name.jsx` or `_name.tmpl` file that isn't one of the
special files above is a partial, and so is any `.jsx` or `.tmpl` file inside an
`_`-prefixed folder. Most sites keep them together in a root `_partials/`
folder, where the files don't need their own underscore.
Include a partial from JSX with its path from the site root, without the
extension:
```jsx
{partial("_partials/footer")}
```
A navigation partial:
```jsx
// _partials/nav.jsx
```
A partial can be a plain element, as above, or a function. Arguments after the
name are passed to the function:
```jsx
// _partials/card.jsx
(post, showDate = true) =>
{post.title}
{showDate && }
```
```jsx
{pages("articles/**").map(p => partial("_partials/card", p))}
```
Partials see the same globals and `page` as the file that calls them. `.jsx` is
tried first, then `.tmpl`. A missing partial, or one that throws, fails the page
with an error naming it.
In Markdown and Go templates, use `[[ partial "_partials/footer" ]]`. Template partials
(`.tmpl`) currently receive no helper functions and ignore arguments, so prefer
JSX partials.
## Writing JSX
Taragen's JSX is a server-side template language. Elements turn straight into
HTML strings; there is no React, no components with state, no hooks, and nothing
runs in the browser. Write `class`, not `className`.
### Pages, data, and multiple roots
A JSX page can have several root elements, or start with an expression:
```jsx
data({ title: "Home" });
Welcome
Latest posts:
{partial("_partials/latest")} ``` A `data({...})` call at the very top of the file (after whitespace and comments) sets page data. The trailing `;` is optional. `data()` merges its object into both `page` and the page's data, so later code in the file and the layouts see it. In a [generated page template](#generated-pages), a `params(...)` call can sit alongside `data()` in these leading statements. ### Values in JSX Children can be elements, strings, numbers, or arrays (flattened, so `.map(...)` works). `null`, `undefined`, `true`, and `false` render nothing, so conditionals work: ```jsx {page.draft && Draft} {page.tags?.map(t => {t})} ``` Attribute values can be: | Value | Result | | --- | --- | | string | `name="value"`; an empty string omits the attribute | | number | Printed as JS prints it | | `true` / `false` | Bare attribute (``) / omitted | | object | Serialized as a `style` string: `style={{ color: "red", "font-size": "2em" }}` | | `null` / `undefined` | Omitted | Anything else, such as an object as a child or a function as an attribute, throws a `TypeError` and fails the render. Attributes are written in the order you wrote them, and the output is identical on every build, so diffs of `_public/` show only real changes. Void elements like `` are self-closed. ### Escaping and `raw()` Text and attribute values are escaped, so a title with `&` or `"` is safe anywhere, including in attributes and XML feeds. Text inside `