Пользовательские фрагменты в AstroJS

Сейчас начинаю изучать 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',
};

Может кто-нибудь объяснить это? Также предоставил ссылку на репо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
258
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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, который задает больший размер шрифта с помощью text-5xl md:text-6xl. Тогда как для slot = "title" элементы будут отображаться внутри HTML-тега с text-xl, что означает меньший размер шрифта.

Отлично, понял! Что это за Astro.slots.render?

Apple prabha 04.05.2024 19:58

Согласно документации: «Вы можете асинхронно отображать содержимое слота в строку HTML, используя Astro.slots.render()».

Wongjn 04.05.2024 19:59

Другие вопросы по теме