Quali parti di HTML puoi personalizzare?

Sviluppatore
7

Sto citando parzialmente il link incollato da simon:

Breve esempio di riempimento di un outlet con un grande quadrato rosso; qui l’outlet è posizionato sopra l’elenco dei post in una visualizzazione di argomento:

<script type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name">
  <div style="height: 200px; width: 200px;background: red"></div>
</script>

image
image1049×801 56.5 KB

Notare l’attributo data-template-name.

Breve esempio di sovrascrittura del template della barra di navigazione:

<script type="text/x-handlebars" data-template-name="components/navigation-bar">
    {{#each navItems as |navItem|}}
      {{navigation-item content=navItem filterMode=filterMode category=category}}
    {{/each}}
    
    <div style="background: red; padding: 10px; float: left;">Ho aggiunto questo blocco nel template della barra di navigazione</div>
    {{custom-html name="extraNavItem" tagName="li"}}
    {{!- questo viene fatto per evitare un DIV all'interno di un UL, originariamente {{plugin-outlet name="extra-nav-item"}}
    {{#each connectors as |c|}}
      {{plugin-connector connector=c class=c.classNames tagName="li" args=(hash category=category filterMode=filterMode)}}
    {{/each}}
</script>

image
image1135×122 10.7 KB

Ancora una volta, notare l’attributo data-template-name.

Ecco l’elenco dei template: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates

E un componente di tema utile che evidenzia tutte le posizioni degli outlet: (deprecated) Plugin outlet locations theme component