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

アストロで構築された我々のレシピのウェブサイトは、最終的に形を取っている.私たちはrecipe collection 設定、作成filter pages , そして今日、スタイリングを見て、コンポーネントを注文します.
今日何を築くか

我々のプロジェクトに

ナビゲーションコンポーネント

ヘッダーコンポーネント

レシピコンポーネント

ページネーションコンポーネント

Astroプロジェクトへの風車の追加

これは短いバージョンになります.興味があるならば、私の完全な記事に続いてくださいintegrating Tailwind in Astro .
必要なことを要約する

据え付ける

npm install -D tailwindcss

クリエイトアtailwind.config.js ファイル

module.exports = {
  mode: 'jit',
  purge: ['./public/**/*.html', './src/**/*.{astro,js,jsx,ts,tsx,vue}'],
};

変更するastro.config.js ファイル

devOptions: {
  tailwindConfig: './tailwind.config.js';
}

Tarwind風をスタイルに加えてくださいglobal.css ファイル

@tailwind base;
@tailwind components;
@tailwind utilities;

そして、これは我々のAstroウェブサイトで最新のTailwindバージョンを使うのを許します.

でのナビゲーションコンポーネントの作成

今まで、我々はウェブサイトをナビゲートするための優れた方法を持っていないので、先に行き、作成しましょうNav.astro コンポーネントのディレクトリ.
メニューを作成するために使用できる配列を作成する前の部分を使います.

---
const menu = [
  { url: '/', text: 'Home' },
  { url: '/recipes', text: 'Find recipes'},
  { url: '/recipes/all', text: 'All recipes'}
];
---

我々は、各メニュー項目をループすることができますので、唯一のクラスのコードを1つの行を持っているので、後で維持することが容易になります.
次に、ヘッダーのHTML部分を作成します.

<header class="border-b-2 border-gray-100">
  <nav class="flex justify-between items-center  max-w-7xl mx-auto px-4 py-8">
    <h1 class="text-pink-400 text-4xl uppercase tracking-narrow">
      <a href="/">Recipe blog</a>
    </h1>
    <ul class="flex">
      {menu.map(item => (
      <li>
        <a
          class="mx-4 block font-sans font-bold uppercase tracking-wider text-black no-underline "
          href="{item.url}"
          >{item.text}</a
        >
      </li>
      ))}
    </ul>
  </nav>
</header>

このコードはメニューとして機能します.
このメニューは、左側のタイトルと右側の実際のメニューボタンが表示されます.
使用するCSS Flex 正しく項目を整列する.ロゴパーツとナビゲーションとの間にスペースが欲しいjustify-between そのために.
このコンポーネントを使用するには、次の構文を使用できます.

--------
import Nav from '../components/Nav.astro';
--------
<!-- HTML Content -->
<Nav />

ヘッダーコンポーネント

作成する次のコンポーネントはヘッダーコンポーネントです.ヘッダーは、タイトルとテキストである2つの特性を持っている定期的な構成要素です.
このコンポーネントを作成するので、ページ間の共有が簡単です.
次へ進むHeader.astro コンポーネントディレクトリ内のファイル.

--------
export interface Props {
  title: string;
  text: string;
}
const { title, text } = Astro.props;
--------

このコンポーネントが持つプロパティを定義します.
ヘッダーのHTML部分を作りましょう.

<section class="bg-pink-400 p-8 text-center">
  <h1 class=" text-white text-5xl mb-4">{title}</h1>
  <p class="text-pink-100 text-xl">{text}</p>
</section>

以下のようなページでこれを使えます.

--------
import Header from '../components/Header.astro';
--------
<!-- HTML Content -->
<Header title="Our latest recipes" text="These are latest six recipes added to our blog." />

このようにヘッダを返します.

再利用可能なレシピコンポーネントの作成

あなたが複数のページで我々のレシピをループする前に、あなたが見たかもしれないように.これは、重複するコードを引き起こしたので、自分自身のコンポーネントにレシピを移動することでこれをクリーンアップしましょう.
クリエイトアRecipe.astro コンポーネントディレクトリ内のファイル.
ナビゲーションコンポーネントで見たように、データセットのプロパティを定義できます.

--------
export interface Props {
  recipe: {
      url: string;
      title: string;
      image: string;
  };
}
const { recipe } = Astro.props;
--------

以下のようにこのデータを以下のHTMLで使用できます:

<article class="px-2 py-4 text-center">
  <a href="{recipe.url}" class="flex flex-col hover:opacity-60">
    <img class="object-cover h-[200px]" src="{recipe.image}" alt="{recipe.title}" />
    <h3 class="text-2xl leading-tighter pt-2">{recipe.title}</h3>
  </a>
</article>

このレシピを使用するには、例えば、ホームページ上でレシピループを変更できます.

--------
import Recipe from '../components/Recipe.astro';
--------
<!-- HTML Content -->
<section class="grid grid-cols-3 py-8">
    {recipes.map(recipe => (<Recipe recipe={recipe} />))}
</section>

方法クリーナー、右?

アストロページネーションコンポーネント

もう1つの定期的な要素は、ページ付けコンポーネントです.私たちは今、3つの異なるページでこれを使いました.
我々は先に行くことができますし、作成Pagination.astro コンポーネントディレクトリ内のコンポーネント.
ページの作成にはかなりのデータセットがありますが、単純なページ付けの前と次の要素のみを使用します.

--------
export interface Props {
  recipe: {
      url: {
          prev: number,
          next: number
      };
  };
}
const { data } = Astro.props;
--------

では、HTMLをレンダリングしましょう.この特定の要素のJSX条件付きレンダリングを使用して、1つ以上の項目があるかどうかを確認します.

{
  data.last !== 1 && (
    <footer class="text-center py-8">
      <h2 class="text-xl text-bold uppercase mb-4">More recipes</h2>
      <ul class="flex justify-center">
        <li>
          <a
            class="flex mx-2 justify-center items-center h-12 w-12 rounded bg-pink-200"
            href={data.url.prev || '#'}
          >
            &#60;
          </a>
        </li>
        <li>
          <a
            class="flex mx-2 justify-center items-center h-12 w-12 rounded bg-pink-200"
            href={data.url.next || '#'}
          >
            &#62;
          </a>
        </li>
      </ul>
    </footer>
  );
}

フッターは1つ以上のページがある場合のみレンダリングされます.もしそうなら、それは前と次のボタンが表示されます.
このコンポーネントを使用するには、次の構文を使用できます.

--------
import Pagination from '../../components/Pagination.astro';
--------
<!-- HTML Content -->
<Pagination data={page} />

そして、これは次のようにページ付けをします:

結論

この記事をラップするには、これらのコンポーネントにビルドして、いくつかの小さなスタイリング要素を追加するすべてのコード例を置き換えました.
私は素晴らしいデザイナーではないが、これは簡単にスタイルをあなたのウェブサイトをどのように表示する必要があります!

私も完全なコードをアップロードしましたGitHub .
そして、あなたは実際に結果を見ることができますRecipe demo website .

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or