헤더에 다음 스크립트를 실행 중인데, 렌더링은 정상적으로 잘 되고 있습니다.
하지만 특정 토픽으로 이동하면 아바타 드롭다운이 다음과 같이 중복되어 표시됩니다:
간단한 수정으로 해결될 거라고 기대하지만, 혹시 컴포넌트로 Discourse에 너무 많은 일을 시키고 있는 건지 모르겠습니다.
<script>
document.addEventListener('DOMContentLoaded', function() {
// 스타일링이 적용된 카운트다운 HTML 생성
var countdownHtml = `
<div id="countdown-banner" style="position: relative; display: inline-block; margin-left: 20px; vertical-align: middle;">
<span id="background-text" style="opacity: 0.2; color: gray; font-size: 4.5em; position: absolute; left: 0; top: -31px; z-index: 1;">
DET vs. DAL <i class="fas fa-football-ball"></i>
</span>
<div id="foreground-text" style="color: white; position: relative; z-index: 2; display: flex; align-items: center;">
<span id="countdown-container" style="background-color: #0076B6; padding: 5px 10px; border-radius: 5px; margin-right: 10px;">
Lions at Cowboys: <span id="countdown" style="font-family: 'LCD', 'Courier New', monospace;"></span>
</span>
<a href="https://thedenforum.com/t/official-lions-vs-cowboys-game-day-thread-2023/30290" style="background-color: #0076B6; color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none;">
Game Thread
</a>
</div>
</div>`;
// 로고 옆에 카운트다운 배너 삽입
var headerLogo = document.querySelector('.d-header .title');
if (headerLogo) {
headerLogo.insertAdjacentHTML('afterend', countdownHtml);
} else {
console.error("Header logo not found");
}
// 카운트다운 기능
const eventTime = new Date('December 30, 2023 20:00:00 GMT-0400').getTime();
const countdownElement = document.getElementById('countdown');
if (!countdownElement) {
console.error("Countdown element not found");
return;
}
function updateCountdown() {
const now = new Date().getTime();
const distance = eventTime - now;
if (distance < 0) {
countdownElement.innerHTML = "The Game Has started!";
clearInterval(interval);
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}
var interval = setInterval(updateCountdown, 1000);
});
</script>
해결했습니다! api.onPageChange(() => { 로 문제를 해결했어요. 혹시 다른 분들도 너무 과하게 시도하다가 같은 문제를 겪게 된다면 참고하세요.
Heliosurge
(Dan DeMontmorency)
3
꽤 멋지네요.
이 배너는 게임이 시작될 때까지 카운트다운을 하는 건가요? (스포츠)
상업용 사이트나 다른 용도로 꽤 멋진 Customization > Theme component 시작점이 될 수 있겠네요. 런칭이나 다가오는 세일을 위한 카운트다운으로 사용할 수도 있고요.
수정된 코드를 올려주실 수 있을까요?
아바타 메뉴를 클릭할 수 없게 만들어서 포기했어요. 고치려고 온갖 방법을 다 써 봤지만 실패해서, 그렇지 않았다면 제출했을 텐데 아쉬워요.
Firepup650
(Firepup Sixfifty)
5
아마도 버그에 대한 면책 조항을 포함하여 그대로 출시할 수 있을 것입니다. 그러면 다른 사람들이 잠재적으로 그 버그를 수정해 볼 수도 있겠지요?
요청하신 분들을 위해 코드를 공유합니다.
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
// Ensure the banner is only added once
if (document.getElementById('countdown-banner')) return;
// Create the countdown banner
const countdownBanner = document.createElement('div');
countdownBanner.id = 'countdown-banner';
countdownBanner.style.cssText = 'position: relative; display: inline-block; margin-left: 20px; vertical-align: middle;';
countdownBanner.innerHTML = `
<span id="background-text" style="opacity: 0.2; color: gray; font-size: 4.5em; position: absolute; left: 0; top: -31px; z-index: 1;">
DET vs. DAL <i class="fas fa-football-ball"></i>
</span>
<div id="foreground-text" style="color: white; position: relative; z-index: 2; display: flex; align-items: center;">
<span id="countdown-container" style="background-color: #0076B6; padding: 5px 10px; border-radius: 5px; margin-right: 10px;">
Lions at Cowboys: <span id="countdown" style="font-family: 'LCD', 'Courier New', monospace;"></span>
</span>
<a href="[URL]" style="background-color: #0076B6; color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none;">
Game Thread
</a>
</div>
`;
// Find the header logo and insert the countdown banner
const headerLogo = document.querySelector('.d-header .title');
if (headerLogo) {
headerLogo.insertAdjacentElement('afterend', countdownBanner);
}
// Initialize the countdown
const eventTime = new Date('December 30, 2024 20:00:00 GMT-0400').getTime();
const countdownElement = document.getElementById('countdown');
setInterval(() => {
const now = new Date().getTime();
const distance = eventTime - now;
if (!countdownElement) return;
if (distance < 0) {
countdownElement.innerHTML = "The Game Has started!";
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}, 1000);
});
</script>
CSS …
#countdown-container, #countdown-banner a {
background-color: #0076B6; /* Solid background color */
opacity: 0.8; /* Adjust transparency */
/* Other styling... */
}
#countdown-container {
background-color: rgba(0, 118, 182, 0.3); /* Slightly transparent background */
padding: 5px 10px;
border-radius: 5px;
margin-right: 10px;
}
#countdown-banner a {
background-color: rgba(0, 118, 182, 0.3); /* Slightly transparent background */
color: white;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s;
}
#countdown-banner a:hover {
background-color: rgba(0, 95, 138, 0.3); /* Slightly darker on hover with transparency */
}
#countdown-banner {
font-family: Arial, sans-serif;
position: relative;
display: inline-block;
margin-left: 20px;
vertical-align: middle;
}
#background-text {
font-family: 'Impact', sans-serif;
font-size: 5em; /* Size of the text */
color: gray; /* Changed to gray */
opacity: 0.5; /* Adjust opacity for visibility */
position: absolute;
left: 0;
top: -30px; /* More significantly shifted up */
z-index: 1;
font-weight: bold; /* Bold font */
}
#foreground-text {
color: white;
position: relative;
z-index: 2;
padding-left: 140px; /* Adjust based on actual layout */
}
#countdown {
font-family: 'LCD', 'Courier New', monospace;
font-size: 1.2em;
}
아바타 메뉴를 클릭 가능하게 만드는 데는 끝내 성공하지 못했어요. 
… 혹시 수정해서 공유해 주실 수 있다면 정말 좋겠습니다!
