Joplin & Blog 实践

603 words

3 minutes

Joplin & Blog 实践

2023-03-09

技术

joplin

前言#

之前尝试使用过不少笔记工具，例如 macOS 的 Bear，界面很好看，付费后同步数据的功能也挺实用，然鹅不支持全平台。

还有 Windows 上的 EverNote，插件优化都不错，不过存储容量堪忧，而且后期迁移成本过高。

新兴的 Notion 以 Block 和创意吸引了我，一开始使用起来兴趣满满，为此捣鼓了一个 Notion-blog，不过后面愈发慢的启动速度以及臃肿的关系，慢慢搁置了。

以上使用体验各有千秋，不过因为数据上传云端的关系，总有一种隐隐的不安全感。

直到接触开源的 Joplin，可以加密并上传到自建数据库，甚至可以借助 Joplin Utils 实现数据交互。

目前我自己搭建的 Blog 就是在 Joplin 记录，使用 mami 转换并输出 Vuepress。记得当时无法做到自定义 meta 数据，求助琉璃才实现的自定义数据。这次变更太棒了。

mami #

mami 是一个转换工具，可以连接不同的基于 markdown 的框架和工具，可以将一个工具的数据转换到另一个工具，对于跨应用迁移和多平台发布非常有帮助，目前支持joplin/obsidian/hexo/hugo/docsify/vuepress/raw。

安装方法#

1
yarn add -D @mami/cli @mami/plugin-joplin @mami/plugin-local typescript

在 package.json 文件中新增命令：

1
{
2
  ...
3
  "scripts": {
4
    "gen": "mami"
5
  },
6
  ...
7
}

举个栗子#

创建 mami.config.ts 文件

1
import { defineConfig, OutputPlugin } from "@mami/cli";
2
import * as joplin from "@mami/plugin-joplin";
3
import { token } from "./.joplin-blog.json";
4
import * as local from "@mami/plugin-local";
5
import { PageFrontmatter } from "vuepress-vite";
6
import path from "path";
7

8
export default defineConfig({
9
  input: [
10
    joplin.input({
11
      baseUrl: "http://127.0.0.1:41184",
12
      token: token,
13
      tag: "blog",
14
    }),
15
  ],
16
  output: [
17
    output({
18
      root: path.resolve(__dirname, "./blog"),
19
    }),
20
  ],
21
});
22

23
/**
24
 * 新增meta，输出文本
25
 * @param options
26
 * @returns
27
 */
28
function output(options?: { root?: string }): OutputPlugin {
29
  const root = options?.root ?? path.resolve("docs");
30
  const postsPath = path.resolve(root, "p");
31
  const resourcePath = path.resolve(root, "resources");
32
  const p = local.output({
33
    rootNotePath: postsPath,
34
    rootResourcePath: resourcePath,
35
    meta: (item) =>
36
      ({
37
        layout: "Post",
38
        author: "Kilien",
39
        subtitle: item.id,
40
        useHeaderImage: true,
41
        headerImage: `https://picsum.photos/seed/${item.id}/1920/1080`,
42
        headerMask: `rgb(14, 21, 5, 0.2)`,
43
        tags: [...item.tags.map((item) => item.title)],
44
        permalink: `/p/${item.id}`,
45
        title: item.title,
46
        date: new Date(item.createAt).toISOString().slice(0, 10),
47
        updated: new Date(item.updateAt).toISOString().slice(0, 10),
48
      } as PageFrontmatter),
49
    noteLink: ({ linkNoteId }) => `/p/${linkNoteId}`,
50
    resourceLink: ({ resource }) =>
51
      `../resources/${resource.id}${path.extname(resource.title)}`,
52
    notePath: (note) => path.resolve(postsPath, note.id + ".md"),
53
    resourcePath: (resource) =>
54
      path.resolve(resourcePath, resource.id + path.extname(resource.title)),
55
  });
56
  p.name = "vuepress";
57
  return {
58
    ...p,
59
    async handle(note) {
60
      await p.handle(note);
61
    },
62
    async end() {
63
      await p.end?.();
64
    },
65
  };
66
}