为logseq添加内容组件#

前言#

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

原书本章地址：https://correctroad.gitbook.io/logseq-plugins-in-action/

起步#

在logseq中有一种特殊的语法{{renderer }}，我们可以通过插件实现把{{renderer }}渲染为特定的内容。

比如在 logseq-plugin-link-preview插件中{{renderer :linkpreview,https://google.com}}将会被显示为：

注册渲染函数#

我们可以用上一章的项目为基础，改一下package.json中的项目内容。

我们使用onMacroRendererSlotted去实现该功能

1
  logseq.App.onMacroRendererSlotted(({ slot, payload} ) => {
2
    const [type,name] = payload.arguments
3
    if (type !== ':hello') return
4
    logseq.provideUI({
5
      key: 'h1-playground',
6
      slot, template: `
7
      <div class="hello">
8
        hello! ${name}
9
      </div>
10
     `,
11
    })
12
  })

我们在{{renderer :hello,Logseq}}中renderer后面的内容就会存在payload的arguments中。我们可以通过解构的方式去得到里面的值。

修改main.tsx

1
import '@logseq/libs'
2

3
async function main () {
4

5
  logseq.App.onMacroRendererSlotted(({ slot, payload} ) => {
6
    const [type,name] = payload.arguments
7
    if (type !== ':hello') return
8
    logseq.provideUI({
9
      key: 'hello',
10
      slot, template: `
11
      <div class="hello" >
12
        hello! ${name}
13
      </div>
14
     `,
15
    })
16
  })
17

18
}
19

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

npm build并载入logseq。

添加样式#

光有html实现好看的内容，我们还需要为其提供css样式。

在logseq中， logseq.provideStyle提供了这个功能。

1
  logseq.provideStyle(`
2
    .hello {
3
       background-color: red;
4
       border: 1px solid var(--ls-border-color);
5
       white-space: initial;
6
       padding: 2px 4px;
7
       border-radius: 4px;
8
       user-select: none;
9
       cursor: default;
10
       display: flex;
11
       align-content: center;
12
    }`)

ps：该css出自logseq-plugin-samples

现在我们的main.tsx是这样的

1
import '@logseq/libs'
2

3
async function main () {
4
  logseq.provideStyle(`
5
    .hello {
6
       background-color: red;
7
       border: 1px solid var(--ls-border-color);
8
       white-space: initial;
9
       padding: 2px 4px;
10
       border-radius: 4px;
11
       user-select: none;
12
       cursor: default;
13
       display: flex;
14
       align-content: center;
15
    }`)
16

17
  logseq.App.onMacroRendererSlotted(({ slot, payload} ) => {
18
    const [type,name] = payload.arguments
19
    if (type !== ':hello') return
20
    logseq.provideUI({
21
      key: 'hello',
22
      slot, template: `
23
      <div class="hello">
24
        hello! ${name}
25
      </div>
26
     `,
27
    })
28
  })
29
}
30

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

来看看效果：

事件触发#

还有内容还不够，我们还可以为该html添加上事件

我们继续制作，当点击hello! logseq时，logseq消息提示出hello! logseq。logseq中logseq.provideModel可以让我们自己编写事件。并可以通过e.dataset传参。

事件函数：

1
  logseq.provideModel({
2
    msg(e: any) {
3
      const {msg} = e.dataset;
4
      logseq.App.showMsg(`Hello! ${msg}`);
5
    }
6
  })

组件函数：

1
  logseq.App.onMacroRendererSlotted(({ slot, payload} ) => {
2
    const [type,name] = payload.arguments
3
    if (type !== ':hello') return
4
    logseq.provideUI({
5
      key: 'hello',
6
      slot, template: `
7
      <div class="hello" data-msg="${name}" data-on-click="msg" >
8
        hello! ${name}
9
      </div>
10
     `,
11
    })
12
  })

通过data-xxx我们可以向事件函数传参。

效果：

组件参数持久化#

如果组件中存在特别的值并改变组件样式。比如我们希望本来背景是红的。点击一下变成绿的，再次点击再变回来。

修改组件增加背景颜色项#

修改css：去掉了上面写死的backgrounp-color。

1
  logseq.provideStyle(`
2
    .hello {
3
       border: 1px solid var(--ls-border-color);
4
       white-space: initial;
5
       padding: 2px 4px;
6
       border-radius: 4px;
7
       user-select: none;
8
       cursor: default;
9
       display: flex;
10
       align-content: center;
11
    }`)

修改组件

1
  logseq.App.onMacroRendererSlotted(({ slot, payload} ) => {
2
    const [type,name,color] = payload.arguments
3
    if (type !== ':hello') return
4
    logseq.provideUI({
5
      key: 'hello',
6
      reset: true,
7
      slot, template: `
8
      <div style="background-color: ${ color }" class="hello"
9
      data-block-uuid="${payload.uuid}"
10
      data-on-click="update" >
11
        hello! ${name}
12
      </div>
13
     `,
14
    })
15
  })
16
}

注意：这里增加了reset，这个有什么用，后面会演示

事件改变block#

我们现在来写我们的事件。

1
  logseq.provideModel({
2
    async update(e: any) {
3
      const { blockUuid } = e.dataset;
4
      const block = await logseq.Editor.getBlock(blockUuid)
5
      let newContent = block?.content;
6
      if(block?.content?.indexOf("red") > -1) {
7
        newContent = block?.content?.replace(`red`, `green`)
8
      }else{
9
        newContent = block?.content?.replace(`green`, `red`)
10
      }
11
      await logseq.Editor.updateBlock(blockUuid, newContent)
12
    }
13
  })

我们先通过logseq.Editor.getBlock用传进来的blockuuid去得到block的内容。然后通过logseq.Editor.updateBlock去更新block的值。

效果：

到了最后，我们再回来去看看之前设置的reset有什么用？如何一个组件的reset没有设置。那么点击的效果就会变成这样：

项目受logseq-plugin-samples中的logseq-pomodoro-timer启发，部分代码源于此。

最后附上main.tsx完整代码

1
import '@logseq/libs'
2

3
async function main () {
4
  logseq.provideModel({
5
    async update(e: any) {
6
      const { blockUuid } = e.dataset;
7
      const block = await logseq.Editor.getBlock(blockUuid)
8
      let newContent = block?.content;
9
      if(block?.content?.indexOf("red") > -1) {
10
        newContent = block?.content?.replace(`red`, `green`)
11
      }else{
12
        newContent = block?.content?.replace(`green`, `red`)
13
      }
14
      await logseq.Editor.updateBlock(blockUuid, newContent)
15
    }
16
  })
17
  logseq.provideStyle(`
18
    .hello {
19
       border: 1px solid var(--ls-border-color);
20
       white-space: initial;
21
       padding: 2px 4px;
22
       border-radius: 4px;
23
       user-select: none;
24
       cursor: default;
25
       display: flex;
26
       align-content: center;
27
    }`)
28

29
  logseq.App.onMacroRendererSlotted(({ slot, payload} ) => {
30
    const [type,name,color] = payload.arguments
31
    if (type !== ':hello') return
32
    logseq.provideUI({
33
      key: 'hello',
34
      reset: true,
35
      slot, template: `
36
      <div style="background-color: ${ color }" class="hello"
37
      data-block-uuid="${payload.uuid}"
38
      data-on-click="msg" >
39
        hello! ${name}
40
      </div>
41
     `,
42
    })
43
  })
44
}
45

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

拓展#

在onMacroRendererSlotted中常见判断组件类型有：通过type.startsWith判断和通过type !== 判断。他们的区别与优劣是什么？

未完待续…