覚書 (4) | ワイのAstro🚀Blog

ページ作成

いわゆる固定ページは .astro か .md(x) を選択できる。

.astro
- いろいろできる。Markdown はパースしてくれないので HTML を書くのが面倒
.md
- 当然 Markdown は可で HTML も書ける。<script> も書ける。でもサーバ側の何か（コンポーネントとか）に触ることができない
.mdx
- 基本は .md で、さらに JSX やコンポーネントを使える。最強か?

どうせ中身は大部分が HTML なので .md を採用する。

適当なページを作る

/src/pages/page-test.md を作成して追記

/src/pages/page-test.md

---
title: ページテスト
layout: '../layouts/BlogLayout.astro'
---

## ページのテスト

タイトル

レイアウトに .md のタイトルも渡したい。なぜならタイトルが空だと頭がおか（略）

.md ファイルの先頭にある --- の中身は frontmatter という変数で受け取れるので、frontmatter.title がセットされていればそちらをページのタイトルにする。

title 以外に使える変数 → Markdown レイアウトの Props

/src/layouts/BlogLayout.astro

---
import Head from './Head.astro';
import Header from './Header.astro';
import Footer from './Footer.astro';
import '../styles/style.css';

interface Props {
  title?: string;
  frontmatter?: {
    title?: string;
  };
}
const { title = 'ワイのAstro🚀Blog', frontmatter } = Astro.props;
const pageTitle = frontmatter?.title ?? title;
---

<html lang="ja">
  <Head title={pageTitle} />
  <body>
    <Header title={pageTitle} />
    <main>
      <slot />
    </main>
    <Footer />
  </body>
</html>

リンク（重要）

/src/layouts/Nav.astro

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/page-test/">ページテスト</a></li>
  </ul>
</nav>

一覧