二丫讲梵 二丫讲梵
首页
  • 最佳实践
  • 迎刃而解
  • Nginx
  • Php
  • Zabbix
  • AWS
  • Prometheus
  • Grafana
  • CentOS
  • Systemd
  • Docker
  • Rancher
  • Ansible
  • Ldap
  • Gitlab
  • GitHub
  • Etcd
  • Consul
  • RabbitMQ
  • Kafka
  • MySql
  • MongoDB
  • OpenVPN
  • KVM
  • VMware
  • Other
  • ELK
  • K8S
  • LLM
  • Nexus
  • Jenkins
  • 随写编年
  • 家人物语
  • 追忆青春
  • 父亲的朋友圈
  • 电影音乐
  • 效率工具
  • 博客相关
  • Shell
  • 前端实践
  • Vue学习笔记
  • Golang学习笔记
  • Golang编程技巧
  • 学习周刊
  • Obsidian插件周刊
关于
友链
  • 本站索引

    • 分类
    • 标签
    • 归档
  • 本站页面

    • 导航
    • 打赏
  • 我的工具

    • 备忘录清单 (opens new window)
    • json2go (opens new window)
    • gopher (opens new window)
    • 微信MD编辑 (opens new window)
    • 国内镜像 (opens new window)
    • 出口IP查询 (opens new window)
    • 代码高亮工具 (opens new window)
  • 外站页面

    • 开往 (opens new window)
    • ldapdoc (opens new window)
    • HowToStartOpenSource (opens new window)
    • vdoing-template (opens new window)
GitHub (opens new window)

二丫讲梵

行者常至,为者常成
首页
  • 最佳实践
  • 迎刃而解
  • Nginx
  • Php
  • Zabbix
  • AWS
  • Prometheus
  • Grafana
  • CentOS
  • Systemd
  • Docker
  • Rancher
  • Ansible
  • Ldap
  • Gitlab
  • GitHub
  • Etcd
  • Consul
  • RabbitMQ
  • Kafka
  • MySql
  • MongoDB
  • OpenVPN
  • KVM
  • VMware
  • Other
  • ELK
  • K8S
  • LLM
  • Nexus
  • Jenkins
  • 随写编年
  • 家人物语
  • 追忆青春
  • 父亲的朋友圈
  • 电影音乐
  • 效率工具
  • 博客相关
  • Shell
  • 前端实践
  • Vue学习笔记
  • Golang学习笔记
  • Golang编程技巧
  • 学习周刊
  • Obsidian插件周刊
关于
友链
  • 本站索引

    • 分类
    • 标签
    • 归档
  • 本站页面

    • 导航
    • 打赏
  • 我的工具

    • 备忘录清单 (opens new window)
    • json2go (opens new window)
    • gopher (opens new window)
    • 微信MD编辑 (opens new window)
    • 国内镜像 (opens new window)
    • 出口IP查询 (opens new window)
    • 代码高亮工具 (opens new window)
  • 外站页面

    • 开往 (opens new window)
    • ldapdoc (opens new window)
    • HowToStartOpenSource (opens new window)
    • vdoing-template (opens new window)
GitHub (opens new window)
  • 随写编年

  • 家人物语

  • 追忆青春

  • 父亲的朋友圈

  • 电影音乐

  • 效率工具

  • 博客相关

    • 原生文档

    • 个人折腾

      • 旧版博客上配置的一些小功能汇总
      • 解决wordpress新建页面没有模板的问题
      • wordpress整站迁移操作
      • 关于wordpress后台admin密码防爆破的一些操作
      • vuepress编译时报错TypeError _normalized undefined的解决
      • GitHub配置自动部署pages与服务器
      • Vuepress添加评论插件valine
      • Vuepress配置全文搜索插件fulltext-sarch
      • Vuepress添加侧边栏访问地图
      • vuepress文章内有模板语法时编译报错的解决
      • Vuepress配置评论插件为Artalk
      • 博客接入CDN的折腾-对阿里云七牛云蓝易云多吉云几家CDN使用评测
      • Vuepress添加首页轮播图与打赏按钮的配置
        • 首页轮播图
        • 打赏按钮
      • Vuepress配置rss订阅功能
      • Vuepress全文搜索插件vuepress-plugin-flexsearch-pro
      • Vuepress全文搜索终极版-algolia的开源实现meilisearch全接入指南
      • 基于多吉云存储+uPic构建个人图床的实践分享
      • vuepress配置谷歌访问统计google-analytics
      • vuepress-vdoing主题配置LxgwWenKai字体
    • 转载推广

  • 闲言碎语
  • 博客相关
  • 个人折腾
二丫讲梵
2023-02-01
目录

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订阅功能

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

最近更新
01
学习周刊-总第212期-2025年第21周
05-22
02
从赵心童世锦赛夺冠聊聊我的斯诺克情缘
05-16
03
学习周刊-总第211期-2025年第20周
05-15
更多文章>
Theme by Vdoing | Copyright © 2017-2025 | 点击查看十年之约 | 浙ICP备18057030号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式