本文不會再更新了，這些文章之後會整理到我的blog上面
我的BLOG
邦幫忙這邊我沒法留言跟回覆留言(僅能看到而已)，想聊天可以直接到BLOG那邊留言
本次鐵人賽文章用的內容都可以直接在我的BLOG上面看到成果
之後也會把以前寫的工具整理整理上傳到github順便寫成文章

用維基百科新增歷史上的今天在側邊欄

側邊欄

<div class="kira-widget-wrap card-history">
<h3 class="kira-widget-title">
<i class="kirafont icon-time"></i>
歷史上的今天
</h3>


<!-- 只固定內容區高度，外層不要鎖高避免切到標題 -->
<div class="history-card">
<div class="swiper" id="history-container" aria-live="off">
<div class="swiper-wrapper" id="history_container_wrapper"></div>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
</div>

樣式

:root{
--history-h: 132px; /* 內容區高度：120~160 皆可 */
--history-lines: 3; /* 每則顯示行數 */
}


.kira-right-column .kira-widget-wrap.card-history{ width:100%; }


/* 標題列沿用主題色，這裡只控間距與圖示大小 */
.kira-widget-wrap.card-history .kira-widget-title{
display:flex; align-items:center; gap:.5rem; margin:0 0 12px;
}
.kira-widget-wrap.card-history .kira-widget-title .kirafont{ font-size:1.05em; }


/* 固定內容高度，避免被長文字撐爆；左右留白 14px 看起來不擠 */
.kira-widget-wrap.card-history .history-card{ height:var(--history-h); overflow:hidden; }
.kira-widget-wrap.card-history .swiper{ width:100%; height:var(--history-h); }
#history_container_wrapper{ height:100% !important; }
.kira-widget-wrap.card-history .swiper-slide{
height:var(--history-h); padding:8px 14px; box-sizing:border-box; position:relative;
}


/* 多行顯示 + 截斷（避免爆版）；年份微強調 */
.kira-widget-wrap.card-history .history-year{ font-weight:700; letter-spacing:.5px; opacity:.85; }
.kira-widget-wrap.card-history .history-text{
white-space:normal; overflow:hidden; display:-webkit-box;
-webkit-box-orient: vertical; -webkit-line-clamp: var(--history-lines);
line-height:1.45; font-size:.95rem;
}


/* 分隔線用偽元素，不改變高度，翻頁更準 */
.kira-widget-wrap.card-history .swiper-slide::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
background: var(--card-border, rgba(255,255,255,.15)); pointer-events:none;
}
@media (prefers-color-scheme: light){
.kira-widget-wrap.card-history .swiper-slide::after{ background: rgba(0,0,0,.08); }
}

腳本

/* Wikipedia On-This-Day — 手動翻頁、固定高度版 */
(function () {
const wrap = document.getElementById('history_container_wrapper');
if (!wrap) return;


const lang = 'zh';
const today = new Date();
const mm = String(today.getMonth() + 1).padStart(2, '0');
const dd = String(today.getDate()).padStart(2, '0');
const feedUrl = `https://api.wikimedia.org/feed/v1/wikipedia/${lang}/onthisday/all/${mm}/${dd}`;
const cacheKey = `HISTORY_TODAY_${lang}_${mm}${dd}`;


const render = (list) => {
wrap.innerHTML = '';
list.forEach(item => {
const slide = document.createElement('div');
slide.className = 'swiper-slide';
slide.innerHTML = `
<div class="history-year">A.D.${item.year}</div>
<div class="history-text">${item.text}</div>`;
if (item.link) slide.addEventListener('click', () => window.open(item.link, '_blank'));
wrap.appendChild(slide);
});
};


const createSwiper = () => {
if (window.__historySwiper__) window.__historySwiper__.destroy(true, true);
window.__historySwiper__ = new Swiper('#history-container', {
direction: 'vertical', effect: 'slide', slidesPerView: 1, spaceBetween: 0,
loop: false, centeredSlides: false, speed: 350, resistanceRatio: 0,
allowTouchMove: true,
mousewheel: { forceToAxis: true, releaseOnEdges: true, sensitivity: .7 },
keyboard: { enabled: true, onlyInViewport: true }
});
};


const run = list => { render(list); createSwiper(); };


// 快取先行（體感快）
try { const cache = JSON.parse(localStorage.getItem(cacheKey) || 'null'); if (cache?.length) run(cache); } catch{}


// 再抓 API 更新
fetch(feedUrl).then(r=>r.json()).then(data => {
const events = Array.isArray(data?.events) ? data.events : [];
const list = events.slice(0, 15).map(ev => {
const p = (ev.pages && ev.pages[0]) || {};
const link = p?.content_urls?.desktop?.page || p?.content_urls?.mobile?.page || '';
return { year: ev.year, text: ev.text, link };
});
localStorage.setItem(cacheKey, JSON.stringify(list));
run(list);
}).catch(() => run([{ year: '—', text: '載入失敗，請稍後再試', link: '' }]));
})();

最後記得在頁首頁尾載入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<%- css('css/history-today.css') %>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>
<script src="<%- url_for('/js/history-today.js') %>" defer></script>

一個在頁首一個在頁尾

一點除錯
翻頁卡在半截／對不準
3D coverflow + 邊框造成次像素位移。改 effect:'slide'，centeredSlides:false，resistanceRatio:0 就穩。

卡片被撐很長
autoHeight 會讓 wrapper 變超長。最終用固定內容高度 --history-h + 多行截斷。

CSS 沒套到（外框不見）
Console 顯示 MIME type 'text/html' → 其實是 404。把 CSS 放 source/css/，用 <%- css('...') %> 載入即可。