摊牌了，我是这么写文章的...

大家好，我是三元同学。

上个星期刚看了掘金的直播，张鑫旭、Winter、阿宝哥以及郑晔都在聊写文章这个话题，我也看了~颇有感触，所以今天想跟大家聊聊 「写文章」 这件事儿，简单谈谈我对写文章的一些看法和经验。

相信很多写过文章的人最初都是想记个笔记，我也是，一开始发的文章全是解决xxxbug、数组的方法有哪些、某个库的简单使用... 如下图

说实话，现在的我回去看这些文章，肯定觉得很水，但是对于当时的我来说，这些知识也不简单呀，要记住的东西比较多，我又不可能看过一遍就能全记住，只能靠写博客记笔记来加深印象，后面忘了再来复习复习

发的笔记文章多了，我就会发现偶尔有一些读者在文章底下评论：我查了一个多小时的问题，终于在在这篇文章里找到解决办法了，那时我心里的想法就是：我随手记的笔记竟然能帮助到别人！！一举两得呀，同时我的心里也有另外一个想法：我被某个问题的困扰很久的时候，要是也能有让我看了就懂的文章就好了

就是因为这样的心态，我后面写的笔记也不会写的那么随意了，因为我发现别人也会看到我的文章，我写的只有我自己看得懂的话，别人刚看到这篇文章标题，产生了一丝希望，进来以后发现啥也看不懂，又失落的关掉网页，这种场景谁没经历过呢？

本来只是随手记笔记的我，变成了一本正经写博客，会去考虑文章的排版，斟酌一些用词是否恰当，有时还会担心发出去会不会被看的人喷，这样一来二去的，写文章的时间就变长了，之前纯记笔记，我一天能写4、5篇（毕竟当时刚入门，每天学的知识也多）；开始正经写博客了后，一天写1篇，不夸张地说，我可能昨天学了个知识还来不及整理，第二天花一整天的时间整理 + 写文章，真的超级超级费时间！

于是我就开始反思，我的学习任务这么紧，怎么还能花一天的时间写一篇文章呢？我收获了什么？ 嗯！收获是不大，对于当时的我来说，唯一收获到的可能就是又复习了一遍相关知识。那既然收获不大的话，我花一天去学更多的知识不香吗？香~ 所以后来写文章就搁置了一段时间（笔记还是有在做），去做了些个人项目积累经验。再后来，写文章其实都没那么频繁了，一是开始工作了，没那么多精力；二是本来学习时间就要靠挤，更别说学完后写个文章了

👆以上就是我从接触写博客的一个简短的心路历程

👇接下来聊聊具体的

本文结构

为什么写文章？

写文章无非是两点：记笔记、提升个人技术影响力

上面也聊到了一些，很多人写博客是奔着记笔记去的，在这基础之上，有些优秀的人可能因为他对某些知识的见解独特或者是他的文笔比较好，写出来的东西被读者喜欢，久而久之关注的人越来越多，收获了一大批的读者朋友。因为他们关注你、鼓励你、问你问题、给你提建议甚至是催稿，你就有创作下去的动力了~

还有一些业界的大佬，可能会将自己多年的经验写成文章，主要是为了提升个人影响力。提升个人影响力的好处多了去了，比如你去某家公司面试，恰巧面试官或主管看过你的文章，知道你的水平还不错，这也是个加分点呀~ 还有些公司的绩效或者晋升可能不止会考虑你在公司内的贡献，有可能也会将你在业界的影响力作为一个参考项。同样的，很多大佬出书也是一样的

怎么写好文章？

先强调一点，把文章写好不是一夜之间就能做成的事情，需要日积月累，就跟读书时写作文一样，多写，多看，多学，慢慢地就能发现自己写作水平提升了，所以，急不得

之前很多小伙伴私聊问我怎么写文章，我说写文章这事也不是一句话两句话能讲清的呀~还是需要多写，然后学习借鉴别人的写作技巧和方式，比如前段时间我看到哪个作者写的文章都喜欢在文章开头加上这样一段：

看完本文，你将会学到：

1. xxxxxxxxxx
2. xxxxxxxxxx
3. ....

我觉得这真的是个很不错的方式，直接交代了本文所涉及的知识点，直击重点，能为读者节省不少时间，后面我也打算学习一下这个写法。

这就是一种学习进步的过程~

交代背景

相信大家都看过很多文章开头都是这样的：大家好，我是xx，前段时间发生了xxxx，所以本文来讲解一下...（其实本文开头也是这样的，不知道你们发现没？）

这就是一种交代背景的🌰例子，当然还有昨天xxx刚发布了最新的xxx版本，我昨天上手试了一下效果特别好，本文带大家来体验一下...、xx技术在平时经常被用到，但很多人都没有深入学习过，本文带你们学习一下...

