让自己的网站支持第三方支付能力(支持支付宝与微信支付)
前言
对于建站,相信很多小伙伴,一方面是希望自己有个知识的沉淀的载体,另一种程度上也是建立自我品牌的开始,当然也希望网站能够带来一些隐性或者显性的收入,例如:吸引广告商,贴片广告,付费阅读,自产自卖等
您将在本篇中读完get到
-
在
vuepress中如何注入全局组件 -
实现置顶与置底的效果
-
实现圆环涟漪动画
-
在自己的网站中添加支付能力,同时支持支付宝与微信支付功能（省去扫码过程,通用）,并非贴支付码
不会后端,也能轻松实现网站具备支付宝与微信支付的能力
省去扫码这一环节，避免手机浏览器无法扫码、难以扫码而错失打赏的问题，支持电脑端、手机端、微信APP等多种场景
让您的网站日进斗金不是梦~
在vuepress中注入全局组件
当你浏览https://coder.itclan.cn/网站时,你会发现,在网站的任何一处,下拉滚动条时,右下角都会出现一个小图标或者网站的右侧,都有一个固定的展示信息栏
在vuepress中是支持编写自定义组件的,并且全局范围内都可以使用,如下所示,当网页内容滚动大于60px时,小图片就会显示,小于60px时就会隐藏
在/.vuepress/components/ShangPic.vue,创建一个全局的xxxx.vue组件 具体代码如下所示:
<template>
<div class="shang-wrap">
<a target="_blank">
<img height="80" v-if="shangeFlag" class="shange" src="/images/itclanCoder-shang.png" />
</a>
</div>
</template>
<script>
export default {
name: "ShangPic",
data() {
return {
shangeFlag: false
};
},
mounted() {
window.addEventListener("scroll", this.isShangImg);
},
destroyed() {
window.removeEventListener("scroll", this.isShangImg);
},
methods: {
// 为了计算距离顶部的高度，当高度大于60px,小图标显示，小于60px则隐藏
isShangImg() {
const that = this;
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
that.scrollTop = scrollTop;
if (that.scrollTop > 60) {
that.shangeFlag = true;
} else {
that.shangeFlag = false;
}
}
}
};
</script>
<style lang="stylus" scoped>
.shang-wrap {
width: 170px;
height: 80px;
position: fixed;
bottom: 50px;
right: 118px;
z-index: 999999;
opacity: 1;
text-align: center;
img {
display: inline-block;
vertical-align: center;
}
}
@media screen and (max-width: 768px) {
.shang-wrap img {
width: 150px;
height: 80px;
position: fixed;
right: 3.5rem;
bottom: 50px;
text-align: center;
z-index: 777;
}
}
</style>
然后在./vuepress/configs/plugin.js配置插件处
const plugins = [
[
{
name: "page-plugin"
},
globalUIComponents: [
'ShangPic'
]
]
]
这样就完成全局配置了,重新npm run dev在次启动就可以了的,其他类似配置全局性的组件也是如此
实现置顶与置底的效果
有时候在移动端浏览网站时,添加置顶与置底的效果会更加友好,如下所示
to-top-to-bottom.gif
对于置顶的话,使用链接中的锚点#就可以了的,如下是右侧固定栏的代码/.vuepress/conponents/RightBar.vue
<template>
<div>
<div class="right-bar-wrap" v-show="isRightBar">
<div>
// 此处就是用#号就可以置顶的,最简单粗暴的方式
<a href="#">
<img width="30" height="30" src="/images/up-arrow.png" alt="置顶" />
</a>
</div>
<div>
<a href="/latestarticle/">
<img width="30" height="30" src="/images/new.png" alt="最新" />
</a>
</div>
<div>
<img
width="30"
height="30"
class="medium-zoom lazy"
loading="lazy"
src="/images/other-author-code.jpg"
alt="二维码"
/>
</div>
<div>
<img
width="30"
height="30"
class="medium-zoom lazy"
loading="lazy"
src="/images/itclancoder-code.jpg"
alt="公众号"
/>
</div>
<div>
// 而这里是使用锚点#号,锚点的方式
<a href="#bottom">
<img width="30" height="30" src="/images/down-arrow.png" alt="置底" />
</a>
</div>
</div>
</div>
</template>
<script>
export default {
name: "RightBar",
data() {
return {
isRightBar: false
};
},
mounted() {
window.addEventListener("scroll", this.scroll);
},
destroyed() {
window.removeEventListener("scroll", this.scroll);
},
methods: {
scroll() {
const that = this;
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
that.scrollTop = scrollTop;
if (that.scrollTop > 60) {
that.isRightBar = true;
} else {
that.isRightBar = false;
}
}
}
};
</script>
<style lang="stylus" scoped>
@media screen and (min-width: 960px) {
.right-bar-wrap {
display: none;
}
}
@media screen and (max-width: 768px) {
.right-bar-wrap {
position: fixed;
right: 0.2rem;
top: 35%;
display: flex;
flex-direction: column;
z-index: 888;
img {
border: 1px solid #3eaf7c;
border-radius: 4px;
}
}
}
</style>
而置底的话,同样单独写一个组件,全局注入就可以了的/.vuepress/components/ToBottom.vue
<template>
<div>
<div id="bottom"></div>
</div>
</template>
<script>
export default {
name: "ToBottom"
};
</script>
<style lang="stylus" scoped></style>
注意要在./vuepress/configs/plugin.js全局注册一下的
const plugins = [
[
{
name: "page-plugin"
},
globalUIComponents: [
'ShangPic',
'ToBottom',
'RightBar'
]
]
]
经过上面简单的操作之后,就可以实现置顶与置底操作了的
实现圆环涟漪动画
具体效果如下所示:
圆环涟漪动画
同样将这个圆环涟漪动画封装成一个组件,因为很多个页面都会用到,这个组件的显示和隐藏都是由你自己控制的
在/.vuepress/components/DaShang.vue,代码如下所示
限于篇幅所致,您可以点击下面链接(写作不易,不喜勿喷,下面为付费内容,感谢分享)
有的人见到了付费,就会喷,但有的人见到了,哦，原来还可以这么搞的,便会花小额涨知识,于是会想方设法加到自己的网站上去的.
看到与做到是两码事~你懂的.
总结
本篇文章主要介绍了在在vuepress中注入全局组件,实现实现置顶与置底的效果,实现圆环涟漪动画,以及在网站中添加第三方支付功能
自己的网站自己做主..
如果您有遇到与vuepress建站相关问题,都可以咨询
