Deno, Fresh framework - работа с html шаблонами
Недавно я играл с новым фреймворком Fresh для deno, и все было отлично, но в какой-то момент я понял, что нет возможности добавить какие-либо дополнительные метаданные в тег заголовка страницы. В основном я хочу сделать 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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 />
</>
);
}
Вы задаете вопрос в своем ответе. Пожалуйста, не добавляйте это как ответ, а отредактируйте свой вопрос с помощью найденной информации и перефразируйте свой вопрос.
Нет, это совершенно не связано с рендерингом Preact или Preact-to-string. Это строго Fresh/Deno.