自定义侧边栏

模版：

yaml
aside.yaml
1
2
3
4
5
6
7
8
9
- name:
  title:
  class:
  id:
  icon:
  content_class:
  content_id:
  content_css:
  content_html:
名称类型默认值描述
namestring无侧边栏名称
titlestring无侧边栏标题
classstring无侧边栏类名
idstring无侧边栏 id
iconstring无侧边栏图标
content_classstring无侧边栏内容类名

示例

yaml
aside.yaml
1
2
3
4
5
6
7
8
9
10
11
12
- 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>'
js
/source/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
62
63
64
65
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);
});
yaml
_config.solitude.yaml
1
2
3
4
5
extends:
  # Insert in head
  # 插入到 head
  body:
    - <script src="/custom.js"></script>
diff
_config.solitude.yaml
1
2
3
4
5
6
7
8
9
10
aside:
  home: # on the homepage
    noSticky: "about,newest_comment"
+   Sticky: "history"
  post: # on the article page
    noSticky: "about"
    Sticky: "newestPost"
  page: # on the page
    noSticky: "about"
    Sticky: "newestPost,allInfo"