攤牌了，我是這么寫文章的...

大家好，我是三元同學(xué)。

上個(gè)星期剛看了掘金的直播，張鑫旭、Winter、阿寶哥以及鄭曄都在聊寫文章這個(gè)話題，我也看了~頗有感觸，所以今天想跟大家聊聊 「寫文章」 這件事兒，簡單談?wù)勎覍懳恼碌囊恍┛捶ê徒?jīng)驗(yàn)。

相信很多寫過文章的人最初都是想記個(gè)筆記，我也是，一開始發(fā)的文章全是解決xxxbug、數(shù)組的方法有哪些、某個(gè)庫的簡單使用... 如下圖

說實(shí)話，現(xiàn)在的我回去看這些文章，肯定覺得很水，但是對于當(dāng)時(shí)的我來說，這些知識也不簡單呀，要記住的東西比較多，我又不可能看過一遍就能全記住，只能靠寫博客記筆記來加深印象，后面忘了再來復(fù)習(xí)復(fù)習(xí)

發(fā)的筆記文章多了，我就會發(fā)現(xiàn)偶爾有一些讀者在文章底下評論：我查了一個(gè)多小時(shí)的問題，終于在在這篇文章里找到解決辦法了，那時(shí)我心里的想法就是：我隨手記的筆記竟然能幫助到別人?。∫慌e兩得呀，同時(shí)我的心里也有另外一個(gè)想法：我被某個(gè)問題的困擾很久的時(shí)候，要是也能有讓我看了就懂的文章就好了

就是因?yàn)檫@樣的心態(tài)，我后面寫的筆記也不會寫的那么隨意了，因?yàn)槲野l(fā)現(xiàn)別人也會看到我的文章，我寫的只有我自己看得懂的話，別人剛看到這篇文章標(biāo)題，產(chǎn)生了一絲希望，進(jìn)來以后發(fā)現(xiàn)啥也看不懂，又失落的關(guān)掉網(wǎng)頁，這種場景誰沒經(jīng)歷過呢？

本來只是隨手記筆記的我，變成了一本正經(jīng)寫博客，會去考慮文章的排版，斟酌一些用詞是否恰當(dāng)，有時(shí)還會擔(dān)心發(fā)出去會不會被看的人噴，這樣一來二去的，寫文章的時(shí)間就變長了，之前純記筆記，我一天能寫4、5篇（畢竟當(dāng)時(shí)剛?cè)腴T，每天學(xué)的知識也多）；開始正經(jīng)寫博客了后，一天寫1篇，不夸張地說，我可能昨天學(xué)了個(gè)知識還來不及整理，第二天花一整天的時(shí)間整理 + 寫文章，真的超級超級費(fèi)時(shí)間！

于是我就開始反思，我的學(xué)習(xí)任務(wù)這么緊，怎么還能花一天的時(shí)間寫一篇文章呢？我收獲了什么？ 嗯！收獲是不大，對于當(dāng)時(shí)的我來說，唯一收獲到的可能就是又復(fù)習(xí)了一遍相關(guān)知識。那既然收獲不大的話，我花一天去學(xué)更多的知識不香嗎？香~ 所以后來寫文章就擱置了一段時(shí)間（筆記還是有在做），去做了些個(gè)人項(xiàng)目積累經(jīng)驗(yàn)。再后來，寫文章其實(shí)都沒那么頻繁了，一是開始工作了，沒那么多精力；二是本來學(xué)習(xí)時(shí)間就要靠擠，更別說學(xué)完后寫個(gè)文章了

??以上就是我從接觸寫博客的一個(gè)簡短的心路歷程

??接下來聊聊具體的

本文結(jié)構(gòu)

為什么寫文章？

寫文章無非是兩點(diǎn)：記筆記、提升個(gè)人技術(shù)影響力

