MD Topic List-Komponente

Anpassung Themenkomponente
23

Du kannst die Komponente direkt bearbeiten, den Kopfteil ändern und diesen Code einfügen. Dadurch wird die ältere Version verwendet.

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span class='topic-creator'>{{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span> &nbsp;
    {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

{{#if showLikes}}
  <td class="num likes">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

{{#if showOpLikes}}
  <td class="num likes">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

<td class="num views {{topic.viewsHeat}}">{{number topic.views numberKey="views_long"}}</td>

<td class="last-post">
<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
<br />
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
</div>
</td>
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{#if showLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{/if}}
{{#if showOpLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
</script>

<script>
(function(){
var TopicListItemView = require('discourse/components/topic-list-item').default;
TopicListItemView.reopen({
    showCategory: function(){
        return !this.get('controller.hideCategory') &&
                this.get('topic.creator') &&
                this.get('topic.category.name') !== 'uncategorized';
    }.property()
});
   
})();
</script>
3 „Gefällt mir“
24

Danke dafür :smiley:

1 „Gefällt mir“
25

Ich habe einen speziellen Branch für diejenigen erstellt, die die Komponente nicht bearbeiten möchten und ihr Discourse-Forum derzeit nicht aktualisieren können.

Sie können eine neue Komponente installieren und die erweiterten Einstellungen verwenden.

Repository mit dem Theme: https://github.com/iunctis/md-topic-list
Branch-Name: bf-20200323

image
image690×363 16.4 KB

Sie erhalten die Komponente, die mit Discourse-Versionen vor dem 23. März 2020 kompatibel ist. Vor diesem Commit.

2 „Gefällt mir“
26

Ich habe ein wenig mit der Darstellung der Themenliste auf Mobilgeräten experimentiert. Es ist noch nicht ganz fertig, aber hättest du Interesse an etwas in dieser Art (es wäre eine separate Komponente):

image
image384×319 19 KB

Die aktuelle Darstellung der Themenliste auf Mobilgeräten:

image
image391×332 22.9 KB

Das Avatar-Bild öffnet weiterhin die Benutzerkarte, und das Datum verlinkt auf den letzten Beitrag.

6 „Gefällt mir“
27

Das würde ich definitiv. Es wäre eine schöne Ergänzung, besonders da das Layout für Mobile und Desktop ähnlich wäre, anstatt völlig unterschiedlich auszusehen :slight_smile:

28

Der Vorschau-Link funktioniert nicht. Beim Versuch, darauf zuzugreifen, erhalte ich folgende Fehlermeldung:

Zugriff verweigert

beim Laden von /theme/Steven/md-topic-list.json

Etwas ist schiefgelaufen.

1 „Gefällt mir“
29

Entschuldigung dafür! Ich habe meine Discourse-Themenseiten zuvor bereinigt, aber ich habe dabei etwas zu viel entfernt :broom:

Es sollte jetzt behoben sein. Danke für die Meldung!

2 „Gefällt mir“
30

Hey @Steven

Ich bin bereits auf 2.4.1, doch meine Avatare sind immer noch weg. Sieh dir den Vorschau-Screenshot meines Themas hier an

Screenshot 2020-04-04 um 12.14.04
Screenshot 2020-04-04 um 12.14.042676×1146 340 KB

31

Haben Sie diesen Branch bereits ausprobiert?

Wenn Sie eine Discourse-Version vor dem 23. März haben, müssen Sie diesen Branch verwenden, bis Sie Ihr Forum aktualisieren:

1 „Gefällt mir“
32

Betreibt jemand dieses Theme-Komponente in Kombination mit dem Topic List Previews-Plugin? Oder verursacht es doch Probleme?

Ich verwende derzeit Sam’s Minimal-Theme, aber es funktioniert im aktuellen Zustand nicht mit Topic List Previews. Deshalb überlege ich, zu wechseln, um sowohl eine minimalistische Topic-Liste als auch Bildvorschauen für Topics zu haben.

33

Das ist zu erwarten: Das Plugin ‘Topic List Previews’ überschreibt die Vorlagen der Themenlisten-Elemente, genau wie diese Theme-Komponente. Ich denke, das Plugin hat hier einen Vorteil gegenüber der Theme-Komponente. Daher halte ich es für den besten Weg, beide zu nutzen, das Plugin ‘Topic List Previews’ zu forken und die Vorlagen anzupassen.

Ich habe selbst eine angepasste Fork erstellt, falls du sehen möchtest, wie das geht: https://github.com/iunctis/discourse-topic-previews
Diese Änderungen im Speziellen – https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41 (Ich empfehle diese Version für dein Forum nicht wirklich, da sie mit einem angepassten Theme ausgeliefert wird und ich einige Dinge in den Kacheln geändert habe, die die meisten Nutzer nicht mögen würden).

Die Desktop-Vorlagen im Original-Plugin findest du hier. Das ist der beste Ausgangspunkt: https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list

Es ist absolut machbar, aber du solltest dich ein wenig mit GitHub auskennen (um mit dem Plugin auf dem neuesten Stand zu bleiben) und mit der Anpassung von Vorlagen vertraut sein.

34

Ich habe gerade ein kleines Update durchgeführt. Es gibt keine neuen Funktionen, aber ich habe die Kompatibilität mit den neuen Thumbnail-Funktionen hinzugefügt.

Die Theme-Komponente ist mit diesen Komponenten kompatibel:

4 „Gefällt mir“
35

Hallo, ist es auch mit diesem Plugin kompatibel? Topic List Previews (legacy)
Vielen Dank,
Deb

36

Leider nicht, da wir dieselbe Datei bearbeiten.

Du kannst beide Varianten zum Laufen bringen, indem du den Header-Code änderst und den Kachel-Stil mit meinen Änderungen integrierst. Dafür ist jedoch ein gewisses Verständnis dafür erforderlich, wie das funktioniert.

Anregungen findest du in meiner alten benutzerdefinierten Version der Vorschau für Themenlisten (diese stammt aus der Zeit vor dem offiziellen Thumbnails-Theme-Komponenten, daher funktioniert sie möglicherweise aktuell nicht): https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr

Sie verwendete jedoch andere CSS-Klassen und Ausrichtungen für einige Elemente, was bei deinem Forum möglicherweise nicht funktioniert.

2 „Gefällt mir“
37

Hallo @Steven, ich verwende dein Plugin schon seit einiger Zeit. Ich habe den Aktivitäts- und den Ansichts-Tab aus dem Thema entfernt, um beide unter den Themen wie bei deinem Plugin anzuzeigen, aber ich bin damit nicht erfolgreich. Kannst du mir helfen? Ich möchte einfach nur das Datum (Aktivität) hinzufügen, wie auf dem Bild unten:

image

38

Zuerst müssen Sie die Tabellenstruktur ändern und die Spalten für die Registerkarten „Ansicht

1 „Gefällt mir“
39

Vielen Dank, @Steven! Das ist genau das, was ich brauche. Ich schätze die schnelle Antwort sehr. Nur noch eine Sache: Zwischen „admin

40

Ich habe ein <br> hinzugefügt, seltsam, es wurde nicht übernommen. Du kannst es im <span>-Tag einfügen oder &nbsp; verwenden, um etwas Abstand zu erzwingen, falls du nicht sicher bist, wie man ein Klassen-Element im <span>-Tag hinzufügt.

1 „Gefällt mir“
41

nbsp hat perfekt funktioniert :+1:

42

@Steven, auf dem Desktop funktioniert es einwandfrei (ich habe auch noch einige weitere Daten hinzugefügt), aber auf der mobilen Version wird es nicht angezeigt. Kannst du helfen?