Day 27：如何写出一篇还不错的技术文章？

身为技术人，我想大家都有在网路上 Google 寻找资料的经验。从许多热心网友的技术文章中，找到我们需要的方向。而现在我们踏上了写作的这条路上，当我们将文章发布到网路上，势必内容就要让其他网友也能看得懂。今天就要来介绍撰写技术文章时，可以掌握的几个技巧。

先列出文章大纲

我觉得列出文章大纲满重要的，根据自己经验，没有事先列出文章大纲的内容通常在撰写上，思绪会有点乱、甚至是前後逻辑也会有一些差异，因为想到一就写一、想到二再写二，一不小心就会前後文不连贯。

列出大纲的好处在於掌握整篇文章所要表达的内容，思绪会比较清楚，撰写上就能够写出比较连贯的前後文。

大纲范例

以「Day 1：为什麽工程师要建立自己的技术部落格？」为例，可能就可以先列出 h2、h3 标题，再撰写各段内容：

## 先来一段我自己的心路历程吧！

### 起因源自於我想要做一个 side project
... 内容 ...

### 既然要记录内容，似乎可以试试看撰写部落格？
... 内容 ...

### 将我所会的透过文章展示出来
... 内容 ...

## 为自己的学习历程找到容身之处

### 公开到网路会对自己的笔记更为谨慎
... 内容 ...

### 你的笔记可以帮助到更多人
... 内容 ...

## 结语：使用 Hexo 架设你的技术部落格
... 内容 ...

开始撰写文章，但一开始可以不用这麽完美

大纲拟定好後，就能够开始撰写文章内容。基本上想到什麽就可以写进去，这段时间可以不用特别去在意说一定要写到很好，因为文章撰写完成之後，还会不断调整修正，最终再发布到网路上，因此在撰写时我们可以专注在内容的撰写上，之後再进行修正。

当然如果在写作过程当中突然有新的灵感想要进行修正，也是可以的。另外如果你是一天写一个段落，那其实就可以在写完该段落之後调整段落内容了。

搭配范例，善用情境与条列式说明

写技术文章，主角之一就是语法、程序码或是指令。如果单纯只有叙述，对於新手来说可能有点难理解；但如果只有语法范例，那对於新手来说更是灾难。因此范例与情境说明的搭配使用，我认为是最清楚的。

我自己撰写一篇技术文章时，如果需要使用语法佐证，通常会自己撰写一个、并确认语法能够跑出来的情况之下，就会将语法贴到文章内；再来善用情境与条列式说明，能够减轻新手的抽象感，让新手更容易理解文章所想表达的内容。

范例

• 利用段落，表达情境
• 利用条列式说明：
  • 可以列点说明各个细项
  • 或是像范例中说明目前情境所遇到的状况

善用文章样式

文章撰写完後，会开始整理文章内容。此时我们可以善用像是粗体等文章样式，将重点标注起来；如此一来读者阅读文章时，比较能够轻易看见本篇文章所要强调的重点。

范例

Sass / SCSS 的编译方式是由上而下编译的，因为这个特性，我们必须把变数放置在使用变数之前。以下列这个错误例子来举例：

利用粗体，将句子重点标示出来。

取一个适合的文章标题吧！

通常来说文章撰写前，我会先订一个文章标题；但是在完成文章後，我还会针对文章标题进行调整，可能是撰写到後面，想到了更好、更适合的文章标题？或是写到一半发现篇幅太长，想拆分成不同篇文章撰写。

范例

这里也举例几个 NG、好标题对照组，取标题时能够避开这些雷区：

• 网页编辑器扩充工具介绍：Emmet ---> 想要提升写 code 效率，一定要认识的写网页好帮手 - Emmet
  • 比起单纯的「Emmet 介绍」，可以多加叙述 Emmet 可以帮助我们解决什麽？（提升写 code 效率）
• Bootstrap 5 新手教学实战营 - Week 1 ---> Bootstrap 5 起手式！如何套用至网页、确认套用成功？
  • 比起单纯只写课程的「周数」，可以直接在标题上叙述学习到的内容（起手式、如何成功套用到网页）
• Flex 笔记：Flex-direction 与主轴、交错轴 ---> Flex 强大排版术：flex-direction 如何应用？主轴、交错轴附图解说！
  • 原本标题虽已提到相关字词，仍旧能以较为白话的方式叙述，阅读起来不那麽死板，读者也能够从标题得知内文有附图解说

持续检查、最佳化文章，发布！

发布之前，持续检查是否有错字、多阅读个几遍，如有不顺的语意可以再进行修正。不断的反覆阅读与最佳化文章，直到自己认为可以发布到网路上了，就勇敢的发布吧！

发布文章後不会是结束，持续的关注网友给予的反馈、式情况调整以及更新文章内容，也是很重要的哦～

参考资料

• 参加 六角笔记王 心得之一

本篇文章同步发布於我的部落格 Gui Blog