兜兜转转,从原本对于 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 使用完成完整的发布流程。

关于主题的选择

自己试了几个系统自带的主题,最后选择了 site-mwev-bulma ,原因是包含了该主题默认包含了 分类、标签 的功能;美中不足的地方有:1. 每个文档需要手工设定 eexcerptfeatured 以显示简介或封面图,当然这一点也见仁见智;2. 没有自带的搜索功能。

添加评论、分享、流量分析功能

参见 我的博客搬家啦 一文,包括 评论、分享、流量分析,可惜只有代码没有实现教程。

其中评论功能功能比较复杂自己搞了很久也不算满意,最后用的是 Disqus;分享的话比较简单直接用了 Addthis;而流量分析之前在 cnblogs 里实践过,用的还是 Google Analytics。

评论

完全是因为无知,在评论的问题上折腾了好久,尝试了 Disqus、来必力和 Gitalk,最终还是选择了 Disqus;由于周知的原因,Disqus 在国内的使用体验并不理想,另外自己在配置方面也有很多的问题;因此目前只能算是权衡之计,日后有机会再去研究。

对于静态博客的评论方案比较,可参考 静态博客评论系统的比较及选择 ;此外,个人博客【留言功能】生命历程 介绍了如何实现动手实现一个留言板。

分享

这个非常简单,直接到 Addthis 网站 https://www.addthis.com/ 注册一个账户,按几下就可以得到嵌入代码,复制到对应位置即可;参考最后一篇官方文档,我试着放在 MWeb 自定义模板的 footer.html 中(放在 body 的最后部分),成功实现。

流量分析

Google Analytics 对中文非常友好,注册之后填写相应的站点信息,最后即可得到代码,同样放在 footer.html 文件中即可。

具体步骤由于是之前注册的记不太清了,这次新增了一个站点,重新生成了一个「媒体资源」,简单记录如下(由于整个网站还是比较复杂的,涉及到很多的名词,以下方案不一定规范但至少自己是实践成功了)。

进入主界面之后,点击左下角的「管理」,在中间列「创建媒体资源」(如果注册过程中已创建好就不需要改动);然后在「数据流」中添加一个网站即可,每一个数据流会对应一个「衡量 ID」,这个 ID 会出现在生成的流量分析代码上。然后添加该代码到模板的指定位置即可。接下来就可以愉快的玩耍 Google Analytics 了,虽然整体挺复杂的,但可玩性真的很高 hhh。

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