Сейчас начинаю изучать AstroJS. Я просматривал шаблоны на github и нашел этот <Fragment>
тег и ссылку на astro-документацию, в которой говорится, что его можно использовать для директив. Я предоставил код ниже для справки.
<Fragment slot = "title">
Free template for <span class = "hidden xl:inline">creating websites with</span>
<span class = "text-accent dark:text-white highlight"> Astro 4.0</span> + Tailwind CSS
</Fragment>
Здесь я вижу параметр как слот. Итак, я попытался увидеть определение Фрагмента и попал в этот файл env.d.ts
/// <reference path = "./client.d.ts" />
// Caution! The types here are only available inside Astro files (injected automatically by our language server)
// As such, if the typings you're trying to add should be available inside ex: React components, they should instead
// be inside `client.d.ts`
type Astro = import('./dist/@types/astro.js').AstroGlobal;
// We have to duplicate the description here because editors won't show the JSDoc comment from the imported type
// However, they will for its properties, ex: Astro.request will show the AstroGlobal.request description
/**
* Astro global available in all contexts in .astro files
*
* [Astro documentation](https://docs.astro.build/en/reference/api-reference/#astro-global)
*/
declare const Astro: Readonly<Astro>;
declare const Fragment: any;
declare module '*.html' {
const Component: (opts?: { slots?: Record<string, string> }) => string;
export default Component;
}
Здесь я не вижу никаких параметров слота, но почему это работает. В настоящее время слот является заголовком, и шрифт тоже большой, но если это субтитры, размер шрифта уменьшается. Я также не вижу никаких заявлений от попутного ветра с title
.
Я предоставил tailwind.config.cjs
файл
import defaultTheme from 'tailwindcss/defaultTheme';
import typographyPlugin from '@tailwindcss/typography';
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,json,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
colors: {
primary: 'var(--aw-color-primary)',
secondary: 'var(--aw-color-secondary)',
accent: 'var(--aw-color-accent)',
default: 'var(--aw-color-text-default)',
muted: 'var(--aw-color-text-muted)',
},
fontFamily: {
sans: ['var(--aw-font-sans, ui-sans-serif)', ...defaultTheme.fontFamily.sans],
serif: ['var(--aw-font-serif, ui-serif)', ...defaultTheme.fontFamily.serif],
heading: ['var(--aw-font-heading, ui-sans-serif)', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [typographyPlugin],
darkMode: 'class',
};
Может кто-нибудь объяснить это? Также предоставил ссылку на репо
Атрибут slot
компонента Fragment
указывает какой слотFragment
должен отображаться внутри компонента Hero
.
Если мы посмотрим на компонент Hero, мы увидим:
const {
id,
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
tagline,
content = await Astro.slots.render('content'),
actions = await Astro.slots.render('actions'),
image = await Astro.slots.render('image'),
} = Astro.props;
---
…
{
title && (
<h1
class = "text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200"
set:html = {title}
/>
)
}
<div class = "max-w-3xl mx-auto">
{subtitle && <p class = "text-xl text-muted mb-6 dark:text-slate-300" set:html = {subtitle} />}
Итак, если бы у нас был slot = "title"
, мы бы увидели:
<h1
class = "text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200"
>
Free template for <span class = "hidden xl:inline">creating websites with</span>
<span class = "text-accent dark:text-white highlight"> Astro 4.0</span> + Tailwind CSS
</h1>
А если бы у нас был slot = "subtitle"
, мы бы увидели:
<p class = "text-xl text-muted mb-6 dark:text-slate-300">
Free template for <span class = "hidden xl:inline">creating websites with</span>
<span class = "text-accent dark:text-white highlight"> Astro 4.0</span> + Tailwind CSS
<p>
Таким образом, текст для slot = "title"
больше, потому что элементы внутри Fragment
отображаются внутри тега HTML, который задает больший размер шрифта с помощью text-5xl md:text-6xl
. Тогда как для slot = "title"
элементы будут отображаться внутри HTML-тега с text-xl
, что означает меньший размер шрифта.
Согласно документации: «Вы можете асинхронно отображать содержимое слота в строку HTML, используя Astro.slots.render()
».
Отлично, понял! Что это за Astro.slots.render?