我在页眉中运行了以下脚本，它渲染得很好。
但是当我导航到一个主题时，头像下拉菜单会像这样复制：
希望这是一个简单的修复，但也许我试图通过一个组件让 Discourse 做太多事情。
<script>
document.addEventListener('DOMContentLoaded', function() {
// Create Countdown HTML with Styling
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>`;
// Insert the Countdown Banner next to the logo
var headerLogo = document.querySelector('.d-header .title');
if (headerLogo) {
headerLogo.insertAdjacentHTML('afterend', countdownHtml);
} else {
console.error("Header logo not found");
}
// Countdown Functionality
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(() => { 来修复它，以防其他人尝试过于炫耀而遇到同样的问题。
2 个赞
Heliosurge
(Dan DeMontmorency)
3
这看起来很酷。
所以这个横幅是在倒计时，在这种情况下，直到比赛开始？（体育）
这可能是一个很酷的 Theme component 的开始，电子商务类型的网站或其他网站可以使用它来倒计时发布或即将到来的促销活动。
您能发布您已实施修复的代码吗？
4 个赞
我放弃了，因为它使头像菜单无法点击。我尝试了所有方法来修复但都没有成功，所以放弃了，否则我会提交它！
1 个赞
Firepup650
(Firepup Sixfifty)
5
也许你可以直接发布它，并在上面加上免责声明，说明它会引起其他可能尝试修复它的bug？
1 个赞
这是所有询问过的人的代码。
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
// 确保只添加一次横幅
if (document.getElementById('countdown-banner')) return;
// 创建倒计时横幅
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>
`;
// 查找标题徽标并插入倒计时横幅
const headerLogo = document.querySelector('.d-header .title');
if (headerLogo) {
headerLogo.insertAdjacentElement('afterend', countdownBanner);
}
// 初始化倒计时
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 = "比赛已开始！";
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 + "天 " + hours + "时 " + minutes + "分 " + seconds + "秒 ";
}, 1000);
});
</script>
CSS …
#countdown-container, #countdown-banner a {
background-color: #0076B6; /* 实心背景色 */
opacity: 0.8; /* 调整透明度 */
/* 其他样式... */
}
#countdown-container {
background-color: rgba(0, 118, 182, 0.3); /* 微透明背景 */
padding: 5px 10px;
border-radius: 5px;
margin-right: 10px;
}
#countdown-banner a {
background-color: rgba(0, 118, 182, 0.3); /* 微透明背景 */
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); /* 悬停时略深，带透明度 */
}
#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; /* 文本大小 */
color: gray; /* 改为灰色 */
opacity: 0.5; /* 调整不透明度以提高可见性 */
position: absolute;
left: 0;
top: -30px; /* 向上移动更多 */
z-index: 1;
font-weight: bold; /* 粗体 */
}
#foreground-text {
color: white;
position: relative;
z-index: 2;
padding-left: 140px; /* 根据实际布局调整 */
}
#countdown {
font-family: 'LCD', 'Courier New', monospace;
font-size: 1.2em;
}
2 个赞
请注意，我从未能使头像菜单变得可点击。
… 如果你能纠正并分享，那将是太棒了！
1 个赞
system
(system)
关闭
9
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
