MWeb 入門

兜兜轉轉，從原本對於 Typora 的死忠，嘗試了幾個不同的 Markdown 編輯器，終於又是回到了 MWeb 的懷抱中。在此記錄 Mweb 的使用技巧和相關資源。

今天花了一整個下午研究 MWeb 並撰寫本文，將 MWeb 的使用邏輯理順了，並成功完成 發布服務和圖床 的相關配置，另花了很多時間看完了官網上的文檔，收獲很大。

目前明確了如何使用 MWeb，包括：1. 靈感整理，用到 MWeb 的「快速筆記」；2. 筆記功能，定位和 Notion 有一些重疊之后再考慮；3. 文檔書寫與輸出，最為重點也是 MWeb 處理最好的部分。最后，關於使用 MWeb 生成自己的靜態網絡/博客的部分，還有很大的研究空間，暫且擱置留待日后成文。

MWeb 官方文檔匯總

MWeb 的網址在 這里 ；文檔的質量也極其高，這里摘錄文檔列表和摘要：

• MWeb 的基本使用 http://zh.mweb.im/15303606797118.html 介紹了文檔庫、外部模式、標簽等基本內容；
• Markdown 語法 http://zh.mweb.im/markdown.html 非常嚴謹，支持 GFM 語法並拓展了很多畫圖的功能，之后畫流程圖可參考 ##
• Markdown 輔助 http://zh.mweb.im/15303597337753.html 介紹了圖片大小縮放、對齊、LaTeX 預覽等功能，emm 自己還是更喜歡 Typora 的編輯體驗但已經非常棒了；
• Markdown 輸出 http://zh.mweb.im/15303673435460.html 支持導出為 圖片、HTML、Epub、PDF、RTF和Docx 等格式；「復制為富文本」選項可以將 Markdown 文檔到粘貼到 郵件（mail.app）、Pages.app、Word.app 等中直接粘貼使用；
• MWeb 的發布服務介紹 http://zh.mweb.im/15303685987267.html 支持 Wordrpess、支持 Metaweblog API 協議的服務、Wordpress.com、印象筆記、Blogger、Medium、Tumblr 和為知筆記 這也太良心了；
  • 其中 Metaweblog 常用網站包括 cnblogs, oschina, 51cto, typecho 博客等；
  • 圖床和發布服務的列表支持導出cao'zuo；
• MWeb 的圖片上傳服務介紹 http://zh.mweb.im/15303740497765.html 支持 Google Photos、Imgur、七牛雲、又拍雲和自定義的圖床服務；這里是我最愛的 MWeb 地方，詳見下一節；
• MWeb 文檔庫詳細介紹 http://zh.mweb.im/mweb-library.html 這篇文檔也非常贊，介紹了 文檔結構與存儲、分類樹、文檔間引用、文檔排序、使用標簽、大綱視圖、導入導出、全鍵盤導航、相關問題 等 ###
  • 大愛 MWeb 的又一點正是其開放的文檔結構，除了一些軟件內容使用的數據庫，存儲結構完全是透明化的，我們所關心的文件位置、圖片存放位置等完全可以看到；
  • 由於內部數據和文檔庫是存放在同一個位置的，這給 文檔庫備份、同步和恢復帶來了極高的便利性（當然軟件本身提供了三個備份方案）；例如，我可以非常方便地使用 Synology Drive 在兩台電腦上同步；在新設備上使用，安裝完成后直接設置文檔庫所在位置即可無障礙使用；
  • 關於安全性問題，作者指出「通常兩處就不會有問題了。只要把一處設置在有歷史記錄的網盤中，另一處設置在其它硬盤的位置，或者不設置，也是可以的。但是建議務必設置一個位置在有歷史記錄功能的網盤中，或者是像時間機器這種設備中，因為文檔庫總是與備份位置同步的。」
  • 在「分類樹的使用方法」「文檔排序」「全鍵盤導航」等章節，作者所介紹的功能非常細致，但卻體現了開發者對於用戶需求之關注，看到之后真的讓人動容；（文檔排序部分的邏輯還沒有理清，有機會再看看看 hhh）##
  • 關於「文檔庫的導入和導出」，支持將外部的 Markdown 文件夾整體導入；另外還支持將整個文檔庫導出為 Epub 和 PDF！
