子比主题 新增一个页面 也添加网站说明以及打赏页和评论排行榜等

前言介绍

子比主题 新增一个页面 也添加网站说明以及打赏页和评论排行榜等 1

添加页面

在page里新建一个页面把下面的代码直接复制进去,然后添加页面就行了,还有最好你们还是把css下载到你们网站本地,要不然哪天站长舍弃这篇css代码,你们的网页就变成废页了!

<?php

/**
 * Template name: XY - 博客重地
 * Description:   XY - 重地
 */

get_header();
?>
<link rel="stylesheet" href="https://21lhz.cn/cdn/css/important.css" /> 
<style>
.joe_detail__article code:not([class]){background-color: white;color: inherit;margin:2px}
.joe_detail{padding: 30px;}
.joe_detail__article table thead th{text-align:center}
.joe_detail__article p{line-height: 36px;margin: auto;font-size: 14px;text-align: center;}
.aut-11{background: linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%);}
.joe_detail{padding: 0 30px 30px 30px;}
.ds td{text-align:center}
.wkf:hover{opacity:0.2;}
.sevent1,.sevent2{grid-template-columns: repeat(7, 1fr);}
.layui-laypage>a:last-child, .layui-laypage>a:last-child em{margin-bottom: 5px !important;}
@media (max-width:420px){.joe_detail{padding:20px}.joe_detail__article ol,.joe_detail__article ul{margin-bottom: 18px;padding-left: 30px;}.sevent1,.sevent2{grid-template-columns: repeat(3, 1fr);}}
@media (max-width:760px){.joe_gird__item{margin-right: 10px;}}
@media (max-width:680px){.wkf,.joe_gird{white-space: nowrap;overflow-y: scroll;}}
@media (max-width:585px){.wkf{display: -webkit-box;}}
</style> 
  <main role="main" class="container"> 
   <div class="joe_detail" data-cid="36" style="margin-bottom: 40px;box-shadow: 0 0 6px 0 #a9a9a945;"> 
    <article class="joe_detail__article"> 
     <h5>打赏说明</h5>
     <div id="zm_gll">
      欢迎参与给夕阳发工资计划
     </div>
     <br />
     <ol>
      <li>感谢您对小站的支持,打赏完可在<code>留言板</code>留言,可以指定打赏金额的用途~</li>
      <li>打赏位置:本站任意文章右下方均可,或者点这里 <span style="cursor:pointer;" id="dorzs"><svg class="icon" aria-hidden="true" style="font-size:20px"><use xlink:href="#icon-qianbao"></use></svg></span></li>
      <li>也可以多点点广告呀,我至今还没有提过钱呢qaq</li>
      <li>打赏记录在下面,打赏的<code>小伙伴</code>可以在留言板留言修改备注</li>
     </ol><br/>
     <div class="joe_card__describe"> 
         <div class="joe_card__describe-title">
          打赏记录测试中
         </div> 
        <div class="joe_card__describe-content">
     <table class="wkf">
      <thead>
       <tr>
        <th align="center">打赏时间</th>
        <th align="center">打赏人昵称</th>
        <th align="center">金额</th>
        <th align="center">途径</th>
        <th align="center">备注</th>
       </tr>
      </thead>
      <tbody class="fly-list">
       <tr class="ds">
        <td style="overflow: hidden;"><code>2021</code>-<code>12</code>-<code>03</code></td>
        <td>夕阳</td>
        <td><code>100.00</code> <i class="fa fa-cny"></i></td>
        <td><i class="iconfont icon-zhifubaozhifu"></i></td>
        <td><a href="https://21lhz.cn" target="_blank">夕阳博客</a></td>
       </tr>
      </tbody>
     </table>
     <div style="text-align: center;">
        <div id="page" class="pagination-container"> </div>
    </div>
     </div>
     </div>
     <span class="menu-target-fix" id="menu_index_2" name="menu_index_2"></span>
     <h5>留言板说明</h5>
     <div id="zm_gll">
      留言板及用户等级说明
     </div>
     <br />
     <ol>
      <li>留言板存储在本地数据库中(2021)</li>
      <li>为了获取留言头像,请记得填好<code>QQ邮箱</code>,
       <s>
        若填写qq邮箱优先调用qq头像(2021)
       </s></li>
      <li>头像获取顺序为本站随机->第三方获取->用户上传</li>
      <li>留言板支持部分MARKDOWN及html语法,比如 文字加粗 图片引用 换行 表格等</li>
      <li><font color="red">名字乱起,邮箱乱填,网站乱写,不会回复,直接删评。</font></li>
      <li>少用<code>图片</code>功能,可以用现有的表情代替图片,请勿上传H擦边的图片</li>
      <li>根据评论数量,现实用户留言等级,未注册登录用户默认为路人,具体说明如下表</li>
     </ol>
     <section style="margin-bottom: 15px">
      <joe-card-describe title="用户等级">
       <span class="_content" style="display: block;"> 
        <div class="joe_card__describe"> 
         <div class="joe_card__describe-title">
          用户等级
         </div> 
         <div class="joe_card__describe-content">
          <section style="margin-bottom: 15px">
           <joe-gird column="7" gap="15">
            <span class="_content" style="display: block;">
             <div class="joe_gird" style="gap: 15px; grid-template-columns: repeat(7, 1fr);">
              <div class="joe_gird__item">
               <p><span class="autlv aut-0" title="评论等级LV.0">N</span><br />评论<10</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-1" title="评论等级LV.1">R</span><br />评论11-20</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-2" title="评论等级LV.2">SR</span><br />评论21-30</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-3" title="评论等级LV.3">SP</span><br />评论31-40</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-4" title="评论等级LV.4">SSR</span><br />评论41-50</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-5" title="评论等级LV.5">UR</span><br />评论51-100</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-6" title="评论等级LV.MAX">MR</span><br />评论>100</p>
              </div>
           </div></span>
           </joe-gird>
          </section>
         </div> 
        </div> </span>
      </joe-card-describe>
     </section>
     <section style="margin-bottom: 15px">
      <joe-card-describe title="身份名片">
       <span class="_temp" style="display: block;"><br />
       <div class="joe_card__describe"> 
         <div class="joe_card__describe-title">
          用户铭牌
         </div> 
         <div class="joe_card__describe-content">
        <section style="margin-bottom: 15px">
         <joe-gird column="7" gap="15">
          <span class="_content" style="display: block;">
           <div class="joe_gird sevent1">
            <div class="joe_gird__item">
             <p><span class="autlv aut-7" title="这是夕阳站长哦">博主</span><br /><font color="#EE33EE">夕阳专用卡片</font></p>
            </div>
            <div class="joe_gird__item">
             <p><span class="autlv aut-8" title="本站注册用户">新朋友</span><br />本站注册用户</p>
            </div>
            <div class="joe_gird__item">
             <p><span class="autlv aut-9" title="路人默认卡片">游客</span><br />路人默认卡片</p>
            </div>
           </div></span>
         </joe-gird>
        </section></div></div><br /></span>
      </joe-card-describe>
     </section>
     <section style="margin-bottom: 15px">
      <joe-card-describe title="会员名片">
       <span class="_content" style="display: block;"> 
        <div class="joe_card__describe"> 
         <div class="joe_card__describe-title">
          附加铭牌
         </div> 
         <div class="joe_card__describe-content">
          <section style="margin-bottom: 15px">
           <joe-gird column="7" gap="15">
            <span class="_content" style="display: block;">
             <div class="joe_gird sevent2">
              <div class="joe_gird__item">
               <p><span class="autlv aut-10" title="推广会员">VIP</span><br />推广会员卡片</p>
              </div>
              <div class="joe_gird__item">
               <p><span class="autlv aut-11" title="代理会员">SVIP</span><br />代理会员卡片</p>
              </div>
              <div class="joe_gird__item"></div>
              <div class="joe_gird__item"></div>
              <div class="joe_gird__item"></div>
             </div></span>
           </joe-gird>
          </section>
         </div> 
        </div> </span>
      </joe-card-describe>
     </section>
     <section style="margin-bottom: 15px">
      <joe-callout color="#f0ad4e">
       <span class="_content" style="display: block;"> 
        <div class="joe_callout" style="border-left-color: #f0ad4e;">
          已经成为<code>VIP</code>
         <code>SVIP</code>的
         <code>小伙伴</code>,可以在本站做
         <code>任务</code>,
         提升返利比例<code>上限90%</code>
         <ol>
          <li>在本站发布有效的文章并且通过审核达到一定数量</li>
          <li>在本站给夕阳站长发工资并且达到一定数量</li>
         </ol> 
        </div> </span>
      </joe-callout>
     </section>
     <span class="menu-target-fix" id="menu_index_3" name="menu_index_3"></span>
     <h5>下载声明</h5>
     <div id="zm_gll">
      资源分享或者是下载页面是一些我在网上扒的一些很不错的程序,但是也要说一下免责声明
     </div>
     <br />
     <ol>
      <li>本站上的所有软件和资料均为软件作者提供和网友推荐收集整理而来,仅供学习和研究使用。如有侵犯你版权的,请来信指出,本站将立即改正。</li>
      <li>本站保证站内提供的所有可下载资源无毒无害,但不保证本站提供的下载资源的准确性、安全性和完整性;</li>
      <li>用户必须明白,对提供下载的软件等不拥有任何权利,其版权归该下载资源的合法拥有者所有。</li>
      <li>同时本站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。</li>
      <li>未经本站的明确许可,任何人不得盗用本站下载资源;不得复制或仿造本站。</li>
      <li>本站对其自行开发的或和他人共同开发的所有内容、技术手段和服务拥有全部知识产权,任何人不得侵害或破坏,也不得擅自使用。</li>
     </ol>
     <p>
      <joe-dotted startcolor="#ff6c6c" endcolor="#1989fa"> 
       <span class="joe_dotted" style="background-image: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%)"></span> 
      </joe-dotted></p>
     <span class="menu-target-fix" id="menu_index_4" name="menu_index_4"></span>
     <h5>隐私协议声明</h5>
     <div id="zm_gll">
      本站非常重视您的隐私和个人信息保护。在您在浏览网站时,本站可能会收集和使用您的相关信息。
     </div>
     <br />
     <ol>
      <li>本站使用第三方51.la,百度统计来统计整站页面数据。</li>
      <li>本站使用了
       <del>
        顶域(21lhz.cn)的域名Let's Encrypt
       </del>TrustAsia TLS RSA CA证书,开启SSL及HTTP2以保障访问安全</li>
      <li>留言板中包含有昵称、邮箱、网址三项个人信息,当您填写并提交后,本站不会保存您的个人信息至浏览器本地储存。</li>
      <li>本站所收集的数据信息仅用于网站数据分析,不会与任何公司、组织和个人共享您的个人信息,不会将您的个人信息转让给任何公司、组织和个人。</li>
      <li>因不能确定资源的来源是否是正版,今后不会再标注出以上引用来源。</li>
     </ol> 
     <div id="dorzs" style="cursor:pointer;text-align:center;color: var(--color-orange);">
      - - - The Reward - - -
      </div>
    </article> 
   </div>
<?php comments_template('/template/comments.php', true); ?>
</main>
<?php
get_footer();

新增评论榜单

此次增加评论榜单我就不偷懒直接发整页了,这样可以省去小伙伴修改的时间,添加有两处functions跟css!

子比主题 新增一个页面 也添加网站说明以及打赏页和评论排行榜等 2

functions代码

CSS代码

拿这些覆盖在原来的css上就行了.

引入代码

我是在“article“上一行添加的,还是截个图吧。

7501328604005803
<?php top_comment_authors(4) ?>
有问题及时联系站长,QQ:1240555208
更多优质资源在QQ群里,可以进群领取:467392290~
© 版权声明
THE END
点赞7 分享
及时反馈~ 共3条

请登录后发表评论