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 博客等；
- 图床和发布服务的列表支持导出操作；
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 并将配置中的

1	CHV\Image::uploadToWebsite($source);

修改为相应的用户名和相册 id，注意下面的用户名和相册 id 要填自己的，例如

1	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使用方法指南教程。