当Mweb遇上Hugo

接触Mweb也近两年了,给我印象还停留在门槛高、难配置。用Hexo写博客时,试用过一次Mweb,但一打开便提示文档库配置出错。

对此,官方文档 提供了两种初始化文档库的办法

  • 方法一:下载文件包 并解压,再用选择现有文档库 选择解压文件所在目录即可。
  • 方法二:在命令行中运行如下命令重置偏好设置:
defaults delete com.coderforart.MWeb3

Mweb为何被我打入冷宫

那次试用给我的印象并不满意,除了Markdown命令面板化带来的便捷之外,并未有特别触动人之处。

  • 十分享受Sublime text Vimium式键盘流输入,再加上Emmet、Alignment、Gherkin auto-complete Plus等扩展包,一直对Mweb面板化markdown写作无感。
  • ipic支持预览后上传图床,某种意义上,也可以实现实时预览。
  • 文章可以导出为图片、PDF、Epub、HTML?不存在的需要。MacOS用户可以直接保存为pdf,其余几种格式基本没有实际需求。
ipic支持预览后上传图床
ipic支持预览后上传图床

真香打脸之Mweb

转折点是最近付费的ipic经常上传出错,我毅然用脚投票,改旗易帜,投奔去了基于Electron-Vue的PicGO阵营。

其实,是先在华为Mate Book13试用了Windows版本,之后迫不及待装上了Mac版。简而言之,PicGO不仅代码简洁、几乎支持市面上所有的图床,还开发了插件系统,最重要还是免费产品,对软件洁癖者而言,找不出一条弃之不用的理由。

话归正传,自从力捧PicGO后,忽然发现曾经的写博神器Sublime Text已经满足不了日常需求了。

自己写了一个简陋的server.sh脚本

rm -rf public/*
hugo server --minify

只需要打开ZOC终端,输入./server.sh,即可清除缓存,在本地生成Hugo博客预览,不过终究还是要横跨Sublime Text和Chrome。

于是乎,又想起了Mweb的好,毕竟可以不必跨软件实时预览MD文章。Mweb对Markdown扩展语法的支持清单还包括:

  • 支持Table
  • 支持TOC(Table Of Content)
  • 支持MathJax
  • 支持代码高亮(Fenced code block)
  • 支持任务列表(Task lists)列表后再加[ ][x]
  • 支持顺序图和流程图
  • 支持Strikethrough、Underline、Superscript、Autolink、Footnote等。

Mweb的另一个优势是无缝插图,之前的Sublime Text插入本地图片,需要单独拷贝副本到Hugo的/static/img文件夹中,或者通过PicGO上传图床,然后粘贴地址。

MWeb恰好一个步骤实现了两种不同需求,只需要启动MWeb的外部模式,要插图时,只需直接粘贴图片,或者将图片直接拖到MWeb正在编辑的文档中。图片会自动存储到/static/img文件夹中。

接下来,你可以通过Mweb上传到指定图床,也可以默认将/static/img文件夹中的图片保存至github图床。

为拥抱Hugo,Mweb进行基本设置

Mweb对Octopress、JekyII、Hexo支持十分友好,但不包括Hugo。为了使Mweb图床系统增加对/hugo/static/img路径的支持,我们还需要稍作设置。

首先用⌘+E引入外部文件夹(或者直接拖曳Hugo目录至Mweb左侧目录树),

由于Hugo 的静态资源文件放在 static 目录下,对于 MWeb 解析来说比较尴尬 ,而通常用户会将图片放在诸如 static/img 的文件夹下,所以解决方案之一是对static/img做软链

$ cd <path_to_Hugo>
$ ln -s static/img ./img
//如果要取消,直接rm删除软链即可

同时,把 Media Folder Name改为 img,并把路径改为 Absolute模式。

当Mweb 遇上Alfred

严格来讲,Mweb的搜索功能自从3.0版本后就不再是鸡肋,可以按⌘+o进行文档库的全局搜索。

Mweb 3.0之后的搜索也是一大亮点
Mweb 3.0之后的搜索也是一大亮点

但没有什么比习惯的力量更强大,我从2.0时代就开始装了Mweb-alfred-workflow,用惯了Alfred的入口后也觉得挺便捷。所以为了方便自己用Alfred对Mweb的文档库进行新建、检索、发布等操作,我对Mweb-alfred-workflow进行了自定制扩展。

通过alfred快速新建文章
通过alfred快速新建文章

准备工具

  1. Mweb编辑器,主要用外部模式引入Hugo站点。
  2. <strong>Alfred PowerPack</strong> ,代替Spotlight搜索,可以自定义执行脚本。
  3. <strong>mweb-alfred-workflow</strong> ,基于这个Alfred workflow来实现mhugo。

功能扩展

alt+space,激活Alfred,接着⌘+,选择Mweb的workflow,在最下方依次新建Hotkey->Keyword->Run Script

Keyword按图填写:

Run Script填如下方代码:

if [ -f "${MHUGO_HOME}" -o -z "${MHUGO_HOME}" ];then
   exit 1
fi

export PATH=/usr/local/bin:$PATH

cd "${MHUGO_HOME}"

para_arr=($1)

case ${para_arr[0]} in
    -n)
        hugo new post/`date +"%Y%m%d"`${para_arr[1]}.md
        echo "added a new post ${para_arr[1]}.md"
        ;;
    -d)
        bash ./deploy.sh
        open "$MHUGO_URL"
        echo "deploy done"
        ;;
    *)
        open .
        ;;
esac

记得点save保存,然后配置环境变量,按当前Workflow右上角的{x},新增MHUGO_HOME和MHUGO_URL。前者的值是你的Hugo本地根目录,后者是你的github pages域名。

确认完毕后,alt+space激活Alfred界面,输入mhugo -n [文章标题]回车确认,你会发现在Hugo的post文档目录下已经成功新建了一篇同题的MD文件,文章头部的front-matter默认与archetypes/default.md保持一致,标题之前也会自动添加当前日期时间戳。

有了MHUGO,就可以使用Alfred快速新建文章并发布了。不必再在Sublime Text和ZOC之间来回切换了!

后记:其实在Mweb编辑环境,按⌘+N快捷键也可以快速新建同时编辑文章,还自带时间戳前缀。但只是一个空白md文件,不包含最关键的头部front-matter信息。