交代背景这种方式可以很好得让读者产生共鸣，从而有很强的代入感，勾起他们看文章的兴趣

构思文章目录

既然准备写文章，一定要知道自己要写什么？以怎样的写作顺序来写？

举个🌰例子，我之前写过一篇一文带你了解如何排查内存泄漏导致的页面卡顿现象，如题名，显而易见，写这篇文章的目的是为了让读者了解如何排查内存泄漏导致的卡顿现象，那我就要构思文章结构，构思的思路如下：

• 读者知道什么是内存泄漏吗？得先简单介绍一下
• 为什么会有内存泄漏的现象？得先简单介绍一下
• 如何排查？要用到什么工具？得先介绍一下工具的基本使用
• 开始排查了，有多少种内存泄漏的情况？我要分别列举一下

于是就有了下图这个文章目录结构

换位思考

再来说说我个人觉得写文章非常重要的一点，也是我一直坚持做的：换位思考

写时，第一视角是我；写后，第一视角是读者

我在写文章时经常会问自己：如果我是一个啥也不懂的小白，我看自己这篇文章能看懂吗？

于是我就将自己脑袋放空去重新看自己的写的内容：很容易就发现一些晦涩难懂的点，然后就继续修修改改

图文结合

其实写文章最费时的就是图文结合了，画图的时间远远比写文字的时间多的多，尝试过的人一定深有体会

为什么要画图呢？因为有时候文字根本讲不清楚呀，举个最典型的🌰例子就是算法题的讲解，比较复杂的题即使有人用纯文字的形式给你讲了，你也不一定能听懂，因为别人讲述文字的时候，所有的动画都浮现在他的脑子里，只是没有表现出来而已

举一个我之前写过的快排的演示动图的🌰例子

这样看了绝对比纯文字更一目了然

多引用外链

你写一篇文章时不可能把所有的东西都交代得清清楚楚，内容要有长有短，比如某些事情背景特别长、某些知识点是本文的前置知识，但一句话两句话又交代不清楚，那么可以通过超链接的形式告诉读者，读本文前可以先阅读别的文章，这样就能用更好的文章阅读体验了

举个我自己文章中的🌰例子

因为下面的内容需要了解CSS属性值定义语法，但三两句话说不清楚，只会徒增本文的篇幅，而且已经有讲的不错的文章了，因此我就选择让大家先跳转阅读，然后再回过头来继续阅读本文

巧用大白话

技术的文章是很枯燥的，这毋庸置疑，尤其是一些生硬的名词，看了而且看不懂就更头疼了，谁不想文章中有一段让人豁然开朗的解释呢？

举个🌰例子，之前写过一篇学习过CSS，那你知道BFC是什么吗？，开头介绍「什么是BFC？」时，先讲了一下官方的解释，然后又用一句很普通的话解释了一下，能让人瞬间就知道BFC是什么，是干啥的。如下图

这样看，是不是比官方的解释更通俗易懂一点呢？

多举例子🌰

哈哈哈哈，写到这里我写笑了（每次提到"例子"这个词，我都会加一个🌰，其实这也是学习的别的作者，觉得挺有意思的）~

细心的人肯定看到了，我前文已经举了很多🌰例子了，都是为了给大家演示某些情况，能让你们以最快最直观的方式了解到我纯文字提到的场景，加深你们的印象

还有一种形式就是，一些技术文章涉及到很多代码的话，你可以放到Github上，方便读者看完能直接拿到对应源码进行调试~

hhhh，我就不继续在举🌰例子这章节里举🌰例子了~ 禁止套娃

写总结

开头交代了背景，文章洋洋洒洒写了一大片，最后不得来个总结？有些读者可能没耐心看一篇上千上万字的文章，只想得到一个结论，所以会滑到底部直接看总结，如果对总结的点有什么疑惑的，再翻回去继续阅读

比如你写了一篇文章叫做 《A技术与B技术的使用心得》，开头跟大家交代了你自己使用A技术和B技术后的一些心得以及个人看法，中间也时不时会提这两个技术的区别、优缺点。那进来看这篇文章的人多半是抱着 「想要了解这两个技术各自的优缺点」 的心态来的，最后来个总结多重要呀~

举个🌰例子：

没啥题材好写怎么办？

我的一个小伙伴之前这样问过我：零一，我想写文章，但是不知道写什么，想写的感觉大家都写过了，我就没什么好写的了，而且我怕写出来被大家说很水，所以不太敢写，怎么办？

这里先不回答这个问题，来给大家举个活生生的🌰例子

我最开始接触写作，一天写4、5篇，一星期写7天，我脑洞没这么大，不是我想到了很多很好的题材去写，而是那时的我疯狂吸收知识，学到的东西都能记成笔记，都能成为一篇文章！慢慢地，随着文章越写越多，我开始注重自己文章的质量，不会随便把一个笔记都往博客上发了，因为我发现我随手记得笔记对他人不一定有帮助，我一定要写出比较好的文章，写什么呢，写这个？这个好像不值得写篇博客，这么简单的知识点，就这样，我陷入了一个死循环