• 快速筆記 http://zh.mweb.im/15303794142935.html 「此功能默認是關閉的，因為要占用寶貴的狀態欄上的一個位置」，還有比這更良心的開發者嗎？可以在設置中設定多少時間間隔生成一個新的文檔，例如三天，在這個間隔內的所有「快速筆記」被存放在同一個文檔中，每次提交的內容會以提交的時間為標題進行划分；
• 快速搜索 http://zh.mweb.im/15303804636963.html 使用 CMD+O 進行全局搜索；
• MWeb 外部模式詳細介紹 http://zh.mweb.im/15304187309476.html 這個功能應該是為了照顧例如我這種從 Typora 轉過來的人，不過已經准備將外部的這些文件全部放到 MWeb 中管理了；
• MWeb 生成靜態網站 & 博客 http://zh.mweb.im/mweb-static-blog.html 介紹了 兩種文章類型（文章和頁面）、網站拓展設置、文檔拓展、設置網頁主菜單、添加閱讀更多注釋 等內容；
• 自定義或制作自己的靜態網站模板 http://zh.mweb.im/make_your_site_template.html ###
  • 介紹了 MWeb 靜態網站的生成過程、如何自定義網站模板，以及所有變量參考，日后技能點加上了之后再去琢磨……

圖片管理

關於 Markdown 的圖片管理一直是一件非常頭疼的事情，嘗試了一下之后發現 MWeb 處理地簡直無敵。下面介紹 MWeb 的圖片上傳服務介紹 這一篇文檔中給出的方案：

在「文檔庫」模式下不需要配置，軟件會自行進行本地圖片管理；下面的兩種模式主要針對的是「外部模式」下的配置。

• 第一，插入圖片后自動上傳至圖床，僅支持「外部模式」；但作者也不建議使用，「主要是萬一圖床掛了或者是什么問題，比較麻煩」；
• 第二種方案是「插入圖片后復制一份到文檔所在的相對位置」，這一模式支持圖片預覽

這里舉個例子說明一下，比如說引入的文件夾為 folder，在 folder/sub/sub2/sub3/doc.md 這個位置的文檔插入圖片，如果是 “絕對位置”，圖片會保存在 fodler/media 下，生成的 Markdown 為 ![](/media/pic.jpg)；而 “相對位置”，則會保存在 folder/sub/sub2/sub3/media 下，生成的 Markdown 為 ![](media/pic.jpg)。“絕對位置” 這個設置其實是為了支持 Hexo、Octpress、Jekyll 等靜態博客的 Markdown 文檔能文件用 MWeb 編輯。

更常用的是「文檔庫」模式，圖片是本地管理的，因此需要考慮的是發布，也即「把文檔中的本地圖片上傳至圖床」；這里明確地將本地圖片和在線圖床的功能區分開來了，我之前在 Markdown 新解決方案：Typora+本地備份+GitHub 圖床 和【NAS】搭建 Chevereto 圖床 & Typora 上傳指南 兩份方案中糾結的問題正在於此，這里得到了非常合理的解決。

• 粘貼之后，圖片本地化管理，解決了預覽速度和可能的圖床出錯的問題；復制或拖動放入的圖片會默認存放在 docs/media 中，基於不同 md 文件的 id，存放在相應名字的子文件夾中；
• 在編輯器中刪除圖片鏈接不會丟失這個圖片，想要徹底刪除，可以點擊該圖片，選擇「徹底刪除」；（只刪除鏈接的話，相當於保留了一個沒有出現在文檔中的圖片資源，但我們可以通過指向這個圖片的鏈接在使用它，例如將其設置為網站的 icon）

