tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化博客页样式、语义化
All checks were successful
Deploy to K3s / deploy (push) Successful in 2m55s
Details

Browse Source
This commit is contained in:
tone
2025-12-20 23:18:06 +08:00
parent d7c84ea0ce
commit dc938fdb01
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/frontend/app/(with-header-footer)/blog/[id]/page.tsx
View File

@@ -59,18 +59,20 @@ export default function Blog() {
</div>
)}
{data && (
<>
<h1 className="text-center text-3xl font-bold mt-10">{data.title}</h1>
<p className="text-sm text-zinc-500 text-center my-5">发布于：{new Date(data.createdAt).toLocaleString()}</p>
<article className="w-full">
<header className="flex flex-col items-center">
<h1 className="text-center text-2xl sm:text-3xl font-bold mt-10 transition-all duration-500">{data.title}</h1>
<time className="text-sm text-zinc-500 text-center my-2 sm:my-5 mb-5 transition-all duration-500">发布于：{new Date(data.createdAt).toLocaleString()}</time>
</header>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw, rehypeHighlight]}
components={{
h1: ({ ...props }) => <h1 className="text-3xl font-bold py-2" {...props} />,
h2: ({ ...props }) => <h2 className="text-2xl font-bold py-1" {...props} />,
h3: ({ ...props }) => <h3 className="text-xl font-bold py-0.5" {...props} />,
h4: ({ ...props }) => <h4 className="text-lg font-bold" {...props} />,
h5: ({ ...props }) => <h5 className="text-md font-bold" {...props} />,
h1: ({ ...props }) => <h2 className="text-3xl font-bold py-2" {...props} />,
h2: ({ ...props }) => <h3 className="text-2xl font-bold py-1" {...props} />,
h3: ({ ...props }) => <h4 className="text-xl font-bold py-0.5" {...props} />,
h4: ({ ...props }) => <h5 className="text-lg font-bold" {...props} />,
h5: ({ ...props }) => <h6 className="text-md font-bold" {...props} />,
p: ({ ...props }) => <p className="py-1 text-zinc-700" {...props} />,
img: ({ src }) => (
<PhotoProvider className="w-full">
@@ -89,7 +91,7 @@ export default function Blog() {
a: ({ ...props }) => <a className="hover:underline" {...props} />,
}}
>{data.content}</ReactMarkdown>
</>
</article>
)}
{data && (