上面也聊到了一些，很多人寫博客是奔著記筆記去的，在這基礎(chǔ)之上，有些優(yōu)秀的人可能因?yàn)樗麑δ承┲R的見解獨(dú)特或者是他的文筆比較好，寫出來的東西被讀者喜歡，久而久之關(guān)注的人越來越多，收獲了一大批的讀者朋友。因?yàn)樗麄?span style="font-weight: 600;color: #3e4ca3;">關(guān)注你、鼓勵你、問你問題、給你提建議甚至是催稿，你就有創(chuàng)作下去的動力了~

還有一些業(yè)界的大佬，可能會將自己多年的經(jīng)驗(yàn)寫成文章，主要是為了提升個(gè)人影響力。提升個(gè)人影響力的好處多了去了，比如你去某家公司面試，恰巧面試官或主管看過你的文章，知道你的水平還不錯，這也是個(gè)加分點(diǎn)呀~ 還有些公司的績效或者晉升可能不止會考慮你在公司內(nèi)的貢獻(xiàn)，有可能也會將你在業(yè)界的影響力作為一個(gè)參考項(xiàng)。同樣的，很多大佬出書也是一樣的

怎么寫好文章？

先強(qiáng)調(diào)一點(diǎn)，把文章寫好不是一夜之間就能做成的事情，需要日積月累，就跟讀書時(shí)寫作文一樣，多寫，多看，多學(xué)，慢慢地就能發(fā)現(xiàn)自己寫作水平提升了，所以，急不得

之前很多小伙伴私聊問我怎么寫文章，我說寫文章這事也不是一句話兩句話能講清的呀~還是需要多寫，然后學(xué)習(xí)借鑒別人的寫作技巧和方式，比如前段時(shí)間我看到哪個(gè)作者寫的文章都喜歡在文章開頭加上這樣一段：

看完本文，你將會學(xué)到：

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

我覺得這真的是個(gè)很不錯的方式，直接交代了本文所涉及的知識點(diǎn)，直擊重點(diǎn)，能為讀者節(jié)省不少時(shí)間，后面我也打算學(xué)習(xí)一下這個(gè)寫法。

這就是一種學(xué)習(xí)進(jìn)步的過程~

交代背景

相信大家都看過很多文章開頭都是這樣的：大家好，我是xx，前段時(shí)間發(fā)生了xxxx，所以本文來講解一下...（其實(shí)本文開頭也是這樣的，不知道你們發(fā)現(xiàn)沒？）

這就是一種交代背景的??例子，當(dāng)然還有昨天xxx剛發(fā)布了最新的xxx版本，我昨天上手試了一下效果特別好，本文帶大家來體驗(yàn)一下...、xx技術(shù)在平時(shí)經(jīng)常被用到，但很多人都沒有深入學(xué)習(xí)過，本文帶你們學(xué)習(xí)一下...

交代背景這種方式可以很好得讓讀者產(chǎn)生共鳴，從而有很強(qiáng)的代入感，勾起他們看文章的興趣

構(gòu)思文章目錄

既然準(zhǔn)備寫文章，一定要知道自己要寫什么？以怎樣的寫作順序來寫？

舉個(gè)??例子，我之前寫過一篇一文帶你了解如何排查內(nèi)存泄漏導(dǎo)致的頁面卡頓現(xiàn)象，如題名，顯而易見，寫這篇文章的目的是為了讓讀者了解如何排查內(nèi)存泄漏導(dǎo)致的卡頓現(xiàn)象，那我就要構(gòu)思文章結(jié)構(gòu)，構(gòu)思的思路如下：

• 讀者知道什么是內(nèi)存泄漏嗎？得先簡單介紹一下
• 為什么會有內(nèi)存泄漏的現(xiàn)象？得先簡單介紹一下
• 如何排查？要用到什么工具？得先介紹一下工具的基本使用
• 開始排查了，有多少種內(nèi)存泄漏的情況？我要分別列舉一下

于是就有了下圖這個(gè)文章目錄結(jié)構(gòu)

