202226701045/src/app/tab1/tab1.page.html

<!-- 头部一栏内容左侧分布一个日历图标（作用为点击进入一个导航页面，内面按照时间排布，每日的图文作为展示锚点，点击后进入对应日期发布的内容），右侧始终展示一个今日按钮，点击后返回最新内容的首页 -->
<!-- //calendar没有正常显示图标 -->
<!-- //这里的cards分别需要分给#个内容，图文（一张图片，下面附有文字内容诗句），视频，文章故事（扩写古诗），诗歌内容（纯粹的诗歌），音频内容（吟诵诗歌） -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="navigateToDiary()">
        <ion-icon name="calendar"></ion-icon>
        <span>日历</span>
      </ion-button>
    </ion-buttons>

    <ion-title>诗</ion-title>

    <ion-buttons slot="end">
      <ion-button (click)="navigateToToday()">
        <ion-icon name="today-outline"></ion-icon>
        <span>今日</span>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="content-wrapper">

    <div class="main-content">
      <div class="card-section">

        <div class="cards">
          <div class="card" *ngFor="let item of contentItems" (click)="viewItemDetails(item)">
            <img [src]="item.image" alt="{{ item.title }}" class="card-image" *ngIf="item.image">
            <h4>{{ item.title }}</h4>
            <p>{{ item.snippet }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</ion-content>
<!-- <app-explore-container name="Tab 1 page"></app-explore-container> -->