【工具篇】AI时代，如何写好一篇优质的技术博客？

@优质的技术博客在任何时代都会永远保持优雅——八荒启

@TOC

一. 🚀 引言

1. 背景

AI时代似乎文章是最低成本的生成术，作业、汇报、论文、PPT…，甚至专门出现了工具去解决“AI味儿”，那么我们还要不要写博客呢？如果要，又该如何写让AI望尘莫及的文章，本文主要从排版技巧、技术内核、个人养成三个方面，深入研究一篇优质的技术博客生成。祝你快速将心中的想法优雅落地，且拥有内涵！

文章路径	公众号：八荒启-交互动画 / 创作中心 / 系列教程 / Geogebra从入门到编程全集 / 工具篇
作者	快乐的脆脆鲨
所属平台	八荒启教育
更新日期	2025.8.19
资源下载	-

2. 场景

八荒启专精于制作交互式动画，比如GGB、Canvas、H5、Unity，所以本文的介绍主要是交互动画技术为场景，逐步展开。

二. 🛠️正文

如果说决定一个人的三要素是：颜值、才华和人品，那么对应到博客里边就是排版技巧、技术内核和个人养成。（至于是否在用AI，如何采用AI的思考，见文章第三部分“结尾”）

1.排版技巧：可以让这个人看起来好看，要不为什么大家都喜欢赏美女呢； 2.技术内核：好看是第一印象，其次得耐看、经得起时间打磨，如果说只是滕抄、AI生成，那想必看完就像吃了苍蝇一样难受，不止你是否有这样感受； 3.个人养成：写文章需要像吃饭一样准时，因为你的粉丝既然关注你，就等着你的投喂，那谁会喜欢有了上一顿，没有下一顿的感觉呢。

1. 排版技巧

（1）博客撰写的常见方式

这里我整理了一下网络博客常见的撰写方式，供参考：

写作方式	描述	常用度	适用平台
Markdown (标准)	基础 Markdown 语法：标题、列表、粗体、斜体、引用、代码块	⭐⭐⭐⭐⭐	CSDN（部分支持）、掘金、GitHub Pages
Markdown (扩展)	支持表格、脚注、任务列表、折叠块等扩展语法	⭐⭐⭐⭐	掘金、GitHub Pages、Hexo/Hugo
富文本编辑器	所见即所得编辑器，可直接编辑文章样式	⭐⭐⭐⭐⭐	Medium、CSDN 编辑器、微信公众号
HTML	直接使用 HTML 标签和样式	⭐⭐⭐	自建博客、GitHub Pages、部分 Markdown 平台嵌入 HTML
Word / Office 文档	在 Word/Office 中撰写，再导出 HTML 或 PDF	⭐⭐	自建博客、部分 CMS（需导入）
PDF / 图片文章	将文章导出为 PDF 或截图发布	⭐	微信公众号、社交媒体、教育资源分享
LaTeX / MathJax	数学公式排版工具	⭐⭐⭐	科学博客、教育教程、掘金（支持 MathJax）

整体来看，掌握Markdown的基本语法，基本上可以满足大家95%的需求，尤其是对于CSDN这类平台，markdown可以让文章的排版更优质。

对了，有个前提，记得使用电脑端操作。

但话说回来，其他方式也各有各的好处，比如LaTeX ，在编辑数学公式的时候非常丝滑。这个用到的时候研究一下就好，不放过多心思，我接下里主要梳理一下排版常用的方式。

（2）常见的排版技巧

如果是新人的话，建议看看这位美女的文章：【小白】如何写好自己的一篇CSDN博客（美化1），我就不过多讲解基础信息。

在掌握了都有哪些功能之后，我们就可以下怎么布局才好看了。

【1】关于序号

技术博客里的“序号”既是组织逻辑的工具，也是阅读体验的一个小细节。但关键在于把握复杂度，不能不用，也不能滥用。

原则1： 二级原则，序号只到二级，除非是长篇教程。比如本篇教程中的序号是这样的（本篇较长，所以多了大标题）：