后来忘了在哪个群里看到一个群友提到：我觉得每过一段时间，回头看之前自己写的代码，都感觉那时候好蠢，我豁然开朗，这不就是我陷入死循环无法自拔的原因吗？

这个群友为什么会这么说？因为每过一段时间，他都有所进步，所以他看到进步之前的自己写的代码，感觉很蠢，他无法相信自己当时能写出质量差的代码。但他不知道全世界有多少程序员水平跟进步之前的他一样甚至更低呢？说不定别人看到他这段代码，还会觉得他写的好呢！他只是在害怕自己不够优秀

再切回到写文章的话题中。所以不要害怕写的文章很水，你切切实实学习了这个知识，你想把你的见解写成文章分享出来，这很符合逻辑呀，要是你硬要跟大佬们比，那真的没法比了~

至于想写的感觉大家都写过了，我就没什么好写的了这个想法，其实我觉得大可不必在意，有以下两点原因：

• 你只是在写你所学习到的、想要整理的东西，这不与他人写过的同题材的文章冲突
• 每个人看待知识的角度不一样，写出来的文章自然也不一样，说不定你的切入点比别人更好呢？
• 在活跃的社区发表你的文章，可以借助广大读者的力量给你把把关，看看是不是有哪些地方理解有误，这是一个很不错的技术交流机会

所以，想写就写，Don't care！

至于写文章的题材，其实有很多，这里列举一下：

• 某个框架的上手指南
• 某开源库的源码阅读心得
• xxx的踩坑经历以及总结反思
• A技术与B技术的优缺点、适用场景比较
• 分享自己项目或者他人项目的架构
• 学习笔记（还是要有点结构的，不要太随意，不然自己都看不懂）
• 面经
• 看了xx书或参与了xx大会后的收获总结
• ...等等

总之就是啥都能写，只要是你觉得值得总结的东西

写文章被喷怎么办？

喷人本来就不是一个很文明的行为，到底是一篇怎样的文章才能让他人在评论区破口大骂呢？是这篇文章在diss某人？还是这篇文章在拉踩别的技术？我觉得只要不是太过分的文章，没啥好喷的吧~

谁写文章没被喷过呢？上个星期刚发表了一篇CSS为什么这么难学？方法很重要！^[1]，全文教大家从语法切入，从根本上学习CSS的语法，读懂如何靠自己看懂每个CSS的属性的使用，但评论区却有这样的声音

我都不用看，这个人一看就是开着小号来的，爱喷人又不敢用大号喷，这在现实生活中是得多怂啊！不过明白人还是多，其实我当时自己都没看到这条评论，就有网友帮我怼回去了（此处感谢rookiee）

其实都看淡了，网络喷子无处不在的，技术社区还好，要是放到抖音、快手，评论区简直惨不忍睹。所以，大家以后如果写文章被喷了，希望不要太在意，如果看到真难受，那就怼回去或者删掉他的评论～

正经技术人谁会骂人啊？

写作工具推荐

讲那么多了，推荐一些写作工具🔧吧，也不多推荐，都是我自己平时用着觉得不错的，推荐给大家做个参考

Markdown编辑器

• Typora^[2]：平时自己在本地写文章，用的最多的就是这个
• Mdnice^[3]：大鹏开发的Markdown编辑器，提供免费的图床和本地云端存储，还支持很多主题样式

画图

• Diagrams^[4]：很简约的画图工具，还支持保存源文件到本地、Github、Gitlab等等远端，并且是实时保存的
• KeyNote^[5]：mac系统的一个软件，虽说是专门拿来做PPT的，但是也可以用来画图，尤其是做一些动画

动图录制

• LICEcap^[6]：同时支持 Mac 与 Windows双系统的Gif录制工具，我在mac系统中都使用这个，轻量好用！
• Gifcam^[7]：大小仅几kb，是一个exe执行文件，windows下超级推荐！

画思维导图

• 语雀^[8]：阿里出品的文档编辑产品，可以写文档、做表格、写PPT...，当然也可以用来画思维导图
• Xmind^[9]：一款专门用来画思维导图的工具，这个也是我经常用的，墙裂推荐

其它

• Carbon^[10]：生成一张Mac风格的代码图片，超级好看~ 如图

总结

写文章呢，就是这么个事儿，希望大家都能保持初衷，把所学到的知识整理总结发出来，而不要为了写文章而写文章。

希望本文对准备写文章或正在写文章的你能有所帮助，另外有更好的建议，大家可以评论区留言~

我是零一，分享技术，不止前端。我们下期见~

参考资料