当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,其余几种格式基本没有实际需求。
真香打脸之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
进行文档库的全局搜索。
但没有什么比习惯的力量更强大,我从2.0时代就开始装了Mweb-alfred-workflow,用惯了Alfred的入口后也觉得挺便捷。所以为了方便自己用Alfred对Mweb的文档库进行新建、检索、发布等操作,我对Mweb-alfred-workflow进行了自定制扩展。
准备工具
- Mweb编辑器,主要用外部模式引入Hugo站点。
- <strong>Alfred PowerPack</strong> ,代替Spotlight搜索,可以自定义执行脚本。
- <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信息。