### 二. 正文		// 大标题
#### 1. 排版技巧		// 小标题（大标题下的1级分类）
##### （1）博客撰写的常见方式		// 子标题（大标题下的2级分类）
##### （2）常见的排版技巧		    // 子标题（大标题下的2级分类）
#### 2. 技术内核		// 小标题（大标题下的1级分类）
#### 3. 个人养成		// 小标题（大标题下的1级分类）

序号本身是为了区分的，如果序号过多，简直是灾难，所以博客还是以轻量为主；在遵守二级原则的基础上，至于怎么写标题是没有关系的，常见的有这几种样式，仅供参考：

参考样式1：Emoji 强调法

## 🚀 一、环境搭建
### 🛠️ 1.1 安装依赖
### 📦 1.2 初始化项目

## 💻 二、代码编写
### ✍️ 2.1 新建文件
### 🔧 2.2 添加函数

参考样式2：经典编号式

## 一、环境搭建
### 1.1 安装依赖
### 1.2 初始化项目

## 二、代码编写
### 2.1 新建文件
### 2.2 添加函数

参考样式3：符号风格法

## ✦ 环境搭建
### → 安装依赖
### → 初始化项目

## ✦ 代码编写
### → 新建文件
### → 添加函数

更多的样式可以直接问AI，在这个方面它还是比较靠谱的，然后根据自己的需要设计一套有趣的。但一定注意：简洁、有序、勿乱

【2】关于强调

肯定很多人会问，既然标题只能两级，那我多余的内容怎么办？答案很简单，那就用强调。

什么是强调？能和常规文本区分开的内容就叫强调，如果你一路看过来，或许发现了很多强调的写法，比如：

强调样式1：引用

这个就是一种强调，常用于写总结或者额外的一些标注

强调样式2：代码块儿

这个也是一个强调，虽说是代码块，但是我们可以用不写代码，本身的背景就是一种强调。

强调样式3：特殊颜色

这种颜色的文本也是一种强调

强调样式4：使用表格

强调标题	强调内容
内容1	内容2

强调样式5：使用图片  强调样式5：使用列表

• 这里是一个强调
• 这里是一个强调
• 这里是一个强调

当然还有很多很多其他的强调效果，比如视频、超链接，或者是下划线、高亮等等，我就不一一举例了，都可以作为一种强调的作用来装饰。

如果说序号的分布是一个文章的脉络，那么强调就是一个文章的装饰，只有脉络会很素，只有装饰会很俗。

2. 技术内核

接下来到了文章的才华部分，这个部分如果草草略过，那就是虚有其表，就好比社会中会有一个现象：丑女作妖，你会想骂两句，美女作妖，你会感到无语（好色之徒例外），没有干货的文章排版再漂亮终归是华而不实，类似美女作妖。

（1）我们感到无语和想骂人的原因

我总结了一下，仅供参考，若有其他原因，敬请评论。

序号	现象	读者的感受	本质问题	可恶指数
1	标题党：标题说“深入解析”，内容却是复制文档	被欺骗、浪费时间	标题与内容不符	❌❌❌❌❌
2	遇到关键点时突然一句“略”或“自行百度”	被耍、愤怒	逃避核心难点	❌❌❌❌❌
3	只贴概念，不给示例代码	看不懂、无法实践	缺乏可复现性	❌❌❌❌
4	大段空话、复制官方文档	觉得在糊弄人	没有个人思考或价值	❌❌❌❌
5	AI 原版直接贴上去	看起来没温度，缺乏思考	没有经过验证或加工	❌❌❌❌
6	贴一堆代码，没有解释思路	像抄作业，看不懂逻辑	缺乏讲解过程	❌❌❌
7	文章太散，什么都想讲，没重点	跟不上思路、读不下去	结构混乱	❌❌❌
8	没有总结，没有结论	看完没收获	缺少输出结果	❌❌
9	写“Hello World”级别的内容	浪费时间	没有针对实际问题	❌❌

（2）正确示范：Geogebra中的If指令讲解

---

【1】GeoGebra If 指令详解（标题不要空洞，务必具体）

本文以实际操作为核心，带你理解 GeoGebra 中 If 指令的用法、常见坑及应用示例。每个例子都可直接复制到 GeoGebra 中运行。

【2】If 指令基础语法（从点到面，逐步深入）

