アストロレシピコレクションウェブサイト
このシリーズでは、我々はAstroのレシピのウェブサイトを構築している.我々は既にスタートしたsetting up our collections .
今日、我々はどのように我々はホームページ上の5つの最新記事をレンダリングすることを学ぶでしょう.
これまでのところ、我々はアストロが付属しているデフォルトのホームページを使用している.私たちは、ショーケースに最後の5つのレシピを動的に変更したい.
これを始めるには、ホームページをきれいにしましょう.このように、我々は最初から空白のキャンバスを持っている.
このセクションでは、我々はまた、5つの最後のレシピをロードします.
それから、我々は彼らの日付に基づいて記事をソートして、5つのアイテムを返すだけで配列をスライスします.
その後、これらの結果をループし、各レシピの記事をレンダリングします.
カードをクリックすると、そのレシピに私たちがかかります.
それは少し良く見えるようにいくつかの非常に基本的なCSSを追加しましょう.
あなたの頭の中に次のコードを置くことができます
私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or
今日、我々はどのように我々はホームページ上の5つの最新記事をレンダリングすることを学ぶでしょう.
ホームページへのコレクションの追加
これまでのところ、我々はアストロが付属しているデフォルトのホームページを使用している.私たちは、ショーケースに最後の5つのレシピを動的に変更したい.
Note: Where dynamically means on every build.
これを始めるには、ホームページをきれいにしましょう.このように、我々は最初から空白のキャンバスを持っている.
---
const title = 'Astro Recipe Website';
---
<!-- HTML Code -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>{title}</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/style/global.css">
</head>
<body>
</body>
</html>
ご覧のように、私たちは再びfrontmatterのセクションを持っています.これは、我々がタイトルを定義した3つのダッシュの間のセクションです.このセクションでは、我々はまた、5つの最後のレシピをロードします.
--------
const title = 'Astro Recipe Website';
const recipes = Astro.fetchContent('./recipe/*.md')
.sort((a, b) => a.date.localeCompare(b.date)).slice(0, 5);
--------
我々は、コンテンツを読み込むことと同じ方法を使用してfetchContent
アストロの能力.それから、我々は彼らの日付に基づいて記事をソートして、5つのアイテムを返すだけで配列をスライスします.
その後、これらの結果をループし、各レシピの記事をレンダリングします.
<section>
{recipes.map(recipe => (
<article>
<a href="{recipe.url}">
<img src="{recipe.image}" alt="{recipe.title}" />
<h3>{recipe.title}</h3>
</a>
</article>
))}
</section>
これは私たちの5つのレシピでセクションをレンダリングし、画像とタイトルで見出しを示します.カードをクリックすると、そのレシピに私たちがかかります.
それは少し良く見えるようにいくつかの非常に基本的なCSSを追加しましょう.
あなたの頭の中に次のコードを置くことができます
index.astro
ファイル.<style lang="scss">
section {
display: grid;
grid-template: '1fr 1fr 1fr 1fr 1fr';
}
article {
padding: 1rem;
img {
object-fit: cover;
width: 100%;
height: 200px;
margin-bottom: 0.5rem;
}
h3 {
color: #fff;
}
}
</style>
あなたは完全なコードを見つけることができますGitHub .読んでいただきありがとうございます、接続しましょう!
私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or
Reference
この問題について(アストロレシピコレクションウェブサイト), 我々は、より多くの情報をここで見つけました https://dev.to/dailydevtips1/astro-recipe-collection-website-part-2-homepage-rendering-99lテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol