Go to file

kennethcheng c5949bcf69 合并		2026-04-27 16:44:38 +08:00
.vscode	"Initial commit from Astro"	2026-04-27 13:01:32 +08:00
llm_log	首次提交	2026-04-26 01:56:44 +08:00
public	"Initial commit from Astro"	2026-04-27 13:01:32 +08:00
src	style: 完美还原开发模式下的搜索占位符视觉 UI	2026-04-27 16:02:23 +08:00
.gitignore	文档	2026-04-27 16:26:13 +08:00
astro.config.mjs	fix: force update mdx config and clear cache	2026-04-27 14:05:40 +08:00
build.js	首次提交	2026-04-26 01:56:44 +08:00
DEV_LOG.md	style: 完美还原开发模式下的搜索占位符视觉 UI	2026-04-27 16:02:23 +08:00
index.html	首次提交	2026-04-26 01:56:44 +08:00
package-lock.json	build: 引入 pagefind 并在 build 阶段挂载搜索索引构建	2026-04-27 15:34:20 +08:00
package.json	build: 引入 pagefind 并在 build 阶段挂载搜索索引构建	2026-04-27 15:34:20 +08:00
README.md	文档	2026-04-27 16:26:13 +08:00
tailwind.config.mjs	feat: config tailwind typography plugin	2026-04-27 13:06:01 +08:00
tsconfig.json	"Initial commit from Astro"	2026-04-27 13:01:32 +08:00

README.md

📚 LLM Log Frontend

基于 Astro v6 构建的现代化离线知识库系统，融合极客美学与静态站点极致性能。

✨ 核心特性

特性	说明
🚀 极致性能	Astro 静态生成，零运行时开销，首屏秒开
🔍 离线全文搜索	Pagefind 本地索引，无需后端，支持中文分词
🎨 2026 极简 UI	Tailwind CSS v4 驱动，半透明磨砂玻璃效果，明暗双模式
📐 Markdown / MDX	原生支持 Markdown，混写 JSX 组件，渲染动态看板
🧮 数学公式	KaTeX 实时渲染，完美支持 LaTeX 公式
💻 代码增强	语法高亮 (rehype-pretty-code)，一键复制，语言标签
🧭 智能导航	左侧动态侧边栏 + 右侧 TOC 目录，滚动自动高亮
🌊 SPA 体验	Astro Transitions 无缝路由过渡，全站无刷新跳转
📱 响应式布局	自适应桌面/平板/手机，移动端侧边栏自动隐藏

🛠 技术栈

Astro v6 ─┬── Tailwind CSS v4        (样式系统)
          ├── @astrojs/mdx           (MDX 混排)
          ├── rehype-pretty-code     (代码语法高亮)
          ├── rehype-katex + KaTeX   (数学公式渲染)
          ├── remark-math            (数学语法解析)
          └── Pagefind               (静态全文搜索)

运行环境要求： Node.js >= 22.12.0

📂 项目结构

llm_log_frontend/
├── public/                    # 静态资源
│   ├── favicon.ico
│   └── favicon.svg
├── src/
│   ├── components/            # Astro 组件
│   │   ├── BaseLayout.astro   # 全局布局 (侧边栏 + 内容区)
│   │   ├── Sidebar.astro      # 左侧导航栏 (动态渲染文档列表)
│   │   ├── TOC.astro          # 右侧目录 (滚动监听 + 高亮跟随)
│   │   ├── Search.astro       # 搜索框 (Pagefind 动态加载)
│   │   ├── CodeBlockHelper.astro  # 代码块增强 (复制 + 语言标签)
│   │   └── ModernTable.astro  # 现代表格组件
│   ├── content/
│   │   └── docs/              # 知识库文档 (MD/MDX)
│   ├── layouts/
│   │   └── BaseLayout.astro   # 基础布局模板
│   ├── pages/
│   │   ├── index.astro        # 门户主页 (卡片网格导航)
│   │   └── docs/[...slug].astro  # 文档路由
│   ├── styles/
│   │   └── global.css         # 全局样式入口
│   └── content.config.ts      # Content Layer 配置 (Zod Schema)
├── astro.config.mjs
├── package.json
└── tailwind.config.mjs

🚦 快速开始

安装依赖

npm install

开发模式

npm run dev

启动后访问 http://localhost:4321，支持热更新。

构建生产版本

npm run build

构建流程自动执行：

astro build → 生成 dist/ 静态站点
pagefind --site dist → 扫描全文并生成搜索索引

本地预览

npm run preview

🎯 内容管理

添加新文档

在 src/content/docs/ 下创建 .md 或 .mdx 文件：

---
title: "文档标题"
description: "文档描述"
---

# 正文内容...

侧边栏和主页卡片网格将自动更新，无需手动配置路由。

使用 MDX 组件

.mdx 文件支持混写 JSX 组件：

---
title: "交互式文档"
---

这是一段普通文本。

<ModernTable headers={["列1", "列2"]} data={[...]} />

🎨 设计系统

色彩方案

主题	背景	文字	强调色
浅色	`white`	`gray-900`	`blue-500`
深色	`#0a0c10`	`gray-100`	`blue-400`

组件样式

圆角: rounded-xl / rounded-lg 统一 10-12px
阴影: 代码块 shadow-2xl，卡片 shadow-sm
磨砂玻璃: bg-opacity-40 + backdrop-blur
过渡: transition-all + duration-300

📖 文档列表

文档	类型
2026-04-26	业务数据看板
test	MDX 交互测试
上下文工程理论与实践	理论文章

🔄 构建流程

源码 (src/)
  │
  ├─ Astro 编译 ──────────────► dist/ (静态 HTML/CSS/JS)
  │
  └─ Pagefind 索引 ───────────► dist/pagefind/ (搜索资源)
                                ├── pagefind-ui.js
                                ├── pagefind-ui.css
                                ├── pagefind*.js (索引分片)
                                └── pagefind.json (元数据)

最终产物为纯静态文件，可部署至任何静态托管服务（Vercel、Netlify、GitHub Pages 等）。

📄 License

MIT

README.md Unescape Escape