创建第一个logseq命令#

前言#

本文为本人发布gitbook的书籍，但是因为gitbook一直没有被谷歌索引，我也没有办法提交给谷歌(无法证明所有权)。无奈只能把该本的章节逐步搬运过来，提高SEO。希望那些想学习logseq plugins 开发的同学们能直接通过搜索引擎看到此书。

原书本章地址：https://correctroad.gitbook.io/logseq-plugins-in-action/chapter-1/a-random-statement-plugins

起步#

在logseq中有一系列命令是通过/调用的，比如/link、/TODO。

现在我们为logseq制做一个随机引用一个句子的命令插件。我使用 logseq-emoji-picker项目为基础，修改制做我们的juzi插件。

环境搭建#

1
git clone https://github.com/logseq/logseq-plugin-samples.git

使用这个命令去拉取logseq的官方插件示例。找到目录下的logseq-emoji-picker文件夹。

项目结构介绍#

1
➜  logseq-emoji-picker git:(master) ✗ tree -L 1
2
.
3
├── README.md
4
├── demo.gif
5
├── index.css
6
├── index.html
7
├── index.ts  # 项目代码
8
├── logo.png  # 项目在logseq中显示的logo图片
9
├── package-lock.json
10
├── package.json # 项目在logseq中显示的名称与其它相关信息
11
└── yarn.lock

修改项目信息#

在package.json中

1
{
2
  "name": "logseq-emoji-picker",
3
  "version": "0.0.1",
4
  "description": "A joyful emoji picker from Logseq slash command 🚀",
5
  "main": "dist/index.html",
6
  "description": "©Charlie",
7
  "license": "MIT",
8
  "scripts": {
9
    "dev": "parcel ./index.html --public-url ./",
10
    "build": "parcel build --public-url . --no-source-maps index.html"
11
  },
12
  "devDependencies": {
13
    "@logseq/libs": "^0.0.1-alpha.19",
14
    "parcel": "^2.0.0-beta.2"
15
  },
16
  "dependencies": {
17
    "@joeattardi/emoji-button": "^4.6.0"
18
  },
19
  "logseq": {
20
    "id": "charlie_emoji_picker_yo5bzxaca",
21
    "icon": "./logo.png"
22
  }
23
}

修改name、description、description、id等项。

并删掉 "@joeattardi/emoji-button": "^4.6.0" ，因为我们不需要这个依赖。

在该目录下运行npm install安装基本依赖

注册命令#

在logseq的插件中，我们通过logseq.Editor.registerSlashCommand('命令名', 异步函数)的方法向logseq注册命令。

1
logseq.Editor.registerSlashCommand('juzi', async () => {
2
    await logseq.Editor.insertAtEditingCursor( # 向logseq光标所在位置插入内容
3
    `#+BEGIN_QUOTE
4
        hello!
5
     #+END_QUOTE`,
6
    );
7
})

其中#+BEGIN_QUOTE something #+END_QUOTE是logseq的一种引用格式，效果如下图。

修改index.ts

1
import '@logseq/libs'
2

3
async function main () {
4
    logseq.Editor.registerSlashCommand('juzi', async () => {
5
        //insertAtEditingCursor 这个函数是向logseq当前光标处插入传参的内容
6
        await logseq.Editor.insertAtEditingCursor(
7
        `#+BEGIN_QUOTE
8
            hello!
9
         #+END_QUOTE`,
10
        );
11
    })
12
}
13

14
logseq.ready(main).catch(console.error)

然后我们在项目目录中运行npm install && npm build。把我们的插件从源码变成能运行的东西!

然后在logseq中的plugins中导入这个插件(需要开启开发者模式)。

注意但是logseq 0.5.9好像有一个bug，还需要重启logseq，命令才能加载到命令列表中。我重启一下logseq。

现在可以成功触发命令了!

添加上随机获取句子能力#

调用随机句子api。这里使用了一言的api。

1
import '@logseq/libs'
2

3
let statement = "hello";
4

5
function getStatement(){
6
    fetch('https://v1.hitokoto.cn')
7
    .then(response => response.json())
8
    .then(data => {
9
        statement = data.hitokoto
10
    })
11
    .catch(console.error)
12
}
13
getStatement()
14

15
async function main () {
16
    logseq.Editor.registerSlashCommand('juzi', async () => {
17
        await logseq.Editor.insertAtEditingCursor(
18
            `#+BEGIN_QUOTE
19
            ${statement}
20
            #+END_QUOTE`,
21
        );
22
    getStatement();
23
    })
24
}
25

26
logseq.ready(main).catch(console.error)

重新npm build并reload插件。

成功运行!