diff --git a/src/content/blog/hello-novablog.mdx b/src/content/blog/hello-novablog.mdx deleted file mode 100644 index 0e5d75c..0000000 --- a/src/content/blog/hello-novablog.mdx +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'NovaBlog 入门指南' -description: '这是一篇介绍 NovaBlog 博客系统核心功能的示例文章，展示 MDX 动态组件支持。' -pubDate: 2026-02-28 -author: 'NovaBlog Team' -category: '教程' -tags: ['入门', 'MDX', 'Astro'] -heroImage: '/images/hello-world.jpg' ---- - -# 欢迎来到 NovaBlog - -NovaBlog 是一个极简、高效的程序员博客系统，采用 **静态渲染 + 轻量级微服务** 架构。 - -## 核心特性 - -### 🚀 极致性能 - -基于 Astro 的 Islands Architecture（群岛架构），大部分页面为 Zero-JS，仅在需要交互的地方加载 JavaScript。 - -### ✍️ MDX 支持 - -在 Markdown 中直接嵌入交互组件： - -```jsx - -``` - -上面的组件会在可见时自动加载并挂载 JavaScript。 - -### 📐 数学公式排版 - -支持复杂的数学公式渲染： - -``` -$ integral_0^infinity e^(-x^2) dif x = sqrt(pi) / 2 $ -``` - -## 代码高亮 - -支持多种编程语言的语法高亮： - -```typescript -// TypeScript 示例 -interface Post { - title: string; - content: string; - tags: string[]; -} - -async function getPosts(): Promise { - return await fetch('/api/posts').then(res => res.json()); -} -``` - -```go -// Go 示例 -package main - -import "fmt" - -func main() { - fmt.Println("Hello, NovaBlog!") -} -``` - -## 表格支持 - -| 特性 | 描述 | -|------|------| -| 静态渲染 | 构建时生成 HTML，极速加载 | -| MDX 支持 | 在 Markdown 中嵌入组件 | -| 低资源 | 2C1G 即可运行 | -| Docker | 一键容器化部署 | - -## 引用 - -> 优秀的博客系统应该让作者专注于内容，而非配置。 -> -> — NovaBlog 设计理念 - -## 下一步 - -1. 在 `src/content/blog/` 目录下创建新的 `.md` 或 `.mdx` 文件 -2. 配置 Frontmatter 元数据 -3. 运行 `npm run dev` 预览效果 - -开始你的写作之旅吧！ 🎉 \ No newline at end of file diff --git a/src/content/blog/latex-test.mdx b/src/content/blog/latex-test.mdx deleted file mode 100644 index 6903d39..0000000 --- a/src/content/blog/latex-test.mdx +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: 'LaTeX 公式渲染测试' -description: '测试 LaTeX 数学公式渲染功能' -pubDate: 2026-03-01 -author: 'NovaBlog Team' -category: '测试' -tags: ['测试', 'LaTeX', '数学'] ---- - -import MathFlipCard from '../../components/react/MathFlipCard'; - -# LaTeX 公式渲染测试 - -## 行内公式 - -这是一个行内公式：$E = mc^2$，爱因斯坦的质能方程。 - -勾股定理：$a^2 + b^2 = c^2$ - -## 块级公式 - -高斯积分： - -$$ -\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} -$$ - -## 翻转卡片公式展示 - -下面使用翻转卡片展示公式，点击"显示 LaTeX"按钮可以查看源码： - -### 质能方程 - - - -### 麦克斯韦方程组 - - - -### 薛定谔方程 - - - -### 傅里叶变换 - - - -### 矩阵运算 - - - -## 传统公式展示（对比） - -麦克斯韦方程组： - -$$ -\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0} -$$ - -$$ -\nabla \cdot \mathbf{B} = 0 -$$ - -$$ -\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t} -$$ - -$$ -\nabla \times \mathbf{B} = \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} -$$ - -## 复杂公式 - -薛定谔方程： - -$$ -i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \left[-\frac{\hbar^2}{2m}\nabla^2 + V(\mathbf{r},t)\right]\Psi(\mathbf{r},t) -$$ - -傅里叶变换： - -$$ -\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} dx -$$ - -矩阵： - -$$ -\begin{pmatrix} -a & b \\ -c & d -\end{pmatrix} -\begin{pmatrix} -x \\ -y -\end{pmatrix} -= -\begin{pmatrix} -ax + by \\ -cx + dy -\end{pmatrix} -$$ - -求和与积分： - -$$ -\sum_{i=1}^{n} i = \frac{n(n+1)}{2} -$$ - -$$ -\prod_{i=1}^{n} i = n! -$$ - -## 测试完成 - -如果你能看到以上公式正确渲染，说明 LaTeX 公式支持已经成功配置！ diff --git a/src/content/blog/react-animated-components.mdx b/src/content/blog/react-animated-components.mdx deleted file mode 100644 index 62dbb31..0000000 --- a/src/content/blog/react-animated-components.mdx +++ /dev/null @@ -1,426 +0,0 @@ ---- -title: React 动效组件展示 -description: 展示 NovaBlog 中可用的 React 动效 HTML 组件，包括悬浮卡片、打字机效果、翻转卡片、粒子背景和数学公式卡片 -pubDate: 2024-01-20 -author: NovaBlog -tags: [React, 动效, 组件, 教程] -category: 教程 -heroImage: '/images/hello-world.jpg' ---- - -import AnimatedCard from '../../components/react/AnimatedCard'; -import TypewriterText from '../../components/react/TypewriterText'; -import FlipCard from '../../components/react/FlipCard'; -import ParticleBackground from '../../components/react/ParticleBackground'; -import MathFlipCard from '../../components/react/MathFlipCard'; -import MergeTable, { Cell } from '../../components/react/MergeTable'; - -# React 动效组件展示 - -NovaBlog 支持在 MDX 中直接使用 React 组件，实现丰富的交互动效。本文展示了一些内置的动效组件示例。 - -## 🎴 悬浮卡片 (AnimatedCard) - -鼠标悬停时卡片会浮起并放大，配合阴影效果增强立体感。 - -
- - - -
- -## ⌨️ 打字机效果 (TypewriterText) - -模拟打字机的逐字显示效果，支持循环播放。 - -
- -
- -### 使用方式 - -```tsx - -``` - -## 🔄 翻转卡片 (FlipCard) - -点击卡片实现 3D 翻转效果，适合展示正反两面内容。 - -
- - -
- -### 使用方式 - -```tsx -正面内容} - backContent={
背面内容
} - frontColor="#3b82f6" - backColor="#10b981" - client:load -/> -``` - -## ✨ 粒子背景 (ParticleBackground) - -基于 Canvas 的粒子动画背景，粒子之间会自动连线，营造科技感。 - - - -### 自定义内容 - - -
-

🎉 自定义内容

-

可以在粒子背景上放置任意内容

-
- - -## 📐 数学公式翻转卡片 (MathFlipCard) - -专门用于展示 LaTeX 数学公式的翻转卡片组件。正面显示渲染后的公式，点击"显示 LaTeX"按钮可以查看源码。 - -### 质能方程 - - - -### 麦克斯韦方程组 - - - -### 薛定谔方程 - - - -### 傅里叶变换 - - - -### 矩阵运算 - - - -### 使用方式 - -```tsx -import MathFlipCard from '../../components/react/MathFlipCard'; - - -``` - -**属性说明**： -- `latex`：LaTeX 公式字符串 -- `displayMode`：是否为块级公式（可选，默认为 true） -- `className`：自定义 CSS 类名（可选） - -**特点**： -- 点击"显示 LaTeX"按钮可查看公式源码 -- 点击"显示公式"按钮返回渲染结果 -- 支持 KaTeX 的所有语法 -- 适合教学和技术文档 - -## 📊 合并单元格表格 (MergeTable) - -支持跨行跨列合并的高级表格组件，类似 Typst 的 tablex 功能。 - -### 基础示例：课程表 - - - -### 复杂合并示例：项目进度表 - - - -### 简洁语法示例 - -你也可以使用更简洁的语法，直接传入二维数组： - - - -### 使用方式 - -```tsx -import MergeTable, { Cell } from '../../components/react/MergeTable'; - -// 使用 Cell 函数定义合并单元格 - -``` - -**Cell 函数属性**： -- `children`：单元格内容 -- `colspan`：跨列数 -- `rowspan`：跨行数 -- `align`：对齐方式（`'left' | 'center' | 'right'`） -- `header`：是否为表头单元格（使用 `` 标签） -- `style`：自定义样式 -- `className`：自定义 CSS 类名 - -**MergeTable 属性**： -- `data`：表格数据（二维数组） -- `headerRows`：表头行数（这些行会使用 `` 标签） -- `bordered`：是否显示边框 -- `striped`：是否显示斑马纹 -- `hoverable`：是否启用悬停效果 -- `compact`：紧凑模式（更小的内边距） - -## 📝 如何在文章中使用 - -### 1. 导入组件 - -在文章顶部添加 import 语句： - -```mdx -import AnimatedCard from '../../components/react/AnimatedCard'; -``` - -### 2. 使用组件 - -```mdx - -``` - -### 3. client 指令说明 - -| 指令 | 说明 | -|------|------| -| `client:load` | 页面加载时立即激活组件 | -| `client:visible` | 组件进入视口时激活 | -| `client:idle` | 浏览器空闲时激活 | -| `client:media="(min-width: 768px)"` | 满足媒体查询时激活 | - -## 🎨 创建自定义组件 - -你可以在 `src/components/react/` 目录下创建自己的 React 组件： - -```tsx -// src/components/react/MyComponent.tsx -import { useState } from 'react'; - -interface MyComponentProps { - title: string; -} - -export default function MyComponent({ title }: MyComponentProps) { - const [count, setCount] = useState(0); - - return ( -
-

{title}

- -
- ); -} -``` - -然后在文章中使用： - -```mdx -import MyComponent from '../../components/react/MyComponent'; - - -``` - ---- - -## 总结 - -NovaBlog 提供了灵活的组件系统，让你可以在 Markdown 中嵌入丰富的交互内容。通过 React 组件，你可以实现： - -- 🎴 **视觉效果**：悬浮、翻转、渐变等动画 -- ⌨️ **动态文字**：打字机、滚动、闪烁效果 -- ✨ **背景特效**：粒子、波浪、光效 -- 🎮 **交互功能**：计数器、表单、游戏 -- 📐 **数学公式**：翻转卡片展示 LaTeX 公式 -- 📊 **高级表格**：支持合并单元格的复杂表格 - -快去尝试创建属于你自己的动效组件吧！ 🚀 \ No newline at end of file