Vuepress添加首页轮播图与打赏按钮的配置
文章发布较早，内容可能过时，阅读注意甄别。
# 首页轮播图
我的博客已经快五岁了，她得学会自己挣钱了，于是乎，我打算通过添加一个轮播图，来挂一些广告。这个功能从想法到落地折腾了两三天，最后终于配置完毕，今天来做个分享。
一开始我打算放在首页侧边栏，后来发现侧边栏太窄，如果放置图片会很小，就放弃了。后来发现首页其实也是通过一个 Markdown 文件渲染的，能够通过添加 html 代码来实现一个轮播图，于是就开始往这个方向走。
过程还是比较曲折的，我先从网上搜罗各种轮播图，网上案例挺多，但是真正能直接拿下来用的不多，拿下来之后经过了多番调试修改，最终形成了当前的方案。
我的最终代码参考自：三种方式实现轮播图功能 (opens new window)
接下来讲下我的配置流程：
首先需要将实体 html 文件放到一个能够访问的地方，比如我放在了： https://wiki.eryajf.net/lunbo/lunbo.html (opens new window)
然后在首页文件 index.md 的合适位置放置如下代码：
::: v-pre
<iframe height="400" style="width: 100%;" scrolling="no" title="轮播展示" src="https://wiki.eryajf.net/lunbo/lunbo.html"></iframe>
:::
1
2
3
4
2
3
4
实测通过 iframe 嵌入的方式最终呈现的效果比较理想，也没有引起什么其他并发症。
以下是 html 的源码内容：
点击查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>二丫讲梵-轮播</title>
<link
rel="stylesheet"
type="text/css"
href="https://at.alicdn.com/t/c/font_3872971_vwuw7kt2c5.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://wiki.eryajf.net/lunbo/style.css"
/>
</head>
<body>
<!-- 轮播图容器 -->
<div id="carousel">
<!-- 图片组 -->
<a href="http://gk.link/a/11Vts" target="_blank"
><img src="https://t.eryajf.net/imgs/2023/02/3c37b1765ed5a4f1.jpeg"
/></a>
<a
href="https://www.aliyun.com/minisite/goods?source=5176.11533457&userCode=4j6jqa5r"
target="_blank"
><img src="https://t.eryajf.net/imgs/2023/02/070af17e225004cb.jpg"
/></a>
<a href="https://url.cn/QvQXwFio" target="_blank"
><img src="https://t.eryajf.net/imgs/2023/02/969ed3ae14f81bea.jpg"
/></a>
<!-- 按钮组 -->
<div id="leftArrow" class="iconfont icon-icon_arrow_left"></div>
<!-- 左箭头切换按钮 -->
<div id="rightArrow" class="iconfont icon-icon_arrow_right"></div>
<!-- 右箭头切换按钮 -->
<div id="sliderBtn"></div>
<!-- 切换按钮组 -->
</div>
<script>
var imgArr = []; // 图片数组
var curIndex = 0; // 当前显示图片
var timer = null; // 定时器
var btnList = []; // 右下角切换按钮组
function slide(targetIndex = curIndex + 1) {
curIndex = targetIndex % imgArr.length; // 获取当前index
imgArr.forEach((v) => (v.className = "")); // 设置其他图片隐藏
imgArr[curIndex].className = "imgActive"; // 设置当前index图片显示
btnList.forEach((v) => (v.className = "unitBtn")); // 设置其他按钮为灰色
btnList[curIndex].className = "unitBtn btnActive"; // 设置当前按钮为蓝色
}
function createBtnGroup(carousel, config) {
document.getElementById("leftArrow").addEventListener("click", (e) => {
clearInterval(timer); // 清除定时器，避免手动切换时干扰
slide(curIndex - 1); // 允许点击则切换上一张
timer = setInterval(() => {
slide();
}, config.interval); // 重设定时器
});
document.getElementById("rightArrow").addEventListener("click", (e) => {
clearInterval(timer); // 清除定时器，避免手动切换时干扰
slide(curIndex + 1); // 允许点击则切换下一张
timer = setInterval(() => {
slide();
}, config.interval); // 重设定时器
});
var sliderBtn = document.getElementById("sliderBtn"); // 获取按钮容器的引用
imgArr.forEach((v, i) => {
let btn = document.createElement("div"); // 制作按钮
btn.className = i === 0 ? "unitBtn btnActive" : "unitBtn"; // 初设蓝色与灰色按钮样式
btn.addEventListener("click", (e) => {
clearInterval(timer); // 清除定时器，避免手动切换时干扰
slide(i); // // 允许点击则切换
timer = setInterval(() => {
slide();
}, config.interval); // 重设定时器
});
btnList.push(btn); // 添加按钮到按钮组
sliderBtn.appendChild(btn); // 追加按钮到按钮容器
});
}
function eventDispose(carousel, config) {
document.addEventListener("visibilitychange", function () {
// 浏览器切换页面会导致动画出现问题，监听页面切换
if (document.visibilityState == "hidden")
clearInterval(timer); // 页面隐藏清除定时器
else
timer = setInterval(() => {
slide();
}, config.interval); // 重设定时器
});
carousel.addEventListener("mouseover", function () {
// 鼠标移动到容器则不切换动画，停止计时器
clearInterval(timer); // 页面隐藏清除定时器
});
carousel.addEventListener("mouseleave", function () {
// 鼠标移出容器则开始动画
timer = setInterval(() => {
slide();
}, config.interval); // 重设定时器
});
}
(function start() {
var config = {
height: "500px", // 配置高度
interval: 3000, // 配置轮播时间间隔
};
var carousel = document.getElementById("carousel"); //获取容器对象的引用
carousel.style.height = config.height; // 将轮播容器高度设定
document.querySelectorAll("#carousel a").forEach((v, i) => {
imgArr.push(v); // 获取所有图片组成数组
v.className = i === 0 ? "imgActive" : "";
});
eventDispose(carousel, config); // 对一些浏览器事件处理
createBtnGroup(carousel, config); // 按钮组的处理
timer = setInterval(() => {
slide();
}, config.interval); // 设置定时器定时切换
})();
</script>
</body>
</html>
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
# 打赏按钮
这个功能是我在逛：Manchan's blog (opens new window) 博客的时候发现博主配置的有这个功能，于是在评论区求了一下配置方式，在此感谢站长。
实现方式是借助于 vdoing 主题提供的几个自定义 html 口子来做的。
首先在 htmlModules.js 文件中添加如下内容：
// 官方文档：https://doc.xugaoyi.com/pages/a20ce8/#%E8%87%AA%E5%AE%9A%E4%B9%89html%E6%A8%A1%E5%9D%97
module.exports = {
pageB: `<div class="donation">
<button>打赏</button>
<div class="main">
<div class="pic">
<img src="https://t.eryajf.net/imgs/2023/01/834f12107ebc432a.png" alt="微信">
<img src="https://t.eryajf.net/imgs/2023/01/fc21022aadd292ca.png" alt="支付宝">
</div>
</div>
</div>`,
};
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
其中的 pageB 表示页面底部。
然后在 docs/.vuepress/styles/index.styl 中添加如下代码：
点击查看
// 文章底部打赏按钮
.donation
position relative
text-align: center
margin-top: 10px
button
width 5rem
height 2.5rem
border: 0
border-radius .5rem
color: #fff
background-color $accentColor
font-weight: bold
opacity 0.9
transition: all .5s
&:hover,&:focus
opacity 1
transform: scale(1.05)
~.main
.pic
visibility: visible
opacity 1
transform: translateY(-1.5rem)
.main
position absolute
bottom 3rem
left: 0
right: 0
pointer-events: none
.pic
position relative
visibility hidden
display: inline-block
padding:10px 12px
background-color rgba(#fff,.8)
box-shadow: 0 0 10px 0 #3336
border-radius: 1rem
opacity 0
transition: all .5s
pointer-events: all
z-index 10
&:hover
visibility visible
opacity 1
transform: translateY(-1.5rem)
&::before
content: ''
position absolute
bottom -@padding[0]
left: 50%
right: 50%
filter: drop-shadow(0px 4px 4px #3336);
transform: translateX(-50%)
border-width: (-@bottom) (-@bottom) 0;
border-style: solid;
border-color: rgba(#fff,.8) transparent transparent;
&::after
content: ''
display block
position absolute
width 100%
height 2.5rem
img
width 10rem
max-width 40vw
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
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
就能够实现在每篇文章底部自动添加打赏按钮的效果。
在本文最后就能看到配置呈现的效果。大概就在这里 👇
上次更新: 2024/11/19, 23:11:42
|