조건부 api.addPostMenuButton

개발
1

먼저 제 영어가 서툴러서 죄송합니다.
“더 보기…” 버튼을 추가하고 싶습니다.
아래 이미지 속 게시글은 텍스트가 10줄로 구성되어 있지만, 실제로는 5줄만 표시됩니다.

사용자는 '더 보기’를 클릭하여 전체 텍스트를 볼 수 있습니다.

image
image780×200 2.85 KB

이 버튼은 각 게시글의 렌더링된 부분(COOKED)의 높이 또는 줄 수에 따라 버튼을 표시할지 말지 분기 처리되어야 합니다.

image
image789×159 2.13 KB

api.addPostMenuButton을 사용하여 분기 처리하는 방법을 모르기 때문에, 현재와 같이 다음과 같이 단 한 줄뿐인 짧은 게시글에도 이 버튼이 표시됩니다.

이것은 제게 매우 바람직하지 않습니다.

조건 분기에서 COOKED의 높이 또는 줄 수(또는 문자 수)를 가져올 수 있어야 한다고 생각합니다.
문서를 살펴봤지만 api.addPostMenuButton에 대한 관련 옵션을 찾을 수 없습니다.
도움을 주시면 감사하겠습니다.

2

api.addPostMenuButton 메서드는 반환하는 값에만 관심을 가집니다. 그 값은 객체여야 합니다. 반환 전에 수행하는 작업은 중요하지 않습니다. 버튼은 각 게시물에 대해 렌더링되며, 이 메서드는 작업을 위해 사용할 수 있는 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단어 이상의 게시물에서 테스트해 보세요. 해당 게시물에서 렌더링되는 것을 확인할 수 있습니다.