Merge pull request #54 from minorcell/refactor-to-nextjs

minorcell · web-flow · commit 7117c7b43a69 · 2025-12-07T06:58:27.000+08:00
fix: title
diff --git a/content/blog/2025/01_vuestyle.md b/content/blog/2025/01_vuestyle.md
@@ -1,6 +1,6 @@
 ---
 date: 2025-03-21
-title: Vue 样式管理工程实践
+title: Vue 样式隔离与动态绑定的工程实践
 description: 最全面的 Vue 样式管理指南，深入解析大型 Vue 项目中的样式管理挑战和解决方案。从 Scoped CSS 、CSS Modules 到动态样式绑定，掌握避免全局污染、实现动态更新的最佳实践。
 tags:
   - Vue样式
@@ -19,8 +19,6 @@ author: mCell
 
 ![011.png](https://stack-mcell.tos-cn-shanghai.volces.com/011.png)
 
-# Vue 样式隔离与动态绑定的工程实践
-
 > 在大型 Vue 项目中，样式管理面临两大核心挑战：**避免全局污染**和**实现动态更新**。Vue 单文件组件通过多种创新方案解决了这些问题，本文将深入解析这些"黑魔法"的工作原理与最佳实践。
 
 ## 样式隔离的必要性
diff --git a/content/blog/2025/02_vscodeformat.md b/content/blog/2025/02_vscodeformat.md
@@ -1,6 +1,6 @@
 ---
 date: 2025-03-31
-title: VSCode 代码规范自动化配置
+title: VSCode 自动化代码规范实践指南
 description: 最实用的 VSCode 代码规范自动化配置指南。深入讲解 ESLint + Prettier 的完美组合，实现保存时自动代码检查、格式化和错误修复。提升团队开发效率，确保代码风格一致性。
 tags:
   - VSCode配置
@@ -19,8 +19,6 @@ author: mCell
 
 ![016.webp](https://stack-mcell.tos-cn-shanghai.volces.com/016.webp)
 
-# VSCode 自动化代码规范实践指南
-
 > 在团队协作中，**代码风格一致性**是提升开发效率的关键因素。通过 VSCode + ESLint + Prettier 的组合，开发者可以在保存文件时自动完成代码规范检查和格式化，将人工干预降至最低。本文将揭示这套自动化工作流的配置奥秘。
 
 ## 核心工具定位与协作原理
diff --git a/content/blog/2025/03_jsprintnum.md b/content/blog/2025/03_jsprintnum.md
@@ -1,6 +1,6 @@
 ---
 date: 2025-04-10
-title: JavaScript 异步编程完全指南
+title: 探索 JS 异步编程：从 setTimeout 到生成器的六种定时实现
 description: 深入探索 JavaScript 异步编程的完整演进路径。以“每秒打印数字”为实例，深入剖析 6 种定时任务实现方法：从经典的闭包问题、Promise 链式调用，到现代的 async/await、生成器函数和函数式编程。
 tags:
   - JavaScript异步
@@ -20,8 +20,6 @@ author: mCell
 
 ![010.png](https://stack-mcell.tos-cn-shanghai.volces.com/010.png)
 
-# 探索 JS 异步编程：从 setTimeout 到生成器的六种定时实现
-
 > 本文将摒弃 Web API (`requestAnimationFrame`)，在 Node 环境中探讨六种实现方案，展示不同编程范式下的异步控制技巧。
 
 “每秒打印一个数字”这个看似简单的任务，是检验 JavaScript 开发者异步理解程度的绝佳试金石。它不仅考察定时器使用，更串联起闭包、Promise、生成器等核心概念。下面我们由浅入深探索六种实现方案。
diff --git a/content/blog/2025/04_httpcode.md b/content/blog/2025/04_httpcode.md
@@ -1,6 +1,6 @@
 ---
 date: 2025-04-20
-title: 15个开发者必知的核心状态码
+title: HTTP 状态码：15 个常见的状态码详解
 description: 最完整的 HTTP 状态码指南，详细解析 15 个最常见的 HTTP 状态码。从 2xx 成功响应到 5xx 服务器错误，深入理解互联网世界的通用语言，让开发者、运维和产品经理都能在网络调试中如鱼得水。
 tags:
   - HTTP状态码
@@ -19,8 +19,6 @@ author: mCell
 
 ![013.webp](https://stack-mcell.tos-cn-shanghai.volces.com/013.webp)
 
-# HTTP 状态码：15 个常见的状态码详解
-
 > 当你在浏览器输入网址按下回车，一场无声的对话正在发生。服务器用三位数字回应着每个请求——这些 HTTP 状态码是互联网世界的通用语言，无论你是开发者、运维工程师还是产品经理，理解它们都能让你在数字世界中如鱼得水。
 
 ## 为什么这些数字代码如此重要？
diff --git a/content/blog/2025/05_projectconfig.md b/content/blog/2025/05_projectconfig.md
@@ -1,6 +1,6 @@
 ---
 date: 2025-04-30
-title: 项目配置管理最佳实践
+title: 项目配置管理的进化之路：从混乱到工程化
 description: 深入探索项目配置管理的最佳实践和演进路径。从原始的硬编码配置到环境变量，再到现代化的结构化配置系统，全面覆盖 Go/Node.js 等主流技术栈的工程化解决方案。
 tags:
   - 配置管理
@@ -19,8 +19,6 @@ author: mCell
 
 ![015.png](https://stack-mcell.tos-cn-shanghai.volces.com/015.png)
 
-# 项目配置管理的进化之路：从混乱到工程化
-
 > 曾经我在写第一个 Go demo 的时候，数据库账号密码直接写死在 `main.go` 里——看起来直接又高效。可当我把代码推上 GitHub，才意识到"直觉开发"是一种危险的自信。
 
 这篇文章，是我踩坑数次后整理的一点配置管理经验。你将看到一个配置系统从无到有、从简单到可维护的演进路径。如果你正在写 Go 项目或者搭建服务，这可能正是你需要避免未来痛点的一点经验之谈。
diff --git a/content/blog/2025/06_hash.md b/content/blog/2025/06_hash.md
@@ -1,6 +1,6 @@
 ---
 date: 2025-05-10
-title: 哈希算法完全指南
+title: 深入浅出哈希算法：原理、应用与哈希表解析
 description: 计算机科学核心基础技术——哈希算法的深度解析。从数学原理到实际应用，覆盖密码安全、数据完整性校验、哈希表数据结构等关键场景，全面掌握哈希技术的核心原理和实战技巧。
 tags:
   - 哈希算法
@@ -17,8 +17,6 @@ tags:
 author: mCell
 ---
 
-# 深入浅出哈希算法：原理、应用与哈希表解析
-
 > 哈希算法是计算机科学的核心基础之一，广泛用于密码安全、数据完整性校验和高效数据结构（哈希表）。本文将清晰解析其核心特性、关键应用场景，并深入探讨哈希表的工作原理。
 
 哈希算法（Hashing）是一种将**任意长度**的输入数据（如文件、字符串、对象）通过一个特定的数学函数（**哈希函数**）转换成**固定长度**输出值的过程。这个输出值被称为**哈希值**（Hash Value）、**散列值**或**摘要**（Digest）。
diff --git a/content/blog/2025/08_ws.md b/content/blog/2025/08_ws.md
@@ -1,6 +1,6 @@
 ---
 date: 2025-05-20
-title: WebSocket 深度解析
+title: 深度剖析 WebSocket：全双工实时通信原理与实战
 description: 最全面的 WebSocket 技术指南：从协议原理到实战应用，深入解析全双工实时通信机制。告别 HTTP 轮询的低效模式，掌握现代实时 Web 应用开发核心技术。
 tags:
   - WebSocket
@@ -20,8 +20,6 @@ author: mCell
 
 ![007.png](https://stack-mcell.tos-cn-shanghai.volces.com/007.png)
 
-# 深度剖析 WebSocket：全双工实时通信原理与实战
-
 > 笔者小话：说来，一直挺想写一篇关于 WebSocket 的帖子的，结果因为种种一直鸽子了挺久，最近才想起来，抓紧补一篇，欢迎大家在评论区多多交流。
 
 ## 摘要
diff --git a/content/blog/2025/09_goprintnum.md b/content/blog/2025/09_goprintnum.md
@@ -1,6 +1,6 @@
 ---
 date: 2025-05-30
-title: Go 并发编程精髓
+title: 从 Sleep 到 Select：用一个例子掌握 Go 并发编程精髓
 description: 深度解析 Go 并发编程从入门到精通的完整路径。从简单的 time.Sleep 阻塞到高效的 select 定时器，从并发误区到正确的 goroutine 模式，最终掌握 context 构建健壮可维护的并发代码。
 tags:
   - Go语言
diff --git a/content/blog/2025/10_jssync.md b/content/blog/2025/10_jssync.md
@@ -12,8 +12,6 @@ tags:
 
 {/* ![005.avif](https://stack-mcell.tos-cn-shanghai.volces.com/005.avif) */}
 
-# JavaScript 运行机制详解：再谈 Event Loop
-
 > 本文从经典的 Promise 与 setTimeout 执行顺序问题入手，深入浅出地剖析了 JavaScript 的单线程模型、事件循环（Event Loop）机制。通过辨析宏任务与微任务的区别与优先级，帮助你彻底理解 JS 异步执行的底层原理，看懂页面卡顿的真相。
 
 我常常在各种场合被问到类似下面代码的输出顺序。
diff --git a/content/blog/2025/11_prompt.md b/content/blog/2025/11_prompt.md
@@ -20,8 +20,6 @@ author: mCell
 
 ![020.jpg](https://stack-mcell.tos-cn-shanghai.volces.com/020.jpg)
 
-# 提示工程（Prompt Engineering）入门指南
-
 > 这篇指南是我从 [Claude Code 官方文档](https://docs.anthropic.com/zh-CN/docs/build-with-claude/prompt-engineering/overview) 中提炼出最核心的技巧，从基础的“清晰指令”和“提供范例”，到进阶的“思考链”和“角色设定”，帮助你将 AI 这个强大的工具，变成你工作流中不可或缺的伙伴。如果你想让 AI 真正懂你所想，这篇文章正是你需要的入门手册。
 
 最近一年，大语言模型（LLM）的发展，正在深刻地改变我们获取信息和创造内容的方式。无论是 Claude、GPT、Gemini 还是国内的各种模型，AI 已经成为许多人工作中不可或缺的伙伴。
diff --git a/content/blog/2025/12_subagent.md b/content/blog/2025/12_subagent.md
@@ -1,6 +1,6 @@
 ---
 date: 2025-06-29
-title: Claude Code Sub-agent 模式详解和实践
+title: Claude Code Sub-agent 模式的详解和实践
 description: 深入解析Claude Code的Sub-agent子代理模式，学会创建专业化AI代理来提升代码生成、数据分析等复杂任务的效率和准确性。附完整实践教程和最佳实践。
 tags:
   - Claude Code
@@ -17,8 +17,6 @@ author: mCell
 
 ![021.webp](https://stack-mcell.tos-cn-shanghai.volces.com/021.webp)
 
-# Claude Code Sub-agent 模式的详解和实践
-
 > 这篇文章是一个实践教程，读完后，你将学会如何在 Claude Code 环境中，创建和使用这些 AI 代理，从而显著提升代码生成、数据分析等复杂任务的效率和准确性。
 
 在上一篇关于《[提示工程（Prompt Engineering）入门指南](https://stack.mcell.top/blog/2025/11_prompt)》的文章中，我们探讨了如何与一个大型语言模型（LLM）高效对话。核心思想是把 AI 看作一个无所不包的“通才”，通过巧妙的指令引导它完成任务。
diff --git a/content/blog/2025/13_codeinfeature.md b/content/blog/2025/13_codeinfeature.md
@@ -19,8 +19,6 @@ author: mCell
 
 ![022.webp](https://stack-mcell.tos-cn-shanghai.volces.com/022.webp)
 
-# 编程的演进：从指令到意图
-
 我使用 AI 编程工具（比如 Cursor、 Claude Code）已经半年了。它能根据注释，自动生成完整的函数。
 
 这让我产生了一个想法：我们今天所熟知的“编程”——即一行行地编写代码，未来可能将不复存在。
diff --git a/content/blog/2025/14_whywrite.md b/content/blog/2025/14_whywrite.md
@@ -18,8 +18,6 @@ author: mCell
 
 ![027.avif](https://stack-mcell.tos-cn-shanghai.volces.com/027.avif)
 
-# 一个技术写作者的抉择
-
 我从去年（24 年）开始，开始在[稀土掘金社区](https://juejin.cn/)写作。至今，累计发布了近 60 篇文章，收获了五万多次阅读。
 
 这个数字不好不坏，但我注意到一个现象。社区里流量最高的文章，往往不是技术难度最深的，而是故事最曲折、标题最吸引人的。这让我感到困惑，并开始思考一个根本性的问题。
diff --git a/content/blog/2025/17_dockerfirst.md b/content/blog/2025/17_dockerfirst.md
@@ -16,8 +16,6 @@ tags:
 author: mCell
 ---
 
-# **Docker 入门教程**
-
 ## **为什么我们需要 Docker？**
 
 在开发中，你是否遇到过这些问题？
diff --git a/content/blog/2025/18_dockersecond.md b/content/blog/2025/18_dockersecond.md
@@ -18,8 +18,6 @@ author: mCell
 
 ![033.jpg](https://stack-mcell.tos-cn-shanghai.volces.com/033.jpg)
 
-# **Docker 进阶指南**
-
 在上一篇文章里，我们用 `docker build` 和 `docker run` 命令，成功地将一个应用放进了容器里并运行起来。这感觉很棒，就像 hello world 一样。
 
 但是，hello world 之后，我们总会好奇背后的秘密。而且，只靠这两个命令，还远远无法应对真实的工作场景。你可能马上就会遇到一连串新的问题：
diff --git a/content/blog/2025/19_jsworker.md b/content/blog/2025/19_jsworker.md
@@ -26,8 +26,6 @@ keywords:
 
 ![035.png](https://stack-mcell.tos-cn-shanghai.volces.com/035.png)
 
-# JavaScript 的多线程能力：Worker
-
 > 很高兴我们能在上一篇[《JavaScript 运行机制》](https://stack.mcell.top/blog/2025/10_jssync) 的基础上，继续深入这个话题。上次我们聊到，真正单线程的是执行我们 JavaScript 代码的**主线程**。但是，现代浏览器早已不是一个简单的脚本执行器，它是一个庞大而精密的平台，为了追求更流畅、更强大的用户体验，它在底层为我们做了许多工作，其中就包括提供了“多线程”的能力。今天，我们就来聊一聊浏览器背后的那些默默工作的“工人们”——JavaScript 的 Worker 们。
 
 如果你写过一些计算量稍大的 JavaScript 代码，比如图像处理、大量数据排序或者复杂的算法，你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应，动画也停了，就像整个世界都静止了。
diff --git a/content/blog/2025/20_gsap01.md b/content/blog/2025/20_gsap01.md
@@ -28,8 +28,6 @@ keywords:
 
 <center style={{ fontSize: '12px', color: 'gray' }}>Gasp 官网首页，很有趣的交互效果。</center>
 
-# GSAP 入门指南
-
 在很长一段时间里，我与 GSAP 的关系，可以说是“最熟悉的陌生人”。
 
 时常，遇到一些 CSS 难以驾驭的复杂动画，我的第一反应就是打开 GPT，描述我想要的效果，然后将它生成的 CSS 或者 GSAP 代码复制粘贴到项目中。它能用，效果也不错，项目也成功上线了。
diff --git a/content/blog/2025/21_gsap02.md b/content/blog/2025/21_gsap02.md
@@ -24,8 +24,6 @@ keywords:
 
 ![038.png](https://stack-mcell.tos-cn-shanghai.volces.com/038.png)
 
-# GSAP ScrollTrigger 详解
-
 在上一篇文章 [GSAP 入门指南](https://stack.mcell.top/blog/2025/20_gsap01) 里，我们学习了 GSAP 的两个核心：
 
 - **Tween**：补间动画。
diff --git a/content/blog/2025/22_echarts.md b/content/blog/2025/22_echarts.md
@@ -24,8 +24,6 @@ keywords:
 
 ![039.png](https://stack-mcell.tos-cn-shanghai.volces.com/039.png)
 
-# ECharts 万字入门指南
-
 > 本文将作为你的 ECharts 入门指南，带你系统性地梳理 ECharts 的核心知识体系，并通过一个贴近实际业务的“高三期末考试成绩分析”案例，手把手教你如何将数据转化为富有洞察力的图表。
 
 前端，本质上就是把数据可视化的技术。如何将枯燥的数据，以一种更直观、更易于理解的方式呈现给用户，始终是一个重要的课题。
diff --git a/content/blog/2025/23_llm01.md b/content/blog/2025/23_llm01.md
@@ -24,8 +24,6 @@ keywords:
 
 ![051.png](https://stack-mcell.tos-cn-shanghai.volces.com/051.png)
 
-# 长期以来我对 LLM 的误解
-
 大家好，我是 mCell。
 
 最近半年，我一直在折腾各种大语言模型（LLM），从 GPT 到 Gemini，再到国产的 DeepSeek、Qwen。我用它们当搜索引擎、写代码、甚至帮我完成期末作业的实验报告。作为一个开发者，我一直在思考一个问题：这东西的底层到底是怎么工作的？
diff --git a/content/blog/2025/24_agents.md b/content/blog/2025/24_agents.md
@@ -22,8 +22,6 @@ keywords:
 
 ![056.png](https://stack-mcell.tos-cn-shanghai.volces.com/056.png)
 
-# Agents.md 又是什么
-
 最近，如果你关注 AI 编程工具的生态，可能会注意到两个新名词频繁出现：**MCP** 和 **Agents.md**。
 
 MCP（Model Context Protocol）是为大语言模型（LLM）提供标准化上下文接入方式的协议，类似于让 LLM 能“看懂”外部工具、数据源和环境的一种通用语言。它试图解决的问题是：**如何让不同的 AI 工具以统一方式向模型提供上下文？**
diff --git a/content/blog/2025/26_agent_is_llm_plus_tools.md b/content/blog/2025/26_agent_is_llm_plus_tools.md
@@ -27,8 +27,6 @@ keywords:
 
 ![064.png](https://stack-mcell.tos-cn-shanghai.volces.com/064.png)
 
-# Agent = LLM + Tools
-
 最近，AI Agent 这个词非常火。
 
 比如 Claude Code CLI、Codex，它能像个程序员一样，在你的命令行里读写文件、执行代码。很多人觉得很神奇，它到底是怎么做到的？
diff --git a/content/blog/2025/27_react_loop.md b/content/blog/2025/27_react_loop.md
@@ -29,8 +29,6 @@ keywords:
 
 ![065.png](https://stack-mcell.tos-cn-shanghai.volces.com/065.png)
 
-# Agent ReAct and Loop
-
 我一直在使用 ChatGPT 或通义千问这样的 AI 工具，它们很强大，但多数情况下都是“一问一答”。我提一个问题，它给一个答案。
 
 但我注意到，像 Manus 或 Claude Code CLI 这样的“Agent”（智能体）产品，它们似乎可以**自动执行**任务。你给它一个目标，它会自己去调用工具、分析结果、继续下一步，直到任务完成。
diff --git a/content/blog/2025/28_react_maximum.md b/content/blog/2025/28_react_maximum.md
@@ -27,8 +27,6 @@ keywords:
 
 ![069.png](https://stack-mcell.tos-cn-shanghai.volces.com/069.png)
 
-# React 如何处理高频的实时数据？
-
 最近，我遇到了一个很有意思的 React 问题。
 
 我需要开发一个实时的日志查看器，功能上需要实时展示服务运行的日志。因为这个项目是内部的，我这里大概抽象一下：
diff --git a/content/blog/2025/29_web_router.md b/content/blog/2025/29_web_router.md
@@ -1,6 +1,6 @@
 ---
 date: 2025-11-16
-title: 前端路由详解
+title: 前端路由详解：Hash VS History
 description: 全面解析前端路由的 Hash 与 History 两种模式，涵盖原理、实现、优缺点、服务器配置与框架实践，帮助你做出兼顾兼容性与 SEO 的路由选型。
 author: mcell
 tags:
@@ -29,8 +29,6 @@ keywords:
 
 ![070](https://stack-mcell.tos-cn-shanghai.volces.com/070.png)
 
-# 前端路由详解
-
 ## 背景
 
 在 Web 开发的早期，互联网主要由 多页应用（MPA, Multi-Page Application）组成。那时的路由逻辑非常简单：用户点击一个链接，浏览器向服务器发送请求；服务器接收请求，根据 URL 路径找到对应的 HTML 文件（或通过模板引擎生成），返回给浏览器；浏览器卸载当前页面，重新渲染新页面。
@@ -100,7 +98,7 @@ History 模式的实现比 Hash 稍微复杂一点。我们需要处理两种情
 1.  **用户点击链接**：前端框架会拦截 `<a>` 标签的点击事件，阻止默认跳转，改用 `history.pushState` 修改 URL，并手动更新视图。
 2.  **用户点击浏览器的前进/后退按钮**：这会触发 `popstate` 事件。我们需要监听这个事件来更新视图。
 
-{/* end list */}
+{/_ end list _/}
 
 ```javascript
 // 监听浏览器的前进、后退
diff --git a/content/blog/2025/30_llm_tokens.md b/content/blog/2025/30_llm_tokens.md
@@ -29,8 +29,6 @@ keywords:
 
 ![072](https://stack-mcell.tos-cn-shanghai.volces.com/072.jpg)
 
-# LLM 扫盲：什么是 Tokens？
-
 GPT 5.1 发布已经有一段时间了，LLM（大语言模型）的能力边界再一次被拓宽。对于应用开发者而言，虽然模型越来越智能，但 API 的计费逻辑和底层限制依然没有变：**Token** 始终是那个核心计量单位。
 
 很多人对 Token 有误解，认为它等同于字符（Character）或单词（Word）。这种误解往往导致两个问题：一是预估 API 成本时出现较大偏差，二是无法精确控制 Prompt 的上下文长度，导致模型“失忆”。
diff --git a/content/blog/2025/31_useSearchParams.md b/content/blog/2025/31_useSearchParams.md
@@ -29,8 +29,6 @@ keywords:
 
 ![073](https://stack-mcell.tos-cn-shanghai.volces.com/073.png)
 
-# useSearchParams
-
 在开发 React 应用时，我们经常遇到一种场景：用户在搜索框输入关键词，筛选出一个列表，然后希望把这个结果分享给同事。
 
 如果我们将筛选条件仅仅保存在组件的 `useState` 中，一旦刷新页面或复制链接，这些状态就会丢失，用户看到的只能是初始页面。
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/src/app/blog/[...slug]/page.tsx b/src/app/blog/[...slug]/page.tsx
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
diff --git a/src/app/me/page.tsx b/src/app/me/page.tsx
diff --git a/src/app/page.tsx b/src/app/page.tsx
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
diff --git a/src/components/ThreeBackground.tsx b/src/components/ThreeBackground.tsx
