Solitude添加那年今日卡片

文章摘要

青桔 GPT 4

此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结

投诉

此教程仅限于hexo-theme-solitude

效果

教程

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

   - name: history
     title: 那年今日 
     class: card-history
     id:
     icon: fas fa-clock
     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，添加以下内容：

    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();
    }
   
    cardHistory();
    document.addEventListener('pjax:complete', cardHistory);
   
    async function fetchHistoryData() {
        const myDate = new Date();
        const month = `${myDate.getMonth() + 1}`.padStart(2, '0');
        const day = `${myDate.getDate()}`.padStart(2, '0');
        const formattedDate = `${month}${day}`;
        const historyDataUrl = `https://api.76.al/api/history/query?key=你的key`; //请到:https://api.76.al申请
   
        try {
            const response = await fetch(historyDataUrl);
            const result = await response.json();
   
            if (result.code === 200) {
                const data = result.data;
                const formattedData = Object.entries(data).map(([year, event]) => ({
                    year: year.replace(/年$/, ''),
                    title: event
                }));
                return formattedData;
            } else {
                console.error('Error fetching history data:', result.msg);
                return [];
            }
        } catch (error) {
            console.error('Fetch error:', error);
            return [];
        }
    }
   
    cardHistory()
    document.addEventListener('pjax:complete', cardHistory);
   })

3. 新建 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)
   }

4. 主题配置新增侧边栏，找到配置项home

   home:
   # 固定的信息（滑动不跟随）
   # Fixed information (not followed by sliding)
   noSticky: "history" # 添加在自定义侧边栏文件中的 name，比如history
   Sticky: "allInfo"

5. 在配置文件中找到 extend项，添加以下内容：

   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>

6. 一键三连，END