NodeBB/nodebb-widget-essentials
2
0
Fork 0
mirror of https://hk.gh-proxy.com/https://github.com/NodeBB/nodebb-widget-essentials.git synced 2025-10-03 20:00:59 +08:00
Code Issues Projects Packages Wiki Activity Actions

feat: use topic thumbnails in recent/top/popular topics

Browse source
This commit is contained in:
Barış Soner Uşaklı 2025-08-08 13:20:53 -04:00
parent 735ddd4d20
commit da4618a99a
2 changed files with 26 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

5
library.js
View file

@ -294,6 +294,7 @@ Widget.renderRecentTopicsWidget = async function (widget) {
topics: data.topics,
numTopics: numTopics,
relative_path: nconf.get('relative_path'),
sidebar: sidebarLocations.includes(widget.location),
});
return widget;
};
@ -352,6 +353,7 @@ Widget.renderPopularTopics = async function (widget) {
topics: data.topics,
numTopics: numTopics,
relative_path: nconf.get('relative_path'),
sidebar: sidebarLocations.includes(widget.location),
});
return widget;
};
@ -369,6 +371,7 @@ Widget.renderTopTopics = async function (widget) {
topics: data.topics,
numTopics: numTopics,
relative_path: nconf.get('relative_path'),
sidebar: sidebarLocations.includes(widget.location),
});
return widget;
};
@ -434,7 +437,7 @@ Widget.renderSuggestedTopics = async function (widget) {
topicData = topicData.filter(topic => topic && !topic.deleted);
}

const sidebarLocations = ['left', 'right', 'sidebar'];

widget.html = await app.renderAsync('widgets/suggestedtopics', {
topics: topicData,
config: widget.templateData.config,

36
public/templates/widgets/partials/topics.tpl
View file

@ -1,25 +1,33 @@
{{{ each topics }}}
<li class="widget-topics">
<div class="d-flex flex-column gap-2">
<a class="topic-title fw-semibold fs-6 text-reset text-break d-block" href="{relative_path}/topic/{./slug}">{./title}</a>
<div class="d-flex gap-3 flex-row">
{{{ if ./thumbs.length }}}
<a class="topic-thumbs position-relative text-decoration-none flex-shrink-0 d-block" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}" aria-label="[[topic:thumb-image]]">
<img class="topic-thumb rounded-1 bg-light" style="width: 5.33rem; max-width: 5.33rem; height: auto; max-height: 5rem; object-fit: contain;" src="{./thumbs.0.url}" alt=""/>
</a>
{{{ end }}}

<div class="d-flex gap-2 align-items-center text-sm">
<a class="text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{{{ if ./teaser.user.userslug }}}{relative_path}/user/{./teaser.user.userslug}{{{ else }}}#{{{ end }}}">
{buildAvatar(./teaser.user, "24px", true)}
</a>
<div class="d-flex flex-column gap-2">
<a class="topic-title fw-semibold fs-6 text-reset text-break d-block" href="{relative_path}/topic/{./slug}">{./title}</a>

<div class="post-author d-flex align-items-center gap-1">
<a class="lh-1 fw-semibold text-nowrap" href="{config.relative_path}/user/{./teaser.user.userslug}">{./teaser.user.displayname}</a>
<div class="d-flex gap-2 align-items-center text-sm">
<a class="text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{{{ if ./teaser.user.userslug }}}{relative_path}/user/{./teaser.user.userslug}{{{ else }}}#{{{ end }}}">
{buildAvatar(./teaser.user, "24px", true)}
</a>

<div class="post-author d-flex align-items-center gap-1">
<a class="lh-1 fw-semibold text-nowrap" href="{config.relative_path}/user/{./teaser.user.userslug}">{./teaser.user.displayname}</a>
</div>
<span class="timeago text-muted lh-1 text-nowrap" title="{./teaser.timestampISO}"></span>
</div>
<span class="timeago text-muted lh-1 text-nowrap" title="{./teaser.timestampISO}"></span>
</div>

<div class="d-flex justify-content-between">
<div class="btn btn-link btn-sm text-body pe-none"><i class="fa-fw fa-heart text-xs fa-regular text-muted"></i> {humanReadableNumber(./votes)}</div>
<div class="d-flex justify-content-between">
<div class="btn btn-link btn-sm text-body pe-none"><i class="fa-fw fa-heart text-xs fa-regular text-muted"></i> {humanReadableNumber(./votes)}</div>

<div class="btn btn-link btn-sm text-body pe-none"><i class="fa-fw fa-regular fa-message text-xs text-muted"></i> {humanReadableNumber(./postcount)}</div>
<div class="btn btn-link btn-sm text-body pe-none"><i class="fa-fw fa-regular fa-message text-xs text-muted"></i> {humanReadableNumber(./postcount)}</div>

<div class="btn btn-link btn-sm text-body pe-none"><i class="fa-fw fa-regular fa-eye text-xs text-muted"></i> {humanReadableNumber(./viewcount)}</div>
<div class="btn btn-link btn-sm text-body pe-none"><i class="fa-fw fa-regular fa-eye text-xs text-muted"></i> {humanReadableNumber(./viewcount)}</div>
</div>
</div>
</div>
{{{ if !@last}}}