在 GeoGebra 中，If 指令的基本语法如下：

If[条件, 表达式1, 表达式2]

• 条件：逻辑表达式，结果为 true 或 false。
• 表达式1：条件成立时返回的值。
• 表达式2（可选）：条件不成立时返回的值，如果省略，则默认返回空值。

示例 1：简单条件

在 GeoGebra 输入框输入：

a = 5
If[a > 3, "大于3", "小于等于3"]

结果： "大于3"

✅ 说明：当条件成立时返回第一个值，否则返回第二个值。

【3】使用 If 指令的注意事项（避免让大家踩坑，是博客的一大亮点）

1.条件必须返回 true/false

错误示例：

If[a + 2, "yes", "no"]

❌ 这是错误的，因为 a + 2 不是布尔类型，会报错。

正确示例：

If[a + 2 > 5, "yes", "no"]

2.表达式可以是数字、字符串或函数 数字示例：

b = If[a > 3, 10, 0]

函数示例：

f(x) = If[x > 0, x^2, -x]

3.嵌套 If 的写法

If[a > 5, "大于5", If[a > 3, "大于3小于等于5", "小于等于3"]]

✅ 说明：嵌套 If 可以处理多条件分支，但建议不超过两层，避免复杂度过高。

4. 常见坑（一定得说清楚） （1）条件写成等号比较时要用 == 而不是 =。 （2）嵌套过多导致公式难读，建议拆分成辅助变量。 （3）字符串一定要加引号 " "。

【4】实战示例（告诉大家怎么用，而不是浮在理论上）

示例 1：分段函数绘图

我们想画一个分段函数：

f(x) = If[x < 0, -x, x^2]

效果： x < 0 → 返回 -x x ≥ 0 → 返回 x² 直接在 GeoGebra 图形窗口输入即可看到曲线。

示例 2：条件判断颜色

A = (2,3)
If[x(A) > 1, SetColor[A, "red"], SetColor[A, "blue"]]

✅ 说明：点 A 的颜色会根据条件自动改变。

【5】总结与建议（最后收尾，来个总结）

1. If 指令核心是 布尔条件 + 两个返回值。
2. 避免复杂嵌套，尽量拆分步骤。
3. 所有示例可直接在 GeoGebra 运行，保证可复现性。
4. 通过辅助变量和注释，可以让公式更易读。

小结：GeoGebra 的 If 指令非常强大，掌握条件逻辑和返回值类型，是做动态几何、函数绘图和交互动画的基础。

---

这个示例不是很完美，但有以下几个特点：

✅ 结构清晰（一级 + 二级标题，二级不超过二级） ✅ 每个概念都有示例，可直接复制运行 ✅ 避免空话、标题党、AI 原版贴上去 ✅ 解释步骤详细，注意了布尔逻辑、嵌套层数等坑

3. 个人养成

个人养成是综合性的，我接下来从技术能力、 写作习惯、阅读与借鉴、生活习惯与心态、工具与流程优化5个方面来综合汇总一下，仅供参考。

1️⃣ 技术能力养成

方向	具体行为	说明
多读书 / 多看资料	阅读专业书籍、官方文档、优秀博客、论文	增加知识储备，避免重复造轮子
上手实践	做项目、动手实验、写小程序或笔记	让知识活起来，保证博客内容可复现
反思总结	写实验日志或小结	帮助提炼思路和方法，形成独特见解

2️⃣ 写作习惯养成

方向	具体行为	说明
定期更新	每周或每月固定写作时间	保持持续输出，建立读者期待
记录灵感	随时在笔记工具记录灵感	避免想写的时候找不到题材
模板化写作	建立文章框架模板	避免每篇从零开始，保证结构清晰
自我审稿	检查逻辑、示例可复现、排版	保证文章质量，避免踩坑

3️⃣ 阅读与借鉴

方向	具体行为	说明
多看优秀博客	学习结构、表达、排版	吸收好的写作方法，不盲目模仿
学习国外资源	Medium、Dev.to、Stack Overflow	扩展思维方式，学习更广泛的技术视角
对比总结	对比不同写法或解决方案	形成自己的理解与见解，而不是照搬

4️⃣ 生活习惯与心态

