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 变量来使用组件并缓解此限制。