主题
HTML 插件
¥HTML Plugin
允许你使用带有适当标头和支持的 JSX 和 HTML。
¥Allows you to use JSX and HTML with proper headers and support.
使用以下工具安装：
¥Install with:
bash
bun add @elysiajs/html然后使用它：
¥Then use it:
tsx
import { Elysia } from 'elysia'
import { html, Html } from '@elysiajs/html'
new Elysia()
.use(html())
.get(
'/html',
() => `
<html lang='en'>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>`
)
.get('/jsx', () => (
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
))
.listen(3000)此插件会自动将 Content-Type: text/html; charset=utf8 标头添加到响应中，添加 <!doctype html>，并将其转换为 Response 对象。
¥This plugin will automatically add Content-Type: text/html; charset=utf8 header to the response, add <!doctype html>, and convert it into a Response object.
JSX
Elysia HTML 基于 @kitajs/html，允许我们在编译时将 JSX 转换为字符串，以实现高性能。
¥Elysia HTML is based on @kitajs/html allowing us to define JSX to string in compile time to achieve high performance.
将需要使用 JSX 的文件命名为 "x" 后缀：
¥Name your file that needs to use JSX to end with affix "x":
.js -> .jsx
.ts -> .tsx
要注册 TypeScript 类型，请将以下内容附加到 tsconfig.json 中：
¥To register the TypeScript type, please append the following to tsconfig.json:
jsonc
// tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "Html.createElement",
"jsxFragmentFactory": "Html.Fragment"
}
}就是这样，现在你可以使用 JSX 作为模板引擎了：
¥That's it, now you can use JSX as your template engine:
tsx
import { Elysia } from 'elysia'
import { html, Html } from '@elysiajs/html'
new Elysia()
.use(html())
.get('/', () => (
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
))
.listen(3000)如果出现 Cannot find name 'Html'. Did you mean 'html'? 错误，则必须将以下导入添加到 JSX 模板中：
¥If the error Cannot find name 'Html'. Did you mean 'html'? occurs, this import must be added to the JSX template:
tsx
import { Html } from '@elysiajs/html'务必使用大写字母。
¥It is important that it is written in uppercase.
XSS
Elysia HTML 基于 Kita HTML 插件，可在编译时检测可能的 XSS 攻击。
¥Elysia HTML is based use of the Kita HTML plugin to detect possible XSS attacks in compile time.
你可以使用专用的 safe 属性来过滤用户值，以防止 XSS 漏洞。
¥You can use a dedicated safe attribute to sanitize user value to prevent XSS vulnerability.
tsx
import { Elysia, t } from 'elysia'
import { html, Html } from '@elysiajs/html'
new Elysia()
.use(html())
.post(
'/',
({ body }) => (
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<h1 safe>{body}</h1>
</body>
</html>
),
{
body: t.String()
}
)
.listen(3000)但是，在构建大型应用时，最好使用类型提醒来检测代码库中可能存在的 XSS 漏洞。
¥However, when are building a large-scale app, it's best to have a type reminder to detect possible XSS vulnerabilities in your codebase.
要添加类型安全提醒，请安装：
¥To add a type-safe reminder, please install:
sh
bun add @kitajs/ts-html-plugin然后附加以下 tsconfig.json 文件
¥Then appends the following tsconfig.json
jsonc
// tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "Html.createElement",
"jsxFragmentFactory": "Html.Fragment",
"plugins": [{ "name": "@kitajs/ts-html-plugin" }]
}
}选项
¥Options
contentType
类型：
string默认：
'text/html; charset=utf8'
响应的内容类型。
¥The content-type of the response.
autoDetect
类型：
boolean默认：
true
是否自动检测 HTML 内容并设置内容类型。
¥Whether to automatically detect HTML content and set the content-type.
autoDoctype
类型：
boolean | 'full'默认：
true
如果未找到以 <html> 开头的响应，是否自动添加 <!doctype html>。
¥Whether to automatically add <!doctype html> to a response starting with <html>, if not found.
使用 full 可在未使用此插件返回的响应中自动添加文档类型
¥Use full to also automatically add doctypes on responses returned without this plugin
ts
// without the plugin
app.get('/', () => '<html></html>')
// With the plugin
app.get('/', ({ html }) => html('<html></html>'))isHtml
类型：
(value: string) => boolean默认：
isHtml（导出函数）
该函数用于检测字符串是否为 HTML 格式。如果长度大于 7，则默认实现以 < 开头，以 > 结尾。
¥The function is used to detect if a string is a html or not. Default implementation if length is greater than 7, starts with < and ends with >.
请记住，没有真正有效的 HTML 验证方法，因此默认实现只是最佳猜测。
¥Keep in mind there's no real way to validate HTML, so the default implementation is a best guess.