+
+
{
- // 粒子动画完成后，延迟显示图片
setTimeout(() => {
setShowImage(true);
- }, 800); // 延迟时间可以根据需要调整
+ }, 800);
}}
onAnimationComplete={() => {
setShowImage(true);
diff --git a/frontend/interface/post.ts b/frontend/interface/post.ts
index 529c72b..7d50201 100644
--- a/frontend/interface/post.ts
+++ b/frontend/interface/post.ts
@@ -5,7 +5,7 @@ export interface Post {
title?: string; // 标题
metaKeywords: string; // 元关键词
metaDescription: string; // 元描述
- content: string; // 内容
+ content: string; // Markdown 格式的内容
status: string; // 状态
isEditor: boolean; // 是否为编辑器
draftContent?: string; // 草稿内容
diff --git a/frontend/package.json b/frontend/package.json
index fc95eae..1d24f0e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,7 +18,9 @@
"@remix-run/node": "^2.14.0",
"@remix-run/react": "^2.14.0",
"@remix-run/serve": "^2.14.0",
+ "@tailwindcss/typography": "^0.5.15",
"@types/axios": "^0.14.4",
+ "@types/react-syntax-highlighter": "^15.5.13",
"@types/three": "^0.170.0",
"axios": "^1.7.7",
"bootstrap-icons": "^1.11.3",
@@ -27,8 +29,12 @@
"gsap": "^3.12.5",
"html-react-parser": "^5.1.19",
"isbot": "^4.1.0",
+ "r": "^0.0.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-markdown": "^9.0.1",
+ "react-syntax-highlighter": "^15.6.1",
+ "rehype-raw": "^7.0.0",
"three": "^0.171.0"
},
"devDependencies": {
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 0cad7d2..4af7f84 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,4 +1,5 @@
import type { Config } from "tailwindcss";
+import typography from '@tailwindcss/typography';
export default {
content: [
@@ -8,7 +9,7 @@ export default {
"./hooks/**/*.{js,jsx,ts,tsx}",
"./themes/**/*.{js,jsx,ts,tsx}",
],
- darkMode: ["class", '[data-theme="dark"]'],
+ darkMode: 'class',
important: true,
theme: {
extend: {
@@ -29,4 +30,7 @@ export default {
},
},
},
+ plugins: [
+ typography,
+ ],
} satisfies Config;
diff --git a/frontend/themes/echoes/article.tsx b/frontend/themes/echoes/article.tsx
index 07159b8..6692eb8 100644
--- a/frontend/themes/echoes/article.tsx
+++ b/frontend/themes/echoes/article.tsx
@@ -149,64 +149,65 @@ export default new Template({}, ({ http, args }) => {
return (
-
+
{articleData.map((article) => (
-
-
+
+
-
+
{article.title}
+
+
+ {article.content}
+
+
+
+
+
+
{article.category}
+
+
+
+ {article.publishedAt?.toLocaleDateString("zh-CN", {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ })}
+
+ ·
+
+ {article.authorName}
+
+
-
-
- {article.publishedAt?.toLocaleDateString("zh-CN", {
- year: "numeric",
- month: "long",
- day: "numeric",
- })}
-
- ·
-
- {article.authorName}
-
-
-
-
- {article.content}
-
-
-
+
{article.tags.map((tag) => (
{tag.name}
diff --git a/frontend/themes/echoes/layout.tsx b/frontend/themes/echoes/layout.tsx
index ced95cd..0e8f5ee 100644
--- a/frontend/themes/echoes/layout.tsx
+++ b/frontend/themes/echoes/layout.tsx
@@ -130,7 +130,7 @@ export default new Layout(({ children, args }) => {
{loginState ? (
<>
diff --git a/frontend/themes/echoes/post.tsx b/frontend/themes/echoes/post.tsx
new file mode 100644
index 0000000..2dd7ebe
--- /dev/null
+++ b/frontend/themes/echoes/post.tsx
@@ -0,0 +1,336 @@
+import { Template } from "interface/template";
+import ReactMarkdown from 'react-markdown';
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import {
+ Container,
+ Heading,
+ Text,
+ Flex,
+ Box,
+ Avatar,
+ Button,
+ Code,
+ ScrollArea,
+ Tabs,
+ Card,
+} from "@radix-ui/themes";
+import {
+ CalendarIcon,
+ HeartIcon,
+ ChatBubbleIcon,
+ Share1Icon,
+ BookmarkIcon,
+ EyeOpenIcon,
+ CodeIcon,
+} from "@radix-ui/react-icons";
+import { Post } from "interface/post";
+import { useMemo, useState, useEffect } from "react";
+import type { Components } from 'react-markdown';
+
+// 示例文章数据
+const mockPost: Post = {
+ id: 1,
+ title: "构建现代化的前端开发工作流",
+ content: `
+# 构建现代化的前端开发工作流
+
+在现代前端开发中，一个高效的工作流程对于提高开发效率至关重要。本文将详细介绍如何建一个现代化的前端开发工作流。
+
+## 工具链选择
+
+选择合适的工具链是构建高效工作流的第一步。我们需要考虑以下几方
+
+- 包管理器：npm、yarn 或 pnpm
+- 构建工具：Vite、webpack 或 Rollup
+- 代码规范：ESLint、Prettier
+- 类型检查：TypeScript
+
+## 开发环境配置
+
+良好的开发环境配置可以大大提升开发效率：
+
+\`\`\`json
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true
+ }
+}
+\`\`\`
+
+## 自动化流程
+
+通过 GitHub Actions 等工具，我们可以实现：
+
+- 自动化测试
+- 自动化部署
+- 代码质量检查
+`,
+ authorName: "张三",
+ publishedAt: new Date("2024-03-15"),
+ coverImage: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6",
+ metaKeywords: "前端开发,工作流,效率",
+ metaDescription: "探讨如何构现代的前端开发工作流，提高开发效率。",
+ status: "published",
+ isEditor: true,
+ createdAt: new Date("2024-03-15"),
+ updatedAt: new Date("2024-03-15"),
+};
+
+// 添加标题项接口
+interface TocItem {
+ id: string;
+ text: string;
+ level: number;
+}
+
+// 在 TocItem 接口旁边添加
+interface MarkdownCodeProps {
+ inline?: boolean;
+ className?: string;
+ children: React.ReactNode;
+}
+
+// 创建一个 React 组件
+function PostContent() {
+ const [toc, setToc] = useState([]);
+ const [activeId, setActiveId] = useState('');
+
+ // 解析文章内容生成目录
+ useEffect(() => {
+ const headings = mockPost.content.split('\n')
+ .filter(line => line.startsWith('#'))
+ .map(line => {
+ const match = line.match(/^#+/);
+ const level = match ? match[0].length : 1;
+ const text = line.replace(/^#+\s+/, '');
+ const id = text.toLowerCase().replace(/\s+/g, '-');
+ return { id, text, level };
+ });
+ setToc(headings);
+ }, [mockPost.content]);
+
+ // 监听滚动更新当前标题
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ setActiveId(entry.target.id);
+ }
+ });
+ },
+ { rootMargin: '-80px 0px -80% 0px' }
+ );
+
+ document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((heading) => {
+ observer.observe(heading);
+ });
+
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+
+
+ {/* 左侧文章主体 */}
+
+ {/* 文章头部 - 增加间距和样式 */}
+
+
+ {mockPost.title}
+
+
+
+ {mockPost.authorName}
+ ·
+
+
+ {mockPost.publishedAt?.toLocaleDateString("zh-CN", {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ })}
+
+
+
+
+
+ {/* 修改封面图片样式 */}
+ {mockPost.coverImage && (
+
+ 
+
+ )}
+
+ {/* 文章内容 - 优化排版和间距 */}
+
+ {
+ const text = children?.toString() || '';
+ return (
+ }
+ >
+ {mockPost.content}
+
+
+
+ {/* 优化文章底部标签样式 */}
+
+ {mockPost.metaKeywords.split(',').map((tag) => (
+
+ {tag.trim()}
+
+ ))}
+
+
+
+ {/* 右侧目录 - 优化样式 */}
+
+
+
+
+
+
+ {toc.map((item) => (
+ 1 ? `ml-${(item.level - 1) * 4}` : ''}
+ ${activeId === item.id
+ ? 'text-[--accent-11] font-medium translate-x-1'
+ : 'text-[--gray-11] hover:text-[--gray-12]'
+ }
+ `}
+ onClick={(e) => {
+ e.preventDefault();
+ document.getElementById(item.id)?.scrollIntoView({
+ behavior: 'smooth',
+ block: 'center'
+ });
+ }}
+ >
+ {item.text}
+
+ ))}
+
+
+
+
+
+
+ );
+}
+
+// 使用模板包装组件
+export default new Template({}, ({ http, args }) => {
+ return
+ {children} +
+ ); + }, + h2: ({ children }) => { + const text = children?.toString() || ''; + return ( ++ {children} +
+ ); + }, + code: ({ inline, className, children }: MarkdownCodeProps) => { + const match = /language-(\w+)/.exec(className || ''); + const lang = match ? match[1] : ''; + + return inline ? ( +
+ {children}
+
+ ) : (
+
+ {lang && (
+ code[class*="language-"]': {
+ background: 'transparent',
+ border: 'none',
+ boxShadow: 'none',
+ },
+ 'pre[class*="language-"]::-moz-selection': {
+ background: 'transparent',
+ },
+ 'pre[class*="language-"] ::-moz-selection': {
+ background: 'transparent',
+ },
+ 'code[class*="language-"]::-moz-selection': {
+ background: 'transparent',
+ },
+ 'code[class*="language-"] ::-moz-selection': {
+ background: 'transparent',
+ }
+ }}
+ customStyle={{
+ margin: 0,
+ padding: '1.5rem',
+ background: 'var(--gray-2)',
+ fontSize: '0.95rem',
+ lineHeight: '1.5',
+ border: '1px solid var(--gray-a5)',
+ borderRadius: '0.75rem',
+ }}
+ >
+ {String(children).replace(/\n$/, '')}
+
+
+ );
+ }
+ } as Partial
+ {lang}
+
+ )}
+