換位思考

再來說說我個(gè)人覺得寫文章非常重要的一點(diǎn)，也是我一直堅(jiān)持做的：換位思考

寫時(shí)，第一視角是我；寫后，第一視角是讀者

我在寫文章時(shí)經(jīng)常會問自己：如果我是一個(gè)啥也不懂的小白，我看自己這篇文章能看懂嗎？

于是我就將自己腦袋放空去重新看自己的寫的內(nèi)容：很容易就發(fā)現(xiàn)一些晦澀難懂的點(diǎn)，然后就繼續(xù)修修改改

圖文結(jié)合

其實(shí)寫文章最費(fèi)時(shí)的就是圖文結(jié)合了，畫圖的時(shí)間遠(yuǎn)遠(yuǎn)比寫文字的時(shí)間多的多，嘗試過的人一定深有體會

為什么要畫圖呢？因?yàn)橛袝r(shí)候文字根本講不清楚呀，舉個(gè)最典型的??例子就是算法題的講解，比較復(fù)雜的題即使有人用純文字的形式給你講了，你也不一定能聽懂，因?yàn)閯e人講述文字的時(shí)候，所有的動畫都浮現(xiàn)在他的腦子里，只是沒有表現(xiàn)出來而已

舉一個(gè)我之前寫過的快排的演示動圖的??例子

這樣看了絕對比純文字更一目了然

多引用外鏈

你寫一篇文章時(shí)不可能把所有的東西都交代得清清楚楚，內(nèi)容要有長有短，比如某些事情背景特別長、某些知識點(diǎn)是本文的前置知識，但一句話兩句話又交代不清楚，那么可以通過超鏈接的形式告訴讀者，讀本文前可以先閱讀別的文章，這樣就能用更好的文章閱讀體驗(yàn)了

舉個(gè)我自己文章中的??例子

因?yàn)橄旅娴膬?nèi)容需要了解CSS屬性值定義語法，但三兩句話說不清楚，只會徒增本文的篇幅，而且已經(jīng)有講的不錯的文章了，因此我就選擇讓大家先跳轉(zhuǎn)閱讀，然后再回過頭來繼續(xù)閱讀本文

巧用大白話

技術(shù)的文章是很枯燥的，這毋庸置疑，尤其是一些生硬的名詞，看了而且看不懂就更頭疼了，誰不想文章中有一段讓人豁然開朗的解釋呢？

舉個(gè)??例子，之前寫過一篇學(xué)習(xí)過CSS，那你知道BFC是什么嗎？，開頭介紹「什么是BFC？」時(shí)，先講了一下官方的解釋，然后又用一句很普通的話解釋了一下，能讓人瞬間就知道BFC是什么，是干啥的。如下圖

這樣看，是不是比官方的解釋更通俗易懂一點(diǎn)呢？

多舉例子??

哈哈哈哈，寫到這里我寫笑了（每次提到"例子"這個(gè)詞，我都會加一個(gè)??，其實(shí)這也是學(xué)習(xí)的別的作者，覺得挺有意思的）~

細(xì)心的人肯定看到了，我前文已經(jīng)舉了很多??例子了，都是為了給大家演示某些情況，能讓你們以最快最直觀的方式了解到我純文字提到的場景，加深你們的印象

還有一種形式就是，一些技術(shù)文章涉及到很多代碼的話，你可以放到Github上，方便讀者看完能直接拿到對應(yīng)源碼進(jìn)行調(diào)試~

hhhh，我就不繼續(xù)在舉??例子這章節(jié)里舉??例子了~ 禁止套娃

寫總結(jié)

開頭交代了背景，文章洋洋灑灑寫了一大片，最后不得來個(gè)總結(jié)？有些讀者可能沒耐心看一篇上千上萬字的文章，只想得到一個(gè)結(jié)論，所以會滑到底部直接看總結(jié)，如果對總結(jié)的點(diǎn)有什么疑惑的，再翻回去繼續(xù)閱讀

