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

实测通过 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="http://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="http://t.eryajf.net/imgs/2023/02/070af17e225004cb.jpg"></a>
        <a href="https://url.cn/QvQXwFio" target="_blank"><img src="http://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

# 打赏按钮

这个功能是我在逛：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

其中的 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

就能够实现在每篇文章底部自动添加打赏按钮的效果。

在本文最后就能看到配置呈现的效果。大概就在这里👇

上次更新: 2023/02/01, 22:03:52

← 博客接入CDN的折腾-对阿里云七牛云蓝易云多吉云几家CDN使用评测 Vuepress配置rss订阅功能→