我是怎么写技术文章的

大家好，我是前端西瓜哥，今天来说说自己写一篇技术文章的整个流程。

选题

首先是选题。会优先选择前端面试题，这是我公众号的定位。

选题比较纠结，很多东西都很感兴趣。

自己懂的不想写，不懂的感兴趣想写，但要现学现卖，非常耗时耗力。

个人的选题原则是 切入点尽量小，防止宽泛空洞以及烂尾。

如果你有什么想学习的常见前端面试题，欢迎在我后台留言。

收集资料

题目确定好了，就会去收集相关资料。

我会用搜索引擎搜索关键词，找几篇和主题相关的文章去阅读，掌握主题的各个知识点。偶尔会去掘金在站内搜索一下。

中文文章和英文文章都会找一些。很容易搜到一些有明显缺陷的中文文章。英文文章质量一般比中文文章的要高。

我英文只有 4 级，看英文文章稍微有点吃力，但好在技术文章长难句较少。最近也在学英语，在记雅思单词。

文章不一定从头到文看完，主要找自己不是很懂的点。

写代码实例

有些选题需要写一些代码实例，比如用 React 实现虚拟列表、实现节流函数，需要写一段示例代码来测试和展现效果。

我喜欢用 codesandbox 来写代码，它是一个线上写代码原型的沙盒环境平台。写完后把代码分享链接放到文章里，方便读者调试以及自己归档。

有些代码 demo 实现起来挺费时间，因为它通常是本文的核心部分，比如一些特定的算法。有些则是简单演示效果，比如介绍一些 React Hook 的效果。

写内容

随意列些选题的小点，然后开始扩展写。我的写作风格偏向于用浅显易懂的方式去写，不怎么抠细节，偏向于说清楚核心原理。

时不时深挖到一个小点，发现不是很懂，就需要再去搜一搜相关文章去补课。

我更喜欢写篇幅长度中短的文章，不给自己太大压力。

画示意图

示意图相比文字，能够更直观地转达一些比较绕的信息。

主要使用 drawio 的 vscode 版本，这样方便备份到 github。

有时候也会录制一些动图 gif，使用的工具是 LICEcap，它可以录制屏幕某个区域的动画，软件也很小。

偶尔会用 IPad 自己画一些图，比如现在这篇文章的头图就是我自己用 IPad 画的。

使用 Markdown

我使用 Markdown 写文章，工具是 Typora 编辑器。个人认为 Markdown 能让我更专注内容本身。

写好后，我会将 Markdown 内容复制到 https://markdown.com.cn/editor/ 网页。它可以选择主题生成富文本，然后我就将富文本拷贝到公众号。

复制到公众号后，我会简单地阅读一两次，做文案修正，确认没问题就发布文章。如果太晚，会使用定时发布，明天早上再发。

多平台分发

只发微信公众号，阅读量很低。我会使用多平台分发工具，发布到更多的平台上，获得更多的曝光。

用的是浏览器扩展工具 “微信公众号同步助手”，在你的文章页，会出现一个 “同步” 按钮，点击后选择你要发布的博客平台，然后同步。

同步完成后，在多个平台的草稿箱就生成了新的文章，然后我去修改调整一下（比如丢掉公众号下的广告）发布。

结尾

当然，最重要的还是：坚持、多写。

我是前端西瓜哥，欢迎关注我，学习更多前端知识。