Theme: 那年今日卡片

教程

创建 aside.yml 到 _data 目录下，添加以下代码：

home: # 如果在首页显示
  noSticky: # 如果需要固定
    - class_name: card-history
      id_name:
      name: 那年今日
      icon: solitude st-clock-fill
      class_content:
      id_content: history-baidu
      style_content: 'height:100px;overflow:hidden'
      html: '<div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%;margin-top: 6px">
        <div id="history_container_wrapper" class="swiper-wrapper"></div>
      </div>'

新建 custom.js，添加以下内容：

document.addEventListener('DOMContentLoaded', function () {
    async function cardHistory() {
        const historyContainer = document.getElementById('history-container');
        if (!historyContainer) return;
        const data = await fetchHistoryData();
        const html = data.map(item => `<div class="swiper-slide history_slide"><span class="history_slide_time">A.D.${item.year}</span><span class="history_slide_link">${item.title}</span></div>`).join('');
        const swiperContainer = document.querySelector('.history_swiper-container');
        document.getElementById('history_container_wrapper').innerHTML = html
        const swiperHistory = new Swiper(swiperContainer, {
            loop: true,
            direction: 'vertical',
            autoplay: {disableOnInteraction: true, delay: 5000},
            mousewheel: false,
        });
        historyContainer.onmouseenter = () => swiperHistory.autoplay.stop();
        historyContainer.onmouseleave = () => swiperHistory.autoplay.start();

        async function fetchHistoryData() {
            const myDate = new Date();
            const formattedDate = 'S' + `${myDate.getMonth() + 1}`.padStart(2, '0') + `${myDate.getDate()}`.padStart(2, '0');
            const historyDataUrl = `https://fastly.jsdelivr.net/gh/Zfour/Butterfly-card-history@2.08/baiduhistory/json/${myDate.getMonth() < 10 ? '0' + (myDate.getMonth() + 1) : myDate.getMonth() + 1}.json`;
            const response = await fetch(historyDataUrl);
            const data = await response.json();
            return data[formattedDate];
        }
    }
    cardHistory()
    document.addEventListener('pjax:complete', cardHistory);
})

新建 custom.css，添加以下内容：

#aside-content .card-history .swiper-wrapper {
    flex-direction: column
}

#aside-content .card-history .item-headline {
    margin-left: 0;
}

#aside-content .card-history .history_slide {
    text-align: left;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start
}

#aside-content .card-history .history_slide_time {
    color: var(--efu-secondtext);
    font-size: 14px;
    font-style: italic;
    font-weight: lighter
}

#aside-content .card-history .history_slide_link {
    line-height: 1.5;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical
}

#aside-content .card-history .history_slide_link a {
    color: var(--efu-main);
    padding: 0 4px;
    border-radius: 4px
}

#aside-content .card-history .history_slide_link a:hover {
    color: var(--efu-white);
    background: var(--efu-main)
}

在配置文件中找到 extends，添加以下内容：

extends:
  head: # 在head中插入 / Insert in head
    - <link rel="stylesheet" href="/css/custom.css">
  body: # 在body中插入 / Insert in body
    - <script defer pjax src="/js/custom.js"></script>

没有打开即刻短文的话还需要在 extends 中添加以下内容：

extends:
   head: # 在head中插入 / Insert in head
     - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
   body: # 在body中插入 / Insert in body
     - <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>

测试