還有一個之前非常糾結的問題，在圖片本地化管理之后，如何將文檔發布到不同的平台？之前的想法是統一采用 Markdown 格式，例如 CNblogs 支持的 Markdown 編輯器，但這里的問題就在於，需要將本地的圖片鏈接轉化為圖床的格式，事實上我在之前的那個「解決方案」中就提到了這一問題，甚至想要在本地備份兩個分別是本地圖片鏈接和圖床鏈接的文件——當然這無疑是極為笨拙不優雅的。

而 MWeb 直接解決了這一問題，軟件自動將 Markdown 文檔轉化為富文本（HTML？不太清楚）上傳，圖片也是直接上傳到第三方平台，穩定性上更優。

在之前的問題上，沒想到 MWeb 直接給出了極為優雅的方案：在發布選項的「把本地文件上傳至圖床，發布至微信公眾號、知乎等……」選項中，支持將本地的文件上傳至所選擇的圖床，然后復制已經替換好的 Markdown 文件或者 HTML 文本，粘貼到相應的平台即可。

今天第一次使用 MWeb，真的被驚艷到了，相信這將會是自己在之后很長一段時間內主力的記錄和輸出方式。下面簡單介紹 MWeb 在發布服務和圖床配置上的經驗。

發布服務

對於已經列出的第三方平台來說應該是比較方便的，我試了之前用過的 Wordpress.com 和 Blogger 都支持；

• 不過 Wordpress.com 以及下面的 CNblogs 都能將圖片上傳至相應的服務器，而 Blogger 則僅支持上傳至圖床；

CNblogs

在設置中配置 Metaweblog API 即可，非常簡單，參見 Mac下如何使用MWEB發布博客到博客園

Typecho

同樣可通過 Metaweblog API 發布到 Typecho，參見 使用 MWeb 一鍵發布文章到 Typecho 博客。

對於未開啟偽靜態的網絡來說，其 API 為 http://xxxx.com/index.php/action/xmlrpc

圖床

一般性的第三方圖床配置起來應該比較簡單，網上找相應的教程即可；下面記錄 MWeb 配合 Synology 自建的 Chevereto 圖床，還有白嫖 GitHub 圖床的經驗。

Chevereto

直接進行相應配置即可，參見 MWeb 圖床設置教程 。

• API 寫 https://xxx.xxx.com/api/1/upload
• POST 文件名寫 source
• 圖片 URL 路徑填 image/url

然后在 Body 中添加三個數據

• key: xxxxxxx
• action: upload
• format: json

其中 API 上填寫自己的網址，而 Body 中的 key 則填寫 Chevereto 中「面板-設置-API 中的密鑰」。

另外，按照默認配置上傳是放在「訪客」賬戶下的，因此不方便進行可視化管理，可以配置 Chevereto 進行修改，也就是把 app/routes/route.api.php 復制到 app/routes/overrides/route.api.php 並將配置中的

CHV\Image::uploadToWebsite($source);

修改為相應的用戶名和相冊 id，注意下面的用戶名和相冊 id 要填自己的，例如

CHV\Image::uploadToWebsite($source, 'juanito', array('album_id'=>4));

上述技巧來自 Mac uPic-Chevereto圖床配置教程 ；不過其中的借助 uPic 上傳是多余的，只需要參考「自定義chevereto上傳用戶和上傳相冊（可選）」一節即可。

【資源】另外補充一份 Chevereto 遷移的資源，以備日后使用（希望不會用上😳）chevereto的安裝與遷移 。

Github 圖床

由於 GitHub 需要用 PUT 方法提交文件而 MWeb 只能用 POST 方法，因此需要另想辦法，gaop-0561/PicBed4MWeb 提供了一個方案：本地啟動一個服務，接受請求代為上傳。

我簡單嘗試了一下未能成功，可能是配置的問題，不過應該是可行的；由於自己在用 Chevereto 所以也就不折騰了。

發布到 GitHub Pages

