juluo/fuwari
1
0
Fork 0
mirror of https://github.com/afoim/fuwari.git synced 2026-01-31 09:03:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui: 优化布局

Browse Source
This commit is contained in:
二叉树树
2025-12-28 20:15:01 +08:00
parent a4e7beb93a
commit 3c976f29ed
2 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/PostCard.astro
View File

@@ -4,6 +4,7 @@ import type { CollectionEntry } from "astro:content";
import { Icon } from "astro-icon/components";
import { getDir } from "../utils/url-utils";
import { formatDateToYYYYMMDD } from "../utils/date-utils";
import PostMetadata from "./PostMeta.astro";
import ImageWrapper from "./misc/ImageWrapper.astro";
import { umamiConfig } from "../config";
@@ -54,16 +55,18 @@ const { remarkPluginFrontmatter } = await entry.render();
<Icon class="text-[var(--primary)] text-[2rem] transition inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0" name="material-symbols:chevron-right-rounded"></Icon>
</a>
<!-- metadata -->
<PostMetadata published={published} updated={updated} hideUpdateDate={true} slug={entry.slug} class="mb-2 md:mb-4"></PostMetadata>
<!-- description -->
<div class:list={["transition text-75 mb-3.5 pr-4 line-clamp-1 md:line-clamp-2"]}>
{ description || remarkPluginFrontmatter.excerpt }
</div>
<!-- metadata -->
<PostMetadata published={published} updated={updated} hideUpdateDate={true} hidePublishedDate={true} slug={entry.slug} class="mb-2 md:mb-4"></PostMetadata>
<!-- word count, read time and page views -->
<div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition">
<div>{formatDateToYYYYMMDD(published)}</div>
<div>|</div>
<div>{remarkPluginFrontmatter.words} 字</div>
<div>|</div>
<div>{remarkPluginFrontmatter.minutes} 分钟</div>

19
src/components/PostMeta.astro
View File

@@ -10,12 +10,14 @@ interface Props {
published: Date;
updated?: Date;
hideUpdateDate?: boolean;
hidePublishedDate?: boolean;
slug?: string;
}
const {
published,
updated,
hideUpdateDate = false,
hidePublishedDate = false,
slug,
} = Astro.props;
const className = Astro.props.class;
@@ -23,13 +25,14 @@ const className = Astro.props.class;
<div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2", className]}>
<!-- publish date -->
<div class="flex items-center">
<div class="meta-icon"
>
<Icon name="material-symbols:calendar-today-outline-rounded" class="text-xl"></Icon>
{!hidePublishedDate && (
<div class="flex items-center">
<div class="meta-icon">
<Icon name="material-symbols:calendar-today-outline-rounded" class="text-xl"></Icon>
</div>
<span class="text-50 text-sm font-medium">{formatDateToYYYYMMDD(published)}</span>
</div>
<span class="text-50 text-sm font-medium">{formatDateToYYYYMMDD(published)}</span>
</div>
)}
<!-- update date -->
{!hideUpdateDate && updated && updated.getTime() !== published.getTime() && (
@@ -78,8 +81,8 @@ const className = Astro.props.class;
const viewsElement = document.getElementById(`page-views-${slug}`);
const visitorsElement = document.getElementById(`page-visitors-${slug}`);
if (viewsElement) viewsElement.textContent = pageViews;
if (visitorsElement) visitorsElement.textContent = visits;
if (viewsElement) viewsElement.textContent = `${pageViews} 次`;
if (visitorsElement) visitorsElement.textContent = `${visits} 人`;
} catch (error) {
console.error('Error fetching page views:', error);
const viewsElement = document.getElementById(`page-views-${slug}`);