转载请注明来源、保留版权，谢谢合作！
教程收集于互联网 非本人原创，有的找不到转载来源，发布这篇文章最主要也是给自己做一个备份，避免升级网站找不到教程了，如未加您的版权可联系胖猫添加，敬请谅解！！！
子比主题美化 – 网站右下角弹窗公告代码
美化教程
将下方代码放在主题文件目录下的 footer.php 中的 body 尾部
文章自动添加关键词链接，优化内页SEO，提升网站收录效果
网站底部添加【我也是有底线的】
美化教程
在 zibll 主题目录下 themes/zibll/footer.php 文件中的“第一行
”下面添加下面的代码：
用户中心添加UID、注册时间等-教程及代码
来自：李初一
美化教程
使用方法：
在主题根目录新建func.php，并在最顶部填上<?php，然后再粘贴下面代码（推荐，在线更新主题不会丢失）
或者直接将以下代码添加到主题根目录的function.php最底部（更新主题会丢失）
文字广告位 by：温若寒
美化教程
[/hidecontent]
给页脚第三板块二维码增加动态border
美化教程
将代码放置于自定义CSS内，由于是SCSS代码，看不懂请不要轻易修改，也不要在控制台修改
By.李初一
给子比主题博客加个好看底部导航 by夕阳
美化教程
在functions.php加上下面这段代码
图片是站长放在自己腾讯云里的，这里我就删除了，请自行添加自己的图片(//弹窗提醒)
//获取评论数量function zfunc_comments_users($postid=0,$which=0) {$comments = get_comments('status=approve&type=comment&post_id='.$postid); //获取文章的所有评论if ($comments) {$i=0; $j=0; $commentusers=array();foreach ($comments as $comment) {++$i;if ($i==1) { $commentusers[] = $comment->comment_author_email; ++$j; }if ( !in_array($comment->comment_author_email, $commentusers) ) {$commentusers[] = $comment->comment_author_email;++$j;}}$output = array($j,$i);$which = ($which == 0) ? 0 : 1;return $output[$which]; //返回评论人数}return 0; //没有评论返回0};// 随机文章function random_posts($posts_num=5,$before='<li>',$after='</li>'){global $wpdb;$sql = "SELECT ID, post_title,guidFROM $wpdb->postsWHERE post_status = 'publish' ";$sql .= "AND post_title != '' ";$sql .= "AND post_password ='' ";$sql .= "AND post_type = 'post' ";$sql .= "ORDER BY RAND() LIMIT 0 , $posts_num ";$randposts = $wpdb->get_results($sql);$output = '';foreach ($randposts as $randpost) {$post_title = stripslashes($randpost->post_title);$permalink = get_permalink($randpost->ID);$output .= $before.'<a class="item-foot" href="'. $permalink . '" rel="bookmark" data-toggle="tooltip" data-original-title="随机文章：';$output .= $post_title . '"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-lianjie"></use></svg><span id="wz">' . $post_title . '</span></a>';$output .= $after;}echo '<div id="footgundong" class="wz"><ul>'.$output.'</ul></div>';}//弹窗提醒function dorzs() {echo '<script src="https://21lhz.cn/cdn/js/sweetalert.min.js"></script>';echo '<script src="https://21lhz.cn/cdn/css/sweetalert.css"></script>';echo '<script>$(document).on("click","#dorzs",function(){swal({title:"发工资啦",text:"哇！夕阳超级开心的！！",icon:"https://4bot.cn/wp-content/uploads/2024/10/20241025162758341-打赏.svg",buttons:{weixin:{text:"微信",value:"weixin",},zfb:{text:"支付宝",value:"zfb",},dsmd:{text:"打赏名单",value:"dsmd",},},}).then(function(value){if(value=="weixin"){swal({title:"感谢打赏！",text:"感谢您的微信打赏，我会努力做得更好！",button:false,icon:"https://4bot.cn/wp-content/uploads/2024/10/20241025162636274-QQ_1729844769783.png"});}else if(value=="zfb"){swal({title:"感谢打赏！",text:"感谢您的支付宝打赏，我会努力做得更好！",button:false,icon:"https://4bot.cn/wp-content/uploads/2024/10/20241025162514277-支付宝.png"});}else if(value=="dsmd"){swal({title:"打赏名单",text:"【打赏名单未开放】",icon:"https://4bot.cn/wp-content/uploads/2024/10/20241025162927906-学术文章赞助.svg",button:false,});}});});</script>';}add_action( 'wp_footer', 'dorzs', 100 );//点赞统计function dz($post_id){global $wpdb;$sql = "SELECT SUM(`meta_value`) as num FROM `wp_postmeta` WHERE `meta_key`='like' AND `post_id`=$post_id";$results = $wpdb->get_results($sql);echo $results[0]->num;}//获取评论数量 function zfunc_comments_users($postid=0,$which=0) { $comments = get_comments('status=approve&type=comment&post_id='.$postid); //获取文章的所有评论 if ($comments) { $i=0; $j=0; $commentusers=array(); foreach ($comments as $comment) { ++$i; if ($i==1) { $commentusers[] = $comment->comment_author_email; ++$j; } if ( !in_array($comment->comment_author_email, $commentusers) ) { $commentusers[] = $comment->comment_author_email; ++$j; } } $output = array($j,$i); $which = ($which == 0) ? 0 : 1; return $output[$which]; //返回评论人数 } return 0; //没有评论返回0 }; // 随机文章 function random_posts( $posts_num=5,$before='<li>',$after='</li>'){ global $wpdb; $sql = "SELECT ID, post_title,guid FROM $wpdb->posts WHERE post_status = 'publish' "; $sql .= "AND post_title != '' "; $sql .= "AND post_password ='' "; $sql .= "AND post_type = 'post' "; $sql .= "ORDER BY RAND() LIMIT 0 , $posts_num "; $randposts = $wpdb->get_results($sql); $output = ''; foreach ($randposts as $randpost) { $post_title = stripslashes($randpost->post_title); $permalink = get_permalink($randpost->ID); $output .= $before.'<a class="item-foot" href="' . $permalink . '" rel="bookmark" data-toggle="tooltip" data-original-title="随机文章：'; $output .= $post_title . '"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-lianjie"></use></svg><span id="wz">' . $post_title . '</span></a>'; $output .= $after; } echo '<div id="footgundong" class="wz"><ul>'.$output.'</ul></div>'; } //弹窗提醒 function dorzs() { echo '<script src="https://21lhz.cn/cdn/js/sweetalert.min.js"></script>'; echo '<script src="https://21lhz.cn/cdn/css/sweetalert.css"></script>'; echo '<script>$(document).on("click","#dorzs",function(){swal({title:"发工资啦",text:"哇！夕阳超级开心的！！",icon:"https://4bot.cn/wp-content/uploads/2024/10/20241025162758341-打赏.svg",buttons:{weixin:{text:"微信",value:"weixin",},zfb:{text:"支付宝",value:"zfb",},dsmd:{text:"打赏名单",value:"dsmd",},},}).then(function(value){if(value=="weixin"){swal({title:"感谢打赏！",text:"感谢您的微信打赏，我会努力做得更好！",button:false,icon:"https://4bot.cn/wp-content/uploads/2024/10/20241025162636274-QQ_1729844769783.png"});}else if(value=="zfb"){swal({title:"感谢打赏！",text:"感谢您的支付宝打赏，我会努力做得更好！",button:false,icon:"https://4bot.cn/wp-content/uploads/2024/10/20241025162514277-支付宝.png"});}else if(value=="dsmd"){swal({title:"打赏名单",text:"【打赏名单未开放】",icon:"https://4bot.cn/wp-content/uploads/2024/10/20241025162927906-学术文章赞助.svg",button:false,});}});});</script>'; } add_action( 'wp_footer', 'dorzs', 100 ); //点赞统计 function dz($post_id){ global $wpdb; $sql = "SELECT SUM(`meta_value`) as num FROM `wp_postmeta` WHERE `meta_key`='like' AND `post_id`=$post_id"; $results = $wpdb->get_results($sql); echo $results[0]->num; }//获取评论数量 function zfunc_comments_users($postid=0,$which=0) { $comments = get_comments('status=approve&type=comment&post_id='.$postid); //获取文章的所有评论 if ($comments) { $i=0; $j=0; $commentusers=array(); foreach ($comments as $comment) { ++$i; if ($i==1) { $commentusers[] = $comment->comment_author_email; ++$j; } if ( !in_array($comment->comment_author_email, $commentusers) ) { $commentusers[] = $comment->comment_author_email; ++$j; } } $output = array($j,$i); $which = ($which == 0) ? 0 : 1; return $output[$which]; //返回评论人数 } return 0; //没有评论返回0 }; // 随机文章 function random_posts( $posts_num=5,$before='<li>',$after='</li>'){ global $wpdb; $sql = "SELECT ID, post_title,guid FROM $wpdb->posts WHERE post_status = 'publish' "; $sql .= "AND post_title != '' "; $sql .= "AND post_password ='' "; $sql .= "AND post_type = 'post' "; $sql .= "ORDER BY RAND() LIMIT 0 , $posts_num "; $randposts = $wpdb->get_results($sql); $output = ''; foreach ($randposts as $randpost) { $post_title = stripslashes($randpost->post_title); $permalink = get_permalink($randpost->ID); $output .= $before.'<a class="item-foot" href="' . $permalink . '" rel="bookmark" data-toggle="tooltip" data-original-title="随机文章：'; $output .= $post_title . '"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-lianjie"></use></svg><span id="wz">' . $post_title . '</span></a>'; $output .= $after; } echo '<div id="footgundong" class="wz"><ul>'.$output.'</ul></div>'; } //弹窗提醒 function dorzs() { echo '<script src="https://21lhz.cn/cdn/js/sweetalert.min.js"></script>'; echo '<script src="https://21lhz.cn/cdn/css/sweetalert.css"></script>'; echo '<script>$(document).on("click","#dorzs",function(){swal({title:"发工资啦",text:"哇！夕阳超级开心的！！",icon:"https://4bot.cn/wp-content/uploads/2024/10/20241025162758341-打赏.svg",buttons:{weixin:{text:"微信",value:"weixin",},zfb:{text:"支付宝",value:"zfb",},dsmd:{text:"打赏名单",value:"dsmd",},},}).then(function(value){if(value=="weixin"){swal({title:"感谢打赏！",text:"感谢您的微信打赏，我会努力做得更好！",button:false,icon:"https://4bot.cn/wp-content/uploads/2024/10/20241025162636274-QQ_1729844769783.png"});}else if(value=="zfb"){swal({title:"感谢打赏！",text:"感谢您的支付宝打赏，我会努力做得更好！",button:false,icon:"https://4bot.cn/wp-content/uploads/2024/10/20241025162514277-支付宝.png"});}else if(value=="dsmd"){swal({title:"打赏名单",text:"【打赏名单未开放】",icon:"https://4bot.cn/wp-content/uploads/2024/10/20241025162927906-学术文章赞助.svg",button:false,});}});});</script>'; } add_action( 'wp_footer', 'dorzs', 100 ); //点赞统计 function dz($post_id){ global $wpdb; $sql = "SELECT SUM(`meta_value`) as num FROM `wp_postmeta` WHERE `meta_key`='like' AND `post_id`=$post_id"; $results = $wpdb->get_results($sql); echo $results[0]->num; }
引入阿里巴巴矢量库的图标，也可以自行修改
因为前面搞错东西了，后面查了下才发现问题，把下面的js跟css引入到你的网站即可
在footer.php里加上下面这段代码，自行修改
<!--底部导航--><style>#footgundong{margin-left:20px;overflow: overlay;display: inline-flex;text-align: right;}.item-foot{color: var(--minor);height: 45px;line-height: 45px;transition: color 0.35s;white-space: nowrap;}.swal-footer{text-align:center;}.swal-button {font-size: 20px;}.count>svg,.count>text{display:none;}</style><div class="footwaveline"><i style="background-image: url(https://xyblog-1259307513.cos.ap-guangzhou.myqcloud.com/wp-content/uploads/2021/11/362a2c8cc4a0.png);display: inline-block;width: 210px;height: 120px;position: fixed;bottom: 0;z-index: 110;background-size: 100%;"></i><div class="footwavewave" style="background: url(https://xyblog-1259307513.cos.ap-guangzhou.myqcloud.com/wp-content/uploads/2021/11/9855fd529028.png) 0 0 repeat-x;height: 3px;width: 100%;position: fixed;background-size: 10px 3px;z-index: 98;bottom: 40px;"></div><div id="shi" style="position: fixed;bottom: 0;margin-left: 200px;z-index: 99;"><h4 class="my-face" style="font-size:13px;margin:0 5px 2px 5px;color:#797979;margin-bottom: 10px;">夕阳无别事，等风也等你</h4></div><div style="width: 100%;height: 40px;position: fixed;bottom: 0;z-index: 97;box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);background:#fff;"><nav class="joe_header__below-logon" style="float: right;margin-right: 50px;"><?php if (is_home()) {echo'<style>@media (max-width:1200px){#shi{display:none;}}.pl,.fx{display:none;}.dz{display:none !important;}</style>';echo random_posts();}elseif (is_page()) {echo'<style>@media (max-width:1200px){#shi{display:none;}}.pl,.fx{display:none;}.dz{display:none !important;}</style>';}?><span style="margin-left:20px;" class="pl"><a href="javascript:(scrollTo('#comments',-100));" data-toggle="tooltip" data-original-title="评论"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-pinglun"></use></svg><span style="color:var(--minor);">评论(<count><?php echo zfunc_comments_users($post->ID); ?></count>)</span></a></span><span class="dz" style="margin-left:20px;display: inline-block;"><a href="javascript:(scrollTo('#comments',-1000));" data-toggle="tooltip" data-original-title="点赞"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>点赞(<?php echo dz($post->ID)?>)</a></span><span style="margin-left:20px;line-height: 45px;" class="fx"><a class="bds simg" data-toggle="modal" href="#modal_poster" title="分享"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享</a></span><span style="margin-left:20px;line-height: 45px;" class="zs"><a id="dorzs" data-toggle="tooltip" data-original-title="赞赏"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-qianbao"></use></svg>赞赏</a></span><span style="margin-left:20px;line-height: 45px;" class="sc"><a href="javascript:void(0);" id="shoucang" data-toggle="tooltip" data-original-title="收藏"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xihuan"></use></svg>收藏</a></span><a style="margin-left:20px;" href="javascript:(scrollTo());" id="percentage" data-toggle="tooltip" data-original-title="返回顶部"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg>0%</a></nav></div></div><?php dorzs();?><script>var btn =document.getElementById("shoucang");btn.onclick = function() {layer.msg('<p style="font-weight:700;margin:5px;">在键盘上按<span style="padding:5px 10px;background:#f0e7e2;border-radius:8px;color:#202020;margin:0 5px;">Ctrl</span>+<span style="padding:5px 10px;background:#f0e7e2;border-radius:8px;color:#202020;margin:0 5px;">D</span>即可<br>喜欢本站的话记得常来哦！</p>', function(){});};</script><!--底部导航--><!--底部导航--> <style> #footgundong{margin-left:20px;overflow: overlay;display: inline-flex;text-align: right;}.item-foot{color: var(--minor);height: 45px;line-height: 45px;transition: color 0.35s;white-space: nowrap;}.swal-footer{text-align:center;}.swal-button {font-size: 20px;}.count>svg,.count>text{display:none;} </style> <div class="footwaveline"> <i style="background-image: url(https://xyblog-1259307513.cos.ap-guangzhou.myqcloud.com/wp-content/uploads/2021/11/362a2c8cc4a0.png);display: inline-block;width: 210px;height: 120px;position: fixed;bottom: 0;z-index: 110;background-size: 100%;"></i> <div class="footwavewave" style="background: url(https://xyblog-1259307513.cos.ap-guangzhou.myqcloud.com/wp-content/uploads/2021/11/9855fd529028.png) 0 0 repeat-x;height: 3px;width: 100%;position: fixed;background-size: 10px 3px;z-index: 98;bottom: 40px;"></div> <div id="shi" style="position: fixed;bottom: 0;margin-left: 200px;z-index: 99;"> <h4 class="my-face" style="font-size:13px;margin:0 5px 2px 5px;color:#797979;margin-bottom: 10px;">夕阳无别事，等风也等你</h4> </div> <div style="width: 100%;height: 40px;position: fixed;bottom: 0;z-index: 97;box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);background:#fff;"> <nav class="joe_header__below-logon" style="float: right;margin-right: 50px;"> <?php if (is_home()) { echo'<style>@media (max-width:1200px){#shi{display:none;}}.pl,.fx{display:none;}.dz{display:none !important;}</style>'; echo random_posts(); }elseif (is_page()) { echo'<style>@media (max-width:1200px){#shi{display:none;}}.pl,.fx{display:none;}.dz{display:none !important;}</style>'; } ?> <span style="margin-left:20px;" class="pl"> <a href="javascript:(scrollTo('#comments',-100));" data-toggle="tooltip" data-original-title="评论"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-pinglun"></use></svg><span style="color:var(--minor);">评论(<count><?php echo zfunc_comments_users($post->ID); ?></count>)</span> </a> </span> <span class="dz" style="margin-left:20px;display: inline-block;"> <a href="javascript:(scrollTo('#comments',-1000));" data-toggle="tooltip" data-original-title="点赞"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>点赞(<?php echo dz($post->ID)?>) </a> </span> <span style="margin-left:20px;line-height: 45px;" class="fx"> <a class="bds simg" data-toggle="modal" href="#modal_poster" title="分享"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享 </a> </span> <span style="margin-left:20px;line-height: 45px;" class="zs"> <a id="dorzs" data-toggle="tooltip" data-original-title="赞赏"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-qianbao"></use></svg>赞赏 </a> </span> <span style="margin-left:20px;line-height: 45px;" class="sc"> <a href="javascript:void(0);" id="shoucang" data-toggle="tooltip" data-original-title="收藏"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-xihuan"></use></svg>收藏 </a> </span> <a style="margin-left:20px;" href="javascript:(scrollTo());" id="percentage" data-toggle="tooltip" data-original-title="返回顶部"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg>0% </a> </nav> </div> </div> <?php dorzs();?> <script> var btn =document.getElementById("shoucang"); btn.onclick = function() {layer.msg('<p style="font-weight:700;margin:5px;">在键盘上按<span style="padding:5px 10px;background:#f0e7e2;border-radius:8px;color:#202020;margin:0 5px;">Ctrl</span>+<span style="padding:5px 10px;background:#f0e7e2;border-radius:8px;color:#202020;margin:0 5px;">D</span>即可<br>喜欢本站的话记得常来哦！</p>', function(){});}; </script> <!--底部导航--><!--底部导航--> <style> #footgundong{margin-left:20px;overflow: overlay;display: inline-flex;text-align: right;}.item-foot{color: var(--minor);height: 45px;line-height: 45px;transition: color 0.35s;white-space: nowrap;}.swal-footer{text-align:center;}.swal-button {font-size: 20px;}.count>svg,.count>text{display:none;} </style> <div class="footwaveline"> <i style="background-image: url(https://xyblog-1259307513.cos.ap-guangzhou.myqcloud.com/wp-content/uploads/2021/11/362a2c8cc4a0.png);display: inline-block;width: 210px;height: 120px;position: fixed;bottom: 0;z-index: 110;background-size: 100%;"></i> <div class="footwavewave" style="background: url(https://xyblog-1259307513.cos.ap-guangzhou.myqcloud.com/wp-content/uploads/2021/11/9855fd529028.png) 0 0 repeat-x;height: 3px;width: 100%;position: fixed;background-size: 10px 3px;z-index: 98;bottom: 40px;"></div> <div id="shi" style="position: fixed;bottom: 0;margin-left: 200px;z-index: 99;"> <h4 class="my-face" style="font-size:13px;margin:0 5px 2px 5px;color:#797979;margin-bottom: 10px;">夕阳无别事，等风也等你</h4> </div> <div style="width: 100%;height: 40px;position: fixed;bottom: 0;z-index: 97;box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);background:#fff;"> <nav class="joe_header__below-logon" style="float: right;margin-right: 50px;"> <?php if (is_home()) { echo'<style>@media (max-width:1200px){#shi{display:none;}}.pl,.fx{display:none;}.dz{display:none !important;}</style>'; echo random_posts(); }elseif (is_page()) { echo'<style>@media (max-width:1200px){#shi{display:none;}}.pl,.fx{display:none;}.dz{display:none !important;}</style>'; } ?> <span style="margin-left:20px;" class="pl"> <a href="javascript:(scrollTo('#comments',-100));" data-toggle="tooltip" data-original-title="评论"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-pinglun"></use></svg><span style="color:var(--minor);">评论(<count><?php echo zfunc_comments_users($post->ID); ?></count>)</span> </a> </span> <span class="dz" style="margin-left:20px;display: inline-block;"> <a href="javascript:(scrollTo('#comments',-1000));" data-toggle="tooltip" data-original-title="点赞"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>点赞(<?php echo dz($post->ID)?>) </a> </span> <span style="margin-left:20px;line-height: 45px;" class="fx"> <a class="bds simg" data-toggle="modal" href="#modal_poster" title="分享"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享 </a> </span> <span style="margin-left:20px;line-height: 45px;" class="zs"> <a id="dorzs" data-toggle="tooltip" data-original-title="赞赏"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-qianbao"></use></svg>赞赏 </a> </span> <span style="margin-left:20px;line-height: 45px;" class="sc"> <a href="javascript:void(0);" id="shoucang" data-toggle="tooltip" data-original-title="收藏"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-xihuan"></use></svg>收藏 </a> </span> <a style="margin-left:20px;" href="javascript:(scrollTo());" id="percentage" data-toggle="tooltip" data-original-title="返回顶部"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg>0% </a> </nav> </div> </div> <?php dorzs();?> <script> var btn =document.getElementById("shoucang"); btn.onclick = function() {layer.msg('<p style="font-weight:700;margin:5px;">在键盘上按<span style="padding:5px 10px;background:#f0e7e2;border-radius:8px;color:#202020;margin:0 5px;">Ctrl</span>+<span style="padding:5px 10px;background:#f0e7e2;border-radius:8px;color:#202020;margin:0 5px;">D</span>即可<br>喜欢本站的话记得常来哦！</p>', function(){});}; </script> <!--底部导航-->
CSS代码
这段css其实是文字的抖动跟适应手机屏幕隐藏底部导航栏(可用可不用，不过@media这段建议保留)
/* start */.my-face {animation: my-face 5s infinite ease-in-out;color: #00f1ff;display: inline-block;margin: 0 5px;}@-webkit-keyframes my-face {2%, 24%, 80% {-webkit-transform: translate(0, 1.5px) rotate(1.5deg);transform: translate(0, 1.5px) rotate(1.5deg)}4%, 68%, 98% {-webkit-transform: translate(0, -1.5px) rotate(-.5deg);transform: translate(0, -1.5px) rotate(-.5deg)}38%, 6% {-webkit-transform: translate(0, 1.5px) rotate(-1.5deg);transform: translate(0, 1.5px) rotate(-1.5deg)}8%, 86% {-webkit-transform: translate(0, -1.5px) rotate(-1.5deg);transform: translate(0, -1.5px) rotate(-1.5deg)}10%, 72% {-webkit-transform: translate(0, 2.5px) rotate(1.5deg);transform: translate(0, 2.5px) rotate(1.5deg)}12%, 64%, 78%, 96% {-webkit-transform: translate(0, -.5px) rotate(1.5deg);transform: translate(0, -.5px) rotate(1.5deg)}14%, 54% {-webkit-transform: translate(0, -1.5px) rotate(1.5deg);transform: translate(0, -1.5px) rotate(1.5deg)}16% {-webkit-transform: translate(0, -.5px) rotate(-1.5deg);transform: translate(0, -.5px) rotate(-1.5deg)}18%, 22% {-webkit-transform: translate(0, .5px) rotate(-1.5deg);transform: translate(0, .5px) rotate(-1.5deg)}20%, 36%, 46% {-webkit-transform: translate(0, -1.5px) rotate(2.5deg);transform: translate(0, -1.5px) rotate(2.5deg)}26%, 50% {-webkit-transform: translate(0, .5px) rotate(.5deg);transform: translate(0, .5px) rotate(.5deg)}28% {-webkit-transform: translate(0, .5px) rotate(1.5deg);transform: translate(0, .5px) rotate(1.5deg)}30%, 40%, 62%, 76%, 88% {-webkit-transform: translate(0, -.5px) rotate(2.5deg);transform: translate(0, -.5px) rotate(2.5deg)}32%, 34%, 66% {-webkit-transform: translate(0, 1.5px) rotate(-.5deg);transform: translate(0, 1.5px) rotate(-.5deg)}42% {-webkit-transform: translate(0, 2.5px) rotate(-1.5deg);transform: translate(0, 2.5px) rotate(-1.5deg)}44%, 70% {-webkit-transform: translate(0, 1.5px) rotate(.5deg);transform: translate(0, 1.5px) rotate(.5deg)}48%, 74%, 82% {-webkit-transform: translate(0, -.5px) rotate(.5deg);transform: translate(0, -.5px) rotate(.5deg)}52%, 56%, 60% {-webkit-transform: translate(0, 2.5px) rotate(2.5deg);transform: translate(0, 2.5px) rotate(2.5deg)}58% {-webkit-transform: translate(0, .5px) rotate(2.5deg);transform: translate(0, .5px) rotate(2.5deg)}84% {-webkit-transform: translate(0, 1.5px) rotate(2.5deg);transform: translate(0, 1.5px) rotate(2.5deg)}90% {-webkit-transform: translate(0, 2.5px) rotate(-.5deg);transform: translate(0, 2.5px) rotate(-.5deg)}92% {-webkit-transform: translate(0, .5px) rotate(-.5deg);transform: translate(0, .5px) rotate(-.5deg)}94% {-webkit-transform: translate(0, 2.5px) rotate(.5deg);transform: translate(0, 2.5px) rotate(.5deg)}0%, 100% {-webkit-transform: translate(0, 0) rotate(0);transform: translate(0, 0) rotate(0)}}@keyframes my-face {2%, 24%, 80% {-webkit-transform: translate(0, 1.5px) rotate(1.5deg);transform: translate(0, 1.5px) rotate(1.5deg)}4%, 68%, 98% {-webkit-transform: translate(0, -1.5px) rotate(-.5deg);transform: translate(0, -1.5px) rotate(-.5deg)}38%, 6% {-webkit-transform: translate(0, 1.5px) rotate(-1.5deg);transform: translate(0, 1.5px) rotate(-1.5deg)}8%, 86% {-webkit-transform: translate(0, -1.5px) rotate(-1.5deg);transform: translate(0, -1.5px) rotate(-1.5deg)}10%, 72% {-webkit-transform: translate(0, 2.5px) rotate(1.5deg);transform: translate(0, 2.5px) rotate(1.5deg)}12%, 64%, 78%, 96% {-webkit-transform: translate(0, -.5px) rotate(1.5deg);transform: translate(0, -.5px) rotate(1.5deg)}14%, 54% {-webkit-transform: translate(0, -1.5px) rotate(1.5deg);transform: translate(0, -1.5px) rotate(1.5deg)}16% {-webkit-transform: translate(0, -.5px) rotate(-1.5deg);transform: translate(0, -.5px) rotate(-1.5deg)}18%, 22% {-webkit-transform: translate(0, .5px) rotate(-1.5deg);transform: translate(0, .5px) rotate(-1.5deg)}20%, 36%, 46% {-webkit-transform: translate(0, -1.5px) rotate(2.5deg);transform: translate(0, -1.5px) rotate(2.5deg)}26%, 50% {-webkit-transform: translate(0, .5px) rotate(.5deg);transform: translate(0, .5px) rotate(.5deg)}28% {-webkit-transform: translate(0, .5px) rotate(1.5deg);transform: translate(0, .5px) rotate(1.5deg)}30%, 40%, 62%, 76%, 88% {-webkit-transform: translate(0, -.5px) rotate(2.5deg);transform: translate(0, -.5px) rotate(2.5deg)}32%, 34%, 66% {-webkit-transform: translate(0, 1.5px) rotate(-.5deg);transform: translate(0, 1.5px) rotate(-.5deg)}42% {-webkit-transform: translate(0, 2.5px) rotate(-1.5deg);transform: translate(0, 2.5px) rotate(-1.5deg)}44%, 70% {-webkit-transform: translate(0, 1.5px) rotate(.5deg);transform: translate(0, 1.5px) rotate(.5deg)}48%, 74%, 82% {-webkit-transform: translate(0, -.5px) rotate(.5deg);transform: translate(0, -.5px) rotate(.5deg)}52%, 56%, 60% {-webkit-transform: translate(0, 2.5px) rotate(2.5deg);transform: translate(0, 2.5px) rotate(2.5deg)}58% {-webkit-transform: translate(0, .5px) rotate(2.5deg);transform: translate(0, .5px) rotate(2.5deg)}84% {-webkit-transform: translate(0, 1.5px) rotate(2.5deg);transform: translate(0, 1.5px) rotate(2.5deg)}90% {-webkit-transform: translate(0, 2.5px) rotate(-.5deg);transform: translate(0, 2.5px) rotate(-.5deg)}92% {-webkit-transform: translate(0, .5px) rotate(-.5deg);transform: translate(0, .5px) rotate(-.5deg)}94% {-webkit-transform: translate(0, 2.5px) rotate(.5deg);transform: translate(0, 2.5px) rotate(.5deg)}0%, 100% {-webkit-transform: translate(0, 0) rotate(0);transform: translate(0, 0) rotate(0)}}/* end *//*底部导航*/@media (max-width: 800px){.footwaveline{display: none;}}/* start */ .my-face { animation: my-face 5s infinite ease-in-out; color: #00f1ff; display: inline-block; margin: 0 5px; } @-webkit-keyframes my-face { 2%, 24%, 80% { -webkit-transform: translate(0, 1.5px) rotate(1.5deg); transform: translate(0, 1.5px) rotate(1.5deg) } 4%, 68%, 98% { -webkit-transform: translate(0, -1.5px) rotate(-.5deg); transform: translate(0, -1.5px) rotate(-.5deg) } 38%, 6% { -webkit-transform: translate(0, 1.5px) rotate(-1.5deg); transform: translate(0, 1.5px) rotate(-1.5deg) } 8%, 86% { -webkit-transform: translate(0, -1.5px) rotate(-1.5deg); transform: translate(0, -1.5px) rotate(-1.5deg) } 10%, 72% { -webkit-transform: translate(0, 2.5px) rotate(1.5deg); transform: translate(0, 2.5px) rotate(1.5deg) } 12%, 64%, 78%, 96% { -webkit-transform: translate(0, -.5px) rotate(1.5deg); transform: translate(0, -.5px) rotate(1.5deg) } 14%, 54% { -webkit-transform: translate(0, -1.5px) rotate(1.5deg); transform: translate(0, -1.5px) rotate(1.5deg) } 16% { -webkit-transform: translate(0, -.5px) rotate(-1.5deg); transform: translate(0, -.5px) rotate(-1.5deg) } 18%, 22% { -webkit-transform: translate(0, .5px) rotate(-1.5deg); transform: translate(0, .5px) rotate(-1.5deg) } 20%, 36%, 46% { -webkit-transform: translate(0, -1.5px) rotate(2.5deg); transform: translate(0, -1.5px) rotate(2.5deg) } 26%, 50% { -webkit-transform: translate(0, .5px) rotate(.5deg); transform: translate(0, .5px) rotate(.5deg) } 28% { -webkit-transform: translate(0, .5px) rotate(1.5deg); transform: translate(0, .5px) rotate(1.5deg) } 30%, 40%, 62%, 76%, 88% { -webkit-transform: translate(0, -.5px) rotate(2.5deg); transform: translate(0, -.5px) rotate(2.5deg) } 32%, 34%, 66% { -webkit-transform: translate(0, 1.5px) rotate(-.5deg); transform: translate(0, 1.5px) rotate(-.5deg) } 42% { -webkit-transform: translate(0, 2.5px) rotate(-1.5deg); transform: translate(0, 2.5px) rotate(-1.5deg) } 44%, 70% { -webkit-transform: translate(0, 1.5px) rotate(.5deg); transform: translate(0, 1.5px) rotate(.5deg) } 48%, 74%, 82% { -webkit-transform: translate(0, -.5px) rotate(.5deg); transform: translate(0, -.5px) rotate(.5deg) } 52%, 56%, 60% { -webkit-transform: translate(0, 2.5px) rotate(2.5deg); transform: translate(0, 2.5px) rotate(2.5deg) } 58% { -webkit-transform: translate(0, .5px) rotate(2.5deg); transform: translate(0, .5px) rotate(2.5deg) } 84% { -webkit-transform: translate(0, 1.5px) rotate(2.5deg); transform: translate(0, 1.5px) rotate(2.5deg) } 90% { -webkit-transform: translate(0, 2.5px) rotate(-.5deg); transform: translate(0, 2.5px) rotate(-.5deg) } 92% { -webkit-transform: translate(0, .5px) rotate(-.5deg); transform: translate(0, .5px) rotate(-.5deg) } 94% { -webkit-transform: translate(0, 2.5px) rotate(.5deg); transform: translate(0, 2.5px) rotate(.5deg) } 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0) } } @keyframes my-face { 2%, 24%, 80% { -webkit-transform: translate(0, 1.5px) rotate(1.5deg); transform: translate(0, 1.5px) rotate(1.5deg) } 4%, 68%, 98% { -webkit-transform: translate(0, -1.5px) rotate(-.5deg); transform: translate(0, -1.5px) rotate(-.5deg) } 38%, 6% { -webkit-transform: translate(0, 1.5px) rotate(-1.5deg); transform: translate(0, 1.5px) rotate(-1.5deg) } 8%, 86% { -webkit-transform: translate(0, -1.5px) rotate(-1.5deg); transform: translate(0, -1.5px) rotate(-1.5deg) } 10%, 72% { -webkit-transform: translate(0, 2.5px) rotate(1.5deg); transform: translate(0, 2.5px) rotate(1.5deg) } 12%, 64%, 78%, 96% { -webkit-transform: translate(0, -.5px) rotate(1.5deg); transform: translate(0, -.5px) rotate(1.5deg) } 14%, 54% { -webkit-transform: translate(0, -1.5px) rotate(1.5deg); transform: translate(0, -1.5px) rotate(1.5deg) } 16% { -webkit-transform: translate(0, -.5px) rotate(-1.5deg); transform: translate(0, -.5px) rotate(-1.5deg) } 18%, 22% { -webkit-transform: translate(0, .5px) rotate(-1.5deg); transform: translate(0, .5px) rotate(-1.5deg) } 20%, 36%, 46% { -webkit-transform: translate(0, -1.5px) rotate(2.5deg); transform: translate(0, -1.5px) rotate(2.5deg) } 26%, 50% { -webkit-transform: translate(0, .5px) rotate(.5deg); transform: translate(0, .5px) rotate(.5deg) } 28% { -webkit-transform: translate(0, .5px) rotate(1.5deg); transform: translate(0, .5px) rotate(1.5deg) } 30%, 40%, 62%, 76%, 88% { -webkit-transform: translate(0, -.5px) rotate(2.5deg); transform: translate(0, -.5px) rotate(2.5deg) } 32%, 34%, 66% { -webkit-transform: translate(0, 1.5px) rotate(-.5deg); transform: translate(0, 1.5px) rotate(-.5deg) } 42% { -webkit-transform: translate(0, 2.5px) rotate(-1.5deg); transform: translate(0, 2.5px) rotate(-1.5deg) } 44%, 70% { -webkit-transform: translate(0, 1.5px) rotate(.5deg); transform: translate(0, 1.5px) rotate(.5deg) } 48%, 74%, 82% { -webkit-transform: translate(0, -.5px) rotate(.5deg); transform: translate(0, -.5px) rotate(.5deg) } 52%, 56%, 60% { -webkit-transform: translate(0, 2.5px) rotate(2.5deg); transform: translate(0, 2.5px) rotate(2.5deg) } 58% { -webkit-transform: translate(0, .5px) rotate(2.5deg); transform: translate(0, .5px) rotate(2.5deg) } 84% { -webkit-transform: translate(0, 1.5px) rotate(2.5deg); transform: translate(0, 1.5px) rotate(2.5deg) } 90% { -webkit-transform: translate(0, 2.5px) rotate(-.5deg); transform: translate(0, 2.5px) rotate(-.5deg) } 92% { -webkit-transform: translate(0, .5px) rotate(-.5deg); transform: translate(0, .5px) rotate(-.5deg) } 94% { -webkit-transform: translate(0, 2.5px) rotate(.5deg); transform: translate(0, 2.5px) rotate(.5deg) } 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0) } } /* end */ /*底部导航*/ @media (max-width: 800px){.footwaveline{display: none;}}/* start */ .my-face { animation: my-face 5s infinite ease-in-out; color: #00f1ff; display: inline-block; margin: 0 5px; } @-webkit-keyframes my-face { 2%, 24%, 80% { -webkit-transform: translate(0, 1.5px) rotate(1.5deg); transform: translate(0, 1.5px) rotate(1.5deg) } 4%, 68%, 98% { -webkit-transform: translate(0, -1.5px) rotate(-.5deg); transform: translate(0, -1.5px) rotate(-.5deg) } 38%, 6% { -webkit-transform: translate(0, 1.5px) rotate(-1.5deg); transform: translate(0, 1.5px) rotate(-1.5deg) } 8%, 86% { -webkit-transform: translate(0, -1.5px) rotate(-1.5deg); transform: translate(0, -1.5px) rotate(-1.5deg) } 10%, 72% { -webkit-transform: translate(0, 2.5px) rotate(1.5deg); transform: translate(0, 2.5px) rotate(1.5deg) } 12%, 64%, 78%, 96% { -webkit-transform: translate(0, -.5px) rotate(1.5deg); transform: translate(0, -.5px) rotate(1.5deg) } 14%, 54% { -webkit-transform: translate(0, -1.5px) rotate(1.5deg); transform: translate(0, -1.5px) rotate(1.5deg) } 16% { -webkit-transform: translate(0, -.5px) rotate(-1.5deg); transform: translate(0, -.5px) rotate(-1.5deg) } 18%, 22% { -webkit-transform: translate(0, .5px) rotate(-1.5deg); transform: translate(0, .5px) rotate(-1.5deg) } 20%, 36%, 46% { -webkit-transform: translate(0, -1.5px) rotate(2.5deg); transform: translate(0, -1.5px) rotate(2.5deg) } 26%, 50% { -webkit-transform: translate(0, .5px) rotate(.5deg); transform: translate(0, .5px) rotate(.5deg) } 28% { -webkit-transform: translate(0, .5px) rotate(1.5deg); transform: translate(0, .5px) rotate(1.5deg) } 30%, 40%, 62%, 76%, 88% { -webkit-transform: translate(0, -.5px) rotate(2.5deg); transform: translate(0, -.5px) rotate(2.5deg) } 32%, 34%, 66% { -webkit-transform: translate(0, 1.5px) rotate(-.5deg); transform: translate(0, 1.5px) rotate(-.5deg) } 42% { -webkit-transform: translate(0, 2.5px) rotate(-1.5deg); transform: translate(0, 2.5px) rotate(-1.5deg) } 44%, 70% { -webkit-transform: translate(0, 1.5px) rotate(.5deg); transform: translate(0, 1.5px) rotate(.5deg) } 48%, 74%, 82% { -webkit-transform: translate(0, -.5px) rotate(.5deg); transform: translate(0, -.5px) rotate(.5deg) } 52%, 56%, 60% { -webkit-transform: translate(0, 2.5px) rotate(2.5deg); transform: translate(0, 2.5px) rotate(2.5deg) } 58% { -webkit-transform: translate(0, .5px) rotate(2.5deg); transform: translate(0, .5px) rotate(2.5deg) } 84% { -webkit-transform: translate(0, 1.5px) rotate(2.5deg); transform: translate(0, 1.5px) rotate(2.5deg) } 90% { -webkit-transform: translate(0, 2.5px) rotate(-.5deg); transform: translate(0, 2.5px) rotate(-.5deg) } 92% { -webkit-transform: translate(0, .5px) rotate(-.5deg); transform: translate(0, .5px) rotate(-.5deg) } 94% { -webkit-transform: translate(0, 2.5px) rotate(.5deg); transform: translate(0, 2.5px) rotate(.5deg) } 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0) } } @keyframes my-face { 2%, 24%, 80% { -webkit-transform: translate(0, 1.5px) rotate(1.5deg); transform: translate(0, 1.5px) rotate(1.5deg) } 4%, 68%, 98% { -webkit-transform: translate(0, -1.5px) rotate(-.5deg); transform: translate(0, -1.5px) rotate(-.5deg) } 38%, 6% { -webkit-transform: translate(0, 1.5px) rotate(-1.5deg); transform: translate(0, 1.5px) rotate(-1.5deg) } 8%, 86% { -webkit-transform: translate(0, -1.5px) rotate(-1.5deg); transform: translate(0, -1.5px) rotate(-1.5deg) } 10%, 72% { -webkit-transform: translate(0, 2.5px) rotate(1.5deg); transform: translate(0, 2.5px) rotate(1.5deg) } 12%, 64%, 78%, 96% { -webkit-transform: translate(0, -.5px) rotate(1.5deg); transform: translate(0, -.5px) rotate(1.5deg) } 14%, 54% { -webkit-transform: translate(0, -1.5px) rotate(1.5deg); transform: translate(0, -1.5px) rotate(1.5deg) } 16% { -webkit-transform: translate(0, -.5px) rotate(-1.5deg); transform: translate(0, -.5px) rotate(-1.5deg) } 18%, 22% { -webkit-transform: translate(0, .5px) rotate(-1.5deg); transform: translate(0, .5px) rotate(-1.5deg) } 20%, 36%, 46% { -webkit-transform: translate(0, -1.5px) rotate(2.5deg); transform: translate(0, -1.5px) rotate(2.5deg) } 26%, 50% { -webkit-transform: translate(0, .5px) rotate(.5deg); transform: translate(0, .5px) rotate(.5deg) } 28% { -webkit-transform: translate(0, .5px) rotate(1.5deg); transform: translate(0, .5px) rotate(1.5deg) } 30%, 40%, 62%, 76%, 88% { -webkit-transform: translate(0, -.5px) rotate(2.5deg); transform: translate(0, -.5px) rotate(2.5deg) } 32%, 34%, 66% { -webkit-transform: translate(0, 1.5px) rotate(-.5deg); transform: translate(0, 1.5px) rotate(-.5deg) } 42% { -webkit-transform: translate(0, 2.5px) rotate(-1.5deg); transform: translate(0, 2.5px) rotate(-1.5deg) } 44%, 70% { -webkit-transform: translate(0, 1.5px) rotate(.5deg); transform: translate(0, 1.5px) rotate(.5deg) } 48%, 74%, 82% { -webkit-transform: translate(0, -.5px) rotate(.5deg); transform: translate(0, -.5px) rotate(.5deg) } 52%, 56%, 60% { -webkit-transform: translate(0, 2.5px) rotate(2.5deg); transform: translate(0, 2.5px) rotate(2.5deg) } 58% { -webkit-transform: translate(0, .5px) rotate(2.5deg); transform: translate(0, .5px) rotate(2.5deg) } 84% { -webkit-transform: translate(0, 1.5px) rotate(2.5deg); transform: translate(0, 1.5px) rotate(2.5deg) } 90% { -webkit-transform: translate(0, 2.5px) rotate(-.5deg); transform: translate(0, 2.5px) rotate(-.5deg) } 92% { -webkit-transform: translate(0, .5px) rotate(-.5deg); transform: translate(0, .5px) rotate(-.5deg) } 94% { -webkit-transform: translate(0, 2.5px) rotate(.5deg); transform: translate(0, 2.5px) rotate(.5deg) } 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0) } } /* end */ /*底部导航*/ @media (max-width: 800px){.footwaveline{display: none;}}
JS代码
这段js代码是用来触发滚动条显示百分比的
<!--滚动进度条百分比-->$(function(){var $this=$("#footgundong");var scrollTimer;$this.hover(function(){clearInterval(scrollTimer)},function(){scrollTimer=setInterval(function(){scrollNews($this)},2000)}).trigger("mouseleave");function scrollNews(obj){var $self=obj.find("ul");var lineHeight=$self.find("li:first").height();$self.animate({"marginTop":-lineHeight+"px"},500,function(){$self.css({marginTop:0}).find("li:first").appendTo($self)})}})window.onscroll = function() {let scrollNow = window.pageYOffset;let pageClientHeight = document.documentElement.clientHeight;let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - pageClientHeight;let fullWindowHeightInPercentage = Math.round((scrollNow / scrollHeight) * 100);let percentage = document.getElementById('percentage');percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> ' + fullWindowHeightInPercentage + '%';if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> 到顶啦';if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiasu1"></use></svg> 到底啦';}</script><!--滚动进度条百分比--> $(function(){var $this=$("#footgundong");var scrollTimer;$this.hover(function(){clearInterval(scrollTimer)},function(){scrollTimer=setInterval(function(){scrollNews($this)},2000)}).trigger("mouseleave");function scrollNews(obj){var $self=obj.find("ul");var lineHeight=$self.find("li:first").height();$self.animate({"marginTop":-lineHeight+"px"},500,function(){$self.css({marginTop:0}).find("li:first").appendTo($self)})}}) window.onscroll = function() { let scrollNow = window.pageYOffset; let pageClientHeight = document.documentElement.clientHeight; let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - pageClientHeight; let fullWindowHeightInPercentage = Math.round((scrollNow / scrollHeight) * 100); let percentage = document.getElementById('percentage'); percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> ' + fullWindowHeightInPercentage + '%'; if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> 到顶啦'; if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiasu1"></use></svg> 到底啦'; } </script><!--滚动进度条百分比--> $(function(){var $this=$("#footgundong");var scrollTimer;$this.hover(function(){clearInterval(scrollTimer)},function(){scrollTimer=setInterval(function(){scrollNews($this)},2000)}).trigger("mouseleave");function scrollNews(obj){var $self=obj.find("ul");var lineHeight=$self.find("li:first").height();$self.animate({"marginTop":-lineHeight+"px"},500,function(){$self.css({marginTop:0}).find("li:first").appendTo($self)})}}) window.onscroll = function() { let scrollNow = window.pageYOffset; let pageClientHeight = document.documentElement.clientHeight; let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - pageClientHeight; let fullWindowHeightInPercentage = Math.round((scrollNow / scrollHeight) * 100); let percentage = document.getElementById('percentage'); percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> ' + fullWindowHeightInPercentage + '%'; if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> 到顶啦'; if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiasu1"></use></svg> 到底啦'; } </script>
更新
元旦子比主题更新到了6.1版本，分享按钮代码发生了变动，这里我们也做一下修改：
<a class="share-btn poster" poster-share="<?php the_ID();?>" title="海报分享" href="javascript:;"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享</a><a class="share-btn poster" poster-share="<?php the_ID();?>" title="海报分享" href="javascript:;"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享 </a><a class="share-btn poster" poster-share="<?php the_ID();?>" title="海报分享" href="javascript:;"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享 </a>
子比主题评论区添加夸夸随机一言
美化教程
- 首先需要准备两个文件，这两个文件我直接放在上方，大家自行下载即可！
- 将这两个文件上传到你的网站目录，你也可以在根目录创建一个目录，例如：
cdn，那么访问地址就是：你的网站/api/xx文件（为什么强调这个，因为你需要修改后面的代码中的文件地址，不要使用我的，我加了限制，会使用不了） - 进入
/wp-content/themes/zibll/目录，新建func.php文件，粘贴以下代码：
<?php// 夸夸功能function kuakua(){echo'<link rel="stylesheet" type="text/css" href="https://4bot.cn/cdn/kuakua.css"><a class="but btn-input-expand input-image mr6" id="kuakua" href="javascript:;"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-kuakua"></use></svg><span class="hide-sm">夸夸</span></a><div class="kuakua-div" style="width: 9999px;height: 99999px;background: #000;z-index: 1031;position: fixed;top: 0;left: 0;opacity: .6;display:none"></div><div class="kuakua-first-box"><div class="kuakua-ei"><span class="kuakua-close" title="关闭"><div><svg fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="close" class="sc-eCImPb iRFNEp"><g fill="none" fill-rule="evenodd" stroke="currentColor"><path d="M7.99 7.99L1 1l6.99 6.99L1 14.98l6.99-6.99zm0 0L15 15 7.99 7.99 14.98 1 7.99 7.99z" stroke="currentColor"></path></g></svg></div></span><div><div class="kuakua-column"><section class="kuakua-headerIcon"><svg class="icon kuakua-icon" aria-hidden="true"><use xlink:href="#icon-kuakua"></use></svg></section><span size="16" color="black4" class="kuakua-headerTitle">夸夸</span></div></div><div style="position: relative;display: block;"><div><section class="kuakua-modal-body"><section class="kuakua-contentBox"><span size="18" color="black4" class="kuakua-comment">还有吗！没看够！</span><button type="button" class="kuakua-cancelBtn">换一换</button></section><button type="button" class="kuakua-confirmBtn">夸夸TA</button></section></div></div></div></div><script>$(function(){$(".kuakua-cancelBtn").click(function() {$.getJSON("https://21lhz.cn/cdn/api/yiyanapi.php?encode=kuakua",function(data){$(".kuakua-comment").html(data.quote);$("#comment").text(data.quote);});});});$(".kuakua-confirmBtn").click(function() {$("#submit").trigger("click");$(".kuakua-first-box").hide(150);//隐藏速度$(".kuakua-div").hide(150);//隐藏速度});$("#kuakua").click(function (e) {///*阻止冒泡事件*/$(".kuakua-first-box").show(150);//显示速度$(".kuakua-div").show(150);//显示速度$.getJSON("https://yy.sunzishaokao.com/",function(data){$(".kuakua-comment").html(data.quote);$("#comment").text(data.quote);});e = window.event || e;if (e.stopPropagation) {e.stopPropagation();} else {e.cancelBubble = true;}});$(".kuakua-close").click(function () {$(".kuakua-first-box").hide(150);//隐藏速度$(".kuakua-div").hide(150);//隐藏速度$("#comment").text("");});</script>';}?><?php // 夸夸功能 function kuakua(){ echo'<link rel="stylesheet" type="text/css" href="https://4bot.cn/cdn/kuakua.css"> <a class="but btn-input-expand input-image mr6" id="kuakua" href="javascript:;"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-kuakua"></use></svg><span class="hide-sm">夸夸</span> </a> <div class="kuakua-div" style="width: 9999px;height: 99999px;background: #000;z-index: 1031;position: fixed;top: 0;left: 0;opacity: .6;display:none"></div> <div class="kuakua-first-box"> <div class="kuakua-ei"> <span class="kuakua-close" title="关闭"> <div> <svg fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="close" class="sc-eCImPb iRFNEp"><g fill="none" fill-rule="evenodd" stroke="currentColor"><path d="M7.99 7.99L1 1l6.99 6.99L1 14.98l6.99-6.99zm0 0L15 15 7.99 7.99 14.98 1 7.99 7.99z" stroke="currentColor"></path></g></svg> </div> </span> <div> <div class="kuakua-column"> <section class="kuakua-headerIcon"><svg class="icon kuakua-icon" aria-hidden="true"> <use xlink:href="#icon-kuakua"></use></svg> </section> <span size="16" color="black4" class="kuakua-headerTitle">夸夸</span> </div> </div> <div style="position: relative;display: block;"> <div> <section class="kuakua-modal-body"> <section class="kuakua-contentBox"> <span size="18" color="black4" class="kuakua-comment">还有吗！没看够！</span> <button type="button" class="kuakua-cancelBtn">换一换</button> </section> <button type="button" class="kuakua-confirmBtn">夸夸TA</button> </section> </div> </div> </div> </div> <script> $(function(){ $(".kuakua-cancelBtn").click(function() { $.getJSON("https://21lhz.cn/cdn/api/yiyanapi.php?encode=kuakua",function(data){ $(".kuakua-comment").html(data.quote); $("#comment").text(data.quote); }); }); }); $(".kuakua-confirmBtn").click(function() { $("#submit").trigger("click"); $(".kuakua-first-box").hide(150);//隐藏速度 $(".kuakua-div").hide(150);//隐藏速度 }); $("#kuakua").click(function (e) {// /*阻止冒泡事件*/ $(".kuakua-first-box").show(150);//显示速度 $(".kuakua-div").show(150);//显示速度 $.getJSON("https://yy.sunzishaokao.com/",function(data){ $(".kuakua-comment").html(data.quote); $("#comment").text(data.quote); }); e = window.event || e; if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } }); $(".kuakua-close").click(function () { $(".kuakua-first-box").hide(150);//隐藏速度 $(".kuakua-div").hide(150);//隐藏速度 $("#comment").text(""); }); </script>'; } ?><?php // 夸夸功能 function kuakua(){ echo'<link rel="stylesheet" type="text/css" href="https://4bot.cn/cdn/kuakua.css"> <a class="but btn-input-expand input-image mr6" id="kuakua" href="javascript:;"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-kuakua"></use></svg><span class="hide-sm">夸夸</span> </a> <div class="kuakua-div" style="width: 9999px;height: 99999px;background: #000;z-index: 1031;position: fixed;top: 0;left: 0;opacity: .6;display:none"></div> <div class="kuakua-first-box"> <div class="kuakua-ei"> <span class="kuakua-close" title="关闭"> <div> <svg fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="close" class="sc-eCImPb iRFNEp"><g fill="none" fill-rule="evenodd" stroke="currentColor"><path d="M7.99 7.99L1 1l6.99 6.99L1 14.98l6.99-6.99zm0 0L15 15 7.99 7.99 14.98 1 7.99 7.99z" stroke="currentColor"></path></g></svg> </div> </span> <div> <div class="kuakua-column"> <section class="kuakua-headerIcon"><svg class="icon kuakua-icon" aria-hidden="true"> <use xlink:href="#icon-kuakua"></use></svg> </section> <span size="16" color="black4" class="kuakua-headerTitle">夸夸</span> </div> </div> <div style="position: relative;display: block;"> <div> <section class="kuakua-modal-body"> <section class="kuakua-contentBox"> <span size="18" color="black4" class="kuakua-comment">还有吗！没看够！</span> <button type="button" class="kuakua-cancelBtn">换一换</button> </section> <button type="button" class="kuakua-confirmBtn">夸夸TA</button> </section> </div> </div> </div> </div> <script> $(function(){ $(".kuakua-cancelBtn").click(function() { $.getJSON("https://21lhz.cn/cdn/api/yiyanapi.php?encode=kuakua",function(data){ $(".kuakua-comment").html(data.quote); $("#comment").text(data.quote); }); }); }); $(".kuakua-confirmBtn").click(function() { $("#submit").trigger("click"); $(".kuakua-first-box").hide(150);//隐藏速度 $(".kuakua-div").hide(150);//隐藏速度 }); $("#kuakua").click(function (e) {// /*阻止冒泡事件*/ $(".kuakua-first-box").show(150);//显示速度 $(".kuakua-div").show(150);//显示速度 $.getJSON("https://yy.sunzishaokao.com/",function(data){ $(".kuakua-comment").html(data.quote); $("#comment").text(data.quote); }); e = window.event || e; if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } }); $(".kuakua-close").click(function () { $(".kuakua-first-box").hide(150);//隐藏速度 $(".kuakua-div").hide(150);//隐藏速度 $("#comment").text(""); }); </script>'; } ?>
把https://4bot.cn/cdn/kuakua.css替换为你的kuakua.css文件路径
进入网站后台 => Zibll主题设置 => 全局&功能 => 自定义HTML代码 => 自定义底部HTML代码 中引入js文件（其中的地址也是需要替换为自己的路径）
<script src="https://xx.com/cdn/font_2827587_zt5tfqudn5.js"></script><script src="https://xx.com/cdn/font_2827587_zt5tfqudn5.js"></script><script src="https://xx.com/cdn/font_2827587_zt5tfqudn5.js"></script>
修改主题路径/wp-content/themes/zibll/template/comments.php里87行处添加
然后保存，最后到文章页面刷新即可看到效果
上面的文件下载在根目录创建/cdn 放入
子比主题美化 – 昵称抖音风格字体美化代码
美化教程
css代码放到子比主题自定义css即可。
/*昵称*/.display-name{ text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5); animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);}@keyframes shake-it{ 0%{ text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5); } 25%{ text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5); } 50%{ text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5); } 100%{ text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5); }}/*1*//*昵称*/.display-name{ text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5); animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);}@keyframes shake-it{ 0%{ text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5); } 25%{ text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5); } 50%{ text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5); } 100%{ text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5); }}/*1*//*昵称*/.display-name{ text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5); animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);}@keyframes shake-it{ 0%{ text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5); } 25%{ text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5); } 50%{ text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5); } 100%{ text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5); }}/*1*/
子比主题美化 – 主题右侧新版悬浮导航美化版本修正版本
美化教程
添加教程第一步首先就是添加CSS，zibll主题设置—全局功能—自定义代码—自定义CSS样式添加以下CSS代码
.gotop {position: fixed;bottom: 20%;right: 1%;z-index: 999;}.gotop-box{box-shadow: 0 4px 23px rgba(0, 0, 0, 0.08);border-radius: 8px;background: #fff;}.gotop .gotop-item{color: rgba(23,23,24,0.8);text-align: center;cursor: pointer;width: 54px;padding-bottom: 10px;box-sizing: initial;align-items: center;display: block;}.gotop .gotop-item i{font-size: 22px!important;z-index: 2;position: relative;color: #171718;}.gotop .gotop-item a{color: rgba(23,23,24,0.8);font-size: 12px;text-decoration: none;}.gotop .gotop-item a:hover{color: var(--primary-color)!important;}.gotop .gotop-item img{width: 24px;}.gotop .gotop-item p.text{font-size: 12px;margin-top: 5px;}.gotop .gotop-item:hover p.text{color: var(--primary-color)!important;}.gotop .gotop-item.gotops{display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;}.ceo-pt-wx{width: 300px;}.ceo-pt-wx img{height: 200px;}.gotop .activity{background: transparent;position: relative;height: 128px;padding-bottom: 0;}.gotop .activity a{display: block;}.gotop .activity .a1{width: 100%;height: 100%;border-radius: 7px 7px 0px 0px;}.gotop .activity .a2{position: absolute;bottom: 10px;left: 10px;width: 33px;height: 43px;animation: red-envelope-shake 0.8s linear infinite;transition: all .3s;}@keyframes red-envelope-shake {0% { transform: rotate(-7deg) }50% { transform: rotate(7deg) }100% {transform: rotate(-7deg) }}@keyframes turnX{0%{transform:rotateX(0deg);}100%{transform:rotateX(360deg);}}.gotop .activity .popover {position: absolute;width: 251px;height: 128px;right: 0;left: -196px;bottom: 0;display: none;}.gotop .activity:hover .popover {display: block;}.gotop-box .gotop-vip{background: linear-gradient(10deg,#fedd92,#fef6e1);color: #803300;padding-top: 10px;margin-bottom: 10px;}.gotop-box .gotop-vip a{color: #803300!important;}.gotop-box .gotop-vip:hover p.text{color: #803300!important;font-weight: 600;}.gotop-service{position: relative;}.gotop-service:hover .gotop-service-box {display: block;transition: all .3s;}.gotop-service-box {display: none;position: absolute;z-index: 999;right: 55px;bottom: 0px;width: 150px;padding: 20px;text-align: center;border-radius: 4px;-webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.05);box-shadow: 0 0 3px 1px rgba(0,0,0,.05);transition: all .3s;background: #fff;}.gotop-service-box .tops{text-align: center;margin-bottom: 15px;padding-bottom: 10px;border-bottom: 1px solid #edf1f2;}.gotop-service-box .tops img{}.gotop-service-box .tops a{display: block;height: 26px;line-height: 26px;margin: 15px auto 10px auto;border: 1px solid #b5b9bc;font-size: 12px;border-radius: 4px;}.gotop-service-box .tops a:hover{background:#fff0;color: var(--primary-color)!important;border: 1px solid var(--primary-color)!important;}.gotop-service-box .tops p{font-size: 13px;}.gotop-service-box .btms{text-align: center;}.gotop-service-box .btms em{font-size: 14px;color: #5f6575;font-weight: 500;margin-bottom: 10px;height: 20px;line-height: 20px;display: block;}.gotop-service-box .btms p{height: 25px;font-weight: 500;line-height: 25px;font-size: 18px;color: #4775FF;margin-bottom: 10px;display: inline-block;}.gotop-service-box .btms span{height: 25px;line-height: 25px;overflow: hidden;font-size: 12px;color: #FF5151;margin-bottom: 10px;}.gotop-wx-box {margin-bottom: 15px;}.gotop-wx-box .boxs p{font-size: 14px;color: #5f6575;font-weight: 500;margin-bottom: 10px;height: 20px;line-height: 20px;}.gotop-wx-box .boxs img {width: 100%;height: 100%;display: block;margin-top: 10px;padding: 5px;border: 1px solid var(--border-color);margin: 10px auto 0px auto;}.gotop-ma{position: relative;}.gotop-ma:hover .gotop-ma-box {display: block;transition: all .3s;}.gotop-ma-box {display: none;position: absolute;z-index: 999;right: 54px;bottom: 0px;width: 170px;padding: 10px;text-align: center;border-radius: 4px;-webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.05);box-shadow: 0 0 3px 1px rgba(0,0,0,.05);transition: all .3s;background: var(--primary-color);}.gotop-ma-box i{display: block;width: 31px;height: 5px;margin: 0 auto 10px;border-radius: 2px;background: #6f96ff;}.gotop-ma-box em{display: block;margin: 10px auto 0;width: 20px;height: 20px;border-radius: 100%;background: #6f96ff;}.gotop-ma-box .tops{padding: 10px;background: #fff;border-radius: 4px;text-align: center;}.gotop-ma-box .tops p{font-size: 12px;color: #5f6575;overflow: hidden;height: 23px;line-height: 23px;}.gotop-ma-box .tops img {width: 100%;height: 100%;display: block;margin-top: 10px;margin: 10px auto 0px auto;}@media screen and (max-width: 767px) {.gotop {display: none !important;}}.gotop { position: fixed; bottom: 20%; right: 1%; z-index: 999; } .gotop-box{ box-shadow: 0 4px 23px rgba(0, 0, 0, 0.08); border-radius: 8px; background: #fff; } .gotop .gotop-item{ color: rgba(23,23,24,0.8); text-align: center; cursor: pointer; width: 54px; padding-bottom: 10px; box-sizing: initial; align-items: center; display: block; } .gotop .gotop-item i{ font-size: 22px!important; z-index: 2; position: relative; color: #171718; } .gotop .gotop-item a{ color: rgba(23,23,24,0.8); font-size: 12px; text-decoration: none; } .gotop .gotop-item a:hover{ color: var(--primary-color)!important; } .gotop .gotop-item img{ width: 24px; } .gotop .gotop-item p.text{ font-size: 12px; margin-top: 5px; } .gotop .gotop-item:hover p.text{ color: var(--primary-color)!important; } .gotop .gotop-item.gotops{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .ceo-pt-wx{ width: 300px; } .ceo-pt-wx img{ height: 200px; } .gotop .activity{ background: transparent; position: relative; height: 128px; padding-bottom: 0; } .gotop .activity a{ display: block; } .gotop .activity .a1{ width: 100%; height: 100%; border-radius: 7px 7px 0px 0px; } .gotop .activity .a2{ position: absolute; bottom: 10px; left: 10px; width: 33px; height: 43px; animation: red-envelope-shake 0.8s linear infinite; transition: all .3s; } @keyframes red-envelope-shake { 0% { transform: rotate(-7deg) } 50% { transform: rotate(7deg) } 100% {transform: rotate(-7deg) } } @keyframes turnX{ 0%{transform:rotateX(0deg);} 100%{transform:rotateX(360deg);} } .gotop .activity .popover { position: absolute; width: 251px; height: 128px; right: 0; left: -196px; bottom: 0; display: none; } .gotop .activity:hover .popover { display: block; } .gotop-box .gotop-vip{ background: linear-gradient(10deg,#fedd92,#fef6e1); color: #803300; padding-top: 10px; margin-bottom: 10px; } .gotop-box .gotop-vip a{ color: #803300!important; } .gotop-box .gotop-vip:hover p.text{ color: #803300!important; font-weight: 600; } .gotop-service{ position: relative; } .gotop-service:hover .gotop-service-box { display: block; transition: all .3s; } .gotop-service-box { display: none; position: absolute; z-index: 999; right: 55px; bottom: 0px; width: 150px; padding: 20px; text-align: center; border-radius: 4px; -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.05); box-shadow: 0 0 3px 1px rgba(0,0,0,.05); transition: all .3s; background: #fff; } .gotop-service-box .tops{ text-align: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #edf1f2; } .gotop-service-box .tops img{ } .gotop-service-box .tops a{ display: block; height: 26px; line-height: 26px; margin: 15px auto 10px auto; border: 1px solid #b5b9bc; font-size: 12px; border-radius: 4px; } .gotop-service-box .tops a:hover{ background:#fff0; color: var(--primary-color)!important; border: 1px solid var(--primary-color)!important; } .gotop-service-box .tops p{ font-size: 13px; } .gotop-service-box .btms{ text-align: center; } .gotop-service-box .btms em{ font-size: 14px; color: #5f6575; font-weight: 500; margin-bottom: 10px; height: 20px; line-height: 20px; display: block; } .gotop-service-box .btms p{ height: 25px; font-weight: 500; line-height: 25px; font-size: 18px; color: #4775FF; margin-bottom: 10px; display: inline-block; } .gotop-service-box .btms span{ height: 25px; line-height: 25px; overflow: hidden; font-size: 12px; color: #FF5151; margin-bottom: 10px; } .gotop-wx-box { margin-bottom: 15px; } .gotop-wx-box .boxs p{ font-size: 14px; color: #5f6575; font-weight: 500; margin-bottom: 10px; height: 20px; line-height: 20px; } .gotop-wx-box .boxs img { width: 100%; height: 100%; display: block; margin-top: 10px; padding: 5px; border: 1px solid var(--border-color); margin: 10px auto 0px auto; } .gotop-ma{ position: relative; } .gotop-ma:hover .gotop-ma-box { display: block; transition: all .3s; } .gotop-ma-box { display: none; position: absolute; z-index: 999; right: 54px; bottom: 0px; width: 170px; padding: 10px; text-align: center; border-radius: 4px; -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.05); box-shadow: 0 0 3px 1px rgba(0,0,0,.05); transition: all .3s; background: var(--primary-color); } .gotop-ma-box i{ display: block; width: 31px; height: 5px; margin: 0 auto 10px; border-radius: 2px; background: #6f96ff; } .gotop-ma-box em{ display: block; margin: 10px auto 0; width: 20px; height: 20px; border-radius: 100%; background: #6f96ff; } .gotop-ma-box .tops{ padding: 10px; background: #fff; border-radius: 4px; text-align: center; } .gotop-ma-box .tops p{ font-size: 12px; color: #5f6575; overflow: hidden; height: 23px; line-height: 23px; } .gotop-ma-box .tops img { width: 100%; height: 100%; display: block; margin-top: 10px; margin: 10px auto 0px auto; } @media screen and (max-width: 767px) { .gotop { display: none !important; } }.gotop { position: fixed; bottom: 20%; right: 1%; z-index: 999; } .gotop-box{ box-shadow: 0 4px 23px rgba(0, 0, 0, 0.08); border-radius: 8px; background: #fff; } .gotop .gotop-item{ color: rgba(23,23,24,0.8); text-align: center; cursor: pointer; width: 54px; padding-bottom: 10px; box-sizing: initial; align-items: center; display: block; } .gotop .gotop-item i{ font-size: 22px!important; z-index: 2; position: relative; color: #171718; } .gotop .gotop-item a{ color: rgba(23,23,24,0.8); font-size: 12px; text-decoration: none; } .gotop .gotop-item a:hover{ color: var(--primary-color)!important; } .gotop .gotop-item img{ width: 24px; } .gotop .gotop-item p.text{ font-size: 12px; margin-top: 5px; } .gotop .gotop-item:hover p.text{ color: var(--primary-color)!important; } .gotop .gotop-item.gotops{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .ceo-pt-wx{ width: 300px; } .ceo-pt-wx img{ height: 200px; } .gotop .activity{ background: transparent; position: relative; height: 128px; padding-bottom: 0; } .gotop .activity a{ display: block; } .gotop .activity .a1{ width: 100%; height: 100%; border-radius: 7px 7px 0px 0px; } .gotop .activity .a2{ position: absolute; bottom: 10px; left: 10px; width: 33px; height: 43px; animation: red-envelope-shake 0.8s linear infinite; transition: all .3s; } @keyframes red-envelope-shake { 0% { transform: rotate(-7deg) } 50% { transform: rotate(7deg) } 100% {transform: rotate(-7deg) } } @keyframes turnX{ 0%{transform:rotateX(0deg);} 100%{transform:rotateX(360deg);} } .gotop .activity .popover { position: absolute; width: 251px; height: 128px; right: 0; left: -196px; bottom: 0; display: none; } .gotop .activity:hover .popover { display: block; } .gotop-box .gotop-vip{ background: linear-gradient(10deg,#fedd92,#fef6e1); color: #803300; padding-top: 10px; margin-bottom: 10px; } .gotop-box .gotop-vip a{ color: #803300!important; } .gotop-box .gotop-vip:hover p.text{ color: #803300!important; font-weight: 600; } .gotop-service{ position: relative; } .gotop-service:hover .gotop-service-box { display: block; transition: all .3s; } .gotop-service-box { display: none; position: absolute; z-index: 999; right: 55px; bottom: 0px; width: 150px; padding: 20px; text-align: center; border-radius: 4px; -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.05); box-shadow: 0 0 3px 1px rgba(0,0,0,.05); transition: all .3s; background: #fff; } .gotop-service-box .tops{ text-align: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #edf1f2; } .gotop-service-box .tops img{ } .gotop-service-box .tops a{ display: block; height: 26px; line-height: 26px; margin: 15px auto 10px auto; border: 1px solid #b5b9bc; font-size: 12px; border-radius: 4px; } .gotop-service-box .tops a:hover{ background:#fff0; color: var(--primary-color)!important; border: 1px solid var(--primary-color)!important; } .gotop-service-box .tops p{ font-size: 13px; } .gotop-service-box .btms{ text-align: center; } .gotop-service-box .btms em{ font-size: 14px; color: #5f6575; font-weight: 500; margin-bottom: 10px; height: 20px; line-height: 20px; display: block; } .gotop-service-box .btms p{ height: 25px; font-weight: 500; line-height: 25px; font-size: 18px; color: #4775FF; margin-bottom: 10px; display: inline-block; } .gotop-service-box .btms span{ height: 25px; line-height: 25px; overflow: hidden; font-size: 12px; color: #FF5151; margin-bottom: 10px; } .gotop-wx-box { margin-bottom: 15px; } .gotop-wx-box .boxs p{ font-size: 14px; color: #5f6575; font-weight: 500; margin-bottom: 10px; height: 20px; line-height: 20px; } .gotop-wx-box .boxs img { width: 100%; height: 100%; display: block; margin-top: 10px; padding: 5px; border: 1px solid var(--border-color); margin: 10px auto 0px auto; } .gotop-ma{ position: relative; } .gotop-ma:hover .gotop-ma-box { display: block; transition: all .3s; } .gotop-ma-box { display: none; position: absolute; z-index: 999; right: 54px; bottom: 0px; width: 170px; padding: 10px; text-align: center; border-radius: 4px; -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.05); box-shadow: 0 0 3px 1px rgba(0,0,0,.05); transition: all .3s; background: var(--primary-color); } .gotop-ma-box i{ display: block; width: 31px; height: 5px; margin: 0 auto 10px; border-radius: 2px; background: #6f96ff; } .gotop-ma-box em{ display: block; margin: 10px auto 0; width: 20px; height: 20px; border-radius: 100%; background: #6f96ff; } .gotop-ma-box .tops{ padding: 10px; background: #fff; border-radius: 4px; text-align: center; } .gotop-ma-box .tops p{ font-size: 12px; color: #5f6575; overflow: hidden; height: 23px; line-height: 23px; } .gotop-ma-box .tops img { width: 100%; height: 100%; display: block; margin-top: 10px; margin: 10px auto 0px auto; } @media screen and (max-width: 767px) { .gotop { display: none !important; } }
第二步骤就是在zibll主题设置—全局功能—自定义代码—自定义底部HTML代码添加以下代码
<div class="gotop"><div class="gotop-box"><div class="gotop-item activity"><a href="/user/rebate"><img src="/images/zbfox-follow-activity-1.png" alt="activity" class="a1"><img src="/images/zbfox-follow-activity-2.png" alt="activity" class="a2"><div class="popover" style="background: url(图片链接) no-repeat center/cover;"></div></a></div><div class="gotop-item gotop-vip"><a class="vip-buy vip-btn pay-vip" vip-level="2" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员"><img src="/images/zbfox-follow-vip.svg" alt="会员"><p class="text">会员</p></a></div><div class="gotop-item"><a href="javascript:;" class="toggle-theme toggle-radius"><i class="fa fa-toggle-theme"> </i></a><p id="themeText" class="text">昼夜</p></div><div class="gotop-item"><a class="initiate-checkin" href="javascript:;" form-action="user_checkin" ed-text="每日签到"><img src="/images/zbfox-follow-sign.gif" alt="签到"><p class="text">签到</p></a></div><div class="gotop-item"><a href="/choujiang"><img src="/images/zbfox-choujiang.svg" alt="抽奖"><p class="text">抽奖</p></a></div><div class="gotop-item gotop-service"><img src="/images/zbfox-kefu.svg" alt="客服"><p class="text">客服</p><div class="gotop-service-box"><div class="tops"><img src="/images/zbfox-follow-service-qq.png" alt="点击联系站长"><a href="http://wpa.qq.com/msgrd?v=3&uin=1427145484&site=qq&menu=yes" class="topsqq" rel="noreferrer nofollow">点击联系站长</a><p>在线时间<br>12:00 - 22:00</p></div><div class="gotop-wx-box"><div class="boxs"><p>关注微信公众号</p><img src="图片链接" alt="关注微信公众号"></div></div><div class="btms"><em>交流QQ群</em><p>00000000</p><em>站长邮箱</em><span>admin@h-an.cn</span></div></div></div><div class="gotop-item gotops hide-on-scroll" id="gotops" style="display: none;"><a href="javascript:(scrollTo());"><img src="/images/zbfox-follow-gotop.png" alt="TOP"><p>TOP</p></a></div></div></div><script>// 当页面加载完成后执行jQuery(document).ready(function($) {// 获取返回顶部按钮var $gotop = $('.gotop-item.gotops');// 监听滚动事件$(window).scroll(function() {// 如果滚动超过了200px，显示返回顶部按钮，否则隐藏if ($(this).scrollTop() > 200) {$gotop.fadeIn();} else {$gotop.fadeOut();}});// 返回顶部按钮点击事件$gotop.click(function() {$('html, body').animate({ scrollTop: 0 }, 800);return false;});});</script><div class="gotop"> <div class="gotop-box"> <div class="gotop-item activity"> <a href="/user/rebate"> <img src="/images/zbfox-follow-activity-1.png" alt="activity" class="a1"> <img src="/images/zbfox-follow-activity-2.png" alt="activity" class="a2"> <div class="popover" style="background: url(图片链接) no-repeat center/cover;"></div> </a> </div> <div class="gotop-item gotop-vip"> <a class="vip-buy vip-btn pay-vip" vip-level="2" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员"> <img src="/images/zbfox-follow-vip.svg" alt="会员"> <p class="text">会员</p> </a> </div> <div class="gotop-item"> <a href="javascript:;" class="toggle-theme toggle-radius"> <i class="fa fa-toggle-theme"> </i> </a> <p id="themeText" class="text">昼夜</p> </div> <div class="gotop-item"> <a class="initiate-checkin" href="javascript:;" form-action="user_checkin" ed-text="每日签到"> <img src="/images/zbfox-follow-sign.gif" alt="签到"> <p class="text">签到</p> </a> </div> <div class="gotop-item"> <a href="/choujiang"> <img src="/images/zbfox-choujiang.svg" alt="抽奖"> <p class="text">抽奖</p> </a> </div> <div class="gotop-item gotop-service"> <img src="/images/zbfox-kefu.svg" alt="客服"> <p class="text">客服</p> <div class="gotop-service-box"> <div class="tops"> <img src="/images/zbfox-follow-service-qq.png" alt="点击联系站长"> <a href="http://wpa.qq.com/msgrd?v=3&uin=1427145484&site=qq&menu=yes" class="topsqq" rel="noreferrer nofollow">点击联系站长</a> <p>在线时间<br>12:00 - 22:00</p> </div> <div class="gotop-wx-box"> <div class="boxs"> <p>关注微信公众号</p> <img src="图片链接" alt="关注微信公众号"> </div> </div> <div class="btms"> <em>交流QQ群</em> <p>00000000</p> <em>站长邮箱</em> <span>admin@h-an.cn</span> </div> </div> </div> <div class="gotop-item gotops hide-on-scroll" id="gotops" style="display: none;"> <a href="javascript:(scrollTo());"> <img src="/images/zbfox-follow-gotop.png" alt="TOP"> <p>TOP</p> </a> </div> </div> </div> <script> // 当页面加载完成后执行 jQuery(document).ready(function($) { // 获取返回顶部按钮 var $gotop = $('.gotop-item.gotops'); // 监听滚动事件 $(window).scroll(function() { // 如果滚动超过了200px，显示返回顶部按钮，否则隐藏 if ($(this).scrollTop() > 200) { $gotop.fadeIn(); } else { $gotop.fadeOut(); } }); // 返回顶部按钮点击事件 $gotop.click(function() { $('html, body').animate({ scrollTop: 0 }, 800); return false; }); }); </script><div class="gotop"> <div class="gotop-box"> <div class="gotop-item activity"> <a href="/user/rebate"> <img src="/images/zbfox-follow-activity-1.png" alt="activity" class="a1"> <img src="/images/zbfox-follow-activity-2.png" alt="activity" class="a2"> <div class="popover" style="background: url(图片链接) no-repeat center/cover;"></div> </a> </div> <div class="gotop-item gotop-vip"> <a class="vip-buy vip-btn pay-vip" vip-level="2" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员"> <img src="/images/zbfox-follow-vip.svg" alt="会员"> <p class="text">会员</p> </a> </div> <div class="gotop-item"> <a href="javascript:;" class="toggle-theme toggle-radius"> <i class="fa fa-toggle-theme"> </i> </a> <p id="themeText" class="text">昼夜</p> </div> <div class="gotop-item"> <a class="initiate-checkin" href="javascript:;" form-action="user_checkin" ed-text="每日签到"> <img src="/images/zbfox-follow-sign.gif" alt="签到"> <p class="text">签到</p> </a> </div> <div class="gotop-item"> <a href="/choujiang"> <img src="/images/zbfox-choujiang.svg" alt="抽奖"> <p class="text">抽奖</p> </a> </div> <div class="gotop-item gotop-service"> <img src="/images/zbfox-kefu.svg" alt="客服"> <p class="text">客服</p> <div class="gotop-service-box"> <div class="tops"> <img src="/images/zbfox-follow-service-qq.png" alt="点击联系站长"> <a href="http://wpa.qq.com/msgrd?v=3&uin=1427145484&site=qq&menu=yes" class="topsqq" rel="noreferrer nofollow">点击联系站长</a> <p>在线时间<br>12:00 - 22:00</p> </div> <div class="gotop-wx-box"> <div class="boxs"> <p>关注微信公众号</p> <img src="图片链接" alt="关注微信公众号"> </div> </div> <div class="btms"> <em>交流QQ群</em> <p>00000000</p> <em>站长邮箱</em> <span>admin@h-an.cn</span> </div> </div> </div> <div class="gotop-item gotops hide-on-scroll" id="gotops" style="display: none;"> <a href="javascript:(scrollTo());"> <img src="/images/zbfox-follow-gotop.png" alt="TOP"> <p>TOP</p> </a> </div> </div> </div> <script> // 当页面加载完成后执行 jQuery(document).ready(function($) { // 获取返回顶部按钮 var $gotop = $('.gotop-item.gotops'); // 监听滚动事件 $(window).scroll(function() { // 如果滚动超过了200px，显示返回顶部按钮，否则隐藏 if ($(this).scrollTop() > 200) { $gotop.fadeIn(); } else { $gotop.fadeOut(); } }); // 返回顶部按钮点击事件 $gotop.click(function() { $('html, body').animate({ scrollTop: 0 }, 800); return false; }); }); </script>
记得本地化一下图片，在网站根目录新建名叫“images”的文件夹，并把压缩包放进去解压即可
图片下载：下载:https://yunmonet.lanzn.com/iNTTn27i8xwb 密码:mryt
子比主题美化-右下角提示美化
美化前:
美化后：
美化教程
子比主题美化-添加文章评论常用语功能
美化教程
在后台 >> Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式，添加如下CSS代码：
/*常用语样式*/.wiiuii-words-li{margin:5px auto;padding:5px;background:var(--body-bg-color);border-radius:var(--main-radius)}.wiiuii-words-li:hover{background:var(--float-btn-bg)}/*常用语样式*/ .wiiuii-words-li{margin:5px auto;padding:5px;background:var(--body-bg-color);border-radius:var(--main-radius)} .wiiuii-words-li:hover{background:var(--float-btn-bg)}/*常用语样式*/ .wiiuii-words-li{margin:5px auto;padding:5px;background:var(--body-bg-color);border-radius:var(--main-radius)} .wiiuii-words-li:hover{background:var(--float-btn-bg)}
在后台 >> Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义javascript代码，添加如下jQuery代码：
// 评论常用语$('.wiiuii-words-li').on('click', function() {var $wiiuii_comment = $('#comment');var wiiuii_com_text = $(this).find('span').text();var wiiuii_com_original = $wiiuii_comment.val();$wiiuii_comment.val(wiiuii_com_original ? wiiuii_com_original + ' ' + wiiuii_com_text : wiiuii_com_text);$('.wiui_words').removeClass('open');});// 评论常用语 $('.wiiuii-words-li').on('click', function() { var $wiiuii_comment = $('#comment'); var wiiuii_com_text = $(this).find('span').text(); var wiiuii_com_original = $wiiuii_comment.val(); $wiiuii_comment.val(wiiuii_com_original ? wiiuii_com_original + ' ' + wiiuii_com_text : wiiuii_com_text); $('.wiui_words').removeClass('open'); });// 评论常用语 $('.wiiuii-words-li').on('click', function() { var $wiiuii_comment = $('#comment'); var wiiuii_com_text = $(this).find('span').text(); var wiiuii_com_original = $wiiuii_comment.val(); $wiiuii_comment.val(wiiuii_com_original ? wiiuii_com_original + ' ' + wiiuii_com_text : wiiuii_com_text); $('.wiui_words').removeClass('open'); });
第一步：在“../zibll/template/comments.php”子比主题的 template 目录下“comments.php”文件，搜索 smilie 在上方位置添加如下代码：
// 常用语函数if (_pz('comment_words', true)) {echo zib_get_input_expand_but('wiui_words');}// 常用语函数 if (_pz('comment_words', true)) { echo zib_get_input_expand_but('wiui_words'); }// 常用语函数 if (_pz('comment_words', true)) { echo zib_get_input_expand_but('wiui_words'); }
第二步：在“../zibll/inc/functions/functions.php”子比主题的template目录下“functions.php”文件，搜索 smilie 在“表情”上方位置添加如下代码：
子比主题美化-会员开通引导区块
美化教程 by.执笔
代码放至顶部全区块或文章内容上方、文章页顶部全区块——自定义 HTML：
<div class="n_banner_inner"><div class="img-info">!<div class="info">也想出现在这里？<a rel="nofollow noopener noreferrer" href="https://4bot.cn/?golink=aHR0cHM6Ly9xbS5xcS5jb20vcS9TdkNkU1lMbVVp" target="_blank">联系我们</a>吧</div></div><a class="pay-vip" href="javascript:;"><div class="Banner-adTag">广告</div><img class="tirr" src="https://bu.dusays.com/2024/05/27/665488ab063a6.gif" alt="执笔博客"></a></div><style>/*定位*/.n_banner_inner {position: relative;}/*提示信息*/.n_banner_inner .img-info {position: absolute;right: 12px;top: 9px;padding: 0;text-align: right;color: #fff;}.n_banner_inner .img-info i {position: relative;display: inline-block;color: #007bff;font-size: 20px;line-height: 19px;text-align: center;z-index: 9;font-style: inherit;}.n_banner_inner .img-info .info {position: absolute;bottom: 5px;right: 0;width: 0;padding: 5px 0;overflow: hidden;background: #007bff;border-radius: 10px;line-height: 10px;text-align: center;font-size: 10px;color: #fff;white-space: nowrap;-webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;-moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;-ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;-o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;}.n_banner_inner .img-info .info a {color: #fff;}.n_banner_inner .tirr {max-width: 100%;height: auto;transition: 0.5s;border-radius: 5px;}/*触发 Hover*/.n_banner_inner:hover .info {width: auto;padding: 5px 23px 5px 12px;-webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;-moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;-ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;-o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;font-size: 12px;z-index: 1;}.n_banner_inner img:hover {filter: brightness(50%);}/*出发声明 hover*/.n_banner_inner .info:hover a {color: red;text-decoration: none;}/*左下角广告*/.n_banner_inner .Banner-adTag {position: absolute;left: 5px;bottom: 5px;width: 50px;border: 1px solid #ebebeb;border-radius: 3px;color: #ebebeb;opacity: 0.5;font-size: 12px;line-height: 20px;text-align: center;}@media screen and (max-width: 768px) {.n_banner_inner .img-info {display: none;}}.container {width: 100%;}.zib-widget {clear: both;background: #fff0;padding: 0px;box-shadow: 0 0 0px var(--main-shadow);border-radius: var(--main-radius);margin-bottom: 20px;}</style><div class="n_banner_inner"> <div class="img-info">! <div class="info">也想出现在这里？ <a rel="nofollow noopener noreferrer" href="https://4bot.cn/?golink=aHR0cHM6Ly9xbS5xcS5jb20vcS9TdkNkU1lMbVVp" target="_blank">联系我们</a>吧</div> </div> <a class="pay-vip" href="javascript:;"> <div class="Banner-adTag">广告</div> <img class="tirr" src="https://bu.dusays.com/2024/05/27/665488ab063a6.gif" alt="执笔博客"> </a> </div> <style> /*定位*/ .n_banner_inner { position: relative; } /*提示信息*/ .n_banner_inner .img-info { position: absolute; right: 12px; top: 9px; padding: 0; text-align: right; color: #fff; } .n_banner_inner .img-info i { position: relative; display: inline-block; color: #007bff; font-size: 20px; line-height: 19px; text-align: center; z-index: 9; font-style: inherit; } .n_banner_inner .img-info .info { position: absolute; bottom: 5px; right: 0; width: 0; padding: 5px 0; overflow: hidden; background: #007bff; border-radius: 10px; line-height: 10px; text-align: center; font-size: 10px; color: #fff; white-space: nowrap; -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; } .n_banner_inner .img-info .info a { color: #fff; } .n_banner_inner .tirr { max-width: 100%; height: auto; transition: 0.5s; border-radius: 5px; } /*触发 Hover*/ .n_banner_inner:hover .info { width: auto; padding: 5px 23px 5px 12px; -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; font-size: 12px; z-index: 1; } .n_banner_inner img:hover { filter: brightness(50%); } /*出发声明 hover*/ .n_banner_inner .info:hover a { color: red; text-decoration: none; } /*左下角广告*/ .n_banner_inner .Banner-adTag { position: absolute; left: 5px; bottom: 5px; width: 50px; border: 1px solid #ebebeb; border-radius: 3px; color: #ebebeb; opacity: 0.5; font-size: 12px; line-height: 20px; text-align: center; } @media screen and (max-width: 768px) { .n_banner_inner .img-info { display: none; } } .container { width: 100%; } .zib-widget { clear: both; background: #fff0; padding: 0px; box-shadow: 0 0 0px var(--main-shadow); border-radius: var(--main-radius); margin-bottom: 20px; } </style><div class="n_banner_inner"> <div class="img-info">! <div class="info">也想出现在这里？ <a rel="nofollow noopener noreferrer" href="https://4bot.cn/?golink=aHR0cHM6Ly9xbS5xcS5jb20vcS9TdkNkU1lMbVVp" target="_blank">联系我们</a>吧</div> </div> <a class="pay-vip" href="javascript:;"> <div class="Banner-adTag">广告</div> <img class="tirr" src="https://bu.dusays.com/2024/05/27/665488ab063a6.gif" alt="执笔博客"> </a> </div> <style> /*定位*/ .n_banner_inner { position: relative; } /*提示信息*/ .n_banner_inner .img-info { position: absolute; right: 12px; top: 9px; padding: 0; text-align: right; color: #fff; } .n_banner_inner .img-info i { position: relative; display: inline-block; color: #007bff; font-size: 20px; line-height: 19px; text-align: center; z-index: 9; font-style: inherit; } .n_banner_inner .img-info .info { position: absolute; bottom: 5px; right: 0; width: 0; padding: 5px 0; overflow: hidden; background: #007bff; border-radius: 10px; line-height: 10px; text-align: center; font-size: 10px; color: #fff; white-space: nowrap; -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; } .n_banner_inner .img-info .info a { color: #fff; } .n_banner_inner .tirr { max-width: 100%; height: auto; transition: 0.5s; border-radius: 5px; } /*触发 Hover*/ .n_banner_inner:hover .info { width: auto; padding: 5px 23px 5px 12px; -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important; font-size: 12px; z-index: 1; } .n_banner_inner img:hover { filter: brightness(50%); } /*出发声明 hover*/ .n_banner_inner .info:hover a { color: red; text-decoration: none; } /*左下角广告*/ .n_banner_inner .Banner-adTag { position: absolute; left: 5px; bottom: 5px; width: 50px; border: 1px solid #ebebeb; border-radius: 3px; color: #ebebeb; opacity: 0.5; font-size: 12px; line-height: 20px; text-align: center; } @media screen and (max-width: 768px) { .n_banner_inner .img-info { display: none; } } .container { width: 100%; } .zib-widget { clear: both; background: #fff0; padding: 0px; box-shadow: 0 0 0px var(--main-shadow); border-radius: var(--main-radius); margin-bottom: 20px; } </style>
上面代码会导致网站登录变透明 下方为优化:
PangM用户中心-添加扩展中心
美化教程by.执笔
只需要将上述代码放置于后台的自定义javascript代码内即可实现在用户中心侧边栏插入一个扩展入口
原理代码
$(function(){ $('.col-sm-3 .sidebar-user').prepend('这里面放你的html'); });$(function(){ $('.col-sm-3 .sidebar-user').prepend('这里面放你的html'); });$(function(){ $('.col-sm-3 .sidebar-user').prepend('这里面放你的html'); });
这段代码是一段使用 jQuery 编写的 JavaScript 代码
主要用于在网页上动态地添加一些元素
具体来说，这段代码的功能是在具有 .col-sm-3 .sidebar-user 类的元素内部添加一些链接（<a> 标签）
每个链接都有一个描述性的图标和文本
代码解析如下：
$(function(){ ... });：这是一个 jQuery 的文档就绪函数，意味着当 HTML 文档完全加载和解析完成后，里面的函数就会被执行。$('.col-sm-3 .sidebar-user').prepend('<div class="zib-widget padding-6">... </div>');：这一行使用 jQuery 的prepend方法在具有.col-sm-3 .sidebar-user类的元素内部的最开始处添加一段 HTML 代码。- 在添加的 HTML 代码中，有几个
<a>标签，每个都包含一个图标和一段描述性的文本。这些链接被添加到一个名为.zib-widget的 div 中，添加zib-widget的目的是调用子比主题小工具的css
值得一提的是，在很久之前我所发布的头像框代码教程也是使用这种方式在头像之前添加一个头像框进行覆盖
也就是说只要你能够准确的表明需要插入内容的css，这段代码就能够将你所编写的html插入其中
代码内的prepend也是支持更改的，prepend的含义是在选中的div内部插入
你也可以修改为after、before、hover等
其中after为在区块后面插入
而before则是在区块前面插入
hover这个更是老演员了，悬浮时显示
大家可以参考我的代码自行修改内容，不过html代码需要压缩后才能够放在里面。
子比主题美化-评论、搜索框打字粒子特效
美化教程
子比主题设置——全局&功能——自定义代码——自定义javascript代码
其实所有WP站点都可以用，直接复制就行，如果用在其他主题或者其他位置，记得加<script>标签
<!--彩色粒子特效-->(function webpackUniversalModuleDefinition(a, b) {if (typeof exports === "object" && typeof module === "object") {module.exports = b()} else {if (typeof define === "function" && define.amd) {define([], b)} else {if (typeof exports === "object") {exports["POWERMODE"] = b()} else {a["POWERMODE"] = b()}}}})(this, function() {return (function(a) {var b = {};function c(e) {if (b[e]) {return b[e].exports}var d = b[e] = {exports: {},id: e,loaded: false};a[e].call(d.exports, d, d.exports, c);d.loaded = true;return d.exports}c.m = a;c.c = b;c.p = "";return c(0)})([function(c, g, b) {var d = document.createElement("canvas");d.width = window.innerWidth;d.height = window.innerHeight;d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize", function() {d.width = window.innerWidth;d.height = window.innerHeight});document.body.appendChild(d);var a = d.getContext("2d");var n = [];var j = 0;var k = 120;var f = k;var p = false;o.shake = true;function l(r, q) {return Math.random() * (q - r) + r}function m(r) {if (o.colorful) {var q = l(0, 360);return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")"} else {return window.getComputedStyle(r).color}}function e() {var t = document.activeElement;var v;if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) {var u = b(1)(t, t.selectionStart);v = t.getBoundingClientRect();return {x: u.left + v.left,y: u.top + v.top,color: m(t)}}var s = window.getSelection();if (s.rangeCount) {var q = s.getRangeAt(0);var r = q.startContainer;if (r.nodeType === document.TEXT_NODE) {r = r.parentNode}v = q.getBoundingClientRect();return {x: v.left,y: v.top,color: m(r)}}return {x: 0,y: 0,color: "transparent"}}function h(q, s, r) {return {x: q,y: s,alpha: 1,color: r,velocity: {x: -1 + Math.random() * 2,y: -3.5 + Math.random() * 2}}}function o() {var t = e();var s = 5 + Math.round(Math.random() * 10);while (s--) {n[j] = h(t.x, t.y, t.color);j = (j + 1) % 500}f = k;if (!p) {requestAnimationFrame(i)}if (o.shake) {var r = 1 + 2 * Math.random();var q = r * (Math.random() > 0.5 ? -1 : 1);var u = r * (Math.random() > 0.5 ? -1 : 1);document.body.style.marginLeft = q + "px";document.body.style.marginTop = u + "px";setTimeout(function() {document.body.style.marginLeft = "";document.body.style.marginTop = ""}, 75)}}o.colorful = false;function i() {if (f > 0) {requestAnimationFrame(i);f--;p = true} else {p = false}a.clearRect(0, 0, d.width, d.height);for (var q = 0; q < n.length; ++q) {var r = n[q];if (r.alpha <= 0.1) {continue}r.velocity.y += 0.075;r.x += r.velocity.x;r.y += r.velocity.y;r.alpha *= 0.96;a.globalAlpha = r.alpha;a.fillStyle = r.color;a.fillRect(Math.round(r.x - 1.5), Math.round(r.y - 1.5), 3, 3)}}requestAnimationFrame(i);c.exports = o}, function(b, a) {(function() {var d = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight", "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", "MozTabSize"];var e = window.mozInnerScreenX != null;function c(k, l, o) {var h = o && o.debug || false;if (h) {var i = document.querySelector("#input-textarea-caret-position-mirror-div");if (i) {i.parentNode.removeChild(i)}}var f = document.createElement("div");f.id = "input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g = f.style;var j = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle;g.whiteSpace = "pre-wrap";if (k.nodeName !== "INPUT") {g.wordWrap = "break-word"}g.position = "absolute";if (!h) {g.visibility = "hidden"}d.forEach(function(p) {g[p] = j[p]});if (e) {if (k.scrollHeight > parseInt(j.height)) {g.overflowY = "scroll"}} else {g.overflow = "hidden"}f.textContent = k.value.substring(0, l);if (k.nodeName === "INPUT") {f.textContent = f.textContent.replace(/\s/g, "\u00a0")}var n = document.createElement("span");n.textContent = k.value.substring(l) || ".";f.appendChild(n);var m = {top: n.offsetTop + parseInt(j["borderTopWidth"]),left: n.offsetLeft + parseInt(j["borderLeftWidth"])};if (h) {n.style.backgroundColor = "#aaa"} else {document.body.removeChild(f)}return m}if (typeof b != "undefined" && typeof b.exports != "undefined") {b.exports = c} else {window.getCaretCoordinates = c}}())}])});POWERMODE.colorful = true;POWERMODE.shake = false;document.body.addEventListener("input", POWERMODE);<!--彩色粒子特效结束--><!--彩色粒子特效--> (function webpackUniversalModuleDefinition(a, b) { if (typeof exports === "object" && typeof module === "object") { module.exports = b() } else { if (typeof define === "function" && define.amd) { define([], b) } else { if (typeof exports === "object") { exports["POWERMODE"] = b() } else { a["POWERMODE"] = b() } } } })(this, function() { return (function(a) { var b = {}; function c(e) { if (b[e]) { return b[e].exports } var d = b[e] = { exports: {}, id: e, loaded: false }; a[e].call(d.exports, d, d.exports, c); d.loaded = true; return d.exports } c.m = a; c.c = b; c.p = ""; return c(0) })([function(c, g, b) { var d = document.createElement("canvas"); d.width = window.innerWidth; d.height = window.innerHeight; d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999"; window.addEventListener("resize", function() { d.width = window.innerWidth; d.height = window.innerHeight }); document.body.appendChild(d); var a = d.getContext("2d"); var n = []; var j = 0; var k = 120; var f = k; var p = false; o.shake = true; function l(r, q) { return Math.random() * (q - r) + r } function m(r) { if (o.colorful) { var q = l(0, 360); return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")" } else { return window.getComputedStyle(r).color } } function e() { var t = document.activeElement; var v; if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) { var u = b(1)(t, t.selectionStart); v = t.getBoundingClientRect(); return { x: u.left + v.left, y: u.top + v.top, color: m(t) } } var s = window.getSelection(); if (s.rangeCount) { var q = s.getRangeAt(0); var r = q.startContainer; if (r.nodeType === document.TEXT_NODE) { r = r.parentNode } v = q.getBoundingClientRect(); return { x: v.left, y: v.top, color: m(r) } } return { x: 0, y: 0, color: "transparent" } } function h(q, s, r) { return { x: q, y: s, alpha: 1, color: r, velocity: { x: -1 + Math.random() * 2, y: -3.5 + Math.random() * 2 } } } function o() { var t = e(); var s = 5 + Math.round(Math.random() * 10); while (s--) { n[j] = h(t.x, t.y, t.color); j = (j + 1) % 500 } f = k; if (!p) { requestAnimationFrame(i) } if (o.shake) { var r = 1 + 2 * Math.random(); var q = r * (Math.random() > 0.5 ? -1 : 1); var u = r * (Math.random() > 0.5 ? -1 : 1); document.body.style.marginLeft = q + "px"; document.body.style.marginTop = u + "px"; setTimeout(function() { document.body.style.marginLeft = ""; document.body.style.marginTop = "" }, 75) } } o.colorful = false; function i() { if (f > 0) { requestAnimationFrame(i); f--; p = true } else { p = false } a.clearRect(0, 0, d.width, d.height); for (var q = 0; q < n.length; ++q) { var r = n[q]; if (r.alpha <= 0.1) { continue } r.velocity.y += 0.075; r.x += r.velocity.x; r.y += r.velocity.y; r.alpha *= 0.96; a.globalAlpha = r.alpha; a.fillStyle = r.color; a.fillRect(Math.round(r.x - 1.5), Math.round(r.y - 1.5), 3, 3) } } requestAnimationFrame(i); c.exports = o }, function(b, a) { (function() { var d = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight", "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", "MozTabSize"]; var e = window.mozInnerScreenX != null; function c(k, l, o) { var h = o && o.debug || false; if (h) { var i = document.querySelector("#input-textarea-caret-position-mirror-div"); if (i) { i.parentNode.removeChild(i) } } var f = document.createElement("div"); f.id = "input-textarea-caret-position-mirror-div"; document.body.appendChild(f); var g = f.style; var j = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle; g.whiteSpace = "pre-wrap"; if (k.nodeName !== "INPUT") { g.wordWrap = "break-word" } g.position = "absolute"; if (!h) { g.visibility = "hidden" } d.forEach(function(p) { g[p] = j[p] }); if (e) { if (k.scrollHeight > parseInt(j.height)) { g.overflowY = "scroll" } } else { g.overflow = "hidden" } f.textContent = k.value.substring(0, l); if (k.nodeName === "INPUT") { f.textContent = f.textContent.replace(/\s/g, "\u00a0") } var n = document.createElement("span"); n.textContent = k.value.substring(l) || "."; f.appendChild(n); var m = { top: n.offsetTop + parseInt(j["borderTopWidth"]), left: n.offsetLeft + parseInt(j["borderLeftWidth"]) }; if (h) { n.style.backgroundColor = "#aaa" } else { document.body.removeChild(f) } return m } if (typeof b != "undefined" && typeof b.exports != "undefined") { b.exports = c } else { window.getCaretCoordinates = c } }()) }]) }); POWERMODE.colorful = true; POWERMODE.shake = false; document.body.addEventListener("input", POWERMODE); <!--彩色粒子特效结束--><!--彩色粒子特效--> (function webpackUniversalModuleDefinition(a, b) { if (typeof exports === "object" && typeof module === "object") { module.exports = b() } else { if (typeof define === "function" && define.amd) { define([], b) } else { if (typeof exports === "object") { exports["POWERMODE"] = b() } else { a["POWERMODE"] = b() } } } })(this, function() { return (function(a) { var b = {}; function c(e) { if (b[e]) { return b[e].exports } var d = b[e] = { exports: {}, id: e, loaded: false }; a[e].call(d.exports, d, d.exports, c); d.loaded = true; return d.exports } c.m = a; c.c = b; c.p = ""; return c(0) })([function(c, g, b) { var d = document.createElement("canvas"); d.width = window.innerWidth; d.height = window.innerHeight; d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999"; window.addEventListener("resize", function() { d.width = window.innerWidth; d.height = window.innerHeight }); document.body.appendChild(d); var a = d.getContext("2d"); var n = []; var j = 0; var k = 120; var f = k; var p = false; o.shake = true; function l(r, q) { return Math.random() * (q - r) + r } function m(r) { if (o.colorful) { var q = l(0, 360); return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")" } else { return window.getComputedStyle(r).color } } function e() { var t = document.activeElement; var v; if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) { var u = b(1)(t, t.selectionStart); v = t.getBoundingClientRect(); return { x: u.left + v.left, y: u.top + v.top, color: m(t) } } var s = window.getSelection(); if (s.rangeCount) { var q = s.getRangeAt(0); var r = q.startContainer; if (r.nodeType === document.TEXT_NODE) { r = r.parentNode } v = q.getBoundingClientRect(); return { x: v.left, y: v.top, color: m(r) } } return { x: 0, y: 0, color: "transparent" } } function h(q, s, r) { return { x: q, y: s, alpha: 1, color: r, velocity: { x: -1 + Math.random() * 2, y: -3.5 + Math.random() * 2 } } } function o() { var t = e(); var s = 5 + Math.round(Math.random() * 10); while (s--) { n[j] = h(t.x, t.y, t.color); j = (j + 1) % 500 } f = k; if (!p) { requestAnimationFrame(i) } if (o.shake) { var r = 1 + 2 * Math.random(); var q = r * (Math.random() > 0.5 ? -1 : 1); var u = r * (Math.random() > 0.5 ? -1 : 1); document.body.style.marginLeft = q + "px"; document.body.style.marginTop = u + "px"; setTimeout(function() { document.body.style.marginLeft = ""; document.body.style.marginTop = "" }, 75) } } o.colorful = false; function i() { if (f > 0) { requestAnimationFrame(i); f--; p = true } else { p = false } a.clearRect(0, 0, d.width, d.height); for (var q = 0; q < n.length; ++q) { var r = n[q]; if (r.alpha <= 0.1) { continue } r.velocity.y += 0.075; r.x += r.velocity.x; r.y += r.velocity.y; r.alpha *= 0.96; a.globalAlpha = r.alpha; a.fillStyle = r.color; a.fillRect(Math.round(r.x - 1.5), Math.round(r.y - 1.5), 3, 3) } } requestAnimationFrame(i); c.exports = o }, function(b, a) { (function() { var d = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight", "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", "MozTabSize"]; var e = window.mozInnerScreenX != null; function c(k, l, o) { var h = o && o.debug || false; if (h) { var i = document.querySelector("#input-textarea-caret-position-mirror-div"); if (i) { i.parentNode.removeChild(i) } } var f = document.createElement("div"); f.id = "input-textarea-caret-position-mirror-div"; document.body.appendChild(f); var g = f.style; var j = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle; g.whiteSpace = "pre-wrap"; if (k.nodeName !== "INPUT") { g.wordWrap = "break-word" } g.position = "absolute"; if (!h) { g.visibility = "hidden" } d.forEach(function(p) { g[p] = j[p] }); if (e) { if (k.scrollHeight > parseInt(j.height)) { g.overflowY = "scroll" } } else { g.overflow = "hidden" } f.textContent = k.value.substring(0, l); if (k.nodeName === "INPUT") { f.textContent = f.textContent.replace(/\s/g, "\u00a0") } var n = document.createElement("span"); n.textContent = k.value.substring(l) || "."; f.appendChild(n); var m = { top: n.offsetTop + parseInt(j["borderTopWidth"]), left: n.offsetLeft + parseInt(j["borderLeftWidth"]) }; if (h) { n.style.backgroundColor = "#aaa" } else { document.body.removeChild(f) } return m } if (typeof b != "undefined" && typeof b.exports != "undefined") { b.exports = c } else { window.getCaretCoordinates = c } }()) }]) }); POWERMODE.colorful = true; POWERMODE.shake = false; document.body.addEventListener("input", POWERMODE); <!--彩色粒子特效结束-->
子比主题美化-文章版权声明样式美化
美化教程
子比主题：WordPress后台 >> 主题设置 >> 文章&列表 >> 文章页面 >> 将代码添加到“版权提示内容”中
需要看样式请在下方隐藏内查看
子比主题美化 – 网站展示新注册用户和会员用户模块代码
美化教程
无需覆盖主题源文件，只需要在你需要显示的位置添加此段代码即可
代码会自动适配你的主题颜色（全局功能==》显示布局==》全局主题色），基本无需改动，鼠标放在头像上会旋转
此功能默认只在电脑端显示，手机端不显示
部署教程
- 使用方法
- 把上面代码放到
index.php文件里面，我这里提供了两个位置，其他的自行研究
1、首页全宽度放在 子比主题根目录的index.php文件里面 下方代码的下面保存即可
<main role="main" class="container"><main role="main" class="container"><main role="main" class="container">
2、首页内容顶部放在 子比主题根目录的index.php文件里面 下方代码的下面保存即可
<div class="content-layout"><div class="content-layout"><div class="content-layout">
转载请注明来源、保留版权，谢谢合作！
加入QQ群
微信公众号
联系我们
请求更新
捐助名单
白昼流星 Q178409770
PangM
未登录用户
![[首发]夸克网盘短剧拉新小工具,夸克网盘自动转存小工具-胖猫营销网](https://4bot.cn/wp-content/uploads/2024/11/20241128233317117-2c30b4a92a09ca764d5aa4b9826e4fc3.webp)
- 最新
- 最热
只看作者