目標：在部落格存檔頁面中使用 Card 元件

首先，我將 CardComponent 匯入到 BlogComponent 中。 然後，我修改了範本，以在卡片上顯示部落格標題、描述、發布日期和超連結。點擊超連結後，用戶將被路由到部落格文章。該頁面還以 Flex Box Layout 排列卡片。

修改 PostAttributes

export default interface PostAttributes {
  title: string;
  slug: string;
  description: string;
  coverImage: string;
  datePublished: string;
}

在 interface 中新增一個屬性來儲存部落格文章的發布日期 (datePublished) 。

導入卡片元件

導入 CardComponent 和 DatePipe 在 imports 中。

import { injectContentFiles } from '@analogjs/content';
import { DatePipe } from '@angular/common';
import { CardComponent } from '../../components/card.component';
import PostAttributes from '../../post-attributes';

@Component({
  selector: 'app-blog',
  standalone: true,
  imports: [RouterLink, CardComponent, DatePipe],
  template: `
    <h1 class="mb-6">Blog Archive</h1>
    <div class="flex flex-wrap justify-around">
      @for (post of posts; track post.attributes.slug) {
        @let attributes = post.attributes;
        <blog-card class="grow shrink basis-1/3 mb-8">
          <h2 class="m-0 pl-5 underline text-2xl mb-4">{{ attributes.title }}</h2>
          <p class="text-left m-0 mb-4">{{ attributes.description }}</p>
          <div footer class="flex justify-between px-5">
            <p class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
              {{ attributes.datePublished | date:'MMMM dd, YYYY' }}
            </p>
            <a class="block" [routerLink]="['/blog/', attributes.slug]">Read</a>
          </div>
        </blog-card>
      }
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class BlogComponent {
  readonly posts = injectContentFiles<PostAttributes>();
}

<div class="flex flex-wrap justify-around">

該頁面具有 Flex Box Layout，並且 justify-content 是 space-around。

<blog-card class="grow shrink basis-1/3 mb-8">

每行有三張卡，因為 flex-basis 為 33.33%。

<blog-card class="grow shrink basis-1/3 mb-8">
   <h2 class="m-0 pl-5 underline text-2xl mb-4">{{ attributes.title }}</h2>
   <p class="text-left m-0 mb-4">{{ attributes.description }}</p>
   <div footer class="flex justify-between px-5">
        <p class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
              {{ attributes.datePublished | date:'MMMM dd, YYYY' }}
        </p>
        <a class="block" [routerLink]="['/blog/', attributes.slug]">Read</a>
   </div>
</blog-card>

在範本中，將 放置在 for 迴圈內以顯示標題、描述和發布日期。標題和描述將投影到預設的 ng-content，發布日期和超連結將投影到具有 footer屬性的 ng-content。 DatePipe 將發布的日期格式化為 "MMMM dd, YYYY" 格式。

複製 content 資料夾中的 Markdown 文件，重新整理頁面並驗證結果。

導覽至 http://localhost:5173/blog

該應用程式顯示部落格存檔頁面的新設計。

Github Repo:
https://github.com/railsstudent/ironman2024-analog-blog/blob/main/src/app/pages/blog/index.page.ts