feat: 调整博客页获取数据部分为服务端渲染

apps/frontend/app/(with-header-footer)/blog/[id]/BlogContent.tsx

@@ -0,0 +1,41 @@
+'use client';
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
+import 'highlight.js/styles/github.css'
+import { PhotoProvider, PhotoView } from 'react-photo-view';
+import 'react-photo-view/dist/react-photo-view.css';
+import rehypeRaw from 'rehype-raw'
+import Image from "next/image";
+
+export function BlogContent({ content }: { content?: string }) {
+    return (
+        <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={[rehypeRaw, rehypeHighlight]}
+            components={{
+                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">
+                        <PhotoView src={src as string}>
+                            <div style={{ width: '100%' }}>
+                                <Image src={src as string} width={0} height={0} style={{ width: '100%', height: 'auto' }} unoptimized alt="加载失败" />
+                            </div>
+                        </PhotoView>
+                    </PhotoProvider>
+                ),
+                th: ({ ...props }) => <th className="text-ellipsis text-nowrap border border-zinc-300 p-2" {...props} />,
+                td: ({ ...props }) => <td className="border border-zinc-300 p-1" {...props} />,
+                table: ({ ...props }) => <div className="overflow-x-auto"><table {...props} /></div>,
+                pre: ({ ...props }) => <pre className="rounded-sm overflow-hidden shadow" {...props} />,
+                blockquote: ({ ...props }) => <blockquote className="pl-3 border-l-5" {...props} />,
+                a: ({ ...props }) => <a className="hover:underline" {...props} />,
+            }}
+        >{content}</ReactMarkdown>
+    )
+}