元数据

Metadata

到目前为止，我们渲染的所有内容都在 HTML 文档的 <body> 内。这合情合理，毕竟你在网页上看到的所有内容都位于 <body> 之中。

So far, everything we’ve rendered has been inside the <body> of the HTML document. And this makes sense. After all, everything you can see on a web page lives inside the <body>.

然而，在很多情况下，你可能希望使用与 UI 相同的响应式原语和组件模式来更新文档 <head> 中的某些内容。

However, there are plenty of occasions where you might want to update something inside the <head> of the document using the same reactive primitives and component patterns you use for your UI.

这就是 leptos_meta 包的用武之地。

That’s where the leptos_meta package comes in.

Metadata Components

leptos_meta 提供了特殊的组件，允许你从应用中任何组件内部向 <head> 注入数据：

leptos_meta provides special components that let you inject data from inside components anywhere in your application into the <head>:

<Title/> 允许你从任何组件设置文档的标题。它还接收一个 formatter 函数，可用于对其他页面设置的标题应用相同的格式。例如，如果你在 <App/> 组件中放入 <Title formatter=|text| format!("{text} — 我的超赞网站")/>，然后在你的路由组件中放入 <Title text="页面 1"/> 和 <Title text="页面 2"/>，你将得到 页面 1 — 我的超赞网站 和 页面 2 — 我的超赞网站。

<Title/> allows you to set the document’s title from any component. It also takes a formatter function that can be used to apply the same format to the title set by other pages. So, for example, if you put <Title formatter=|text| format!("{text} — My Awesome Site")/> in your <App/> component, and then <Title text="Page 1"/> and <Title text="Page 2"/> on your routes, you’ll get Page 1 — My Awesome Site and Page 2 — My Awesome Site.

<Link/> 向 <head> 注入一个 <link> 元素。

<Link/> injects a <link> element into the <head>.

<Stylesheet/> 使用你提供的 href 创建一个 <link rel="stylesheet">。

<Stylesheet/> creates a <link rel="stylesheet"> with the href you give.

<Style/> 使用你传入的子内容（通常是字符串）创建一个 <style>。你可以使用它在编译时从另一个文件导入自定义 CSS：<Style>{include_str!("my_route.css")}</Style>。

<Style/> creates a <style> with the children you pass in (usually a string). You can use this to import some custom CSS from another file at compile time <Style>{include_str!("my_route.css")}</Style>.

<Meta/> 允许你设置带有描述和其他元数据的 <meta> 标签。

<Meta/> lets you set <meta> tags with descriptions and other metadata.

警告

注意：这些组件应该在应用的主体部分（即某个组件内部）使用。它们不应该直接用在 <head> 中（例如，如果你正在使用服务端渲染）。你应该直接使用相应的 HTML 元素，而不是将 leptos_meta 组件放入 <head>。

`<Script/>` 与 `<script>`

`<Script/>` and `<script>`

leptos_meta 还提供了一个 <Script/> 组件，这里值得停下来稍作说明。我们考虑过的所有其他组件都是向 <head> 注入仅限 <head> 使用的元素。但 <script> 也可以包含在 body 中。

leptos_meta also provides a <Script/> component, and it’s worth pausing here for a second. All of the other components we’ve considered inject <head>-only elements in the <head>. But a <script> can also be included in the body.

有一个非常简单的方法来确定你应该使用大写 S 的 <Script/> 组件还是小写 s 的 <script> 元素：<Script/> 组件将在 <head> 中渲染，而 <script> 元素将渲染在你用户界面 <body> 中放置它的位置，与其他普通 HTML 元素并列。这两者会导致 JavaScript 在不同的时间加载和运行，因此请根据你的需要选择合适的一个。

There’s a very simple way to determine whether you should use a capital-S <Script/> component or a lowercase-s <script> element: the <Script/> component will be rendered in the <head>, and the <script> element will be rendered wherever in the <body> of your user interface you put it in, alongside other normal HTML elements. These cause JavaScript to load and run at different times, so use whichever is appropriate to your needs.

`<Body/>` 与 `<Html/>`

`<Body/>` and `<Html/>`

甚至还有几个旨在简化语义化 HTML 和样式设计的元素。<Body/> 和 <Html/> 旨在允许你向页面上的 <html> 和 <body> 标签添加任意属性。你可以使用展开运算符（{..}）后的常规 Leptos 语法添加任意数量的属性，这些属性将直接添加到相应的元素中。

There are even a couple elements designed to make semantic HTML and styling easier. <Body/> and <Html/> are designed to allow you to add arbitrary attributes to the <html> and <body> tags on your page. You can add any number of attributes using the usual Leptos syntax after the spread operator ({..}) and those will be added directly to the appropriate element.

<Html
    {..}
    lang="he"
    dir="rtl"
    data-theme="dark"
/>

元数据与服务端渲染

Metadata and Server Rendering

现在，其中一些功能在任何场景下都很有用，但有些对于搜索引擎优化（SEO）尤为重要。确保你有合适的 <title> 和 <meta> 标签至关重要。现代搜索引擎爬虫确实可以处理客户端渲染，即以空的 index.html 发送并完全在 JS/WASM 中渲染的应用。但它们更希望接收到应用已被渲染为实际 HTML 且 <head> 中包含元数据的页面。

Now, some of this is useful in any scenario, but some of it is especially important for search-engine optimization (SEO). Making sure you have things like appropriate <title> and <meta> tags is crucial. Modern search engine crawlers do handle client-side rendering, i.e., apps that are shipped as an empty index.html and rendered entirely in JS/WASM. But they prefer to receive pages in which your app has been rendered to actual HTML, with metadata in the <head>.

这正是 leptos_meta 的用途。事实上，在服务端渲染期间，它所做的正是：收集你在整个应用中使用其组件声明的所有 <head> 内容，然后将其注入到实际的 <head> 中。

This is exactly what leptos_meta is for. And in fact, during server rendering, this is exactly what it does: collect all the <head> content you’ve declared by using its components throughout your application, and then inject it into the actual <head>.

不过我扯远了。我们还没真正讨论过服务端渲染。下一章将讨论与 JavaScript 库的集成。然后我们将结束对客户端的讨论，并转向服务端渲染。

But I’m getting ahead of myself. We haven’t actually talked about server-side rendering yet. The next chapter will talk about integrating with JavaScript libraries. Then we’ll wrap up the discussion of the client side, and move onto server side rendering.

Keyboard shortcuts