Страницы

Страницы создаются путем добавления нового файла index.tsx в каталог src/routes. Страница экспортирует с помощью 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 позволяет задать заголовок страницы, а также теги и ссылки meta, 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 из вашего компонента.

Динамический заголовок документа

Вы также можете экспортировать функцию, которая возвращает объект DocumentHead, позволяя программно установить тэги <title>, <meta> или <link>.

Это позволяет настроить <head>, включая заголовок, мета или ссылки, используя данные из routeLoader$() или routeAction$().

Мы можем использовать метод resolveValue для получения значения routeLoader$() или routeAction$() в функции head.

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) => {
  // Fetch a joke from a public API
  const jokeId = requestEvent.params.jokeId;
  const response = await fetch(`https://api.chucknorris.io/jokes/${jokeId}`);
  const joke = await response.json();
  return joke;
});
 
// Now we can export a function that returns a DocumentHead object
export const head: DocumentHead = ({resolveValue, params}) => {
  const joke = resolveValue(useJoke);
  return {
    title: `Joke "${joke.title}"`,
    meta: [
      {
        name: 'description',
        content: joke.text,
      },
      {
        name: 'id',
        content: params.jokeId,
      },
    ],
  };
};

Вложенные макеты и заголовок

Более сложный случай - если вам нужно в макете изменить заголовок документа в уже сформированной шапке. В приведенном ниже примере компонент страницы возвращает заголовок 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: `Компания - ${head.title}`,
  };
};

Участники

Спасибо всем участникам, которые помогли сделать эту документацию лучше!

Страницы

Экспорт <head>

Динамический заголовок документа

Вложенные макеты и заголовок

Участники

Экспорт `<head>`