JSX Preact
使用 JSX (Preact) 创建页面和布局。
配置参数
- extensions string[]
The list of extensions this plugin applies to
Default:[ ".jsx", ".tsx" ]
- pageSubExtension string
Optional sub-extension for page files
- includes string
Custom includes path
Default:site.options.includes
描述
此插件的工作方式与 JSX 完全相同,但使用 Preact (一个 3kb 大小的 React 替代品,具有相同的 API,但更快更轻) 来渲染 JSX。
请注意,此插件仅提供 JSX 支持以在构建时生成页面。 这意味着客户端属性(如 onClick
)将不起作用。 如果您想使用 React 创建用于浏览器的代码(例如 SPA),请使用 ESbuild 插件。
安装
在您的 _config.ts
文件中导入此插件即可使用它:
import lume from "lume/mod.ts";
import jsx from "lume/plugins/jsx_preact.ts";
const site = lume();
site.use(jsx(/* Options */));
export default site;
配置
您可能需要在 deno.json
中添加以下 compilerOptions
以配置 JSX 转换:
{
// ...
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "npm:preact"
}
}
Tip
前往使用 TypeScript 了解更多关于在 Lume 中使用 TypeScript 的信息。
创建页面
要使用此格式创建页面,只需在您的站点中添加扩展名为 .jsx
或 .tsx
的文件。 此格式的工作方式与 JavaScript/TypeScript 文件 完全相同,但增加了在默认导出中导出 JSX 代码的能力:
export const title = "Welcome to my page";
export const layout = "layouts/main.vto";
export default (data: Lume.Data, helpers: Lume.Helpers) => (
<>
<h1>{data.title}</h1>
<p>This is my first post using lume. I hope you like it!</p>
</>
);
请注意,此页面使用 layouts/main.vto
Vento 布局来包裹内容。(您可以混合使用不同的模板语言,如 Nunjucks 和 JSX。)
创建布局
要在 JSX 中创建布局,只需将 .jsx
或 .tsx
文件添加到 _includes
目录。 请注意,我们需要使用变量 children
来渲染页面内容,而不是 content
。 区别在于 content
是一个字符串,由于它被转义,因此无法在 JSX 中轻松使用,而 children
是未渲染的 JSX 对象。
export default ({ title, children }: Lume.Data, helpers: Lume.Helpers) => (
<html>
<head>
<title>{title}</title>
</head>
<body>
{children}
</body>
</html>
);
Tip
Lume 将自动将缺少的 <!DOCTYPE html>
添加到生成的 .html
页面中。
组件
您可以在 JSX 中创建 Lume 组件,方法是在 _components
文件夹中创建文件。 例如:
export default function ({ children }) {
return (
<button className="my-button">
{children}
</button>
);
}
要在您的模板中渲染组件,请使用 comp
变量:
export default function ({ comp }) {
return (<comp.Button>Click me!</comp.Button>);
}
Important
由于 Deno 的限制,无法更新任何导入的模块 而无需重启整个进程,因此使用 import Button from "./_components/button.ts"
导入组件不适用于热重载。 因此,强烈建议使用 comp
变量来使用组件并缓解此限制。