页面

通过在 src/routes 目录下添加一个新的 index.tsx 文件来创建页面。页面导出一个 default Qwik 组件，该组件将作为页面内容进行渲染。

src/routes/some/path/index.tsx

import { component$ } from '@builder.io/qwik';
 
// 注意默认导出
export default component$(() => {
  return <h1>Hello World!</h1>;
});

页面和端点之间唯一的区别是，端点只导出一个 onRequest、onGet、onPost、onPut、onDelete、onPatch、onHead 函数，用于处理传入的请求。

`head` 导出

每个页面都可以导出一个 head 属性（或函数），该属性返回一个 DocumentHead 对象。DocumentHead 对象用于解析页面的标题，以及元标签、链接和样式。

该 API 允许您设置页面的标题，以及元标签、开放图形协议（Open Graph）、Twitter 标签和链接。这对于 SEO 和社交分享非常有用。

src/routes/about/index.tsx

import { component$ } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
 
export default component$(() => {
  return <h1>About page</h1>;
});
 
export const head: DocumentHead = {
  // 这将用于解析页面的 <title>
  title: 'About page',
  meta: [
    {
      name: 'description',
      content: 'This is the about page',
    },
    // 开放图形协议（Open Graph）
    {
      property: 'og:title',
      content: 'About page',
    },
    {
      property: 'og:description',
      content: 'This is the about page',
    },
  ],
  links: [
    {
      rel: 'canonical',
      href: 'https://example.com/about',
    },
  ],
};

上面的示例设置了标题，以及一些开放图形协议（Open Graph）元标签和规范链接。

HTML 将 <head> 标签放在 <html> 内的第一个元素位置（在 HTML 内容的最顶部）。<head> 部分不是您的路由组件直接渲染的内容，因为这会破坏 HTML 流式传输。

使用 useDocumentHead() 来从组件内部读取和使用 DocumentHead 对象。

动态 head

您还可以导出一个返回 DocumentHead 对象的函数，允许根据 routeLoader$() 或 routeAction$() 的数据以编程方式设置 <title>、<meta> 或 <link> 标签。

这允许使用 routeLoader$() 或 routeAction$() 的值来配置 <head>，包括标题、元标签或链接。

我们可以使用 resolveValue 方法在 head 函数内获取 routeLoader$() 或 routeAction$() 的值。

src/routes/jokes/[jokeId]/index.tsx

import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import type { DocumentHead } from '@builder.io/qwik-city';
 
export const useJoke = routeLoader$(async (requestEvent) => {
  // 从公共 API 获取一个笑话
  const jokeId = requestEvent.params.jokeId;
  const response = await fetch(`https://api.chucknorris.io/jokes/${jokeId}`);
  const joke = await response.json();
  return joke;
});
 
// 现在我们可以导出一个返回 DocumentHead 对象的函数
export const head: DocumentHead = ({resolveValue, params}) => {
  const joke = resolveValue(useJoke);
  return {
    title: `笑话 "${joke.title}"`,
    meta: [
      {
        name: 'description',
        content: joke.text,
      },
      {
        name: 'id',
        content: params.jokeId,
      },
    ],
  };
};

嵌套布局和 head

一个高级用例是，布局可能希望修改已解析的文档标题。在下面的示例中，页面组件返回 Foo 的标题。接下来，包含的布局组件可以读取页面的文档头的值并进行修改。在此示例中，布局组件将 MyCompany - 添加到标题中，以便在渲染时标题将变为 MyCompany - Foo。堆栈中的每个布局都有机会返回一个新值。

──src/
  └─routes/
    ├─index.tsx
    └─layout.tsx

src/routes/index.tsx

export const head: DocumentHead = {
  title: `Foo`,
};

src/routes/layout.tsx

export const head: DocumentHead = ({ head }) => {
  return {
    title: `MyCompany - ${head.title}`,
  };
};

Contributors

Thanks to all the contributors who have helped make this documentation better!

页面

head 导出

动态 head

嵌套布局和 head

Contributors

`head` 导出