子比主题美化教程持续更新(24-10-7)

在后台—》外观—》小工具—》首页-底部全宽度，自定义HTML添加下面代码即可。

<div id="wiiuii" style="box-shadow: 0 0 10px var(--main-shadow);">
<section class="buy-container">
  <div class="buy-box">
    <div class="slogan">
      <h3>玖居暗巷</h3>
      <p>欢迎光临寒舍！</p>
    </div>
    <ul class="actions">
      <li>
        <a href="http://wpa.qq.com/msgrd?v=3&uin=515805940&site=qq&menu=yes" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
      </li>
      <li>
        <a href="https://darkalley.top/links" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a>
      </li>
    </ul>
  </div>
  <span class="tips"><div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span>
  </section>
  </div>
<style type="text/css">
.buy-container{color: #ccc; padding: 60px 40px 50px 40px;margin: 0 auto; background: rgb(224,32,140); /*下述两行代码为兼容浏览器用，建议同步修改，亦可删除（不建议）*/background: -moz-linear-gradient(left, rgb(160,32,240) 0%, rgb(0,191,255) 100%);background: -webkit-linear-gradient(left, rgb(160,32,240) 0%,rgb(0,191,255) 100%); /*请更改此行代码，颜色为rgb模式*/background: linear-gradient(to right, rgb(160,32,240) 0%, rgb(0,191,255) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0208c', endColorstr='#fa6400',GradientType=1 );/*-webkit-border-radius: 8px;-moz-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;*/border-radius: var(--main-radius);}.buy-container .buy-box{display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto;}@media screen and (max-width: 700px){.buy-container .buy-box{display: block; text-align: center;}.buy-container .buy-box .slogan{margin-bottom: 30px;}}.buy-container .buy-box .slogan h3{color: #fff;font-size: 26px;margin: 0 0 10px 0;}@media screen and (max-width: 800px){.buy-container .buy-box .slogan h3{font-size: 24px;}}@media screen and (max-width: 500px){.buy-container .buy-box .slogan h3{font-size: 20px;}}@media screen and (max-width: 400px){.buy-container .buy-box .slogan h3{font-size: 18px;}}.buy-container .buy-box .slogan p{color: #fff;font-size: 14px;font-weight: bold;margin: 10px 0;}.buy-container .buy-box .actions{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;list-style-type: none;margin: 0;padding: 0;}@media screen and (max-width: 700px){.buy-container .buy-box .actions{-webkit-box-pack: justify; justify-content: center;}}.buy-container .buy-box .actions li{margin: 0;}.buy-container .buy-box .actions li:last-child{margin-left: 10px;}.buy-container .buy-box .actions li a{position: relative;color: #fff !important;font-size: 14px;font-weight: bold; line-height: 1;text-decoration: none;padding: 10px 20px;background-color: rgba(255, 255, 255, .1);-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-webkit-transition: .2s;-moz-transition: .2s;-o-transition: .2s;transition: .2s;}.buy-container .buy-box .actions li a:hover{-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px);-o-transform: translateY(-2px);transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);opacity: 1 !important;}@media screen and (max-width: 330px){.buy-container .buy-box .actions li a{font-size: 12px;}}.buy-container .buy-box .actions li a:not(.primary):before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-box-shadow: inset 0 0 0 1px currentColor;-moz-box-shadow: inset 0 0 0 1px currentColor;-o-box-shadow: inset 0 0 0 1px currentColor;box-shadow: inset 0 0 0 1px currentColor;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-khtml-opacity: .3;-moz-opacity: .3;opacity: .3;}.buy-container .buy-box .actions li a:after{display: none;}.buy-container .buy-box .actions li a.primary{color: #ff3b30 !important;background-color: #fff;}.buy-container .tips{border-top: 1px solid rgba(255, 255, 255, .1);display: block;color: #fff;font-size: 12px;text-align: center; max-width: 900px;margin: 30px auto 0 auto;padding-top: 30px;}@media screen and (max-width: 768px){.buy-container {padding: 30px 40px 30px 40px;}}#go-fav{width:100%; height:100%; line-height:30px; text-align:center; font-size:14px; font-weight:700; color:rgba(255, 255, 255, 1);}#go-fav span{padding:5px 10px; background:#f0e7e2; border-radius:8px; color:#202020; margin:0 5px;}
</style>
<script>
document.getElementById("wiiuii").parentNode.parentNode.style.padding=0;
</script>

食用教程
设置前，请关闭[电脑端的“回到顶部”按钮，后台子比主题设置里面自己找一下]
第一步：添加CSS代码
后台子比主题设置—>自定义代码—>自定义CSS样式，添加下面的CSS代码。

基础版CSS样式：

/*右侧导航栏*/
.elevator_item .hd-time-limited{display: block; position: fixed; right: 5px; bottom: 450px; width: 40px; height: 140px; animation: vip-key 2.4s infinite; margin-top: 10px; border-radius: var(--main-radius);}@keyframes vip-key{0%{bottom: 442px;} 50%{bottom: 450px;} 100%{bottom: 442px;}}.elevator_item{font-weight:700; position: fixed; right: 5px; bottom: 150px; z-index: 10;}.elevator_item .feedback{width: 40px; height: 40px; background-color: #fff; color: #fa3c64; font-size: 12px; padding: 3px 6px; display: block; border-radius: 5px; text-align: center; margin-top: 10px; /* box-shadow: 0 1px 2px rgba(0, 0, 0, .35);*/ box-shadow: 0 0 10px var(--main-shadow); cursor: pointer;}.elevator_item .medium{position: relative; background-color: #fa3c64; color: #fff;}.elevator_item .medium .lf-box{display: none; position: absolute; right: 41px; top: -90px; width: 370px; height: 280px; padding-right: 10px;}.elevator_item .medium .sp-list{width: 360px; height: 280px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35);}.elevator_item .medium .sp-list li:first-child{height: 70px; border-bottom: 1px solid #e5e5e5; padding: 20px 50px;}.elevator_item .medium li:first-child span{font-size: 14px; color: #383838;float: left; line-height: 30px;}.elevator_item .medium .btn-addGroup{width: 90px; height: 30px; border-radius: 8px; background: #fa3c64; color: #fff; line-height: 30px; text-align: center; float: left; margin-left: 14px;}.elevator_item .medium .spl-li{padding: 22px 34px 0;}.elevator_item .medium .spl-li span{display: block; font-size: 14px; color: #383838; margin-bottom: 8px;}.elevator_item .medium .spl-li img{width: 130px;}.elevator_item .feedback:hover .lf-box{display: block;}.fl{float: left;}.fr{float: right;}.graHover{position: relative; overflow: hidden;}.graHover:before{display: none; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .5);}.graHover:hover:before{display: block;}.clearfix{*zoom: 1;}.clearfix:after{visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}.wiiuii-why{background-color: var(--main-bg-color); width: 50px; height: 100%; position: fixed; right: 0; top: 0; z-index: 10; /*box-shadow: -2px 0px 4px 0px rgb(0 0 0 / 10%);*/ box-shadow: 0 0 10px var(--main-shadow);}@media screen and (max-width:768px){.wapnones{display:none;}}

最终版CSS样式：

.wiiuii-navigation-item .hd-time-limited{display: block; position: fixed;width: 40px; height: 140px; animation: vip-key 2.4s infinite; margin-top: 10px; border-radius: var(--main-radius);}
@keyframes vip-key{0%{bottom: 442px;} 50%{bottom: 450px;} 100%{bottom: 442px;}}
.wiiuii-navigation-item{font-weight:700; position: fixed; right: 5px; bottom: 150px; z-index: 10;}
.wiiuii-navigation-item .feedback{width: 40px; height: 40px; background-color: #fff; color: #fa3c64; font-size: 12px; padding: 3px 6px; display: block; border-radius:  var(--main-radius); text-align: center; margin-top: 10px; box-shadow: 0 0 10px var(--main-shadow); cursor: pointer;}
.wiiuii-navigation-item .medium{position: relative; background-color: #fa3c64; color: #fff;}
.wiiuii-navigation-item .medium .lf-box{display: none; position: absolute; right: 41px; top: -90px; width: 370px; height: 280px; padding-right: 10px;}
.wiiuii-navigation-item .medium .sp-list{width: 360px; height: 280px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35);}
.wiiuii-navigation-item .medium .sp-list li:first-child{height: 70px; border-bottom: 1px solid #e5e5e5; padding: 20px 50px;}
.wiiuii-navigation-item .medium li:first-child span{font-size: 14px; color: #383838;float: left; line-height: 30px;}
.wiiuii-navigation-item .medium .btn-addGroup{width: 90px; height: 30px; border-radius: 8px; background: #fa3c64; color: #fff; line-height: 30px; text-align: center; float: left; margin-left: 14px;}
.wiiuii-navigation-item .medium .spl-li{padding: 22px 34px 0;}
.wiiuii-navigation-item .medium .spl-li span{display: block; font-size: 14px; color: #383838; margin-bottom: 8px;}
.wiiuii-navigation-item .medium .spl-li img{width: 130px;}
.wiiuii-navigation-item .feedback:hover .lf-box{display: block;}
.fl{float: left;}.fr{float: right;}
.wiiuii-Gra-Hover{position: relative; overflow: hidden;}
.wiiuii-Gra-Hover:before{display: none; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .5);border: 1px solid #a9a7a7; border-radius: var(--main-radius);}
.wiiuii-Gra-Hover:hover:before{display: block;}
.wiiuii-clearfix{*zoom: 1;}
.wiiuii-clearfix:after{visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.wiiuii-why{background-color: var(--main-bg-color); width: 50px; height: 100%; position: fixed; right: 0; top: 0; z-index: 10; box-shadow: 0 0 10px var(--main-shadow);}
@media screen and (max-width:768px){.wapnones{display:none;}}

第二步：添加HTML代码
后台子比主题设置—>自定义代码—>自定义底部HTML代码，添加下面的HTML代码。

基础版HTML代码：

<!--右侧浮动 开始-->
<div class="wapnones wiiuii-why">
  <div class="elevator_item">
    <a class="hd-time-limited" href="#" style="background: url(https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg) no-repeat center;" target="_blank" rel="nofollow"></a>
    <a class="feedback graHover signin-loader" style="background-color: #44BBA1;color:#fff;" href="javascript:;" rel="nofollow">点击登陆</a>
    <a class="feedback medium signin-loader hover-show pay-vip" href="javascript:;"  style="background-color: #f2c69f;color:#383838;">活动专区
      <div class="lf-box">
        <ul>
         <li> 
           <!--若用我的图片一定要把图片下载到本地！-->
           <div style="padding-bottom: 5px;">
           <img style="border-radius: 8px;" src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg">
             </div>
           <img style="border-radius: 8px;" src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg">
          </li>
        </ul>
      </div>
    </a>
    <a class="feedback graHover main-shadow toggle-theme" style="background-color: var(--key-color);color:var(--main-bg-color);" href="javascript:;" rel="nofollow">模式切换</a>
    <a target="_blank" class="feedback graHover" style="background-color: #3ba4f9;color:#fff;" href="https://darkalley.top/newposts" rel="nofollow">发布文章</a>
    <div class="feedback medium">官方客服
      <div class="lf-box">
        <ul class="sp-list">
          <li>
            <span>官方客服：515805940</span>
            <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=515805940" target="_self" class="btn-addGroup graHover" rel="nofollow">一键联系</a></li>
          <li class="spl-li clearfix mobile-hide">
            <div class="fl">
              <span>微信公众号</span>
              <img src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg" ></div>
            <div class="fr">
              <span>微信公众号</span>
              <img src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg" ></div>
          </li>
        </ul>
      </div>
    </div>
          <a class="feedback graHover main-shadow muted-2-color ontop radius8 fade" style="background-color: #1e6be3;color:#fff;display: block;" href="javascript:(scrollTo());" >返回顶部</a>
 </div>
</div>
  <!--右侧浮动 结束-->

最终版HTML代码：

<!--右侧浮动 开始-->
<div class="wapnones wiiuii-why">
  <div class="wiiuii-navigation-item">
    <a class="hd-time-limited" href="#" style="background: url(https://img.wiiuii.cn/img/cfxy.jpg) no-repeat center;" target="_blank" rel="nofollow"></a>
    <a class="feedback wiiuii-Gra-Hover signin-loader jb-yellow" style="color:#fff;" href="javascript:;" rel="nofollow">点击登陆</a>
    <a class="feedback medium jb-vip1 signin-loader hover-show pay-vip" href="javascript:;"  style="color:#383838;">活动专区
      <div class="lf-box">
        <ul>
         <li> 
           <!--若用我的图片一定要把图片下载到本地！-->
           <div style="padding-bottom: 5px;">
           <img style="border-radius: 8px;" src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg">
             </div>
           <img style="border-radius: 8px;" src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg">
          </li>
        </ul>
      </div>
    </a>
    <a class="feedback wiiuii-Gra-Hover main-shadow toggle-theme" style="background-color: var(--key-color);color:var(--main-bg-color);" href="javascript:;" rel="nofollow">模式切换</a>
    <a target="_blank" class="feedback wiiuii-Gra-Hover jb-blue" style="color:#fff;" href="https://darkalley.top/newposts" rel="nofollow">发布文章</a>
    <div class="feedback medium jb-red">联系我
      <div class="lf-box">
        <ul class="sp-list">
          <li>
            <span>企鹅：515805940</span>
            <a class="btn-addGroup wiiuii-Gra-Hover" href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=515805940" target="_self" rel="nofollow">一键联系</a></li>
          <li class="spl-li wiiuii-clearfix mobile-hide">
            <div class="fl">
              <span>微信公众号</span>
              <img src="<!--右侧浮动 开始-->
<div class="wapnones wiiuii-why">
  <div class="wiiuii-navigation-item">
    <a class="hd-time-limited" href="#" style="background: url(https://img.wiiuii.cn/img/cfxy.jpg) no-repeat center;" target="_blank" rel="nofollow"></a>
    <a class="feedback wiiuii-Gra-Hover signin-loader jb-yellow" style="color:#fff;" href="javascript:;" rel="nofollow">点击登陆</a>
    <a class="feedback medium jb-vip1 signin-loader hover-show pay-vip" href="javascript:;"  style="color:#383838;">活动专区
      <div class="lf-box">
        <ul>
         <li> 
           <!--若用我的图片一定要把图片下载到本地！-->
           <div style="padding-bottom: 5px;">
           <img style="border-radius: 8px;" src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg">
             </div>
           <img style="border-radius: 8px;" src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg">
          </li>
        </ul>
      </div>
    </a>
    <a class="feedback wiiuii-Gra-Hover main-shadow toggle-theme" style="background-color: var(--key-color);color:var(--main-bg-color);" href="javascript:;" rel="nofollow">模式切换</a>
    <a target="_blank" class="feedback wiiuii-Gra-Hover jb-blue" style="color:#fff;" href="https://darkalley.top/newposts" rel="nofollow">发布文章</a>
    <div class="feedback medium jb-red">联系我
      <div class="lf-box">
        <ul class="sp-list">
          <li>
            <span>企鹅：515805940</span>
            <a class="btn-addGroup wiiuii-Gra-Hover" href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=515805940" target="_self" rel="nofollow">一键联系</a></li>
          <li class="spl-li wiiuii-clearfix mobile-hide">
            <div class="fl">
              <span>微信公众号</span>
              <img src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg" ></div>
            <div class="fr">
              <span>微信号</span>
              <img src="<!--右侧浮动 开始-->
<div class="wapnones wiiuii-why">
  <div class="wiiuii-navigation-item">
    <a class="hd-time-limited" href="#" style="background: url(https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg) no-repeat center;" target="_blank" rel="nofollow"></a>
    <a class="feedback wiiuii-Gra-Hover signin-loader jb-yellow" style="color:#fff;" href="javascript:;" rel="nofollow">点击登陆</a>
    <a class="feedback medium jb-vip1 signin-loader hover-show pay-vip" href="javascript:;"  style="color:#383838;">活动专区
      <div class="lf-box">
        <ul>
         <li> 
           <!--若用我的图片一定要把图片下载到本地！-->
           <div style="padding-bottom: 5px;">
           <img style="border-radius: 8px;" src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg">
             </div>
           <img style="border-radius: 8px;" src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg">
          </li>
        </ul>
      </div>
    </a>
    <a class="feedback wiiuii-Gra-Hover main-shadow toggle-theme" style="background-color: var(--key-color);color:var(--main-bg-color);" href="javascript:;" rel="nofollow">模式切换</a>
    <a target="_blank" class="feedback wiiuii-Gra-Hover jb-blue" style="color:#fff;" href="https://darkalley.top/newposts" rel="nofollow">发布文章</a>
    <div class="feedback medium jb-red">联系我
      <div class="lf-box">
        <ul class="sp-list">
          <li>
            <span>企鹅：515805940</span>
            <a class="btn-addGroup wiiuii-Gra-Hover" href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=515805940" target="_self" rel="nofollow">一键联系</a></li>
          <li class="spl-li wiiuii-clearfix mobile-hide">
            <div class="fl">
              <span>微信公众号</span>
              <img src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg" ></div>
            <div class="fr">
              <span>微信号</span>
              <img src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg" ></div>
          </li>
        </ul>
      </div>
    </div>
          <a class="feedback wiiuii-Gra-Hover jb-purple main-shadow muted-2-color ontop radius8 fade" style="color:#fff;" href="javascript:(scrollTo());" >返回顶部</a>
 </div>
</div>
  <!--右侧浮动 结束-->" ></div>
          </li>
        </ul>
      </div>
    </div>
          <a class="feedback wiiuii-Gra-Hover jb-purple main-shadow muted-2-color ontop radius8 fade" style="color:#fff;" href="javascript:(scrollTo());" >返回顶部</a>
 </div>
</div>
  <!--右侧浮动 结束-->" ></div>
            <div class="fr">
              <span>微信号</span>
              <img src="<!--右侧浮动 开始-->
<div class="wapnones wiiuii-why">
  <div class="wiiuii-navigation-item">
    <a class="hd-time-limited" href="#" style="background: url(https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg) no-repeat center;" target="_blank" rel="nofollow"></a>
    <a class="feedback wiiuii-Gra-Hover signin-loader jb-yellow" style="color:#fff;" href="javascript:;" rel="nofollow">点击登陆</a>
    <a class="feedback medium jb-vip1 signin-loader hover-show pay-vip" href="javascript:;"  style="color:#383838;">活动专区
      <div class="lf-box">
        <ul>
         <li> 
           <!--若用我的图片一定要把图片下载到本地！-->
           <div style="padding-bottom: 5px;">
           <img style="border-radius: 8px;" src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg">
             </div>
           <img style="border-radius: 8px;" src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg">
          </li>
        </ul>
      </div>
    </a>
    <a class="feedback wiiuii-Gra-Hover main-shadow toggle-theme" style="background-color: var(--key-color);color:var(--main-bg-color);" href="javascript:;" rel="nofollow">模式切换</a>
    <a target="_blank" class="feedback wiiuii-Gra-Hover jb-blue" style="color:#fff;" href="https://darkalley.top/newposts" rel="nofollow">发布文章</a>
    <div class="feedback medium jb-red">联系我
      <div class="lf-box">
        <ul class="sp-list">
          <li>
            <span>企鹅：515805940</span>
            <a class="btn-addGroup wiiuii-Gra-Hover" href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=515805940" target="_self" rel="nofollow">一键联系</a></li>
          <li class="spl-li wiiuii-clearfix mobile-hide">
            <div class="fl">
              <span>微信公众号</span>
              <img src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg" ></div>
            <div class="fr">
              <span>微信号</span>
              <img src="<!--右侧浮动 开始-->
<div class="wapnones wiiuii-why">
  <div class="wiiuii-navigation-item">
    <a class="hd-time-limited" href="#" style="background: url(https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg) no-repeat center;" target="_blank" rel="nofollow"></a>
    <a class="feedback wiiuii-Gra-Hover signin-loader jb-yellow" style="color:#fff;" href="javascript:;" rel="nofollow">点击登陆</a>
    <a class="feedback medium jb-vip1 signin-loader hover-show pay-vip" href="javascript:;"  style="color:#383838;">活动专区
      <div class="lf-box">
        <ul>
         <li> 
           <!--若用我的图片一定要把图片下载到本地！-->
           <div style="padding-bottom: 5px;">
           <img style="border-radius: 8px;" src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg">
             </div>
           <img style="border-radius: 8px;" src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg">
          </li>
        </ul>
      </div>
    </a>
    <a class="feedback wiiuii-Gra-Hover main-shadow toggle-theme" style="background-color: var(--key-color);color:var(--main-bg-color);" href="javascript:;" rel="nofollow">模式切换</a>
    <a target="_blank" class="feedback wiiuii-Gra-Hover jb-blue" style="color:#fff;" href="https://darkalley.top/newposts" rel="nofollow">发布文章</a>
    <div class="feedback medium jb-red">联系我
      <div class="lf-box">
        <ul class="sp-list">
          <li>
            <span>企鹅：515805940</span>
            <a class="btn-addGroup wiiuii-Gra-Hover" href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=515805940" target="_self" rel="nofollow">一键联系</a></li>
          <li class="spl-li wiiuii-clearfix mobile-hide">
            <div class="fl">
              <span>微信公众号</span>
              <img src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg" ></div>
            <div class="fr">
              <span>微信号</span>
              <img src="https://tv-img.nineqing.com/2021/07/16/2bab7b33d2823.jpg" ></div>
          </li>
        </ul>
      </div>
    </div>
          <a class="feedback wiiuii-Gra-Hover jb-purple main-shadow muted-2-color ontop radius8 fade" style="color:#fff;" href="javascript:(scrollTo());" >返回顶部</a>
 </div>
</div>
  <!--右侧浮动 结束-->" ></div>
          </li>
        </ul>
      </div>
    </div>
          <a class="feedback wiiuii-Gra-Hover jb-purple main-shadow muted-2-color ontop radius8 fade" style="color:#fff;" href="javascript:(scrollTo());" >返回顶部</a>
 </div>
</div>
  <!--右侧浮动 结束-->" ></div>
          </li>
        </ul>
      </div>
    </div>
          <a class="feedback wiiuii-Gra-Hover jb-purple main-shadow muted-2-color ontop radius8 fade" style="color:#fff;" href="javascript:(scrollTo());" >返回顶部</a>
 </div>
</div>
  <!--右侧浮动 结束-->

说明：若需要上面的图片，自己下载保存。自己添加、修改代码。添加模块请自己修改CSS的“elevator_item”类里的“bottom：150px;”高度，不然很丑哦。蓝色的”星语的小木屋”图片大小是40×140。

第一步：页面代码

在子比主题目录/zibll/pages/下创建一个PHP文件，然后复制下面的代码添加进去即可完成第一步！

<?php

/**
 * Template name: 聚合解析页面
 * Description:   aggregation_analysis
 */

// 获取链接列表
get_header();
$header_style = zib_get_page_header_style();
?>
<main class="container">
    <div class="content-wrap">
        <div class="content-layout">
            <?php while (have_posts()) : the_post(); ?>
                <?php if ($header_style != 1) {
                    echo zib_get_page_header();
                } ?>
                <div class="box-body theme-box radius8 main-bg main-shadow">
                    <?php if ($header_style == 1) {
                        echo zib_get_page_header();
                    } ?>
                    <!---->
                    <html>
                        <head>
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1">
                        <style>
                        .inputUrl{width: 100%; display: flex; justify-content: flex-end; align-items: center; flex-direction: column;} .textUrl{width: 90%; height: 45px; outline: none; padding: 4px 8px; border-radius: 8px; border: 1.5px solid #c0c0c0; outline: none; background: #00000000; font-weight: 700; box-shadow: 0px 0px 2px #eeeeee;} .sendBtn{width: 90%; height: 40px; margin: 15px; border-radius: 8px; box-shadow: 0px 0px 2px #555; font-weight: 700;} .sendBtn:hover{background-color: #FFF;} .down{text-align: center;} .down a{display: inline-block; padding: 0 1em; margin: 0.5em; height: 2.75em; border: solid 1px #c8cccf; border-radius: 4px; background-color: transparent; color: #414f57!important; text-align: center; text-decoration: none; white-space: nowrap; line-height: 2.75em; font-weight: 700;} #myDiv{color: #0089fff0; overflow-y: hidden; background-color: #f0f1f1fa; margin: 10px; border-radius: 8px; word-wrap: break-word;} #myDiv1{text-align: center;font-weight: 700;padding: 10px;}
                        </style>
                        </head>
                        <!--<div id="wrapper">-->
                            <!--<form method="post">-->
                              <div id="myDiv1">
                                <p>
                                  目前支持:抖音/皮皮虾/火山/微视/微博/绿洲/最右/轻视频/instagram/哔哩哔哩/快手/全民小视频/皮皮搞笑
                                  <br>
                                  温馨提示:粘贴视频地址时无需删除文案 但如果视频链接正确但解析失败请删掉文案后重试
                                </p>
                              </div>
                              <div class="inputUrl">
                              <input class="textUrl" type="text" placeholder="请粘贴视频链接" id="input1" class="longurl">
                              <input class="btn sendBtn" type="button" onclick="setValue()" value="解析">
                              </div>
                            </form>
                            <div class="down"></div>
                              <div id="myDiv"></div>
                        </div>
                        <script>
                        function  setValue(){
                        var v =  document.getElementById("input1").value;
                            var xmlhttp;
                            if(window.XMLHttpRequest){
                              xmlhttp=new XMLHttpRequest();
                              }
                            else{
                            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
                            xmlhttp.open("GET","https://tenapi.cn/video?url="+v,false);
                            xmlhttp.send();
                            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                        　  var jsonObj = JSON.parse(xmlhttp.responseText); 
                            $(".down").html('<h4 id="form-title" style="font-weight: 700;">'+jsonObj.title+'</h4><a id="form-cover" href="'+jsonObj.cover+'" target="_blank" download="video">下载封面</a><a id="form-video" href="'+jsonObj.url+'" target="_blank" download="video">下载视频</a><a id="form-music" href="'+jsonObj.music+'" target="_blank" download="video">下载音乐</a>');
                        }
                        </script>
                    </html>
                <!---->
                <?php endwhile;  ?>
                </div>
                <?php comments_template('/template/comments.php', true); ?>
        </div>
    </div>
    <?php get_sidebar(); ?>
</main>
<?php
get_footer();

说明：代码中相关的文字，可以自行修改。

其他WP主题看过来，由于我不是很懂贵站使用的是什么主题，所以就只留了核心的代码，只需在页面的目录下创建PHP文件，然后复制自己主题目录下的默认页面模板（一般都是默认模板的文件都是page.php文件），粘贴到新建的PHP文件，最后把下方的核心代码复制进去即可完成第一步。

                    <!--核心代码开始-->
                    <html>
                        <head>
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1">
                        <style>
                        .inputUrl{width: 100%; display: flex; justify-content: flex-end; align-items: center; flex-direction: column;} .textUrl{width: 90%; height: 45px; outline: none; padding: 4px 8px; border-radius: 8px; border: 1.5px solid #c0c0c0; outline: none; background: #00000000; font-weight: 700; box-shadow: 0px 0px 2px #eeeeee;} .sendBtn{width: 90%; height: 40px; margin: 15px; border-radius: 8px; box-shadow: 0px 0px 2px #555; font-weight: 700;} .sendBtn:hover{background-color: #FFF;} .down{text-align: center;} .down a{display: inline-block; padding: 0 1em; margin: 0.5em; height: 2.75em; border: solid 1px #c8cccf; border-radius: 4px; background-color: transparent; color: #414f57!important; text-align: center; text-decoration: none; white-space: nowrap; line-height: 2.75em; font-weight: 700;} #myDiv{color: #0089fff0; overflow-y: hidden; background-color: #f0f1f1fa; margin: 10px; border-radius: 8px; word-wrap: break-word;} #myDiv1{text-align: center;font-weight: 700;padding: 10px;}
                        </style>
                        </head>
                        <!--<div id="wrapper">-->
                            <!--<form method="post">-->
                              <div id="myDiv1">
                                <p>
                                  目前支持:抖音/皮皮虾/火山/微视/微博/绿洲/最右/轻视频/instagram/哔哩哔哩/快手/全民小视频/皮皮搞笑
                                  <br>
                                  温馨提示:粘贴视频地址时无需删除文案 但如果视频链接正确但解析失败请删掉文案后重试
                                </p>
                              </div>
                              <div class="inputUrl">
                              <input class="textUrl" type="text" placeholder="请粘贴视频链接" id="input1" class="longurl">
                              <input class="btn sendBtn" type="button" onclick="setValue()" value="解析">
                              </div>
                            </form>
                            <div class="down"></div>
                              <div id="myDiv"></div>
                        </div>
                        <script>
                        function  setValue(){
                        var v =  document.getElementById("input1").value;
                            var xmlhttp;
                            if(window.XMLHttpRequest){
                              xmlhttp=new XMLHttpRequest();
                              }
                            else{
                            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
                            xmlhttp.open("GET","https://tenapi.cn/video?url="+v,false);
                            xmlhttp.send();
                            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                        　  var jsonObj = JSON.parse(xmlhttp.responseText); 
                            $(".down").html('<h4 id="form-title" style="font-weight: 700;">'+jsonObj.title+'</h4><a id="form-cover" href="'+jsonObj.cover+'" target="_blank" download="video">下载封面</a><a id="form-video" href="'+jsonObj.url+'" target="_blank" download="video">下载视频</a><a id="form-music" href="'+jsonObj.music+'" target="_blank" download="video">下载音乐</a>');
                        }
                        </script>
                    </html>
                <!--核心代码结束-->

第二步：新建页面
在WP网站后台—》页面—》新建页面—-》页面属性—》模板—》选择“聚合解析页面”，填写标题、固定连接（非必须），最后发布即可。
其他主题可能找不到“聚合解析页面”，至于为什么呢，是因为主题默认代码可能没有添加或者不是“Template name: 聚合解析页面”。
教程到这里结束，哪里出问题请评论或者截图找我吧。

代码：

其实就是一个简单的HTML代码（因为弹窗公告支持HTML代码），自己在弹窗内容里面添加代码即可。图片、信息啥的自己修改即可。

<html>
    <body>
<!--文本-->
<a href="https://darkalley.top/" target="_blank"  title="玖居暗巷">
    <img style="display: inline-block; width: 100%; max-width: 100%; height: auto;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;" src="https://wwfile.jiuqing97.top/2020/08/1597146900-2f5b3d917a8b8e0.png">
</a>
        <div class="text_body" style="padding-bottom: 30px;">
            <div class="text" id="container" style="font-weight:bold;">
                欢迎光临寒舍！
            </div>
        </div>
<!--文本结束-->
<script type="text/javascript">
var text = $("#container").text().trim();
        $("#container").html("");
        for(var i = 0;i < text.length;i++){
            $("#container").append("<span>"+text[i]+"</span>")
        }
        var s = 0;
        var tim = setInterval(function(){
            $("#container span").eq(s++).css("color",getColor()).show();
            if(s == text.length){
                clearInterval(tim)
            }
        }, 100)
        function getColor(){
            return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
        }
        </script>
    </body>
</html>

CSS代码(样式一)：

 /*字体*/
@font-face{font-family:"wiiuii";src:url(https://uploader.shimo.im/f/adjzRQKK4rMhqM7T.ttf);}
*{font-family:"wiiuii"}

CSS代码(样式二)：

/*全站字体美化*/
@font-face{
font-family: 'moe';
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.ttf');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.otf');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.dfont');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.eot');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.svg');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff2');
}
body{
font-family:'moe';
}
.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) {
    .meta-right .meta-view{
      display: unset !important;
    }
  }

注：（非常重要）font-family是自定义字体名称（自己修改），url这是字体文件的地址（自己修改），*这是全局显示。

CSS代码：

<div id="wiiuii1">
  <img src="https://www.wiiuii.cn/api/ip-label" class="post-cover-img-more ls-is-cached lazyloaded" data-src="https://www.wiiuii.cn/api/ip-label" alt="no pic now" style="/*border-radius:5px;*/border-radius: var(--main-radius);box-shadow: 0 0 10px var(--main-shadow);"><script>document.getElementById("wiiuii1").parentNode.parentNode.style.padding=0;</script></div>

效果：

代码：

<style type="text/css">
#update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041}
</style>
<div id="update_version">
<a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=515805940@qq.com" target="_blank" rel="noopener"><img title="玖居暗巷" src="https://wwfile.jiuqing97.top/2020/08/1597146900-2f5b3d917a8b8e0.png" alt="图片" style="border-radius:5px;" /></a>
<a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=515805940@qq.com" target="_blank" style="background-image: linear-gradient(to right, #99CCCC, #FFCC99)"  rel="noopener">发送邮件</a>
<a class="cms_link" href="https://darkalley.top/newposts" target="_blank" style="background-image: linear-gradient(to right, #FF9999,#996699)"  rel="noopener">点击投稿</a>
<a class="grid_link" href="https://darkalley.top/about_me" target="_blank" style="background-image: linear-gradient(to right,#339933, #9933CC)"  rel="noopener">关于我们</a>
</div>
<div>
  <hr>
<a href="https://darkalley.top/tougao" target="_blank" rel="noopener">点击在线投稿</a>
  <br>
投稿邮箱：<b>515805940@qq.com</b>
  <br>
交流 QQ：<b><a href="https://darkalley.top" target="_blank" rel="noopener">515805940</a></b>
</div>

HTML代码：

<!--开始-->
                <style>
                .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
                .panel:hover{border: 1px solid #FF6666;}/*框颜色背景色*/
                .panel{margin-bottom: 10px; background-color: #fff; border: 1px solid #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}
                .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/
                .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}
                .panel-body .help li{line-height:25px;font-size:14px;color: #000;}
                .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;}
                .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}
                </style>
                <div class="panel">
                     <div class="panel-heading">
                          <h3>下载说明</h3>
                     </div>
                     <div class="panel-body">
                      <ul class="help">
                        <li>1.本站所提供的压缩包若无特别说明，解压密码均为<em>www.darkalley.top</em>;</li>
                        <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li>
                      <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li>
                      <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便星语的小木屋及时进行更新;</li>
                      <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li>
                      </ul>
                     </div>
                     </div>
                     <div class="panel">
                     <div class="panel-heading">
                       <h3>站长声明</h3>
                     </div>
                     <div class="panel-body">
                      <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span>
                     </div>
                    </div>
                <!--结束-->

添加说明（注意）：主题目录zibll/pages/download.php,在合适的位置添加上面的即可，大概是在115行位置添加（我的在115行添加，不知道新版有没有变化）。

代码：

/*手机侧边栏背景图片*/
@media (max-width: 767px){
.mobile-navbar.show,.mobile-navbar.left{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
  background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://tv-img.nineqing.com/2022/05/26/628f52117969b.jpg);}
  .mobile-nav-widget .box-body {
    background: var(--muted-border-color) !important;}
}

注意:
这是一个简单的CSS代码，若要更换图片请把‘‘url(https://tv-img.nineqing.com/2022/05/26/628f52117969b.jpg)’’更换成“url(自己的图片链接)”即可。

效果：

说明:
这是简单的改动一下代码，添加了几个类，如果作者更新主题时下载页面没改动代码的话，更新主题后【复制粘贴代码】进去就能用！（更新前记得备份！记得备份！记得备份！不然就被刷新代码了）

代码:（一些说明请仔细看）
CSS代码：（放在哪，这里就不在说了，自己可以压缩一下CSS代码）

/*下载样式*/
.download-article{
    padding: 0 10px;
}
.download-demo{
   margin: 10px 0;
  border: 1px dashed red;
    border-radius: 5px;
}
.download-wiui{
  padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.download-sty{
      text-align: center;
    height: 100%;
}
.download-sty p{
    font-size: 15px !important;
    text-align: center;
    margin: 0;
}
.download-sty img{
width: 140px;
    height: 100%;
}
.download-theme-box{
    margin-bottom: 20px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}
.download-right{
margin-left: 20px;
}

.download-file-name{
    font-size: 20px;
}

PHP代码：（这是整个文件的代码，粘贴时记得把那个PHP文件里面的代码【清空！清空！清空！】）

<?php

/**
 * Template name: Zibll-资源下载
 * Description:   download page
 */

if (empty($_GET['post'])) {
  get_header();
  get_template_part('template/content-404');
  get_footer();
  exit;
}
get_header();
$post_id = $_GET['post'];

function zibpay_get_down_html($post_id)
{

  $pay_mate = get_post_meta($post_id, 'posts_zibpay', true);
  $html = '';
  if (empty($pay_mate['pay_type']) || empty($pay_mate['pay_type']) || $pay_mate['pay_type'] != '2') {
    return get_template_part('template/content-404');
  };

  // 查询是否已经购买
  $paid_obj = zibpay_is_paid($post_id);
  $posts_title = get_the_title($post_id) . get_post_meta($post_id, 'subtitle', true);
  $pay_title = !empty($pay_mate['pay_title']) ? $pay_mate['pay_title'] : $posts_title;
  $pay_doc = $pay_mate['pay_doc'];
  $pay_details = $pay_mate['pay_details'];
  if ($paid_obj) {
    //已经购买直接显示下载盒子

    $paid_name = zibpay_get_paid_type_name($paid_obj['paid_type']);
    $paid_name = '<b class="badg jb-red mr6" style="margin-left: 5px; font-size: 12px; padding: 2px 10px; line-height: 1.4; "><i class="fa fa-check mr6" aria-hidden="true"></i>' . $paid_name . '</b>';

    $pay_extra_hide = !empty($pay_mate['pay_extra_hide']) ? '<div class="pay-extra-hide">' . $pay_mate['pay_extra_hide'] . '</div>' : '';

    $dowmbox = '<div style="/*margin-bottom:3em;*/">' . zibpay_get_post_down_buts($pay_mate, $paid_obj['paid_type'], $post_id) . '</div>';
    if ($paid_obj['paid_type'] == 'free' && _pz('pay_free_logged_show') && !is_user_logged_in()) {
      $dowmbox = '<div class="alert jb-yellow em12" style="margin: 2em 0;"><b>免费资源，请登录后下载</b></div>';
      $pay_extra_hide = '<div class="text-center pay-extra-hide">';
      $pay_extra_hide .= '<p class="box-body muted-2-color">请先登录！</p>';
      $pay_extra_hide .= '<p>';
      $pay_extra_hide .= '<a href="javascript:;" class="signin-loader but jb-blue padding-lg"><i class="fa fa-fw fa-sign-in mr10" aria-hidden="true"></i>登录</a>';
      $pay_extra_hide .= '<a href="javascript:;" class="signup-loader ml10 but jb-yellow padding-lg"><i data-class="icon mr10" data-viewbox="0 0 1024 1024" data-svg="signup" aria-hidden="true"></i>注册</a>';
      $pay_extra_hide .= '</p>';
      $pay_extra_hide .= zib_social_login(false);
      $pay_extra_hide .= '</div>';
    }
    
    $html = '<div class="download-demo"><div class="panel-heading"><h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 文件下载</h3></div>';
        $html .= '<div class="download-wiui">';
        /*微信公众号图片在下面的<img>里面，自己放自己的图片链接 文字自己修改*/
        $html .= '<div class="download-sty"><img src="https://wwfile.jiuqing97.top/2022/05/96f4442827ba.jpg" /><p>关注公众号不迷路</p></div>';
    $html .= '<div class="download-right"><div class="article-header download-theme-box"><div class="article-title" style="margin-top: 0;"><span class="download-file-name">[文件名] </span><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div>' . $paid_name . '</div>';

    $html .= '<div>' . $pay_doc . '</div>';
    $html .= '<div class="muted-2-color em09">' . $pay_details . '</div>';

    $html .= '<div>' . $dowmbox . $pay_extra_hide . '</div></div>';
    $html .= '</div></div>';
    
  } else {
    //未购买
    $html = '<div class="article-header theme-box"><div class="article-title"><a href="' . get_permalink($post_id) . '#posts-pay">' . $pay_title . '</a></div></div>';

    $html .= '<div>' . $pay_doc . '</div>';
    $html .= '<div class="muted-2-color em09" style="margin: 2em 0;">' . $pay_details . '</div>';
    $html .= '<div class="alert jb-red em12" style="margin: 2em 0;"><b>暂无下载权限</b></div>';
    $html .= '<a style="margin-bottom: 2em;" href="' . get_permalink($post_id) . '#posts-pay" class="but jb-yellow padding-lg"><i class="fa fa-long-arrow-left" aria-hidden="true"></i><span class="ml10">返回文章</span></a>';
  }

  return $html;
}

?>
<style>
.but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
</style>
<main class="container">
  <div class="content-wrap">
    <div class="content-layout">


      <?php while (have_posts()) : the_post(); ?>
        <?php echo zib_get_page_header(); ?>

        <div class="zib-widget article download-article" style="/*min-height: 600px;*/">

          <?php
          echo zibpay_get_down_html($post_id);
          $page_links_content_s = get_post_meta(get_queried_object_id(), 'page_show_content', true);
          if ($page_links_content_s) {
            the_content();
            wp_link_pages(
              array(
                'before'           => '<p class="text-center post-nav-links radius8 padding-6">',
                'after'            => '</p>',
              )
            );
            echo '</div>';
          }
          ?>
          <!--开始-->
                <style>
                .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
                .panel:hover,.download-demo:hover{border: 1px dashed #FF6666;}/*框颜色背景色*/
                .panel:hover h3,.download-demo:hover h3{color:#fff;}
                .panel{margin-bottom: 10px; background-color: #fff; border: 1px dashed #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}
                .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/
                .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}
                .panel-body .help li{line-height:25px;font-size:14px;color: #000;}
                .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;}
                .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}
                </style>
                <div class="panel">
                     <div class="panel-heading">
                          <h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 下载说明</h3>
                     </div>
                     <div class="panel-body">
                      <ul class="help">
                        <li>1.本站所提供的压缩包若无特别说明，解压密码均为<em>www.darkalley.top</em>;</li>
                        <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li>
                      <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li>
                      <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便星语的小木屋及时进行更新;</li>
                      <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li>
                      </ul>
                     </div>
                     </div>
                     <div class="panel">
                     <div class="panel-heading">
                       <h3><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 站长声明</h3>
                     </div>
                     <div class="panel-body">
                      <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span>
                     </div>
                    </div>
                <!--结束-->
          <?php ?>
        <?php endwhile; ?>
        </div>
        <?php comments_template('/template/comments.php', true); ?>
    </div>
  </div>
  <?php get_sidebar(); ?>
</main>

<?php

get_footer();

注意:
PHP文件路径：主题文件夹/zibll/pages/download.php
有一些文字说明比如：站长声明、下载说明，自己在代码中修改一下。
微信公众号的图片+文字，代码里面有注释提示的，自己改一下就好。
有疑问请留言。