Astro フレームワークでフッターコンポーネントを利用する

2024-07-03

はじめに

Astro プロジェクトでフッターコンポーネントを作成します。

コンポーネント作成

src/components ディレクトリ配下に src/components/Footer.astro を作成します。
コピーライトに JavaScript で取得した今年の西暦と config からインポートしたサイトのタイトルをリンクで表示します。

src/components/Footer.astro

---
// Footer.astro
import { SITE } from "../config";
---

<footer>
  <div>
    <p>
      &copy; {new Date().getFullYear()}
      <a href="/">{SITE.title}</a>
    </p>
  </div>
</footer>

コンポーネントを利用する

フッターコンポーネントを表示するページで import でコンポーネントを宣言して利用します。

pages/index.astro

---
// index.astro
import Footer from "../components/Footer.astro";
---

<html>
  ・
  ・
  ・
  <Footer />
</html>

フッターが表示されているこを確認します。

参考URL

コンポーネント