カテゴリボックスを使用する際に最新トピックを表示する方法

開発
7

これまでにいくつかのサイトで、これまたは同様のものを実装してきました。これをテーマの <head> セクションに追加すると、すべてのカテゴリがホームページの上部（および /latest、これはホームページと同じと仮定）に表示されます。

その後、必要なことは、このレイアウトを好きなように構築するための CSS を追加することだけです。これは、API や Handlebars テンプレートの使用についての良い入門となります。

<script type="text/discourse-plugin" version="0.8">
  const ajax = require('discourse/lib/ajax').ajax;

  api.registerConnectorClass('below-site-header', 'custom-homepage', {
    setupComponent(args, component) {
      component.set('hostname', window.location.hostname);
      
      api.onPageChange((url, title) => {
        if (url == "/" || url == "/latest"){ 
          $('html').addClass('show-custom-homepage'); // ホームページを表示
          component.set('displayCustomHomepage', true);
          
            ajax("/site.json").then (function(result){ // カテゴリ一覧を取得
              let categoryName = [];
              result.categories.forEach(function(categories){
                categoryName.push(categories);
            });
            component.set('categoryName', categoryName);
          });  
        }
        else { // ホームページを非表示
          $('html').removeClass('show-custom-homepage');
          component.set('displayCustomHomepage', false);
        }
      });
    }
  });
</script>


<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/custom-homepage'>
  
  {{#if displayCustomHomepage}}
  
  <div class="custom-homepage-wrapper"> 

    <div class="wrap wrap-category-boxes">
    
      <div class="homepage-category-boxes">
        {{#each categoryName as |c|}}
        <a href="/c/{{c.slug}}" class="box">
          <div class="homepage-category-box">
            {{#if c.uploaded_logo}}
            <div class="category-image-wrapper">  
              <img class="homepage-category-image" src="{{c.uploaded_logo.url}}" />               
            </div>              
            {{/if}}
            <h2>{{#if c.read_restricted}}<i class="fa fa-lock">&nbsp;</i>{{/if}}{{c.name}}</h2>
            <p>{{c.description}}</p>
          </div>
        </a>
        {{/each}}
      </div>
      
    </div>
    
  </div> 
  {{/if}}

</script>