Est-ce que cela fonctionne sur le thème redditish par hasard ?
Quelqu’un a-t-il rencontré des problèmes de limite de débit liés à ce composant de thème ?
1 « J'aime »
Je ne sais pas s’il est possible d’ajouter des sujets de catégorie pour obtenir des publications qui peuvent afficher des images. J’ai créé mon propre code en utilisant du HTML personnalisé, mais il ne prend pas effet, alors s’il vous plaît, aidez-moi !
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>Derniers articles de jeux</h2>
<ul class="topic-list" id="topic-list">
<!-- Les articles ici seront rendus dynamiquement via JavaScript -->
</ul>
</div>
<script>
// Récupérer les données et rendre les articles (jusqu'à 5)
fetch('https://www.justnainai.com/c/5.json')
.then(response => response.json()) // Analyser les données JSON
.then(data => {
const topicListContainer = document.getElementById("topic-list");
// Obtenir le tableau des articles et limiter à 5 articles
const topics = data.topic_list.topics.slice(0, 5); // Prendre seulement les 5 premiers articles
topics.forEach(topic => {
// Créer un élément de liste
const listItem = document.createElement("li");
listItem.className = "topic-list-item";
// Créer un élément image
const image = document.createElement("img");
image.src = topic.image_url || "https://via.placeholder.com/50"; // Utiliser une image de remplacement si aucune n'est fournie
image.alt = topic.title;
image.onclick = () => {
window.location.href = `/t/${topic.slug}`; // Cliquer sur l'image pour accéder à l'article
};
// Créer un élément de titre
const title = document.createElement("a");
title.href = `/t/${topic.slug}`; // Cliquer sur le titre pour accéder à l'article
title.textContent = topic.title;
// Ajouter l'image et le titre à l'élément de liste
listItem.appendChild(image);
listItem.appendChild(title);
// Ajouter l'élément de liste au conteneur de liste
topicListContainer.appendChild(listItem);
});
})
.catch(error => {
console.error('Erreur lors de la récupération des données :', error);
});
</script>
</body>
</html>
J’adore vraiment ce composant avant tout, alors merci pour tout votre excellent travail dessus !
J’ai remarqué des discussions sur les meilleurs contributeurs et des délais fixés pour eux, j’aimerais que les nôtres soient un top utilisateurs mensuel, quelqu’un a-t-il réussi cela ?
Merci Joe
Vous devriez pouvoir ajouter un paramètre period avec la valeur monthly. Il manquait dans la liste des paramètres de la publication originale, mais elle a maintenant été mise à jour !
2 « J'aime »
Je n’arrive pas à obtenir les derniers articles avec ce composant.
Le code que j’ai modifié s’affiche mais disparaît lorsque je clique sur les autres catégories.
J’espère vraiment que ce composant pourra prendre en charge l’utilisation de js ou le rafraîchissement, car le composant de code que j’ai écrit ne fonctionne pas, il ne peut pas obtenir le dernier contenu des articles, alors j’en ai écrit un à la main. J’espère qu’il pourra être mis à jour car je l’ai intégré dans le tc-right-sidebar après avoir changé, il n’est plus disponible. Je suis aussi un codeur débutant, j’espère que cette fonctionnalité pourra être mise à jour, s’il vous plaît, s’il vous plaît, s’il vous plaît.
HTML+JS
// Assurez-vous que le DOM est entièrement chargé avant d'exécuter le code
document.addEventListener("DOMContentLoaded", () => {
// Obtenez le conteneur de la barre latérale
const sidebar = document.querySelector(".tc-right-sidebar");
// Vérifiez si le conteneur de la barre latérale est trouvé
if (!sidebar) {
console.error("Conteneur de barre latérale .tc-right-sidebar non trouvé !");
return;
}
// Ajoutez du contenu recommandé
sidebar.innerHTML = `
<div class="custom-sidebar">
<div class="recommendation-container">
<div class="recommendation-header">
<h2><i class="fa fa-hand-o-right"></i>Derniers articles de jeu</h2> <!-- Ajoutez une icône et un titre -->
</div>
<ul class="recommendation-list">
<!-- Contenu de remplacement par défaut -->
<li class="recommendation-item">
<a href="#">
<img src="https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg" alt="Image de remplacement 1">
</a>
</li>
</ul>
</div>
</div>
`;
// Chargez dynamiquement les données
fetchTopics();
// Écoutez les changements de thème
observeThemeChanges();
});
/**
* Récupérez les données de sujet à partir de l'API spécifiée
*/
async function fetchTopics() {
try {
// Demandez les données de l'API
const response = await fetch("https://www.justnainai.com/c/音乐分享/12.json");
if (!response.ok) {
throw new Error("Échec de la récupération des données");
}
const jsonData = await response.json();
// Extrayez les données des 4 premiers sujets
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",
}));
// Rendez sur la page
renderTopics(topics);
} catch (error) {
console.error("Erreur lors de la récupération des données :", error);
}
}
/**
* Affichez le contenu recommandé sur la page
* @param {Array} topics - Données du sujet
*/
function renderTopics(topics) {
const recommendationList = document.querySelector(".recommendation-list");
recommendationList.innerHTML = ""; // Effacez le contenu de remplacement
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";
// Créez le HTML de l'élément recommandé
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; /* Fond blanc */
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; /* Correction de la faute de frappe de "23x" à "23px" */
margin-bottom: 10px;
color: #333; /* Titre en noir */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Largeur fixe */
height: 156px; /* Hauteur fixe, en restant cohérent */
object-fit: cover; /* Conservez le rapport d'aspect du contenu de l'image */
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);
}
Si vous en faites un Composant Ember (regardez dans Plugin et Theme component pour des exemples), vous pouvez l’ajouter avec un Composant de Thème séparé, puis y faire référence par le nom du Composant Ember.
Il fonctionnerait alors également avec Bars qui utilise le même système.
(NB ne confondez pas Composant de Thème et Composant Ember. Un Composant de Thème peut contenir plusieurs Composants Ember)
2 « J'aime »
Avez-vous déjà résolu ce problème ? Nous aimerions également afficher tous les événements de toutes les catégories, quelle que soit la catégorie dans laquelle se trouve l’événement.
2 « J'aime »
Malheureusement non.
Dans ce cas, avez-vous une idée de la façon d’afficher la barre latérale uniquement sur la page d’accueil ?
Je jouais avec ça dans un environnement sandbox que j’utilise comme POC pour quelqu’un, et non seulement il serait agréable de pouvoir afficher le bloc calendrier sur la page des catégories, mais il serait également agréable de pouvoir spécifier quel(s) calendrier(s) utiliser.
J’ai une catégorie Événements qui contient le calendrier (l’accès restreint par groupe est là où il finira par se trouver), mais je veux que les membres du groupe auquel il est restreint puissent voir la liste des événements à venir n’importe où sur la plateforme pour encourager la participation aux événements.
Je ne sais pas ce qu’il adviendra des restrictions basées sur les groupes pour cela - je ne suis pas encore arrivé aussi loin dans les tests.
Cependant, lorsque je regarde dans ma catégorie Générale, le bloc de la barre latérale droite indique « Aucun événement à venir » - mais si je clique sur « Tout voir », je suis dirigé vers le calendrier des événements et je vois l’événement test que j’y ai mis une semaine à l’avance.
Avez-vous examiné le composant thématique de Robert ?
Si vous avez un budget si nécessaire, peut-être qu’un composant thématique pourrait être créé pour placer les événements du calendrier dans une barre latérale ou où vous le souhaitez.
1 « J'aime »
J’ai partagé une version modifiée sur Manuel Kostka / Discourse / Blocks / Upcoming Events · GitLab. La mise en page n’est pas conçue pour la barre latérale, mais pour mon composant Homepage Blocks. Cependant, la logique devrait fonctionner dans n’importe lequel des frameworks de mise en page de blocs.
3 « J'aime »
Pour nous, il suffit d’afficher les bons blocs sur les pages “latest” ou “hot”. Ce que j’ai fait, c’est forker le dépôt et modifier le comportement par défaut lorsqu’aucune route n’est donnée. Pour ce faire, il suffit de modifier le fichier javascripts/connectors/before-list-area/tc-right-sidebar.js et de changer la dernière ligne en :
// Si aucune route n'est spécifiée, n'afficher que sur les pages "Latest" ou "Hot"
return [\"discovery.latest\", \"discovery.hot\"].includes(currentRouteName);
Comme nous sommes nouveaux sur Discourse, je ne suis pas sûr de la maintenance que cela nécessitera, mais je suppose que nous verrons.
1 « J'aime »
Avez-vous essayé d’utiliser discovery.latest et discovery.hot dans le paramètre show_in_routes ? Cela devrait en théorie éviter d’avoir à forker le composant.
On dirait que ça fait aussi l’affaire :face_palm:
Merci !
1 « J'aime »
Salut, je ne sais pas ce que je fais de mal, mais je n’arrive pas à faire apparaître la barre latérale sur la page.
[
{
"setting": "blocks",
"value": "[{\"name\":\"recent-replies\",\"params\":[{\"name\":\"count\",\"value\":\"3\"}]}]"
},
{
"setting": "show_in_routes",
"value": "/categories|/latest"
}
]
Salut à tous,
Quelqu’un a-t-il utilisé ce composant et du contenu personnalisé pour créer un bandeau défilant hyperlien pour des images ?
Je voulais avoir une petite section avec un bandeau défilant constant d’images hyperliens vers une page d’événement ou une page d’article.
Merci Joe
En ce qui concerne les sujets au sein des catégories… Peut-il s’agir de « n’importe quel sujet » ?
Je veux avoir 7 à 8 sujets dans une catégorie. et ensuite je veux en choisir 2 à 3 pour qu’ils soient dans la « barre latérale » droite, est-ce possible ?
Est-il possible d’épingler cette barre latérale pour qu’elle reste visible lors du défilement (similaire à la colonne de navigation/catégorie à gauche) ?
3 « J'aime »