あでぃの〇〇製作所

プロフィールページを作りたくなったので、さっそく作ってみました。そしてそのリンクをサイドバーにも追加しています。
プロフィールページ自体は、ブログと同じデータベースを使って、任意の記事を表示するという仕組みにしています。

↓こちらが作成したプロフィールページです。

🫥Profile

プロフィールページは固定ページなので、「特定のslugを持つページを固定ページとして表示する」という実装にしています。

まず、src/pages/profile.astro を新しく作成し、src/pages/[slug].astro をまるっとコピーします。

そのあと、slugから記事を取得している箇所を、固定のslugに置き換えます。このslugは自分しか使わないので、ここはもうハードコードでいいかなと。今回は profile というslugにしました。

const slug = "profile";
const post = await getPostBySlug(slug);
if (!post) {
  Astro.redirect("/404");
}

プロフィールページには投稿日時や更新日時、タグなどは特に必要ないと思うので、それに関する記述は削除しちゃいましょう。

サイドバーにもプロフィールへのリンクを追加しました。検索バーの下あたりに配置しています。

const profilePost = await getPostBySlug('profile')

...中略...

let profileIconURL = getStaticFilePath('/default-og-image.png')
if (profilePost?.FeaturedImage?.Url) {
  try {
    const url = new URL(profilePost.FeaturedImage.Url)
    profileIconURL = filePath(url)
  } catch {
    console.log('Invalid profile image URL: ', profilePost.FeaturedImage.Url)
  }
}

...中略...

<aside>
  <SearchButton />
  <div class="profile-link">
    <a href={getNavLink('/profile')}>
      <img src={profileIconURL} alt="Profile icon" class="profile-icon" />
      <span>プロフィール</span>
    </a>
  </div>
  <slot name="aside" />
</aside>

プロフィールページが通常のポスト一覧に出てくるのはちょっと違和感があるので、一覧から除外しています。

export async function getAllBlogPosts(): Promise<Post[]> {
  const allPosts = await getAllPosts()
  return allPosts.filter(post => post.Slug !== 'profile')
}

この変更を踏まえて、getPosts() など一覧を取得する系の関数では getAllPosts() の代わりに getAllBlogPosts() を使うようにしました。

というのも、getAllPosts() の中でフィルターしてしまう（あるいは _validPageObject() で除外してしまう）と、getPostBySlug() でも除外されてしまい、プロフィールページが取得できなくなってしまうからです。

そのため、

• slugやpageIdで特定の記事を取得する → 全件から検索
• タグやページ番号などで記事一覧を取得する → フィルター後のリストを使う

という形で実装しています。

CSSなど見た目を整えるものはいい感じに調整してください。

ということで、プロフィールページが無事完成しました。バンザイ！

育児の合間にうまく時間を使って、少しずつアウトプットを頑張っていこうと思います。そのためにも、まずは下地作りから。

僕は完全にカタチから入るタイプなんです。