혹시 redditish 테마에서도 작동하나요?
이 테마 컴포넌트와 관련된 레이트 리미트 문제를 경험하신 분이 계신가요?
1개의 좋아요
카테고리별 최신 게시물을 가져와서 내가 만든 이미지를 표시할 수 있는지 모르겠습니다. custom-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
<script>
// 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>Latest Game Posts</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
.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);
}
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);
});
}
</script>
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 컴포넌트로 만들면(#customization:plugin과 #customization:theme-component에서 예시를 참고하세요), 별도의 Theme Component를 추가한 뒤 Ember 컴포넌트 이름으로 참조할 수 있습니다.
이 경우 동일한 시스템을 사용하는 Bars에서도 작동합니다.
(참고: Theme Component와 Ember 컴포넌트를 혼동하지 마세요. Theme Component는 여러 Ember 컴포넌트를 포함할 수 있습니다)
2개의 좋아요
이 문제를 해결하셨나요? 우리도 이벤트가 어떤 카테고리에 속해 있는지와 관계없이 모든 카테고리의 모든 이벤트를 표시하고 싶습니다.
2개의 좋아요
아쉽게도 그렇지 않습니다.
그렇다면, 사이드바를 메인 페이지에서만 표시하는 방법에 대해 혹시 아이디어가 있으신가요?
POC로 사용 중인 샌드박스 환경에서 이것을 시험해 보고 있었는데, 캘린더 블록이 카테고리 페이지에 표시될 수 있으면 좋겠지만, 사용할 캘린더를 지정할 수도 있으면 더 좋겠습니다.
현재 캘린더를 담고 있는 ‘이벤트’ 카테고리가 있습니다(최종적으로는 그룹별 접근 제한이 적용될 예정입니다). 하지만 이 그룹에 속한 구성원들이 플랫폼의 어디에서든 다가오는 이벤트 목록을 볼 수 있으면 이벤트 참석률을 높이는 데 도움이 될 것입니다.
그룹 기반 제한이 어떻게 적용될지는 아직 모르겠습니다. 테스트를 그 정도까지 진행하지는 못했기 때문입니다.
하지만 ‘일반’ 카테고리를 살펴보면, 오른쪽 사이드바 블록에는 "다가오는 이벤트 없음"이라고 표시되어 있습니다. 그런데 "전체 보기"를 클릭하면 이벤트 캘린더로 이동하여, 일주일 전 설정해 둔 테스트 이벤트가 보입니다.
로버트의 개발자용 Customization > Theme component 를 확인해 보셨나요?
필요하다면 예산이 있다면, 캘린더 이벤트를 사이드바나 원하는 위치에 배치할 수 있도록 커스텀 컴포넌트(TC)를 제작해 드릴 수 있습니다.
1개의 좋아요
수정된 버전을 Manuel Kostka / Discourse / Blocks / Upcoming Events · GitLab 에 공유합니다. 레이아웃은 사이드바가 아니라 제 홈페이지 블록 컴포넌트를 위해 만들어졌지만, 로직은 어떤 블록 레이아웃 프레임워크에서도 작동해야 합니다.
3개의 좋아요
우리에게는 최신(Latest)이나 인기(Hot) 페이지에서 올바른 블록만 표시되는 것이 잘 작동합니다. 저는 저장소를 포크하고 라우트가 지정되지 않은 경우의 기본 동작을 변경했습니다. 이렇게 하려면 javascripts/connectors/before-list-area/tc-right-sidebar.js 파일을 수정하고 마지막 줄을 다음과 같이 변경하면 됩니다:
// 라우트가 지정되지 않은 경우 "Latest" 또는 "Hot" 페이지에서만 표시
return ["discovery.latest", "discovery.hot"].includes(currentRouteName);
저희는 Discourse를 처음 사용하는 관계로, 이렇게 할 경우 유지보수에 얼마나 많은 노력이 필요할지 확실하지 않지만, 지켜보겠습니다.
1개의 좋아요
show_in_routes 설정에서 discovery.latest와 discovery.hot를 사용해 보셨나요? 이론적으로는 이렇게 하면 해당 컴포넌트를 포크할 필요가 없어야 합니다.
이것도 잘 되는 것 같습니다 
감사합니다!
1개의 좋아요
안녕하세요, 제가 뭘 잘못하고 있는지 모르겠지만 사이드바가 페이지에 표시가 안 돼요.
[
{
"setting": "blocks",
"value": "[{\"name\":\"recent-replies\",\"params\":[{\"name\":\"count\",\"value\":\"3\"}]}]"
},
{
"setting": "show_in_routes",
"value": "/categories|/latest"
}
]
안녕하세요,
이 컴포넌트를 사용해 커스텀 콘텐츠로 이미지 하이퍼링크 마퀴를 만들어 보신 분 계신가요?
이벤트 페이지나 기사 페이지로 연결된 이미지의 상시 마퀴를 작은 섹션으로 만들고 싶습니다.
조입니다.
카테고리 내의 주제(Topic)에 대해 질문드립니다. "모든 주제"로 설정할 수 있을까요?
카테고리 안에 7~8개의 주제를 두고, 그중 2~3개를 우측 "사이드바"에 표시하고 싶습니다. 이것이 가능한가요?
이 사이드바를 고정하여 스크롤할 때도 계속 보이게 할 수 있나요 (왼쪽의 내비게이션/카테고리 열과 유사하게)?
3개의 좋아요