方向	具体行为	说明
持续积累	保持动手和学习的连续性	技术积累才能支撑高质量文章
准时作息	保证精力充沛	避免写出来文章质量下降
保持好奇心	对新技术、新方法保持探索	文章有趣、有干货，读者才爱看
不怕失败	记录失败经验	成功经验太少？失败案例也有价值

5️⃣ 工具与流程优化

方向	具体行为	说明
使用笔记工具	Obsidian、Notion、印象笔记	管理资料和灵感，方便复用
版本控制	Git / GitHub	记录博客版本，方便回溯
模板 & 自动化	文章框架模板、代码片段库	提高写作效率，减少重复工作
图片 / 图表	截图、动画、代码高亮	让文章可视化，易于理解

💡 总结

写好博客不仅仅是“写文章”，更是长期养成技术能力、写作能力和生活习惯的综合体现。

一句话概括：

“多看、多做、多总结、持续输出、保持好奇与耐心”，才能写出真正有价值的技术博客。

三. 📦结尾

自媒体时代乱象频出，尤其是不良博主为了流量各种谣言，AI确实是一种得力工具，但将其推向神坛确未免可笑，所以我们慎重对待。

如果你让AI回答你胡萝卜都有哪些维生素，AI的答案非常靠谱，如果你让AI写一个淘宝，怕是有点天方夜谭。

现在我们知道了怎么写一篇优质的技术博客，无非就是从排版技巧、技术内核、个人养成三个方面。那我们回想一下，这三个方面都是和AI怎么融合的？

1. 排版技巧，让AI提供指导

对于排版，比如标题，比如各种强调样式，比如markdown语法应该怎么写，我们写的过程中遇到问题应该怎么修改，这个时候直接找AI就好了，对于这种简单的、无脑的、只是拼知识储藏的内容，可以让AI辅助一下。

2. 技术内核，让AI提供方向

如果你想写个好的技术博客，但是不知道应该写哪些内容，这个时候就可以把标题给AI，让它给个框架，比如：我正在写Geogebra的List指令，我应该写哪些内容，你给我个框架

# GeoGebra `List` 指令教程

## 1. 简介
- `List` 指令的作用
- 使用场景
- 与其他指令的关系

## 2. 基础语法
- 基本格式
- 参数说明
- 简单示例

## 3. 创建列表的方法
- 手动列出元素
- 使用范围创建列表
- 使用已有对象生成列表

## 4. 列表的操作
- 访问列表元素
- 修改列表元素
- 列表合并与拆分
- 列表长度和索引

## 5. 高级用法
- 嵌套列表
- 列表与函数结合
- 条件生成列表

## 6. 常见问题与注意事项
- 索引越界
- 空列表处理
- 数据类型限制

## 7. 实战案例
- 例 1：绘制多边形顶点列表
- 例 2：动态生成坐标点列表
- 例 3：列表与动画结合

## 8. 总结
- 复习要点
- 实用技巧
- 延伸学习资源

技术内核方面AI的知识仅供参考，因为目前AI还没法代替人类思考，纯AI文字的博客，还记得可恶指数是多少吗？

3. 个人养成，提出目标让AI提供资料

别的不说，AI数据库还是很强大的，所以对于个人养成，可以提出目标找资料。比如：我想成为一个很厉害的交互式动画工程师，有没有什么好的资料让我学学?

当然有，而且你的目标非常明确——“交互式动画工程师”其实是一个融合 **前端开发 + 动画设计 + 数学/物理建模 + UX** 的复合技能方向。给你整理一份 **系统学习路径和资料**，从基础到高级：

---

## 1. 编程基础（前提技能）

**目的：能写动画、控制交互逻辑**

* **JavaScript**

  * 推荐书籍：《JavaScript 高级程序设计（第4版）》
  * 在线教程：MDN JavaScript 教程
* **HTML/CSS**

  * CSS 动画 & Flex/Grid 布局
* **TypeScript**（可选，但大型项目很有用）

---

## 2. 动画基础与可视化库

**目的：快速实现交互效果和动画**

* **Canvas / SVG**

  * 学习 HTML5 Canvas API
  * 学习 SVG 动画和路径操作
