src/components/layout/PostMeta.astro

---
import { Icon } from "astro-icon/components";
import { commentConfig } from "@/config";
import I18nKey from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import { formatDateToYYYYMMDD } from "@/utils/date-utils";
import { getCategoryUrl, getTagUrl } from "@/utils/url-utils";

export interface Props {
	published: Date;
	updated?: Date;
	category?: string;
	tags?: string[];
	hideUpdateDate?: boolean;
	hideTagsForMobile?: boolean;
	isHome?: boolean;
	className?: string;
	id?: string;
	words?: number;
	minutes?: number;
	showWordCount?: boolean; // 是否显示字数统计，默认false显示标签
	customPath?: string;
	pinned?: boolean;
}

const {
	published,
	updated,
	category,
	tags,
	hideUpdateDate,
	hideTagsForMobile,
	isHome,
	className = "",
	id,
	words,
	minutes,
	showWordCount = false,
	customPath,
	pinned,
} = Astro.props;

const path = customPath || (id ? `/posts/${id}` : "");
---

<div
  class:list={[
    "flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2",
    className,
  ]}
>
  <!-- pinned -->
  {
    pinned && (
      <div class="pinned-btn flex items-center gap-1 bg-(--btn-regular-bg) text-(--btn-content) rounded-md px-2 py-1.5 font-bold">
        <Icon name="material-symbols:pinboard" class="text-xl" />
        <span class="text-sm">{i18n(I18nKey.pinned)}</span>
      </div>
    )
  }

  <!-- publish date -->
  <div class="flex items-center">
    <div class="meta-icon">
      <Icon
        name="material-symbols:calendar-today-outline-rounded"
        class="text-xl"
      />
    </div>
    <span class="text-50 text-sm font-medium"
      >{formatDateToYYYYMMDD(published)}</span
    >
  </div>

  <!-- update date -->
  {
    !hideUpdateDate && updated && updated.getTime() !== published.getTime() && (
      <div class="flex items-center">
        <div class="meta-icon">
          <Icon
            name="material-symbols:edit-calendar-outline-rounded"
            class="text-xl"
          />
        </div>
        <span class="text-50 text-sm font-medium">
          {formatDateToYYYYMMDD(updated)}
        </span>
      </div>
    )
  }

  <!-- categories -->
  <div class="flex items-center">
    <div class="meta-icon">
      <Icon name="material-symbols:book-2-outline-rounded" class="text-xl" />
    </div>
    <div class="flex flex-row flex-nowrap items-center">
      <a
        href={getCategoryUrl(category || "")}
        aria-label={`View all posts in the ${category} category`}
        class="link-lg transition text-50 text-sm font-medium
                            hover:text-(--primary) dark:hover:text-(--primary) whitespace-nowrap"
      >
        {category || i18n(I18nKey.uncategorized)}
      </a>
    </div>
  </div>

   <!-- word count and read time (only for post list) -->
   {
     showWordCount && words !== undefined && minutes !== undefined && (
       <>
         <!-- word count -->
         <div class="flex items-center">
           <div class="meta-icon">
             <Icon
               name="material-symbols:article-outline-rounded"
               class="text-xl"
             />
           </div>
           <div class="text-50 text-sm font-medium">
             {words}
             {" " + i18n(words === 1 ? I18nKey.wordCount : I18nKey.wordsCount)}
           </div>
         </div>
         
{/*          <!-- read time -->
         <div class="flex items-center">
           <div class="meta-icon">
             <Icon
               name="material-symbols:schedule-outline-rounded"
               class="text-xl"
             />
           </div>
           <div class="text-50 text-sm font-medium">
             {minutes}
             {" " +
               i18n(minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
           </div>
         </div> */}
       </>
     )
   }

   <!-- tags (only for post detail page) -->
   {
     !showWordCount && (
       <div class:list={["items-center", {"flex": !hideTagsForMobile, "hidden md:flex": hideTagsForMobile}]}>
         <div class="meta-icon">
           <Icon name="material-symbols:tag-rounded" class="text-xl" />
         </div>
         <div class="flex flex-row flex-nowrap items-center">
           {(tags && tags.length > 0) && tags.map((tag, i) => (
             <div class:list={[{"hidden": i == 0}, "mx-1.5 text-(--meta-divider) text-sm"]}>/</div>
             <a href={getTagUrl(tag)} aria-label={`View all posts with the ${tag.trim()} tag`}
                class="link-lg transition text-50 text-sm font-medium
                             hover:text-(--primary) dark:hover:text-(--primary) whitespace-nowrap">
               {tag.trim()}
             </a>
           ))}
           {!(tags && tags.length > 0) && <div class="transition text-50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>}
         </div>
       </div>
     )
   }

  <!-- Twikoo访问量统计（首页不显示，且文章访问量统计启用时显示） -->
  {
    !isHome &&
      commentConfig.type === 'twikoo' &&
      commentConfig.twikoo?.visitorCount &&
      id && (
        <div class="flex items-center">
          <div class="meta-icon">
            <Icon
              name="material-symbols:visibility-outline-rounded"
              class="text-xl"
            />
          </div>
          <span class="text-50 text-sm font-medium mr-1">
            {i18n(I18nKey.pageViews)}
          </span>
          <span class="text-50 text-sm font-medium" id="twikoo_visitors">
            {i18n(I18nKey.pageViewsLoading)}
          </span>
        </div>
      )
  }
  <!-- Waline访问量统计（首页不显示、仅type为waline时显示） -->
  {
    !isHome &&
      commentConfig.type === 'waline' &&
      commentConfig.waline?.visitorCount &&
      id && (
        <div class="flex items-center">
          <div class="meta-icon">
            <Icon name="material-symbols:visibility-outline-rounded" class="text-xl" />
          </div>
          <span class="text-50 text-sm font-medium mr-1">
            {i18n(I18nKey.pageViews)}
          </span>
          <span class="text-50 text-sm font-medium waline-pageview-count" data-path={path}>{i18n(I18nKey.pageViewsLoading)}</span>
        </div>
      )
  }
    <!-- artalk访问量统计（首页不显示、仅type为artalk时显示） -->
    {
        !isHome &&
        commentConfig.type === 'artalk' &&
        commentConfig.waline?.visitorCount &&
        id && (
                    <div class="flex items-center">
                        <div class="meta-icon">
                            <Icon name="material-symbols:visibility-outline-rounded" class="text-xl" />
                        </div>
                        <span class="text-50 text-sm font-medium mr-1">
                            {i18n(I18nKey.pageViews)}
                        </span>
                        <span class="text-50 text-sm font-medium artalk-pv-count" data-path={path}>{i18n(I18nKey.pageViewsLoading)}</span>
                    </div>
        )
    }
</div>