アストロレシピコレクションウェブサイト
Note: Update 12-08-2021: Rewrite collections to Astro dynamic routing
私の妻はchef 知らない人のために、彼女は多くのレシピを持っています.
私は、それがデジタル料理本にこれらを変えるのがクールであると思いました.
そして何よりもアストロよりも使用するか?
今日は何を学びますか
別の記事では、次の追加の要素について作業します.
データセットの設定
新しいアストロプロジェクトの設定を始めましょう.
mkdir astro-recipe && cd $_
npm init astro@next
npm install
Note: This article uses the next version of Astro as this will be the new way of using collections. This article will be updated once this is merged.
それから、我々は前進して、データの我々のセットをつくります.
何かを作成する前に、私はアーキテクチャとアストロのルーティングを説明しましょう.デフォルトでは、
pages フォルダ.我々は常に
index.astro 我々のデフォルトのインストールの我々の出発ホームページとしてのファイル.次に何を追加するには、単一のレシピページです.私の場合、次のような構造を持っています.
domain.com/recipe/recipe-slug
recipe フォルダ内のpages アストロのフォルダ.そのフォルダの中で、我々は我々のレシピMarkdownファイルをつくることができます.
MarkdownファイルはFrontMatterキーを持つことができます.これはあなたのファイルの一番上にあるデータの特別なセットです
--- インスタンス.Note: You can see the
---as a code fence, which can evaluate the code inside
レシピの例は次のようになります.
---
layout: '../../layouts/recipe.astro'
title: Classic Roast Chicken
meal_type: Dinner
course: Roast
diet: Healthy
main_ingredient: Meat and chicken
date: 2021-08-05
image: /images/classic-roast-chicken.jpg
---
# Markdown flavored recipe content
これは後で有用です.
私たちの場合では、いくつかのタイプを後でフィルタリングし、より魅力的にするためのイメージを定義しました.
注意すべきもう一つの重要な点は、レイアウトを定義したことです.
layout: '../../layouts/recipe.astro';
私たちは
recipe.astro インlayout フォルダ.ファイルには次の内容があります.
下記は、我々がAstro柱から内容を取り戻すことができる部分を見ます.
これはマークダウンファイルからデータを解析するアトムの方法です.
--------
const { content } = Astro.props;
--------
<!--HTML Content-->
<html>
<head>
<title>{content.title}</title>
</head>
<body>
<main class="wrapper">
<h2 class="title">{content.title}</h2>
<img width="500px" class="img" src={content.image} alt={content.title}>
<article class="article">
<slot />
</article>
<footer class="footer">
<a class="posts" href="/recipes">All Recipes</a>
</footer>
</main>
</body>
</html>
現在、我々はアストロを走らせることができます.
npm start
http://localhost:3000/recipe/classic-roast-chicken
メインレシピコレクションページの作成
私たちが個々のページを持っているのはかなり涼しいです、しかし、我々には1つの大きな概要ページで彼らを示す方法がありません.
先に進み、そのような概要ページを作りましょう.
ページにつき5つのレシピを示します.
Note: Click here for more information on the Astro Dynamic Routing.
Astroのコレクションページを作成するには、ブラケットにラップされたファイルを作成する必要があります.私たちのコレクションは
recipes , 私たちはまずrecipes フォルダ内のpages フォルダ.その中で我々は
[...page].astro フォルダ.つのドットは、空白のURLとページ付きのURLを使用できることを確認します.
このファイルをレシピファイルのコレクションにしましょう.
--------
export async function getStaticPaths({paginate}) {
const allRecipes = Astro.fetchContent('./../recipe/*.md')
.sort((a, b) => a.date.localeCompare(b.date));
return paginate(allRecipes, {pageSize: 5});
}
const {page} = Astro.props;
--------
我々は
getStaticPaths これはAstroで動的ルーティングのためのデフォルトのエクスポート機能です.この関数の中で、我々はすべてのレシピを日付順に並べ替えを定義します.
それから、これらのレシピとページあたりの量を含むPaginateオブジェクトを返します.
アストロは、現在我々のために論理とページ創造の世話をします.
これらのレシピをレンダリングするには、次のHTMLを使用できます
<html lang="en">
<head>
<title>Pagination Example</title>
</head>
<body>
<h1>All recipes</h1>
{page.data.map((recipe) => (
<a href="{recipe.url}">
<h1>{recipe.title}</h1>
</a>
))}
</body>
</html>
かなり良いが、どのように我々は今、次のページに5つのレシピを得るのですか?
<footer>
<h4>Page {page.current} / {page.last}</h4>
<nav class="nav">
<a class="prev" href={page.url.prev || '#'}>Prev</a>
|
<a class="next" href={page.url.next || '#'}>Next</a>
</nav>
</footer>
我々は、ユーザーが現在どのページと合計ページ数であるかを示したいです.ナビゲーションリンクを表示します.
そして、それは今日の記事のためです.次の記事では、私たちのホームページ上の最後の5つのレシピを表示する方法についての作業を開始します.
今日のコードをチェックアウトする場合は、次のことを見つけることができますGitHub repo .
読んでいただきありがとうございます、接続しましょう！
私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or
Reference
この問題について(アストロレシピコレクションウェブサイト), 我々は、より多くの情報をここで見つけました https://dev.to/dailydevtips1/astro-recipe-collection-website-part-1-setup-collections-245kテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol