一個碼字工作者的寫作工具 —— MWeb

coding01發表於2018-03-19
Web

由於 Markdown 格式簡單易用，而且不受限於編輯器等影響，已經是寫部落格、寫日誌、寫技術文件，亦或是用來寫公眾號文章的必備了。

也有很多很多關於如何利用 Markdown 和自定義 CSS 來排版公眾號文章的，其中以 Jason Ng 的這篇《可能吧公眾號的文章是如何排版的？》kenengba.com/post/3507.h…為典型。

其中一句話我很認同：

對我來說，寫作必須一氣呵成，排版不能中斷寫作。

寫作寫作，關注點和注意力應該放在寫作內容本身上，至於排版，直接交給「自動化」來處理了。

今天我結合 Jason Ng 這篇文章的思想，和利用 MWeb 來說說我是怎麼做到「自動化」排版的。

MWeb —— 好工具

好的工具自然能讓我們事半功倍，在 Mac 系統，作為 Markdown 的編輯工具，MWeb 無疑是個佼佼者 (參考：喜歡 MWeb 的 8 個理由 | Matrix 精選sspai.com/post/33855)

我喜歡 MWeb 的理由有兩個：圖床功能和自定義預覽功能。

圖床功能

縱觀所有 Markdown 編輯軟體，貌似只有 MWeb 解決了複製、拖拽本地圖片直接上傳圖床，生成網路連結，這極大方便了將寫好的 Markdown 文章釋出到任意平臺，不用再考慮如何將本地圖片先上傳圖床或者平臺的問題了。

具體怎麼設定圖床功能，可參考以下文章：

  1. 為MarkDown寫作軟體MWeb配置七牛雲圖床空間 sspai.com/post/43598
  2. 一個碼字工作者的正確書寫發文姿勢—— MWeb+Markdown Here+七牛實現一鍵釋出 www.jianshu.com/p/c859ead1b…

自定義預覽功能

相信很多 Markdown 都自帶了這個功能，以 Mou 為代表。但它們更多的只是支援使用一個 CSS 樣式檔案。

而 MWeb 卻可以使用資料夾，index.html 檔案是預覽程式碼的輸出檔案，具體如下所示：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
		<title>{{title}}</title>
	    <link type="text/css" rel="stylesheet" href="asset/default.css?v=20">
	   	<script type="text/javascript" src="asset/jquery-3.1.1.js"></script>
		{{head}}
	</head>
	<body>
		<div class="markdown-body">
			{{content}}
		</div>
	</body>
</html>
複製程式碼

通過這個 HTML 程式碼，你就可以看出，在 body 中 {{content}} 放的是我們輸入文章內容。

我們知道，在公眾號正文「開頭」和「結尾」我們都會放一些公眾號說明，和關注連結等，如：

stormzhang

一個碼字工作者的寫作工具 —— MWeb

LinkedIn

一個碼字工作者的寫作工具 —— MWeb

這時候我們就可以把自己的開頭和結尾內容放在{{content}}前後了：

    <body>
		<div class="markdown-body">
			<section class="body_header">
		        <img src="http://ow20g4tgj.bkt.clouddn.com/logo.jpeg" class="logo">
		        <section class="textword"><span class="text">本文字數：<span id="word"></span>，大概需要 <span id="time"></span> 分鐘。</span></section>
		    </section>
			{{content}}
			<hr>
      		<strong>coding01 期待您繼續關注</strong>
      		<img src="http://ow20g4tgj.bkt.clouddn.com/coding01_me.GIF" alt="qrcode">
		</div>
	</body>
複製程式碼

避免於每次寫文章時，反覆複製貼上首尾相同的內容，把注意力更加集中在寫作內容本身上。

同時，我們可以在 asset 資料夾下放我們的 CSS 和 JavaScript，這和常規的靜態網頁開發沒什麼兩樣。

在寫公眾號文章的時候，你會發現只能內聯的 CSS 有效，而額外引入的 JavaScript 都無效，所以我們並不能用 JavaScript 來達到製作花哨的網頁效果。

但我們可以利用 JavaScript 幫我們操作 DOM，調整輸出 HTML 網頁內容。

很多文章說利用 Markdown Here 外掛來排版，或者利用其他排版工具排好程式碼塊了，但複製到公眾號編輯器中儲存後，就錯行了，

一個碼字工作者的寫作工具 —— MWeb

其實在{{content}} 和 </div>是有一個「換行符」和「四個空格」，但在公眾號編輯器儲存時，「換行符」消失了

所以我們需要利用 JavaScript 為每個換行符替換為<br>，防止丟失。

$('pre>code').each(function(i, block){  
  var text = $(this).html();   
  $(this).html(text.replace(/[\r\n]/g, "<br>"))
});
複製程式碼

在我看 Jason Ng 的文章時，他提到給每個 css 自定義標籤加上 copyright，其實我們也能做到：

$("*").each(function(i, obj){
  $(this).attr('label', 'coding01 版權所有');
});
複製程式碼

當然，如 stormzhang 的文章頭部，都會有「閱讀本文大概需要2.4分鐘」，其實我們可以利用 JavaScript 實時計算文章字數，再計算大概需要閱讀多長時間，直接實時變化頭部輸出內容。

一個碼字工作者的寫作工具 —— MWeb

總結

本文只是拋磚引玉，對於寫公眾號文章的朋友來說，利用好工具，然後製作出一套「自動化」流程，把我們的注意力放回寫作本身當中。

至於利用 MWeb 還能做很多很多其它事情，如釋出到「印象筆記」、「靜態部落格」等，都值得大家一試。

最後，沒準我會把這篇文字推送給 MWeb 作者，也許下一版可以出一個「一鍵釋出公眾號文章」的功能，那也挺不錯的。

「完」

相關文章