api.addPostMenuButton 带条件

开发
1

首先，我为我的蹩脚英语道歉。
我想添加一个“显示更多…”按钮。
下图中的帖子由 10 行文本组成，但只显示了 5 行。

用户可以通过点击“显示更多”来查看完整文本。

image
image780×200 2.85 KB

此按钮应根据每个帖子已渲染部分的高度或行数来决定是否显示。

image
image789×159 2.13 KB

我不知道如何使用 api.addPostMenuButton 进行分支，所以目前即使是像下面这样只有一行的短帖子也会显示此按钮。

这对我来说不是很理想。

我认为条件分支应该能够获取已渲染部分的高度或行数（或字符数）。
我查阅了文档，但找不到 api.addPostMenuButton 的任何选项。
非常感谢您的帮助。

1 个赞
2

api.addPostMenuButton 方法只关心你返回的值。该值需要是一个对象。你在 return 之前做的任何事情都不重要。按钮将为每个帖子渲染，该方法会给你 post 对象，你可以用它来完成你的工作。

例如，假设我想让按钮只显示在字数超过 300 的帖子中。我就可以这样做。

common > header

<script type="text/discourse-plugin" version="0.8">
  const MIN_WORD_COUNT = 300;

  api.addPostMenuButton("myButton", (post) => {
    // 你可以记录 post 属性来查看有什么可用
    // console.log(post);

    // 示例
    const roughWordCount = post.cooked.match(/\S+/g).length;

    if (roughWordCount < MIN_WORD_COUNT) {
      // 按钮不会渲染
      return;
    }

    // 按钮将渲染，创建返回对象
    const result = {
      action: SOME_ACTION,
      icon: ICON_NAME,
      title: TITLE_TRANSLATION_KEY,
      className: CLASSNAMES,
      position: "first", // 可以是 `first`, `last` 或 `second-last-hidden`
    };

    // 如果在桌面端，则添加一个标签
    if (!post.mobileView) {
      result.label = LABLE_TRANSLATION_KEY;
    }

    // 返回对象
    return result;
  });
</script>

将大写字母替换为实际数据，并在字数超过 300 的帖子中尝试一下。你会发现它在那里渲染了。