How to bring in Latest topics when using category boxes

개발
23

포기할 뻔하다가 결국 이 코드를 사용했어요.

https://meta.discourse.org/t/add-a-featured-topic-list-to-your-discourse-homepage/132949

그리고 json 경로를 /latest.json으로 변경했습니다.

<script type="text/discourse-plugin" version="0.8">
  const ajax = require('discourse/lib/ajax').ajax;
  const Topic = require('discourse/models/topic').default;
  // Discourse의 ajax와 Topic 모델을 사용 중입니다

  api.registerConnectorClass('below-discovery-categories', 'featured-topics', {
    // above-main-container는 플러그인 아웃렛이고,
    // featured-topics는 사용자 정의 컴포넌트 이름입니다

    setupComponent(args, component) {

      api.onPageChange((url, title) => {
        if ((url == "/") || (url == "/categories") ){
        // 페이지 변경 시 URL이 일치하는지 확인합니다
        // 홈페이지가 /latest가 아니라면 /categories로 변경하세요
        
          $('html').addClass('custom-featured-topics');
          // CSS 타겟팅을 쉽게 하기 위해 HTML 태그에 클래스를 추가합니다

          component.set('displayfeaturedTopics', true);
          // 나중에 템플릿을 표시하는 데 이 값을 사용합니다

          component.set("loadingTopics", true);
          // 토픽이 준비될 때까지 로딩 스피너를 표시하는 데 도움이 됩니다

          ajax("/latest.json").then (function(result){
          // AJAX를 사용하여 "featured" 태그의 게시물을 가져옵니다
          // 카테고리가였다면 /c/featured.json을 사용했을 것입니다

            let featuredTopics = [];
            // 빈 배열을 생성하고, 여기에 토픽을 push합니다

            var featuredUsers = result.users;
            // 관련 사용자를 가져옵니다

            result.topic_list.topics.slice(0,4).forEach(function(topic){
            // 0부터 시작하여 4까지의 토픽을 추출합니다
            // 이는 총 3개의 토픽이 표시됨을 의미합니다. 더 보려면 4를 증가시키세요.

              topic.posters.forEach(function(poster){
                poster.user = $.grep(featuredUsers, function(e){ return e.id == poster.user_id; })[0];
              });
              // 사용자를 해당 토픽과 연결합니다

              featuredTopics.push(Topic.create(topic));
              // 토픽을 featuredTopics 배열에 push합니다
            });

            component.set("loadingTopics", false);
            // 토픽이 로드되었으므로 로딩 스피너 표시를 중단합니다

            component.set('featuredTopics', featuredTopics);
            // 배열의 토픽으로 컴포넌트를 설정합니다
          });

        } else {
        // 위의 URL과 페이지가 일치하지 않으면 다음을 수행합니다:

          $('html').removeClass('custom-featured-topics');
          // 사용자 정의 클래스를 제거합니다

          component.set('displayfeaturedTopics', false);
          // 사용자 정의를 표시하지 않습니다
        }
      });
    }
  });
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-discovery-categories/featured-topics">

  {{#if displayfeaturedTopics}}
  <!-- 컴포넌트가 true인 경우 이 콘텐츠를 표시합니다: -->

      <div class="custom-featured-topics-wrapper">
        {{conditional-loading-spinner condition=loadingTopics}}
        <!-- 토픽이 로딩 중이면 로딩 스피너를 표시합니다 -->

        {{#unless loadingTopics}}
        <!-- 토픽이 아직 로딩 중이 아니라면... -->
          {{topic-list topics=featuredTopics showPosters=true}}
          <!-- 토픽 목록을 표시합니다 -->
        {{/unless}}

      </div>

  {{/if}}
</script>