文章摘要
青桔 GPT 4
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
投诉

此教程仅限于hexo-theme-solitude

效果

教程

  1. 创建 aside.yml_data 目录下,添加以下代码:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    - 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,添加以下内容:
    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
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
     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.nsmao.net/api/history/query?key=你的key`; //申请:https://api.nsmao.net

    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,添加以下内容:
    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. 主题配置新增侧边栏,找到配置项home
    1
    2
    3
    4
    5
    home:
    # 固定的信息(滑动不跟随)
    # Fixed information (not followed by sliding)
    noSticky: "history" # 添加在自定义侧边栏文件中的 name,比如history
    Sticky: "allInfo"
  5. 在配置文件中找到 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>
  6. 一键三连,END