让自己的网站支持第三方支付能力(支持支付宝与微信支付)

前言

对于建站,相信很多小伙伴,一方面是希望自己有个知识的沉淀的载体,另一种程度上也是建立自我品牌的开始,当然也希望网站能够带来一些隐性或者显性的收入,例如:吸引广告商,贴片广告,付费阅读,自产自卖等

您将在本篇中读完get到

• 在vuepress中如何注入全局组件

• 实现置顶与置底的效果

• 实现圆环涟漪动画

• 在自己的网站中添加支付能力,同时支持支付宝与微信支付功能（省去扫码过程,通用）,并非贴支付码

不会后端,也能轻松实现网站具备支付宝与微信支付的能力

省去扫码这一环节，避免手机浏览器无法扫码、难以扫码而错失打赏的问题，支持电脑端、手机端、微信APP等多种场景

让您的网站日进斗金不是梦~

在vuepress中注入全局组件

​当你浏览https://coder.itclan.cn/网站时,你会发现,在网站的任何一处,下拉滚动条时,右下角都会出现一个小图标或者网站的右侧,都有一个固定的展示信息栏

在vuepress中是支持编写自定义组件的,并且全局范围内都可以使用,如下所示,当网页内容滚动大于60px时,小图片就会显示,小于60px时就会隐藏

在/.vuepress/components/ShangPic.vue,创建一个全局的xxxx.vue组件 具体代码如下所示:

​然后在./vuepress/configs/plugin.js配置插件处

const plugins = [
  [
    {
      name: "page-plugin"
    },
    globalUIComponents: [
      'ShangPic'
    ]
  ]
]

这样就完成全局配置了,重新npm run dev在次启动就可以了的,其他类似配置全局性的组件也是如此

实现置顶与置底的效果

有时候在移动端浏览网站时,添加置顶与置底的效果会更加友好,如下所示

to-top-to-bottom.gif

对于置顶的话,使用链接中的锚点#就可以了的,如下是右侧固定栏的代码/.vuepress/conponents/RightBar.vue

而置底的话,同样单独写一个组件,全局注入就可以了的/.vuepress/components/ToBottom.vue

注意要在./vuepress/configs/plugin.js全局注册一下的

const plugins = [
  [
    {
      name: "page-plugin"
    },
    globalUIComponents: [
      'ShangPic',
      'ToBottom',
      'RightBar'
    ]
  ]
]

经过上面简单的操作之后,就可以实现置顶与置底操作了的

实现圆环涟漪动画

具体效果如下所示:

圆环涟漪动画

同样将这个圆环涟漪动画封装成一个组件,因为很多个页面都会用到,这个组件的显示和隐藏都是由你自己控制的

​在/.vuepress/components/DaShang.vue,代码如下所示

限于篇幅所致,您可以点击下面链接(写作不易,不喜勿喷,下面为付费内容,感谢分享)

• 让自己的网站支持第三方支付能力(支持支付宝与微信支付)

• 完整建站见: 手把手教你用vuepress搭建自己的网站

有的人见到了付费,就会喷,但有的人见到了,哦，原来还可以这么搞的,便会花小额涨知识,于是会想方设法加到自己的网站上去的.

看到与做到是两码事~你懂的.

总结

本篇文章主要介绍了在在vuepress中注入全局组件,实现实现置顶与置底的效果,实现圆环涟漪动画,以及在网站中添加第三方支付功能

自己的网站自己做主..

如果您有遇到与vuepress建站相关问题,都可以咨询