第一節中介紹的最后兩篇文檔介紹了如何使用 MWeb 生成靜態網頁，下面簡要介紹如何將 MWeb 配合 GitHub Pages 使用完成完整的發布流程。

• 如何使用“發布腳本”功能發布靜態網站 http://zh.mweb.im/how_to_use_shell_script.html 官方給出的教程，按照教程走就行了十分流暢。

關於主題的選擇

自己試了幾個系統自帶的主題，最后選擇了 site-mwev-bulma ，原因是包含了該主題默認包含了 分類、標簽 的功能；美中不足的地方有：1. 每個文檔需要手工設定 eexcerpt 和 featured 以顯示簡介或封面圖，當然這一點也見仁見智；2. 沒有自帶的搜索功能。

添加評論、分享、流量分析功能

參見 我的博客搬家啦 一文，包括 評論、分享、流量分析，可惜只有代碼沒有實現教程。

其中評論功能功能比較復雜自己搞了很久也不算滿意，最后用的是 Disqus；分享的話比較簡單直接用了 Addthis；而流量分析之前在 cnblogs 里實踐過，用的還是 Google Analytics。

評論

完全是因為無知，在評論的問題上折騰了好久，嘗試了 Disqus、來必力和 Gitalk，最終還是選擇了 Disqus；由於周知的原因，Disqus 在國內的使用體驗並不理想，另外自己在配置方面也有很多的問題；因此目前只能算是權衡之計，日后有機會再去研究。

對於靜態博客的評論方案比較，可參考 靜態博客評論系統的比較及選擇 ；此外，個人博客【留言功能】生命歷程 介紹了如何實現動手實現一個留言板。

• 想要使用 來必力 的話，可以參考 Hexo博客優化之實現來必力評論功能，按照教程成功完成安裝；
• 關於 Disqus 的話，MWeb 的很多模板是自帶這個拓展的，到官網完成注冊之后，在「網站拓展-網站拓展設置-disqus」中填寫相應的 shartname 即可；似乎本地生成的靜態網站好像是不支持的（大概是需要 JavaScript？就是因為這一點導致了我后面的一系列折騰 Orz）；
• 我之后找了很多相關的材料，這里羅列一部分：Disqus 在一般網站上的通用引入，可以參考 Jekyll--在Github Pages中使用Disqus（MWeb 的模板應該也是這么干的，只是幫我們簡單實現了）；另外還有一個高階教程 在特殊地區科學使用 Disqus 評論系統；詳細介紹配置的文章有 Disqus 詳細教學：讓網站擁有社群網絡形式的網站留言服務系統、社會化評論框；
• 另外似乎還有一個比較火的方案是 Gitalk gitalk/gitalk，不過似乎挺復雜的我沒有實踐成功；參見 Gitalk評論插件使用教程。

分享

這個非常簡單，直接到 Addthis 網站 https://www.addthis.com/ 注冊一個賬戶，按幾下就可以得到嵌入代碼，復制到對應位置即可；參考最后一篇官方文檔，我試着放在 MWeb 自定義模板的 footer.html 中（放在 body 的最后部分），成功實現。

流量分析

Google Analytics 對中文非常友好，注冊之后填寫相應的站點信息，最后即可得到代碼，同樣放在 footer.html 文件中即可。

具體步驟由於是之前注冊的記不太清了，這次新增了一個站點，重新生成了一個「媒體資源」，簡單記錄如下（由於整個網站還是比較復雜的，涉及到很多的名詞，以下方案不一定規范但至少自己是實踐成功了）。

進入主界面之后，點擊左下角的「管理」，在中間列「創建媒體資源」（如果注冊過程中已創建好就不需要改動）；然后在「數據流」中添加一個網站即可，每一個數據流會對應一個「衡量 ID」，這個 ID 會出現在生成的流量分析代碼上。然后添加該代碼到模板的指定位置即可。接下來就可以愉快的玩耍 Google Analytics 了，雖然整體挺復雜的，但可玩性真的很高 hhh。

可參考 谷歌流量分析工具Google Analytics使用方法指南教程。