AstroJS 中的自定义片段

Question

目前正在开始学习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>

在这里我看到一个参数作为槽。所以我尝试查看 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',
};

有人可以解释一下吗？还提供了回购链接

Answer 1

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 标记内呈现，该 HTML 标记使用

text-5xl md:text-6xl

指定更大的字体大小。而对于

slot="title"

，元素将在具有

text-xl

（字体较小）的 HTML 标签内呈现。