Update avaliable. Click RELOAD to update.
目录

MWeb 使用自定义脚本实现发布到 Jekyll 站点的方案

mweb-01

把 MWeb 当作普通的 Markdown 编辑器其实并没有太大竞争力,可能比 Mac Note 好些,毕竟支持 Markdown。个人认为最好的地方在于兼顾的 Markdown 的同时提供了多种博客站点的发布,不支持的博客平台可以使用自定义脚本实现

由于作者使用 jekyll 作为主要的博客站点平台,恰巧 MWeb 并不支持 jekyll,本篇将介绍如何在 MWeb 中使用 自定义脚本 的能力实现自定义文章发布。

1. Jekyll 文章的结构

1.1. 文件名称

从下面截图看到 Jekyll 所有的文章是以 markdown 文件的格式放在在 _posts 目录中,文件名称的规则是 当前日期-文章的slug.md的方式组成。

20240109155610

1.2. 内容结构

下面可以看出,Jekyll 文章的内容有自己的语法糖,用于在编译期间填充对应的 HTML 元素,如:

上面的这些内容,大部分 MWeb 编辑器在自定义脚本中并不会提供变量,需要使用一些特殊的方法解决。

20240109160106

2. 要需要解决的问题

2.1. 文章名称转slug

MWeb 在自定义脚本中提供了 ** 的变量获取文章标题,但如何通过 ** 生成 标题的slug,如果专程拼音的方式有点俗,也不利于SEO,要求翻译成英文,同时单词数量不会过长,要有语意。

最终方案是写一个 ChatGPT 的翻译服务接口,传递指定的 Prompt,让其生成效果最好,终端测试如下:

request gpt slug service

结合测试结果,修改 shell 内容处理结果,最终得到文章的SLUG。

# 调用ChatGPT获取文章slug

# 定义 post 提交参数,调用 GPT 远程服务,最终SLUG返回的内容是"how-to-use-vscode-remote-tunnel"
JSON_DATA="{\"content\":\"将中括号中的文章标题[]翻译成英文的slug方式返回,英文单词不超过6个单词\"}"
SLUG=$(curl -X POST -H "Content-Type: application/json" -d "$JSON_DATA" --progress-bar https://xxx.xxx.com/my/gpt)

#  去除SLUG的首位双引号
SLUG=$(echo $SLUG | tr -d '"')

# 灰底白字输出原始文章标题和生成的SLUG内容
echo "NAME: \033[47;30m  \033[0m"
echo "SLUG: \033[47;30m $SLUG \033[0m"

2.2. 获取文章的分类

虽然可以为文章设置分类,但 MWeb 在自定义脚本中并没有提供分类的变量,为了填充 Jekyll 模板头的 categories 内容,在脚本中如何获取?

MWeb 都有一个本地的存储路径,可以在设置中看到,如我为了可以文章同步,将 MWeb 的存储放置在 ICloud 目录中,如下:

mweb database

打开这个路径,列出目录结构

mweb sqlite3

从上面的目录可以知道,文件 mainlib.db 是一个 sqlite3 的数据库,是可以直接访问的,docs 目录里是我们的文章,名称只是个序列号,这个序列号文章名称可以在自定义脚本中通过变量 ** 获取,使用 shell 命令处理下就可以得到干净的序列号,如:

FILENAME=

# 去除文件后缀,获取文章UUID,即本地存储的文件名称
UUID="${FILENAME%.*}"

使用 sqlite3 mainlib.db 打开这个数据库,发现有几张表,从表名称就可以看出是文章表、分类表、标签表以及其关系表

20240110095215

通过拿到的文档序列号关联就能查出对应的分类名称,使用下面shell获取

UUID=17035618388525
CATS=$(sqlite3 mainlib.db "select group_concat(name,',') from cat where uuid in (select rid from cat_article where aid = $UUID);")
echo $CATS

2.3. 获取文章的标签

文章标签的获取和上面的分类类似,也是通过查询 sqlite 数据库获得

UUID=17035618388525
TAGS=$(sqlite3 "$SQLITE_PATH" "select group_concat(name,',') from tag where uuid in (select rid from tag_article where aid = $UUID);")
echo $TAGS

2.4. 追加内容模板头

追加内容到文件中,在 shell 上使用 sed 命令就可以实现,代码如下:

# 替换 jekyll 模板头
sed -i '' "1s/.*/---\\
title: \\
name: $SLUG\\
date: $CURRENT_DATE\\
tags: [$TAGS]\\
excerpt: \\
categories: [$CATS]\\
---\\
\\
* 目录\\
{:toc}\\
\\
/" "${PUBLISH_DIR}/$CURRENT_DATE-${SLUG}.md"

2.5. 自定义图片操作

这是个人站点特殊的地方,非必需

文章中的图片不仅要求正常显示,同时要支持懒加载,以及点击的灯箱展示,单纯的 Markdown 图片语法是无法满足,所以针对文章中的图片做了特殊处理,需要实现以下步骤:

  1. 获取原图片地址信息
  2. 远程请求获取原图片的长宽
  3. 使用新的内容替换原始图片内容

要实现上面的步骤,shell无法满足,写了 python 脚本,在 shell 里调用执行,类似这样

# 图片替换
python3 $RE_IMAGE_SCRIPT "${PUBLISH_DIR}/$CURRENT_DATE-${SLUG}.md"

3. 完整的发布脚本

上面都是按步骤执行,代码比较片段化,所有文件只不过一个shell和一个python脚本,完整的代码请在 GitHub 中下载查看。

Reference

版权所有,本作品采用知识共享署名-非商业性使用 3.0 未本地化版本许可协议进行许可。转载请注明出处:https://www.wangjun.dev//2024/01/mweb-custom-script-jekyll-publish-solution/