* **主流动画库**

  * **GSAP**（GreenSock Animation Platform）——强大的时间线动画库
  * **Three.js**——WebGL 3D 动画
  * **PixiJS**——2D 高性能渲染
* **物理引擎**

  * Matter.js、Planck.js ——实现物理模拟动画

---

## 3. 数学与物理建模

**目的：让动画不仅好看，还能模拟真实世界**

* 几何与向量基础（尤其是平面和空间几何）
* 物理模拟基础（力学、弹簧、摩擦）
* 统计和数据可视化基础（处理动态数据）

---

## 4. 交互式动画平台参考

**借鉴优秀案例**

* **GeoGebra**（数学动画）
* **PhET**（物理实验交互模拟）
* **Desmos**（函数和图形交互）
* **Processing / p5.js**（创意编程与交互）

---

## 5. 设计与 UX

**目的：让动画不仅能动，还好用**

* 基本交互设计原则（反馈、可控性、可理解性）
* 色彩、布局、动画节奏
* 学习动画曲线（ease-in, ease-out, bezier 曲线）

---

## 6. 高级技巧

* Lottie 动画（AE → JSON → Web/APP 动画）
* Shader 编程（GLSL，用于炫酷特效）
* 数据驱动动画（实时数据生成动画）
* 性能优化（GPU 渲染、请求动画帧优化）

---

## 7. 学习资源整理

* **书籍**

  * 《Learning Three.js – The JavaScript 3D Library for WebGL》
  * 《Creative Coding with Canvas & SVG》
* **网站**

  * [MDN Web Docs](https://developer.mozilla.org/)
  * [Three.js 官网](https://threejs.org/)
  * [GSAP 官方文档](https://greensock.com/docs/)
  * [p5.js 官网](https://p5js.org/)
* **开源项目**

  * GeoGebra 脚本和工具库
  * PhET 源码（GitHub 上有开源部分）
* **课程**

  * Coursera / Udemy 上的 Web Animation 课程
  * Khan Academy 的交互式编程课程（p5.js）

---

如果你愿意，我可以帮你 **画一张“交互式动画工程师学习路线图”**，把知识模块、技能点和实践工具都可视化，一眼就能看懂从入门到精通的路径。

你希望我帮你画吗？

呐，还是很不错的。

4. AI时代，优质的技术博客只能我们自己来写

在 AI 时代，内容生成已经不再是稀缺资源，AI 可以快速帮我们生成文章、示例代码，甚至写出看似专业的技术教程。然而，这也带来了两个明显问题：

（1） 同质化严重

• 大量 AI 生成内容趋向模板化，缺乏真正的实践经验和独到见解。
• 搜索引擎中充斥着“完美但是空洞”的技术文章，读者很难从中获取真正能解决问题的方案。

（2） 深度与创新难以替代

• 高质量技术博客不仅是知识的堆砌，更是作者思考、实践、总结的结晶。
• AI 可以帮你加速内容生产，但很难替代作者对问题本质的洞察、架构设计的经验以及遇到坑时的调试心得。

因此，在 AI 时代，真正优质的技术博客必须由我们自己来写，原因在于：

• 经验独特性：你在项目中遇到的问题、踩过的坑、优化方案，AI 无法复制。
• 视角原创性：技术选型、架构思路、性能优化方法，这些思维过程需要真实的工程经验。
• 信任背书：读者更愿意相信有实际项目经验的作者，而非只会生成文字的 AI。
• 长期价值积累：自己写博客的过程，也是知识整理和技术沉淀的过程，利于个人成长和团队传承。

在 AI 工具的辅助下，我们可以：

• 自动生成示例代码或辅助排版，提高写作效率；
• 快速整理文献、文档、官方说明，减少查资料时间；
• 进行初稿润色，让文章更易读，但核心经验和观点仍需自己贡献。

总结：

AI 是加速器，不是创作者。优质技术博客的核心价值在于经验、思考与创新，而这些只能从真实工程实践中提炼。唯有亲自撰写，才能在 AI 时代脱颖而出，形成独一无二的技术输出。

---

本文收录于微信公众号：八荒启-交互动画，可点击扫码关注，获取更多技术咨询与服务。