Show post numbers

Is it possible to show post numbers for each post (Or easy to do via CSS or similar). My use case is running forum mafia, where allowing users to easily refer to a post without the bulk of quoting it would be amazing.

1 Like

Just press the link button under each post, and the post number is visible there.

It is hard to say if this is what you are looking for, but it should get you close.

https://github.com/sitepoint/discourse-theme/blob/b4b4a7218ffbbfd4ee3cf8aa7421d29c96fdc4ed/assets/stylesheets/desktop/topic-post.scss#L45-L51

We use that CSS to put #1, #2, et al on a topic after the date/timestamp.

10 Likes

Yes, it is, this is amazing :slight_smile:

Thanks so much!

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

a.post-date:after {
  content: "#"attr(data-post-number);
}

This doesn’t seem to work anymore. Is there a current way to show post numbers?

2 Likes

Now post a tag does not have a data-post-number identifier, this css style does not work, I do not know there is another way to solve?

Not without javascript.

3 Likes

Thanks for the reply, is this a plugin that needs to be written to call the api? Or is it simply written in the theme component?

Thank you very much. I have solved the problem now!

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'
    });

Awesome! You figured out how to do it. :+1:

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_", "");
    }
  });
});

image

3 Likes

:+1:Thank you very much for the correction.