编写页面

任何以页面扩展名结尾的文件都是一个页面。默认扩展名：.ht.js、.html.js，以及 TypeScript / JSX 变体（.ht.ts、.ht.tsx，…）。

如果输出以 <html> 开头，sitelo 会自动补上 <!DOCTYPE html>。标记推荐使用 ht.js（javascript-to-html）：返回字符串的标签函数，不需要模板引擎，也不需要 React 运行时。

1. 一个返回 HTML 的函数

export default ({ params, data, dev }) => `
  <html>
    <body><h1>你好</h1></body>
  </html>
`

import { html, body, h1 } from 'javascript-to-html'

export default ({ params, data, dev }) =>
  html(
    body(h1('你好'))
  )

export default function Page({ params, data, dev }) {
  return (
    <html>
      <body><h1>你好</h1></body>
    </html>
  )
}

JSX 文件使用 *.ht.jsx / *.ht.tsx，并需要安装 react 和 react-dom。请看下方的JSX 的限制 —— sitelo 在构建时把 JSX 变成静态 HTML；它不是浏览器里的 React 应用。

2. 一个普通字符串

export default `<html><body><h1>再静态不过了</h1></body></html>`

3. 一个结构化模块

把 render、data 和 generateStaticParams 放在一起：

export default {
  generateStaticParams: () => [{ slug: 'hello' }],
  data: ({ params }) => ({ title: params.slug }),
  render: ({ data }) => `<html><body><h1>${data.title}</h1></body></html>`,
}

import { html, body, h1 } from 'javascript-to-html'

export default {
  generateStaticParams: () => [{ slug: 'hello' }],
  data: ({ params }) => ({ title: params.slug }),
  render: ({ data }) =>
    html(
      body(h1(data.title))
    ),
}

export default {
  generateStaticParams: () => [{ slug: 'hello' }],
  data: ({ params }) => ({ title: params.slug }),
  render: ({ data }) => (
    <html>
      <body><h1>{data.title}</h1></body>
    </html>
  ),
}

JSX 的限制

sitelo 可以用 react-dom/server 渲染 .ht.jsx / .ht.tsx 页面，让你写熟悉的 JSX 语法。这只是书写上的便利 —— 而不是一个 React 应用。

React 是为浏览器而生的：一棵会挂载、会水合、会响应事件的组件树。sitelo 从不把这套运行时随页面一起发布。构建时它把你的 JSX 渲染成 HTML 字符串，写入文件，到此为止。没有客户端 React 包，没有水合，浏览器里也没有等待中的虚拟 DOM。

因此：

事件处理函数（onClick、onChange，…）在成品站点里不起作用 —— 没有任何东西在监听。开发服务器若发现它们会给出警告。
Hooks（useState、useEffect，…）不会成为已发布页面的一部分。它们可能在构建渲染时执行一次，但不会在浏览器中保存状态。
仅浏览器可用的 API（window、document）在构建时渲染页面的过程中不可用。
dangerouslySetInnerHTML 可以用来注入 HTML 字符串；交互能力仍然需要单独的客户端 <script>。

点击、表单和其他客户端行为，请通过资源流水线引入一个普通脚本，或使用服务端区块来获得请求时生成的 HTML。当你不需要 JSX 语法时，更适合用 ht.js 或模板字符串 —— 无需安装 React，而且这个模型正好对应「构建时产出 HTML」。

渲染上下文

每个页面函数只接收一个参数：

params

本页面的路由参数（Record<string, string | string[]>）。

data

你的 data() 函数返回的内容。

page

路由元信息（routePath、relativePath，…）。

dev

在开发服务器中为 true，构建时为 false。