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

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

    • 导航
    • 打赏
  • 我的工具

    • 备忘录清单 (opens new window)
    • 网站状态 (opens new window)
    • json2go (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
  • Prometheus
  • Grafana
  • CentOS
  • Systemd
  • Docker
  • Rancker
  • Ansible
  • Ldap
  • Gitlab
  • GitHub
  • Etcd
  • Consul
  • RabbitMQ
  • Kafka
  • MySql
  • MongoDB
  • OpenVPN
  • KVM
  • VMware
  • Other
  • ELK
  • K8S
  • Nexus
  • Jenkins
  • 随写编年
  • 家人物语
  • 追忆青春
  • 父亲的朋友圈
  • 电影音乐
  • 效率工具
  • 博客相关
  • Shell
  • 前端实践
  • Vue学习笔记
  • Golang学习笔记
  • Golang编程技巧
  • 学习周刊
  • Obsidian插件周刊
关于
友链
推广
  • 本站索引

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

    • 导航
    • 打赏
  • 我的工具

    • 备忘录清单 (opens new window)
    • 网站状态 (opens new window)
    • json2go (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全接入指南
    • 转载推广

  • 闲言碎语
  • 博客相关
  • 个人折腾
二丫讲梵
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="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订阅功能→

最近更新
01
go-cache包的使用简析
03-19
02
学习周刊-总第98期-2023年第11周
03-17
03
使用retry-go给项目添加重试机制
03-15
更多文章>
Theme by Vdoing | Copyright © 2017-2023 | 点击查看十年之约 | 浙ICP备18057030号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式