创建第一个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插件。

环境搭建#

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

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

项目结构介绍#

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

修改项目信息#

在package.json中

{
  "name": "logseq-emoji-picker",
  "version": "0.0.1",
  "description": "A joyful emoji picker from Logseq slash command 🚀",
  "main": "dist/index.html",
  "description": "©Charlie",
  "license": "MIT",
  "scripts": {
    "dev": "parcel ./index.html --public-url ./",
    "build": "parcel build --public-url . --no-source-maps index.html"
  },
  "devDependencies": {
    "@logseq/libs": "^0.0.1-alpha.19",
    "parcel": "^2.0.0-beta.2"
  },
  "dependencies": {
    "@joeattardi/emoji-button": "^4.6.0"  
  },
  "logseq": {
    "id": "charlie_emoji_picker_yo5bzxaca",
    "icon": "./logo.png"
  }
}

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

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

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

注册命令#

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

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

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

修改index.ts

import '@logseq/libs'

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

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

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

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

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

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

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

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

import '@logseq/libs'

let statement = "hello";

function getStatement(){
    fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
        statement = data.hitokoto
    })
    .catch(console.error)
}
getStatement()

async function main () {
    logseq.Editor.registerSlashCommand('juzi', async () => {
        await logseq.Editor.insertAtEditingCursor(
            `#+BEGIN_QUOTE
            ${statement}
            #+END_QUOTE`,
        );
    getStatement();
    })
}

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

重新npm build并reload插件。

成功运行!