هل يعمل هذا على سمة redditish بالصدفة؟
هل واجه أي شخص مشاكل حد المعدل مرتبطة بمكون السمة هذا؟
إعجاب واحد (1)
لا أعرف ما إذا كان من الممكن إضافة مواضيع فئوية لعرض المشاركات التي يمكنها عرض الصور التي قمت بإنشائها بنفسي باستخدام html المخصص لا يمكن أن يكون له تأثير لذا من فضلك توسل!
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>أحدث منشورات الألعاب</h2>
<ul class="topic-list" id="topic-list">
<!-- سيتم عرض المنشورات هنا ديناميكيًا عبر JavaScript -->
</ul>
</div>
<script>
// جلب البيانات وعرض المنشورات (بحد أقصى 5)
fetch('https://www.justnainai.com/c/5.json')
.then(response => response.json()) // تحليل بيانات JSON
.then(data => {
const topicListContainer = document.getElementById("topic-list");
// الحصول على مصفوفة المنشورات، وتحديد 5 منشورات كحد أقصى
const topics = data.topic_list.topics.slice(0, 5); // أخذ أول 5 منشورات فقط
topics.forEach(topic => {
// إنشاء عنصر قائمة
const listItem = document.createElement("li");
listItem.className = "topic-list-item";
// إنشاء عنصر صورة
const image = document.createElement("img");
image.src = topic.image_url || "https://via.placeholder.com/50"; // استخدام صورة عنصر نائب إذا لم تكن هناك صورة
image.alt = topic.title;
image.onclick = () => {
window.location.href = `/t/${topic.slug}`; // النقر على الصورة للانتقال إلى المنشور
};
// إنشاء عنصر عنوان
const title = document.createElement("a");
title.href = `/t/${topic.slug}`; // النقر على العنوان للانتقال إلى المنشور
title.textContent = topic.title;
// إضافة الصورة والعنوان إلى عنصر القائمة
listItem.appendChild(image);
listItem.appendChild(title);
// إضافة عنصر القائمة إلى حاوية القائمة
topicListContainer.appendChild(listItem);
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
</body>
</html>
أحببت هذه المكونات حقًا أولاً وقبل كل شيء، لذا أشكركم على كل عملكم الرائع عليها!
لقد لاحظت بعض الأحاديث حول كبار المساهمين وتحديد أطر زمنية لهم، وأود أن يكون لدينا أفضل المستخدمين شهريًا، هل حقق أي شخص ذلك؟
شكرا جو
يجب أن تكون قادرًا على إضافة معلمة period بقيمة monthly. لقد كانت هذه مفقودة من قائمة المعلمات في المنشور الأصلي، ولكن تم تحديثها الآن!
إعجابَين (2)
لا يمكنني الحصول على أحدث المشاركات باستخدام هذا المكون.
الكود الذي قمت بتغييره يظهر ولكنه يختفي عند النقر على الفئات الأخرى.
آمل حقًا أن يدعم هذا المكون استخدام JS أو التحديث لأنه لا يعمل مكون الكود الذي كتبته، ولا يمكنه الحصول على أحدث محتوى للمنشور، لذلك كتبت واحدًا يدويًا، وآمل أن يتم تحديثه لأنه تم تضمينه في tc-right-sidebar بعد التبديل لم يعد متاحًا، أنا أيضًا مبرمج مبتدئ، آمل أن يتم تحديث هذه الميزة، من فضلك من فضلك من فضلك من فضلك
HTML+JS
// Ensure the DOM is fully loaded before executing the code
document.addEventListener("DOMContentLoaded", () => {
// Get the sidebar container
const sidebar = document.querySelector(".tc-right-sidebar");
// Check if the sidebar container is found
if (!sidebar) {
console.error("Sidebar container .tc-right-sidebar not found!");
return;
}
// Add recommended content
sidebar.innerHTML = `
<div class="custom-sidebar">
<div class="recommendation-container">
<div class="recommendation-header">
<h2><i class="fa fa-hand-o-right"></i>أحدث منشورات الألعاب</h2> <!-- Add icon and title -->
</div>
<ul class="recommendation-list">
<!-- Default placeholder content -->
<li class="recommendation-item">
<a href="#">
<img src="https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg" alt="Placeholder Image 1">
</a>
</li>
</ul>
</div>
</div>
`;
// Dynamically load data
fetchTopics();
// Listen for theme changes
observeThemeChanges();
});
/**
* Fetch topic data from the specified API
*/
async function fetchTopics() {
try {
// Request API data
const response = await fetch("https://www.justnainai.com/c/音乐分享/12.json");
if (!response.ok) {
throw new Error("Data retrieval failed");
}
const jsonData = await response.json();
// Extract the first 4 topic data
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",
}));
// Render to the page
renderTopics(topics);
} catch (error) {
console.error("Error fetching data:", error);
}
}
/**
* Render the recommended content to the page
* @param {Array} topics - Topic data
*/
function renderTopics(topics) {
const recommendationList = document.querySelector(".recommendation-list");
recommendationList.innerHTML = ""; // Clear placeholder content
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";
// Create recommended item HTML
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; /* White background */
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; /* Corrected typo from "23x" to "23px" */
margin-bottom: 10px;
color: #333; /* Title in black */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Fixed width */
height: 156px; /* Fixed height, keeping it consistent */
object-fit: cover; /* Maintain the aspect ratio of the image content */
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);
}
إذا جعلته مكون Ember (ابحث في Plugin و Theme component عن أمثلة)، يمكنك إضافته باستخدام مكون سمة منفصل ثم الإشارة إليه باسم مكون Ember.\n\nوسيعمل بعد ذلك أيضًا مع Bars الذي يستخدم نفس النظام.\n\n(ملاحظة: لا تخلط بين مكون السمة ومكون Ember. يمكن لمكون السمة أن يحتوي على العديد من مكونات Ember)
إعجابَين (2)
هل توصلت إلى حل لهذا؟ نود أيضًا عرض جميع الأحداث في جميع الفئات بغض النظر عن الفئة التي ينتمي إليها الحدث.
إعجابَين (2)
للأسف لا.
في هذه الحالة، هل لديك فكرة عن كيفية إظهار الشريط الجانبي في الصفحة الرئيسية فقط؟
كنت ألعب بهذا في بيئة معزولة أستخدمها كإثبات مفهوم لشخص ما، ولن يكون من الجيد فقط أن يكون كتلة التقويم مرئية في صفحة الفئات، ولكن سيكون من الجيد أيضًا أن نكون قادرين على تحديد أي تقويم/تقويمات لاستخدامها.
لدي فئة أحداث تحتفظ بالتقويم (الوصول المقيد حسب المجموعة هو المكان الذي ستنتهي فيه في النهاية)، ولكنني أريد أن يتمكن أعضاء المجموعة التي تم تقييدها إليها من رؤية قائمة الأحداث القادمة في أي مكان على المنصة لزيادة الحضور في الأحداث.
لا أعرف ما سيحدث مع القيود المستندة إلى المجموعة لهذا - لم أصل إلى هذا الحد بعد في الاختبار.
عندما أنظر في فئتي العامة، ومع ذلك، فإن كتلة الشريط الجانبي الأيمن تقول “لا توجد أحداث قادمة” - ولكن إذا نقرت على “عرض الكل”، يتم نقلي إلى تقويم الأحداث وأرى الحدث التجريبي الذي وضعته فيه قبل أسبوع.
هل نظرت في مكون السمة الخاص بروبرت؟
إذا كانت لديك ميزانية إذا لزم الأمر، فربما يمكن إنشاء مكون سمة لوضع أحداث التقويم في الشريط الجانبي أو في أي مكان تريده.
إعجاب واحد (1)
أشارك نسخة معدلة على Manuel Kostka / Discourse / Blocks / Upcoming Events · GitLab. التخطيط ليس مصممًا لشريط التمرير الجانبي، ولكنه مصمم لمكون Homepage Blocks الخاص بي. ومع ذلك، يجب أن تعمل المنطق في أي من أطر تخطيط الكتل.
3 إعجابات
بالنسبة لنا، فإن عرض الكتل الصحيحة فقط في الصفحات الأحدث أو الأكثر شيوعًا يعمل بشكل جيد. ما قمت به هو عمل نسخة من المستودع وتغيير السلوك الافتراضي عند عدم توفير مسار. للقيام بذلك، ما عليك سوى تعديل الملف javascripts/connectors/before-list-area/tc-right-sidebar.js وتغيير السطر الأخير إلى:
// إذا لم يتم تحديد مسارات، فاعرض فقط في صفحات "الأحدث" أو "الأكثر شيوعًا"
return [\"discovery.latest\", \"discovery.hot\"].includes(currentRouteName);
نظرًا لأننا جدد في Discourse، لست متأكدًا من مقدار الصيانة التي سيتطلبها القيام بذلك، ولكن أعتقد أننا سنرى.
إعجاب واحد (1)
هل جربت استخدام discovery.latest و discovery.hot في إعداد show_in_routes؟ ينبغي أن يُجنبك ذلك بشكل نظري الحاجة إلى فصل المكون.
يبدو أن هذا يفي بالغرض أيضًا 
شكرا لك!
إعجاب واحد (1)
مرحباً، لا أعرف ما الذي أفعله بشكل خاطئ ولكني لا أستطيع جعل الشريط الجانبي يظهر على الصفحة.
[
{
"setting": "blocks",
"value": "[{\"name\":\"recent-replies\",\"params\":[{\"name\":\"count\",\"value\":\"3\"}]}]"
},
{
"setting": "show_in_routes",
"value": "/categories|/latest"
}
]
مرحباً بالجميع،
هل استخدم أي شخص هذا المكون واستخدم محتوى مخصصًا لإنشاء شريط تمرير (marquee) للصور بروابط تشعبية؟
أردت أن يكون لدي قسم صغير به شريط تمرير ثابت للصور بروابط تشعبية لصفحة حدث أو صفحة مقال.
شكراً جو
عندما يتعلق الأمر بالمواضيع ضمن الفئات.. هل يمكن أن تكون “أي موضوع”؟
أريد أن يكون لدي 7-8 مواضيع ضمن فئة. وبعد ذلك أريد اختيار 2-3 منها لتكون ضمن “الشريط الجانبي” الأيمن، هل هذا ممكن؟
هل من الممكن تثبيت الشريط الجانبي هذا ليظل مرئياً عند التمرير (مماثل لعمود التنقل/الفئة على الجانب الأيسر)؟
3 إعجابات