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 { Icon } from "astro-icon/components";
import { getDir } from "../utils/url-utils"; import { getDir } from "../utils/url-utils";
import { formatDateToYYYYMMDD } from "../utils/date-utils";
import PostMetadata from "./PostMeta.astro"; import PostMetadata from "./PostMeta.astro";
import ImageWrapper from "./misc/ImageWrapper.astro"; import ImageWrapper from "./misc/ImageWrapper.astro";
import { umamiConfig } from "../config"; 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> <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> </a>
<!-- metadata -->
<PostMetadata published={published} updated={updated} hideUpdateDate={true} slug={entry.slug} class="mb-2 md:mb-4"></PostMetadata>
<!-- description --> <!-- description -->
<div class:list={["transition text-75 mb-3.5 pr-4 line-clamp-1 md:line-clamp-2"]}> <div class:list={["transition text-75 mb-3.5 pr-4 line-clamp-1 md:line-clamp-2"]}>
{ description || remarkPluginFrontmatter.excerpt } { description || remarkPluginFrontmatter.excerpt }
</div> </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 --> <!-- word count, read time and page views -->
<div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition"> <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>{remarkPluginFrontmatter.words} 字</div>
<div>|</div> <div>|</div>
<div>{remarkPluginFrontmatter.minutes} 分钟</div> <div>{remarkPluginFrontmatter.minutes} 分钟</div>

19
src/components/PostMeta.astro
View File

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