Discourse 如何在帖子里显示楼层数

[Dummy]

自定义主题插件，加上以下代码即可。

a.post-date span {
    margin-right: 1em
}

a.post-date:after {
    content: "#"attr(data-post-number);
    font-style: italic;
    font-size: 0.8em;
}

初版， api.decoratedCooked将被弃用

<script type="text/discourse-plugin" version="0.1">
    api.decorateCooked(() => {
          var add_post_number_timer = setTimeout(() => {
            var articles = document.getElementsByTagName("article");
            for (var i = 0; i < articles.length; i++) {
              var post_date = articles[i].getElementsByClassName("post-date");
              if (post_date.length != 0) {
                var post_number = articles[i].getAttribute("id").replace("post_", "");
                post_date[1].setAttribute("data-post-number", post_number);
              }
            }
            clearTimeout(add_post_number_timer);
          }, 500);
        }, {
        id: 'add_post_number'
    });
</script>

以下是主站大佬给予的修正

@Arkshine

Here are a few improvements you can do:

• api.decoratedCooked will be deprecated and is called on every post.
  You can use decorateCookedElement instead, which works without jQuery.
• An element representing the current post is passed to the API; you can use it as your post context.
• You can work with the schedule function from ember to wait for the element to be rendered.

//import { schedule } from "@ember/runloop";
const { schedule } = require("@ember/runloop");  // use this if running in Admin UI

api.decorateCookedElement((element,  /* helper */) => {
  schedule("afterRender", () => {
    const article = element.closest("article");
    if (article) {
        //原句
        //article.dataset.postNumber = article.id.replace("post_", "");
        //根据上面的css修改
        const postDate = article.querySelector("a.post-date");
    
        if (postDate) {
          postDate.dataset.postNumber = article.id.replace("post_", "");
        }
    }
  });
});

[luobo]

有部署的效果图嘛，是什么样子的~

[Dummy]

跟你在L站看的插件显示差不多。

你只要在自定义组件的css和head区域分别放入css和script就好了。

[luobo]

貌似有点问题：

[luobo]

貌似在js中没看到css中的 data-post-number 是如何返回和显示的

[Dummy]

截图你的script。

不会没有，两个代码都能用。

[Dummy]

@Arkshine

postDate.dataset.postNumber

这里就是插入number属性

[luobo]

[Dummy]

少了代码，没有这个不起作用

<script type="text/discourse-plugin" version="0.1">

[luobo]

@Dummy

type=“text/discourse-plugin” version=“0.1”

擦，我都没意识到没写这个，，，不错不错，有效果，谢谢大佬的分享