AstroのContent Collectionsでブログをつくる | EvoLab.
Content Collectionsは.mdや.mdxを型安全に管理するためのAstroの機能です。astro@2.0.0で追加されました。 投稿日やタイトルなど、各ファイルで使用するデータに型を定義をすることで、型が間違っていたら実行時やビルド時にエラーが出て安全、というわけです。 ここではContent Collectionsを用いた簡単なブログの構築手順をご紹介します。 インストールnpm create astro@latest以下項目を尋ねられるので選択はお好みで。 How would you like to start your new project? Where should we create your new project? // プロジェクトのディレクトリ How would you like to start your new project? // テンプレート
Astroチュートリアルメモ その5-2,3【動的ルーティングとタグ一覧ページ】
タグのページを作る際に、動的ルーティングを使う。 src/pages/tags/[tag].astroのようにファイルを作り、取りうるURLをgetStaticPathsで指定する。 Next.jsのgetStaticPathsとURLの作り方は同じ。 大きな違いはAstroのgetStaticPathsはNext.jsのgetStaticPathsとgetStaticPropsを合わせた機能を持っているところ。 動的ページの作成 --- import BaseLayout from "../../layouts/BaseLayout.astro"; import BlogPost from "../../components/BlogPost.astro"; export async function getStaticPaths({}) { const allPosts = await
Astro + Pagefindでブログに検索機能を実装する
静的サイト向けの検索ライブラリ Pagefind の 安定版(v1.0.0)がリリースされた のでAstroと一緒に使ってみます。 Pagefindは大規模なサイトでも高速に動作し、帯域幅も最小限にすると謳っていて、HTMLファイルを読み込んでインデックスを作成、検索UIもデフォルトで提供される検索用ライブラリです。通常のフレームワークのビルド成果物を対象にインデックスを生成するので、とても簡単に導入することができます。 また、今回の記事で作成したプロジェクトのソースコードはs7tya/astro-pagefind-playgroundにて公開しています。 Pagefind のインストール デフォルトのテンプレートで作成した新規Astroプロジェクトをベースに、Pagefindを設定していきます。 pagefind @pagefind/default-ui パッケージを追加します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
