前言
对于建站,相信很多小伙伴,一方面是希望自己有个知识的沉淀的载体,另一种程度上也是建立自我品牌的开始,当然也希望网站能够带来一些隐性或者显性的收入,例如:吸引广告商,贴片广告,付费阅读,自产自卖等
您将在本篇中读完get到
-
在vuepress中如何注入全局组件
-
实现置顶与置底的效果
-
实现圆环涟漪动画
-
在自己的网站中添加支付能力,同时支持支付宝与微信支付功能（通用）
不会后端,也能轻松实现网站具备支付宝与微信支付的能力,本篇适用于小白,适合在自己的网站中玩玩的
省去扫码这一环节，避免手机浏览器无法扫码、难以扫码而错失打赏的问题，支持电脑端、手机端、微信APP等多种场景
让您的网站日进斗金不是梦~
写作不易,不喜勿喷,本篇部分内容为付费,感谢分享,有的人见到了付费,就会喷,但有的人见到了,哦，原来还可以这么搞的,便会花小额涨知识,于是会想方设法加到自己的网站上去的.
在vuepress中注入全局组件
当你浏览https://coder.itclan.cn/网站时,你会发现,在网站的任何一处,下拉滚动条时,右下角都会出现一个小图标或者网站的右侧,都有一个固定的展示信息栏
在vuepress中是支持编写自定义组件的,并且全局范围内都可以使用,如下所示,当网页内容滚动大于60时,小图片就会显示,小于60时就会隐藏
在/.vuepress/components/ShangPic.vue,创建一个全局的xxxx.vue组件 具体代码如下所示:
<template><div class="shang-wrap"><a target="_blank" href="https://www.zhi12.cn/paycenter/reward/widget?entity=user&id=33813"><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: {// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏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在次启动就可以了的,其他类似配置全局性的组件也是如此
实现置顶与置底的效果
有时候在移动端浏览网站时,添加置顶与置底的效果会更加友好,如下所示
对于置顶的话,使用链接中的锚点#就可以了的,如下是右侧固定栏的代码/.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><imgwidth="30"height="30"class="medium-zoom lazy"loading="lazy"src="/images/other-author-code.jpg"alt="二维码"/></div><div><imgwidth="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']]
]
经过上面简单的操作之后,就可以实现置顶与置底操作了的
实现圆环涟漪动画
具体效果如下所示:
同样将这个圆环涟漪动画封装成一个组件,因为很多个页面都会用到,这个组件的显示和隐藏都是由你自己控制的
完整内容可戳下面链接
让自己的网站支持支付能力(支持支付宝与微信支付)
