スロットを使用して Astro でレイアウトを構築する

4590 ワード
javascript programming webdev astro テキストリンク

スロットを使用して Astro でレイアウトを構築する



NuxtJS や NextJS などのフレームワークから来た私は、常にレイアウト機能が好きでした.基本的に、新しいコンポーネントを作成し、それにオリジナルのコンテンツを追加し、ヘッダー、フッターなどのすべての相互コンポーネントを含むレイアウトを追加します.

Astro を学び始めた当初は、これを実現する方法を直接見たことがありませんでした. Astro は、非常に強力な HTML を作成するように感じますが、これは素晴らしいことですが、すべてのページでヘッダー コンポーネントを再インポートするのが嫌いでした.

Astro でもう少し実験を重ねた後、実際にこれが可能であることがわかりました.これは、私が慣れ親しんでいる NuxtJS とは異なるアプローチ方法です.

NuxtJS でレイアウトを構築する



Nuxt でレイアウトを構築するのは非常に簡単です (または、私はそれに非常に慣れています).新しいファイルを作成する layouts フォルダーがあります

<template>
  <div>
    <TheHeader />
    <Nuxt /> <!-- The page content will then go here -->
    <TheFooter />
  </div>
</template>


Nuxt レイアウト コンポーネントの名前が Default.vue の場合、ページに layout: 'default を追加するだけでレイアウトを使用できます. <Nuxt /> 要素は、ページ Vue テンプレートの <template> コンテンツに置き換えられます.

<template>
  <main>
    <h1>Look ma, a layout</h1>
    <p>works great right?</p>
  </main>
</template>

<script>
export default {
  layout: 'default',
}
</script>


これは、テンプレートとレイアウトを定義して使用する簡単な方法であり、実際にかなり慣れてきました.それが (私が思うに) Astro でこれまで使用したことがなかった理由です.

アストロのやり方



Astro では、これを行うのも実際には非常に簡単です.他のフレームワークについて知っていることは忘れてください.

レイアウトを定義する


/src/layouts フォルダーに新しい Astro テンプレートを定義し、それを Default.astro と呼びましょう.このテンプレートでは、Astro <slot /> コンポーネントを使用して、ページのコンテンツのどこにレンダリングするかを Astro に指示します.もちろん、すべてのページには異なるコンテンツがあり、 <YourHeadComponent /> 、 <YourHeaderComponent /> 、および <YourFooterComponent /> が共有されます.

--------
import YourHeadComponent from '../components/layout/Head.astro
import YourHeaderComponent from '../components/layout/Header.astro
import YourFooterComponent from '../components/layout/Footer.astro
--------
<html lang="en">
  <head>
    <YourHeadComponent />
  </head>
  <body>
    <YourHeaderComponent />
    <slot /> <!-- The page will render it's content here -->
    <YourFooterComponent />
  </body>
</html>


ページでレイアウトを使用する



上記で定義したレイアウトも使用するには、/src/pages フォルダーに新しいページを作成し、定義したばかりの <DefaultLayout> コンポーネントをインポートするだけです.

--------
import DefaultLayout from '../layouts/Default.astro
--------
<DefaultLayout>
  <main>
    <h1>Look ma, a layout</h1>
    <p>works great right?</p>
  </main>
</DefaultLayout>


これにより、Astro はさらに強力で用途の広いものになります.
新しいオープン ソースへの貢献
リュックサック、キュー、スタック