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="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

# 打赏按钮

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

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

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

上次更新: 2024/09/26, 21:41:44

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