So holen Sie die neuesten Themen bei Verwendung von Kategorienboxen

Entwickler
7

Ich habe dies oder Ähnliches bereits für einige Websites erstellt. Wenn Sie dies im <head>-Bereich Ihres Themes einfügen, werden alle Kategorien oben auf Ihrer Startseite angezeigt (und auf /latest, vorausgesetzt, dies ist dasselbe wie Ihre Startseite).

Danach müssen Sie nur noch das CSS hinzufügen, um dieses Layout nach Ihren Wünschen zu gestalten. Dies ist eine gute Einführung in die Verwendung der API und von Handlebars-Templates im Allgemeinen.

<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'); // Startseite anzeigen
          component.set('displayCustomHomepage', true);
          
            ajax("/site.json").then (function(result){ // Liste der Kategorien abrufen
              let categoryName = [];
              result.categories.forEach(function(categories){
                categoryName.push(categories);
            });
            component.set('categoryName', categoryName);
          });  
        }
        else { // Startseite ausblenden
          $('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>