本文简介:在文章的末尾添加支付宝和微信的收款码,方便用户打赏,想添加的,可以按照下面的思路添加: 1、在文末适当的位置添加广告调用代码。 2、在后台添加一个全局广告位 3、在css里面,添加显示的css代码。

问:如何在安企cms的文末添加两张收款码?

答:在文章的末尾添加支付宝和微信的收款码,方便用户打赏,想添加的,可以按照下面的思路添加:

1、在文末适当的位置添加广告调用代码。

本文是在文章详情页页面article/detail.html的相关推荐的上方添加下面的收款码调用代码:

{% system with name="Skm" %}


2、在后台添加一个全局广告位

在网站后台,【后台设置】,下的【全局设置】,最底部,有一个【自定义参数】,我们点击【添加参数】即可。

参数名:Skm
备注:收款码
参数值:(填写你的广告代码)

本站的目前的代码,大家可以拿去参考:

<div class="text">码字不易,打个赏呗</div>

<div class="qrcode-container">

<div class="qrcode">

<img src="/img/alipay200.jpg" /> alt="支付宝打赏"></div>

<div class="qrcode">

<img src="/img/weixinpay200.jpg" /> alt="微信打赏"></div>

</div>

<div class="text">站长杨泽业感谢你的支持!</div>


3、在css里面,添加显示的css代码。

    .text {
      text-align: center; /* 文本居中 */
      margin: 10px 0; /* 上下间隔 */
    }
    .qrcode-container {
      display: flex; /* 使用flex布局 */
      justify-content: center; /* 水平居中 */
      margin-top: 10px; /* 与上文间隔 */
    }
    .qrcode {
      width: 150px;
      height: 150px;
      margin: 0 10px; /* 二维码之间的间隔 */
      overflow: hidden; /* 防止图片超出容器 */
      object-fit: contain; /* 确保图片完整显示 */
    }
    img {
      width: 100%; /* 图片宽度自适应容器 */
      height: 100%; /* 图片高度自适应容器 */
    }

就这样,文末的收款码就添加好了。看看本文下方的效果吧!

本站部分内容来源于网络,如有侵犯您的版权,请联系我们反馈,本站将在三个工作日内改正。
站长在线公众号