比如你寫了一篇文章叫做 《A技術(shù)與B技術(shù)的使用心得》，開頭跟大家交代了你自己使用A技術(shù)和B技術(shù)后的一些心得以及個(gè)人看法，中間也時(shí)不時(shí)會提這兩個(gè)技術(shù)的區(qū)別、優(yōu)缺點(diǎn)。那進(jìn)來看這篇文章的人多半是抱著 「想要了解這兩個(gè)技術(shù)各自的優(yōu)缺點(diǎn)」 的心態(tài)來的，最后來個(gè)總結(jié)多重要呀~

舉個(gè)??例子：

沒啥題材好寫怎么辦？

我的一個(gè)小伙伴之前這樣問過我：零一，我想寫文章，但是不知道寫什么，想寫的感覺大家都寫過了，我就沒什么好寫的了，而且我怕寫出來被大家說很水，所以不太敢寫，怎么辦？

這里先不回答這個(gè)問題，來給大家舉個(gè)活生生的??例子

我最開始接觸寫作，一天寫4、5篇，一星期寫7天，我腦洞沒這么大，不是我想到了很多很好的題材去寫，而是那時(shí)的我瘋狂吸收知識，學(xué)到的東西都能記成筆記，都能成為一篇文章！慢慢地，隨著文章越寫越多，我開始注重自己文章的質(zhì)量，不會隨便把一個(gè)筆記都往博客上發(fā)了，因?yàn)槲野l(fā)現(xiàn)我隨手記得筆記對他人不一定有幫助，我一定要寫出比較好的文章，寫什么呢，寫這個(gè)？這個(gè)好像不值得寫篇博客，這么簡單的知識點(diǎn)，就這樣，我陷入了一個(gè)死循環(huán)

后來忘了在哪個(gè)群里看到一個(gè)群友提到：我覺得每過一段時(shí)間，回頭看之前自己寫的代碼，都感覺那時(shí)候好蠢，我豁然開朗，這不就是我陷入死循環(huán)無法自拔的原因嗎？

這個(gè)群友為什么會這么說？因?yàn)槊窟^一段時(shí)間，他都有所進(jìn)步，所以他看到進(jìn)步之前的自己寫的代碼，感覺很蠢，他無法相信自己當(dāng)時(shí)能寫出質(zhì)量差的代碼。但他不知道全世界有多少程序員水平跟進(jìn)步之前的他一樣甚至更低呢？說不定別人看到他這段代碼，還會覺得他寫的好呢！他只是在害怕自己不夠優(yōu)秀

再切回到寫文章的話題中。所以不要害怕寫的文章很水，你切切實(shí)實(shí)學(xué)習(xí)了這個(gè)知識，你想把你的見解寫成文章分享出來，這很符合邏輯呀，要是你硬要跟大佬們比，那真的沒法比了~

至于想寫的感覺大家都寫過了，我就沒什么好寫的了這個(gè)想法，其實(shí)我覺得大可不必在意，有以下兩點(diǎn)原因：

• 你只是在寫你所學(xué)習(xí)到的、想要整理的東西，這不與他人寫過的同題材的文章沖突
• 每個(gè)人看待知識的角度不一樣，寫出來的文章自然也不一樣，說不定你的切入點(diǎn)比別人更好呢？
• 在活躍的社區(qū)發(fā)表你的文章，可以借助廣大讀者的力量給你把把關(guān)，看看是不是有哪些地方理解有誤，這是一個(gè)很不錯的技術(shù)交流機(jī)會

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

至于寫文章的題材，其實(shí)有很多，這里列舉一下：

