アストロレシピコレクションウェブサイト

7898 ワード
astro テキストリンク
このシリーズでは、我々はAstroのレシピのウェブサイトを構築している.我々は既にスタートしたsetting up our collections .
今日、我々はどのように我々はホームページ上の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
Javaの実行、変数、数値のデータ型
Redisチュートリアル-Pipeline