欢迎来到 HardCode 博客

欢迎来到 HardCode 博客！这是一个采用 新粗野主义（Neo-Brutalism） 设计美学的现代博客平台。

项目目标

本项目的主要目标是创建一个功能完善、SEO 友好的博客平台，具有以下特点：

🎨 新粗野主义设计 - 独特的视觉风格
📝 Markdown 支持 - 使用 Markdown 撰写文章
🌍 多语言支持 - 支持中文和英文内容
🔍 强大的搜索 - 基于 Algolia 的全文搜索
🚀 高性能 - 基于 Next.js 14+ 的静态站点生成

技术栈

前端框架

Next.js 14+ - 使用 App Router 的最新版本
React 18 - 现代的 React 特性
TypeScript - 类型安全的开发体验

样式

Tailwind CSS - 实用优先的 CSS 框架
自定义主题 - 完整的新粗野主义设计系统

内容管理

Markdown - 基于文件的内容管理
Frontmatter - YAML 格式的元数据
remark/rehype - 强大的 Markdown 处理管道

下一步计划

我们将在接下来的阶段中实现：

Markdown 处理和渲染
代码语法高亮
数学公式支持
图表渲染
全文搜索
RSS 订阅

Point A
Point B
Point C

功能	状态
Markdown 支持	完成
数学公式	完成
图表渲染	完成

敬请期待更多精彩内容！

代码示例

function hello(name: string): string {
  return `Hello, ${name}!`
}
console.log(hello('World'))

数学公式

行内公式： $E = mc^2$

块级公式：

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

代码块与行号

现在所有代码块都自动显示行号了！

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
 
// 调用函数
const result = fibonacci(10);
console.log(`斐波那契数列第10项: ${result}`);

def quick_sort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quick_sort(left) + middle + quick_sort(right)
 
# 测试
numbers = [3, 6, 8, 10, 1, 2, 1, 3, 6, 8, 10, 1, 2, 1, 3, 6, 8, 10, 1, 2, 1, 3, 6, 8, 10, 1, 2, 1]
print(quick_sort(numbers))

无序列表

无序列表现在有漂亮的 Neo-Brutalism 方块标记：

第一项 - 使用复古青色方块
第二项 - 带黑色边框和阴影
第三项 - 具有视觉冲击力
- 嵌套列表项 - 使用芭比粉色
- 另一个嵌套项
  - 三级嵌套 - 使用施工黄色
  - 层次分明

有序列表

有序列表使用带阴影的数字徽章：

第一步 - 规划设计
第二步 - 编写代码
第三步 - 测试功能
1. 单元测试 - 橙色徽章
2. 集成测试
3. 端到端测试
  1. 自动化测试 - 电光蓝徽章
  2. 手动测试
第四步 - 部署上线

表格展示

表格具有完整的 Neo-Brutalism 样式：

特性	描述	状态
代码行号	自动显示所有代码块的行号	✅ 完成
列表样式	自定义标记和颜色层级	✅ 完成
表格样式	粗边框、阴影、悬停效果	✅ 完成
数学公式	KaTeX 渲染支持	✅ 完成
Mermaid	流程图和图表支持	✅ 完成

技术栈对比

技术	版本	用途	优势
Next.js	14+	框架	SSG/SSR 支持
Tailwind CSS	3.4	样式	实用工具优先
Shiki	3.17	代码高亮	精确的 VSCode 主题
KaTeX	0.16	数学公式	快速渲染
Mermaid	11.12	图表	丰富的图表类型

数学公式

行内公式 $E = mc^2$ 和爱因斯坦场方程。

块级公式：

\frac{\partial f}{\partial x} = \lim_{h \to 0} \frac{f(x + h) - f(x)}{h}

矩阵表示：

\begin{bmatrix} a & b \\ c & d \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} ax + by \\ cx + dy \end{bmatrix}

混合内容

结合多种元素展示：

代码与列表结合
- 安装依赖：npm install
- 启动开发服务器：npm run dev
- 构建生产版本：npm run build
内联代码示例
- 使用 useState 管理状态
- 使用 useEffect 处理副作用
- 使用 useMemo 优化性能
引用块

这是一个引用块，展示了 Neo-Brutalism 风格的边框和背景。

引用块可以包含多个段落，以及加粗文本和斜体文本。

Mermaid 流程图

graph TD A[Start] --> B{Is it working?} B -- Yes --> C[Great!] B -- No --> D[Fix it]

graph LR A[开始] --> B{需要优化?} B -- 是 --> C[添加行号] B -- 否 --> D[保持原样] C --> E[优化列表] E --> F[优化表格] F --> G[完成] D --> G

总结

本次优化包括：

✅ 代码行号：所有代码块自动显示行号
✅ 列表增强：自定义标记，颜色层级，更好的间距
✅ 表格样式：粗边框，阴影，悬停效果，响应式设计
✅ 保持 Neo-Brutalism 美学：所有元素都符合设计规范

所有功能已完成并可以正常工作！

欢迎来到 HardCode 博客

项目目标

技术栈

前端框架

样式

内容管理

下一步计划

代码示例

数学公式

代码块与行号

无序列表

有序列表

表格展示

技术栈对比

数学公式

混合内容

Mermaid 流程图

总结

分享这篇文章

相关文章

评论