• 某個(gè)框架的上手指南
• 某開源庫的源碼閱讀心得
• xxx的踩坑經(jīng)歷以及總結(jié)反思
• A技術(shù)與B技術(shù)的優(yōu)缺點(diǎn)、適用場景比較
• 分享自己項(xiàng)目或者他人項(xiàng)目的架構(gòu)
• 學(xué)習(xí)筆記（還是要有點(diǎn)結(jié)構(gòu)的，不要太隨意，不然自己都看不懂）
• 面經(jīng)
• 看了xx書或參與了xx大會后的收獲總結(jié)
• ...等等

總之就是啥都能寫，只要是你覺得值得總結(jié)的東西

寫文章被噴怎么辦？

噴人本來就不是一個(gè)很文明的行為，到底是一篇怎樣的文章才能讓他人在評論區(qū)破口大罵呢？是這篇文章在diss某人？還是這篇文章在拉踩別的技術(shù)？我覺得只要不是太過分的文章，沒啥好噴的吧~

誰寫文章沒被噴過呢？上個(gè)星期剛發(fā)表了一篇CSS為什么這么難學(xué)？方法很重要！^[1]，全文教大家從語法切入，從根本上學(xué)習(xí)CSS的語法，讀懂如何靠自己看懂每個(gè)CSS的屬性的使用，但評論區(qū)卻有這樣的聲音

我都不用看，這個(gè)人一看就是開著小號來的，愛噴人又不敢用大號噴，這在現(xiàn)實(shí)生活中是得多慫??！不過明白人還是多，其實(shí)我當(dāng)時(shí)自己都沒看到這條評論，就有網(wǎng)友幫我懟回去了（此處感謝rookiee）

其實(shí)都看淡了，網(wǎng)絡(luò)噴子無處不在的，技術(shù)社區(qū)還好，要是放到抖音、快手，評論區(qū)簡直慘不忍睹。所以，大家以后如果寫文章被噴了，希望不要太在意，如果看到真難受，那就懟回去或者刪掉他的評論～

正經(jīng)技術(shù)人誰會罵人啊？

寫作工具推薦

講那么多了，推薦一些寫作工具??吧，也不多推薦，都是我自己平時(shí)用著覺得不錯的，推薦給大家做個(gè)參考

Markdown編輯器

• Typora^[2]：平時(shí)自己在本地寫文章，用的最多的就是這個(gè)
• Mdnice^[3]：大鵬開發(fā)的Markdown編輯器，提供免費(fèi)的圖床和本地云端存儲，還支持很多主題樣式

畫圖

• Diagrams^[4]：很簡約的畫圖工具，還支持保存源文件到本地、Github、Gitlab等等遠(yuǎn)端，并且是實(shí)時(shí)保存的
• KeyNote^[5]：mac系統(tǒng)的一個(gè)軟件，雖說是專門拿來做PPT的，但是也可以用來畫圖，尤其是做一些動畫

動圖錄制

• LICEcap^[6]：同時(shí)支持 Mac 與 Windows雙系統(tǒng)的Gif錄制工具，我在mac系統(tǒng)中都使用這個(gè)，輕量好用！
• Gifcam^[7]：大小僅幾kb，是一個(gè)exe執(zhí)行文件，windows下超級推薦！

畫思維導(dǎo)圖

• 語雀^[8]：阿里出品的文檔編輯產(chǎn)品，可以寫文檔、做表格、寫PPT...，當(dāng)然也可以用來畫思維導(dǎo)圖
• Xmind^[9]：一款專門用來畫思維導(dǎo)圖的工具，這個(gè)也是我經(jīng)常用的，墻裂推薦

其它

• Carbon^[10]：生成一張Mac風(fēng)格的代碼圖片，超級好看~ 如圖

總結(jié)

寫文章呢，就是這么個(gè)事兒，希望大家都能保持初衷，把所學(xué)到的知識整理總結(jié)發(fā)出來，而不要為了寫文章而寫文章。

希望本文對準(zhǔn)備寫文章或正在寫文章的你能有所幫助，另外有更好的建議，大家可以評論區(qū)留言~

我是零一，分享技術(shù)，不止前端。我們下期見~

參考資料