Funktioniert das zufällig auch im Reddit-Theme?
Hatte jemand Rate-Limit-Probleme, die mit dieser Theme-Komponente verbunden waren?
1 „Gefällt mir“
Ich weiß nicht, ob es möglich ist, Kategorie-Themen hinzuzufügen, um Beiträge anzuzeigen, die Bilder anzeigen können. Ich habe meinen eigenen Code mit benutzerdefiniertem HTML erstellt, der keine Wirkung zeigt. Bitte hilf mir!
html
<head>
<style>
.topic-list {
list-style: none;
padding: 0;
}
.topic-list-item {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.topic-list-item img {
width: 50px;
height: 50px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
}
.topic-list-item a {
text-decoration: none;
font-size: 16px;
color: #333;
}
.topic-list-item a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="topic-list-container">
<h2>Neueste Spielebeiträge</h2>
<ul class="topic-list" id="topic-list">
<!-- Beiträge werden hier dynamisch über JavaScript gerendert -->
</ul>
</div>
<script>
// Daten abrufen und Beiträge rendern (maximal 5)
fetch('https://www.justnainai.com/c/5.json')
.then(response => response.json()) // JSON-Daten parsen
.then(data => {
const topicListContainer = document.getElementById("topic-list");
// Array von Themen abrufen und auf maximal 5 Themen beschränken
const topics = data.topic_list.topics.slice(0, 5); // Nur die ersten 5 Themen nehmen
topics.forEach(topic => {
// Listenelement erstellen
const listItem = document.createElement("li");
listItem.className = "topic-list-item";
// Bildelement erstellen
const image = document.createElement("img");
image.src = topic.image_url || "https://via.placeholder.com/50"; // Platzhalterbild verwenden, wenn kein Bild vorhanden ist
image.alt = topic.title;
image.onclick = () => {
window.location.href = `/t/${topic.slug}`; // Auf den Beitrag klicken, um zu springen
};
// Titelslement erstellen
const title = document.createElement("a");
title.href = `/t/${topic.slug}`; // Auf den Titel klicken, um zu springen
title.textContent = topic.title;
// Bild und Titel zum Listenelement hinzufügen
listItem.appendChild(image);
listItem.appendChild(title);
// Listenelement zum Listencontainer hinzufügen
topicListContainer.appendChild(listItem);
});
})
.catch(error => {
console.error('Fehler beim Abrufen der Daten:', error);
});
</script>
</body>
</html>
Ich liebe diese Komponente wirklich, zuallererst also vielen Dank für all Ihre hervorragende Arbeit daran!
Ich habe einige Diskussionen über Top-Beitragende und festgelegte Zeitpläne für sie bemerkt. Ich würde gerne unsere als monatliche Top-Nutzer haben, hat das schon jemand erreicht?
Danke Joe
Sie sollten in der Lage sein, einen period-Parameter mit dem Wert monthly hinzuzufügen. Dieser fehlte in der Parameterliste im ursprünglichen Beitrag, wurde aber jetzt aktualisiert!
2 „Gefällt mir“
Ich kann die neuesten Beiträge mit dieser Komponente nicht abrufen.
Der von mir geänderte Code wird angezeigt, verschwindet aber, wenn ich auf die anderen Kategorien klicke.
Ich hoffe wirklich, dass diese Komponente die Verwendung von JS oder ein Aktualisieren unterstützt, da die von mir geschriebene Codekomponente nicht funktioniert und sie die neuesten Beitragsinhalte nicht abrufen kann. Deshalb habe ich eine von Hand geschrieben. Ich hoffe, sie kann aktualisiert werden, da sie nach dem Einbetten in die tc-right-sidebar nicht mehr verfügbar ist. Ich bin auch ein Anfänger im Programmieren. Ich hoffe, dass diese Funktion aktualisiert werden kann, bitte, bitte, bitte, bitte.
HTML+JS
// Sicherstellen, dass das DOM vollständig geladen ist, bevor der Code ausgeführt wird
document.addEventListener("DOMContentLoaded", () => {
// Den Sidebar-Container abrufen
const sidebar = document.querySelector(".tc-right-sidebar");
// Überprüfen, ob der Sidebar-Container gefunden wurde
if (!sidebar) {
console.error("Sidebar-Container .tc-right-sidebar nicht gefunden!");
return;
}
// Empfohlene Inhalte hinzufügen
sidebar.innerHTML = `
<div class="custom-sidebar">
<div class="recommendation-container">
<div class="recommendation-header">
<h2><i class="fa fa-hand-o-right"></i>Neueste Spielebeiträge</h2> <!-- Icon und Titel hinzufügen -->
</div>
<ul class="recommendation-list">
<!-- Standard-Platzhalterinhalt -->
<li class="recommendation-item">
<a href="#">
<img src="https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg" alt="Platzhalterbild 1">
</a>
</li>
</ul>
</div>
</div>
`;
// Daten dynamisch laden
fetchTopics();
// Auf Themenänderungen hören
observeThemeChanges();
});
/**
* Topic-Daten von der angegebenen API abrufen
*/
async function fetchTopics() {
try {
// API-Daten anfordern
const response = await fetch("https://www.justnainai.com/c/音乐分享/12.json");
if (!response.ok) {
throw new Error("Datenabruf fehlgeschlagen");
}
const jsonData = await response.json();
// Die ersten 4 Topic-Daten extrahieren
const topics = jsonData.topic_list.topics.slice(0, 4).map(topic => ({
id: topic.id,
title: topic.title,
slug: topic.slug,
image_url: topic.image_url || "https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg",
}));
// Auf der Seite rendern
renderTopics(topics);
} catch (error) {
console.error("Fehler beim Abrufen der Daten:", error);
}
}
/**
* Empfohlene Inhalte auf der Seite rendern
* @param {Array} topics - Topic-Daten
*/
function renderTopics(topics) {
const recommendationList = document.querySelector(".recommendation-list");
recommendationList.innerHTML = ""; // Platzhalterinhalt löschen
.custom-sidebar {
padding: 10px;
background-color: #fff; /* Weiße Hintergrundfarbe */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.recommendation-container .recommendation-header h2 {
font-size: 23px; /* Korrigierter Tippfehler von "23x" zu "23px" */
margin-bottom: 10px;
color: #333; /* Titel in Schwarz */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Feste Breite */
height: 156px; /* Feste Höhe, konsistent gehalten */
object-fit: cover; /* Seitenverhältnis des Bildinhalts beibehalten */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.recommendation-item img:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
topics.forEach(topic => {
const link = `https://www.justnainai.com/t/${topic.slug}/${topic.id}`;
const image = topic.image_url;
const listItem = document.createElement("li");
listItem.className = "recommendation-item";
// HTML für empfohlene Elemente erstellen
listItem.innerHTML = `
<a href="${link}" title="${topic.title}" target="_blank">
<img src="${image}" alt="${topic.title}">
</a>
`;
recommendationList.appendChild(listItem);
});
}
CSS
.custom-sidebar {
padding: 10px;
background-color: #fff; /* Weiße Hintergrundfarbe */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.recommendation-container .recommendation-header h2 {
font-size: 23px; /* Korrigierter Tippfehler von "23x" zu "23px" */
margin-bottom: 10px;
color: #333; /* Titel in Schwarz */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Feste Breite */
height: 156px; /* Feste Höhe, konsistent gehalten */
object-fit: cover; /* Seitenverhältnis des Bildinhalts beibehalten */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.recommendation-item img:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
Wenn Sie es zu einer Ember Component machen (sehen Sie sich Plugin und Theme component als Beispiele an), können Sie sie mit einer separaten Theme Component hinzufügen und dann mit dem Namen der Ember Component darauf verweisen.
Sie würde dann auch mit Bars funktionieren, das dasselbe System verwendet.
(Hinweis: Verwechseln Sie Theme Component nicht mit Ember Component. Eine Theme Component kann viele Ember Components enthalten)
2 „Gefällt mir“
Haben Sie das jemals herausgefunden? Wir möchten auch alle Ereignisse in allen Kategorien anzeigen, unabhängig davon, in welcher Kategorie sich das Ereignis befindet.
2 „Gefällt mir“
Leider nicht.
In diesem Fall, gibt es eine Idee, wie man die Seitenleiste nur auf der Startseite anzeigt?
Ich habe gerade damit in einer Sandbox-Umgebung herumgespielt, die ich als Proof of Concept (POC) für jemanden verwende. Es wäre nicht nur schön, wenn der Kalenderblock auf der Kategorienseite angezeigt werden könnte, sondern es wäre auch schön, wenn man angeben könnte, welchen Kalender/welche Kalender verwendet werden sollen.
Ich habe eine Kategorie „Veranstaltungen“, die den Kalender enthält (der Zugriff wird letztendlich nach Gruppen eingeschränkt), aber ich möchte, dass Mitglieder der Gruppe, auf die er beschränkt ist, die Liste der bevorstehenden Veranstaltungen überall auf der Plattform sehen können, um die Teilnahme an den Veranstaltungen zu fördern.
Ich weiß nicht, was mit den gruppenbasierten Einschränkungen passieren wird – damit habe ich mich beim Testen noch nicht beschäftigt.
Wenn ich jedoch in meiner allgemeinen Kategorie nachsehe, steht im rechten Seitenblock „Keine bevorstehenden Veranstaltungen“ – aber wenn ich auf „Alle anzeigen“ klicke, werde ich zum Veranstaltungskalender weitergeleitet und sehe die Testveranstaltung, die ich vor einer Woche dort eingetragen habe.
Haben Sie sich Robert’s Developer Theme component angesehen?
Wenn Sie ein Budget haben, falls nötig, könnte eine TC erstellt werden, um Kalenderereignisse in einer Seitenleiste oder wo auch immer Sie möchten, einzufügen.
1 „Gefällt mir“
Ich teile eine modifizierte Version unter Manuel Kostka / Discourse / Blocks / Upcoming Events · GitLab. Das Layout ist nicht für die Seitenleiste gedacht, sondern für meine Homepage Blocks Komponente. Dennoch sollte die Logik in jedem der Block-Layout-Frameworks funktionieren.
3 „Gefällt mir“
Für uns reicht es aus, die richtigen Blöcke auf den Seiten „Neueste“ oder „Beliebteste“ anzuzeigen. Ich habe das Repository geforkt und das Standardverhalten geändert, wenn keine Route angegeben ist. Dazu müssen Sie nur die Datei javascripts/connectors/before-list-area/tc-right-sidebar.js ändern und die letzte Zeile wie folgt ändern:
// Wenn keine Routen angegeben sind, nur auf den Seiten "Neueste" oder "Beliebteste" anzeigen
return ["discovery.latest", "discovery.hot"].includes(currentRouteName);
Da wir neu bei Discourse sind, bin ich mir nicht sicher, wie viel Wartungsaufwand dies erfordert, aber wir werden sehen.
1 „Gefällt mir“
Haben Sie versucht, discovery.latest und discovery.hot in den show_in_routes-Einstellungen zu verwenden? Das sollte in der Theorie vermeiden, die Komponente zu forken.
Das scheint auch den Trick zu machen 
Danke!
1 „Gefällt mir“
Hallo, ich weiß nicht, was ich falsch mache, aber ich kann die Seitenleiste auf der Seite nicht anzeigen lassen.
[
{
"setting": "blocks",
"value": "[{\"name\":\"recent-replies\",\"params\":[{\"name\":\"count\",\"value\":\"3\"}]}]"
},
{
"setting": "show_in_routes",
"value": "/categories|/latest"
}
]
Hallo zusammen,
hat jemand diese Komponente verwendet und benutzerdefinierte Inhalte genutzt, um ein hyperverknüpftes Laufband für Bilder zu erstellen?
Ich wollte einen kleinen Bereich mit einem konstanten Laufband von Bildern haben, die mit einer Veranstaltungs- oder Artikelseite verknüpft sind.
Danke Joe
Wenn es um Themen innerhalb von Kategorien geht… Kann es “jedes Thema” sein?
Ich möchte 7-8 Themen innerhalb einer Kategorie haben. Und dann möchte ich 2-3 davon für die rechte “Seitenleiste” auswählen, ist das möglich?
Ist es möglich, diese Seitenleiste zu fixieren, sodass sie beim Scrollen sichtbar bleibt (ähnlich wie die Navigations- oder Kategorieliste auf der linken Seite)?
3 „Gefällt mir“