Hyde Blog

主题

Hyde2025-02-17 05:08:102025-05-18 00:27:36VdoingVdoing
823
4.4m
Get...

配置打赏功能 ​

版权 ​

提示

本文是在 博主二丫讲梵 文章：《Vuepress 添加首页轮播图与打赏按钮的配置》 基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~

配置打赏功能 ​

配置 ​

  1. docs\.vuepress\config\themeConfig.ts文件：
ts
import htmlModules from './htmlModules' // 自定义插入的html块
// 此处省略其他代码....
htmlModules, // 插入hmtl模块

image-20250216211844247

image-20250216211905661

  1. docs\.vuepress\config\htmlModules.ts文件：
ts
const htmlModule: VdoingThemeConfig["htmlModules"] = {
  //此处省略公众号模块代码...
  pageB: `<div class="donation">
    <button>打赏</button>
    <div class="main">
        <div class="pic">
            <img src="/img/Donation/weixin.jpg" alt="微信">
            <img src="/img/Donation/zhifubao.jpg" alt="支付宝">
        </div>
    </div>
    </div>`,
};

image-20250216212402797

预览 ​

每篇文章尾部都会出现这个赞赏功能哦。

image-20250216213102469

配置赞赏流线边框按钮 ​

效果图 ​

HTML 部分 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>边框按钮</button>
  </body>
</html>

CSS 部分 ​

css
<style>
    body {
      background-color: #000;
    }
    button {
      width: 100px;
      height: 50px;
      background-color: #000000;
      border: none;
      color: white;
      border-radius: 10px;
      cursor: pointer;
      /* outline: 4px solid rgb(255, 0, 0); */
      /* 设置相对位置 */
      position: relative;
      z-index: 1;
      overflow: hidden;
    }

    /* 设置伪元素 */
    button::before {
      content: "";
      /* 设置内容为空 */
      position: absolute;
      /* 设置定位为绝对定位 */
      width: 200%;
      height: 200%;
      background: linear-gradient(
        114.2deg,
        rgba(184, 215, 21, 1) -15.3%,
        rgba(148, 187, 233, 1) 14.5%,
        rgba(21, 215, 182, 1) 38.7%,
        rgba(129, 189, 240, 1) 58.8%,
        rgba(219, 108, 205, 1) 77.3%,
        rgba(240, 129, 129, 1) 88.5%
      );
      z-index: -2;
      left: 50%;
      top: 50%;
      transform-origin: left top;
      animation: rotation 4s linear infinite;
    }

    @keyframes rotation {
      to {
        transform: rotate(360deg);
      }
    }

    /* 继续设置一个伪元素 */
    button::after {
      content: "";
      position: absolute;
      inset: 4px;
      /* 设置边距 */
      background: #000000;
      z-index: -1;
      border-radius: inherit;
    }
  </style>

完整代码 ​

提示

路径：docs\.vuepress\styles\index.styl

css
// 文章底部打赏按钮
.donation
  position relative
  text-align: center
  margin-top: 10px
  button
    width 5rem
    height 2.5rem
    border: 0
    border-radius .5rem
    color: #fff
    background-color #ffffff00
    font-weight: bold
    opacity 0.9
    transition: all .5s
    cursor: pointer
    position: relative;
    z-index: 1;
    overflow: hidden;
    &: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:#fff6
      backdrop-filter: blur(6px);
      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

.donation button::before{
    content: ''
    position: absolute
    width: 200%;
      height: 200%;
      background: linear-gradient(
        114.2deg,
        rgba(184, 215, 21, 1) -15.3%,
        rgba(148, 187, 233, 1) 14.5%,
        rgba(21, 215, 182, 1) 38.7%,
        rgba(129, 189, 240, 1) 58.8%,
        rgba(219, 108, 205, 1) 77.3%,
        rgba(240, 129, 129, 1) 88.5%
      );
      z-index: -2;
      left: 50%;
      top: 50%;
      transform-origin: left top;
      animation: rotation 4s linear infinite;
}
 @keyframes rotation {
      to {
        transform: rotate(360deg);
      }
}
.donation button::after {
      content: "";
      position: absolute;
      inset: 4px;
      /* 设置边距 */
      background:#FFA500;
      z-index: -1;
      border-radius: inherit;
}
最近更新