教程

  1. 创建 aside.yml_data 目录下,添加以下代码:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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>'
  2. 新建 custom.js,添加以下内容:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    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);
    })
  3. 新建 custom.css,添加以下内容:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    #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)
    }
  4. 在配置文件中找到 extends,添加以下内容:
    1
    2
    3
    4
    5
    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 中添加以下内容:
    1
    2
    3
    4
    5
    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>
  5. 测试
    那年今日