Show post numbers

기여 기능
1

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개의 좋아요
2

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

3

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

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

10개의 좋아요
Option to show reply number (position) of replied posts
Post number on slider disagrees with post
4

Yes, it is, this is amazing :slight_smile:

Thanks so much!

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

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

이것이 더 이상 작동하지 않는 것 같습니다. 현재 게시물 번호를 표시할 수 있는 방법이 있나요?

2개의 좋아요
6

이제 post 태그에는 data-post-number 식별자가 없으므로 이 CSS 스타일이 작동하지 않습니다. 다른 해결 방법이 있는지 모르겠습니다.

7

자바스크립트 없이는 불가능합니다.

3개의 좋아요
8

답변 감사합니다. 이거 API를 호출하기 위해 작성해야 하는 플러그인인가요? 아니면 테마 컴포넌트에 단순히 작성하면 되는 건가요?

9

매우 감사합니다. 이제 문제를 해결했습니다!

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

훌륭해요! 방법을 알아냈군요. :+1:

다음과 같은 몇 가지 개선 사항을 적용할 수 있습니다:

  • api.decoratedCooked는 비추천(deprecated)되며 모든 게시물에서 호출됩니다.
    대신 jQuery 없이 작동하는 decorateCookedElement를 사용할 수 있습니다.

  • 현재 게시물을 나타내는 element가 API에 전달되므로 이를 게시물 컨텍스트로 사용할 수 있습니다.

  • ember의 schedule 함수를 사용하여 요소가 렌더링될 때까지 기다릴 수 있습니다.

import { schedule } from "@ember/runloop";
// const { schedule } = require("@ember/runloop");  // Admin UI에서 실행하는 경우 이 코드를 사용하세요

api.decorateCookedElement((element,  /* helper */) => {
  schedule("afterRender", () => {
    const article = element.closest("article");
    if (article) {
      article.dataset.postNumber = article.id.replace("post_", "");
    }
  });
});

image

3개의 좋아요
11

:+1:수정해 주셔서 정말 감사합니다.