此教程仅限于hexo-theme-solitude

0x1 效果

白天
暗黑

0x2 教程

  1. 创建 aside.yml 到 _data 目录下，添加以下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    - name: history
    title: 那年今日 
    class: card-history
    id:
    icon: solitude st-clock-fill
    content_class:
    content_id: history-baidu
    content_css: 'height:80px;overflow:hidden'
    content_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. 在配置文件中找到 extend项，添加以下内容：
    1
    2
    3
    4
    5
    6
    7
    extends:
    head: # 在head中插入 / Insert in head
        - <link rel="stylesheet" href="/css/custom.css">
        - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
    body: # 在body中插入 / Insert in body
        - <script defer pjax src="/js/custom.js"></script>
        - <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>