文章摘要
白衣 DeepSeek

一.修改aside.yml

路径
1
2
3
4
5
E:
└── 博客根目录
    └── source
        └── _data
            └── aside.yml

在以上目录找到aside.yml，如果没有就新建一个。然后里边填入以下代码：

aside.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- name: cardwechat
  content_html: '<div class="card-widget baiyi-right-widget" id="card-wechat">
    <div id="flip-wrapper">
        <div id="flip-content">
            <div class="face" style="background:url(/img/sucai/wx1.png) center center/100% no-repeat">
            </div>
            <div class="back face" style="background:url(/img/sucai/wx2.png) center center/100% no-repeat">
            </div>
        </div>
    </div>
    </div>'

- name: cardqq
  content_html: '<div class="card-widget baiyi-right-widget" id="card-qq">
    <div id="flip-wrapper">
        <div id="flip-content">
            <div class="face" style="background:url(/img/sucai/qq1.png) center center/100% no-repeat">
            </div>
            <div class="back face" style="background:url(/img/sucai/qq2.png) center center/100% no-repeat">
            </div>
        </div>
    </div>
    </div>'

图片资源自己替换，素材包放这里了：

二.引入样式文件

在你的自定义样式文件里边直接插入以下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
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
66
67
68
69
70
71
72
73
74
/* 侧边栏新增vx卡片 */
#aside-content .card-widget#card-wechat {
  background: #57bd6a;
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 0;
  cursor: pointer;
  border: none;
  height: 110px
}
/* qq卡片 */
#aside-content .card-widget#card-qq {
  background: #425aef;
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 0;
  cursor: pointer;
  border: none;
  height: 110px
}
[data-theme=dark] #aside-content .card-widget#card-qq {
  background-color: #121121;
  border: var(--style-border)
}

/* qq卡片结束 */
[data-theme=dark] #aside-content .card-widget#card-wechat {
  background-color: #121121;
  border: var(--style-border)
}

#flip-wrapper {
  -webkit-perspective: 1000;
  perspective: 1000
}

#flip-wrapper {
  position: relative;
  width: 235px;
  height: 110px;
  z-index: 1
}

#flip-content {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: cubic-bezier(0,0,0,1.29) .3s
}

#aside-content #flip-wrapper #flip-content .face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-size: 100%
}

#aside-content #flip-wrapper #flip-content .back.face {
  display: block;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  box-sizing: border-box;
  background-size: 100%
}

#flip-wrapper:hover #flip-content {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg)
}

自己不会插入自定义样式文件看这篇：

引用文章链接
白衣博客
solitude主题文章顶部添加波浪效果

三.修改主题的_config.yml

cardqq,cardwechat多个用逗号分割，如果只展示一个，就写Sticky: "cardqq,allInfo"

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Aside
# 侧边栏
aside:
  # Values: about (info card), newestPost (latest article), allInfo (website information), newest_comment (latest comment)
  # 值: about(信息卡), newestPost(最新文章), allInfo(网站信息), newest_comment(最新评论)
  # Sticky: Fixed position / noSticky: Not fixed position
  # Sticky: 固定位置 / noSticky: 不固定位置
  home: # on the homepage
    Sticky: "cardqq,cardwechat,allInfo"  #allInfo是自带的，直接在他前边添加即可
    noSticky: "about"
  post: # on the article page
    noSticky: "about"
    Sticky: "newestPost"
  page: # on the page
    noSticky: "about"
    Sticky: "newestPost,allInfo"
  # 菜单栏位置(0: 左 1: 右)
  position: 1 # Sidebar positioning(0: left 1: right)

五.附带相关说明

aside.yml
1
2
3
4
5
6
7
8
9
- name:  # 侧边栏的唯一名称标识，用于在系统中对该侧边栏进行区分和管理，通常在程序逻辑中会根据此名称来定位和操作特定的侧边栏，比如在配置文件中多个侧边栏并存时，通过名称来识别。
  title: # 侧边栏显示的标题文字，会展示在页面上，用于向用户表明该侧边栏的主要内容或功能主题，例如“热门文章”“分类目录”等。
  class: # 用于指定侧边栏的 CSS 类名，可以通过这个类名在 CSS 样式表中为该侧边栏设置特定的样式，如背景颜色、字体样式、边距等，实现个性化的外观显示。
  id:    # 侧边栏的唯一标识符，类似于 HTML 中的元素 ID，在 JavaScript 等脚本中可以通过这个 ID 来获取侧边栏元素并进行操作，比如添加事件监听器、动态修改内容等。
  icon:  # 侧边栏的图标，可以是图标字体（如 Font Awesome 中的图标）的名称、图标图片的路径等，用于直观地展示侧边栏的功能或内容类型，增加视觉上的辨识度。
  content_class: # 侧边栏内部内容区域的 CSS 类名，与侧边栏整体的类名不同，它主要针对侧边栏内的具体内容部分设置样式，比如内容的排版、列表样式等。
  content_id:  # 侧边栏内部内容区域的唯一标识符，方便在脚本中定位和操作侧边栏内的具体内容部分，例如对内容进行更新、隐藏等操作。
  content_css:  # 用于直接设置侧边栏内容区域的内联 CSS 样式，当需要对侧边栏内容部分进行一些临时的、特定的样式调整，且不想在外部 CSS 样式表中添加规则时，可以使用这个字段来快速设置样式。
  content_html:  # 侧边栏的具体内容部分的 HTML 代码，可以在这里直接编写 HTML 结构来定义侧边栏展示的具体内容，如列表、链接、图片等。

六.那年今日（附带转载）

那年今日实例转自solitude文档

aside.yml
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>'
/source/js/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.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);
})
_config.yml
1
2
3
4
5
extends:
  # Insert in head
  # 插入到 head
  body:
    - <script src="/js/custom.js"></script>
_config.yml
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"

仅适用于同款系列主题，类似或其他主题请自行尝试适配