Deno, Fresh framework - работа с html шаблонами

Недавно я играл с новым фреймворком Fresh для deno, и все было отлично, но в какой-то момент я понял, что нет возможности добавить какие-либо дополнительные метаданные в тег заголовка страницы. В основном я хочу сделать 2 вещи:

  1. Добавить тег заголовка
  2. Связать некоторый файл css из моего статического каталога

У вас есть идеи, как этого добиться? В идеальном мире я хотел бы иметь возможность предоставить свой собственный HTML-шаблон или, по крайней мере, иметь какой-то гибкий способ манипулировать предоставленным фиксированным шаблоном. Я нашел некоторый фрагмент кода в исходном файле Fresh, который в основном представляет собой ранее упомянутый фиксированный шаблон html, но, к сожалению, он не выглядит настраиваемым для меня - единственным переменным элементом будет opts.headComponents, но я не уверен, могу ли я повлиять на это.

export interface TemplateOptions {
  bodyHtml: string;
  headComponents: ComponentChildren[];
  imports: (readonly [string, string])[];
  styles: string[];
  preloads: string[];
  lang: string;
}

export function template(opts: TemplateOptions): string {
  const page = (
    <html lang = {opts.lang}>
      <head>
        <meta charSet = "UTF-8" />
        <meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
        {opts.preloads.map((src) => <link rel = "modulepreload" href = {src} />)}
        {opts.imports.map(([src, nonce]) => (
          <script src = {src} nonce = {nonce} type = "module"></script>
        ))}
        <style
          id = "__FRSH_STYLE"
          dangerouslySetInnerHTML = {{ __html: opts.styles.join("\n") }}
        />
        {opts.headComponents}
      </head>
      <body dangerouslySetInnerHTML = {{ __html: opts.bodyHtml }} />
    </html>
  );

  return "<!DOCTYPE html>" + renderToString(page);
}

🤔 А знаете ли вы, что...
С помощью JavaScript можно создавать клиентские приложения для мобильных устройств с использованием фреймворков, таких как React Native и NativeScript.


4
526
1

Ответ:

Решено

Я нашел ответ в каком-то свежий выпуск. Редактирование тегов head и body можно сделать через JSX, вот так:

/** @jsx h */
import {h} from 'preact';
import {PageProps} from '$fresh/src/server/types.ts';
import {tw} from '@twind';

export const Head = () => (
    <head>
        <title>My title</title>
    </head>
);

export default function LoginPage(props: PageProps) {
    return (
        <div class = {tw`w-screen h-screen flex justify-center bg-green-900`}>
            <Head />
        </div>
    )
}

Угадайте, что этот способ ведения дел исходит из preact или SSR? С моей точки зрения, это немного странно - вставлять голову/тело в некоторые дивы, не очень интуитивно понятно.

Редактировать

Нашел еще лучшее решение, потому что ответ, представленный ранее, по-прежнему приводил к тому, что метатеги помещались внутри тега body.

Мы можем использовать _app.tsx, который по сути является оберткой для каждого отображаемого маршрута, и использовать специальный компонент Глава из свежей библиотеки. И это правильный способ заполнения поля opts.headComponents из фиксированного шаблона html (представленного в вопросе). К сожалению, похоже, что для этого нет документации. Пример взят из свежего тесты:

/** @jsx h */
/** @jsxFrag Fragment */
import { Fragment, h } from "preact";
import { Head } from "$fresh/runtime.ts";
import { AppProps } from "$fresh/server.ts";

export default function App(props: AppProps) {
  return (
    <>
      <Head>
        <meta name = "description" content = "Hello world!" />
      </Head>
      <props.Component />
    </>
  );
}