WP主题美化教程集锦[笔记]-楊仙森万事坞

站点里飘雪效果

美化教程

在自定义头部HTML代码里添加以下

<canvas id="Snow" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;background: rgba(125,137,95,0.1);pointer-events: none;"></canvas>
<script>
    if(true){
        (function() {
            var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
            window.requestAnimationFrame = requestAnimationFrame;
        })();

        (function() {
            var flakes = [],
                canvas = document.getElementById("Snow"),
                ctx = canvas.getContext("2d"),
                flakeCount = 200,
                mX = -100,
                mY = -100;

            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            function snow() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                for (var i = 0; i < flakeCount; i++) {
                    var flake = flakes[i],
                        x = mX,
                        y = mY,
                        minDist = 150,
                        x2 = flake.x,
                        y2 = flake.y;

                    var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
                        dx = x2 - x,
                        dy = y2 - y;

                    if (dist < minDist) {
                        var force = minDist / (dist * dist),
                            xcomp = (x - x2) / dist,
                            ycomp = (y - y2) / dist,
                            deltaV = force / 2;

                        flake.velX -= deltaV * xcomp;
                        flake.velY -= deltaV * ycomp;

                    } else {
                        flake.velX *= .98;
                        if (flake.velY <= flake.speed) {
                            flake.velY = flake.speed                        }
                        flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
                    }

                    ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
                    flake.y += flake.velY;
                    flake.x += flake.velX;

                    if (flake.y >= canvas.height || flake.y <= 0) {
                        reset(flake);
                    }

                    if (flake.x >= canvas.width || flake.x <= 0) {
                        reset(flake);
                    }

                    ctx.beginPath();
                    ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
                    ctx.fill();
                }
                requestAnimationFrame(snow);
            };

            function reset(flake) {
                flake.x = Math.floor(Math.random() * canvas.width);
                flake.y = 0;
                flake.size = (Math.random() * 3) + 2;
                flake.speed = (Math.random() * 1) + 0.5;
                flake.velY = flake.speed;
                flake.velX = 0;
                flake.opacity = (Math.random() * 0.5) + 0.3;
            }

            function init() {
                for (var i = 0; i < flakeCount; i++) {
                    var x = Math.floor(Math.random() * canvas.width),
                        y = Math.floor(Math.random() * canvas.height),
                        size = (Math.random() * 3) + 2,
                        speed = (Math.random() * 1) + 0.5,
                        opacity = (Math.random() * 0.5) + 0.3;

                    flakes.push({
                        speed: speed,
                        velY: speed,
                        velX: 0,
                        x: x,
                        y: y,
                        size: size,
                        stepSize: (Math.random()) / 30 * 1,
                        step: 0,
                        angle: 180,
                        opacity: opacity                    });
                }

                snow();
            };

            document.addEventListener("mousemove", function(e) {
                mX = e.clientX,
                mY = e.clientY            });
            window.addEventListener("resize", function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            });
            init();
        })();
    }
</script>

给导航菜单添加自定义徽章及多种样式菜单设置方法

温馨提示：
以下的class以及badge徽章是可以运用在整个网站的自定义代码位置的，比如主题设置的很多地方都是支持自定义代码的
另外，使用自定义Html代码请一定要注意标签闭合！代码使用不当还会引起网站显示错误！

美化教程

进入Wordpress后台-外观-菜单->修改导航标签

首先我们将上面预览图的相对应的HTML代码附上！

<!-- badge标签即为徽章 支持多项Class -->
主题购买<badge>折扣</badge>
网站建设<badge class="jb-yellow">NEW</badge>
最新优惠<badge class="badge-bw jb-vip2"><i>VIP</i></badge>
特惠资源<badge class="c-blue-2">NEW</badge>
示例页面<badge class="jb-red badge-bw">99</badge>
发布文章<badge class="b-blue"></badge>
友情链接<badge class="jb-green">+1</badge>
<!-- 徽章内也支持图标代码 -->

根据代码就很容易理解了，badge 便签也就是徽章了。如何控制标签的样式、颜色，也就是class来处理了！

本主题支持的 class 列表

class	样式	class	样式	class	样式
c-red	红色文字	b-theme	主题背景色	jb-red	渐变红色背景
c-yellow	橙色文字	b-red	红色背景	jb-yellow	渐变橙色背景
c-blue	蓝色文字	b-yellow	橙色背景	jb-blue	渐变蓝色背景
c-blue-2	深蓝色文字	b-blue	蓝色背景	jb-green	渐变绿色背景
c-green	绿色文字	b-green	深蓝色背景	jb-purple	渐变紫色背景
c-purple	紫色文字	b-purple	紫色背景	jb-vip1	渐变金色背景
				jb-vip2	渐变黑色背景

当然如果这些class的样式还满足不了你，你还可以直接添加style代码哦！

同时 badge 徽章的内容也是支持自定义图标的，例如你可以试试这句代码：

<!-- 图标徽章示例 -->
特惠资源<badge class="c-blue-2"><i class="fa fa-bolt"></i></badge>

对应的Html代码如下：

<!-- 按钮风格的菜单 -->
<span class="but jb-red">主题购买</span>
<span class="but c-blue">网站建设</span>
<span class="but c-yellow">科技资讯</span>
<span class="but b-purple radius">最新优惠</span><badge><i>VIP</i></badge>
<span class="but jb-vip2 radius">特惠资源</span><badge class="jb-red"><i class="fa fa-bolt"></i></badge>

我相信，细心的朋友已经完全看明白了！简单讲解一下：

将菜单的文字用span标签包围
class仍然可以使用上面表格中的颜色、背景色class
最重要的就是class多了一个but，没错，这个就是代表按钮的 class
class再增加一个radius，即可显示为两边圆角

到这里，整个教程就结束了！赶紧试一试，让您的导航菜单也变得丰富多彩吧！

侧边栏添加“旗下网站”小工具

美化教程

将以下代码复制粘贴到WordPress后台–>外观–>小工具–>html–>放到自己的侧边栏位置

<div class="textwidget"><div class="attentionus"><span class="zhan-widget-link zhan-link-z1"> <span class="zhan-widget-link-count">个人介绍主页</span> <a href="https://填写你的链接/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">主页</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z2"> <span class="zhan-widget-link-count">在线视频解析</span> <a href="https://填写你的链接/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">视频解析</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z3"> <span class="zhan-widget-link-count">时间流逝，记录我的网站</span> <a href="https://填写你的链接/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">时光轴啊</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z4"> <span class="zhan-widget-link-count">新冠疫情，保护抓紧</span> <a href="https://填写你的链接/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">网页制作</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z5"> <span class="zhan-widget-link-count">博客文档归类</span> <a href="https://填写你的链接/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">文档归类</span> </a></span></div>
<style type="text/css">
.zhan-widget-link{position:relative;margin-bottom:-10px !important;position:relative;display:block;font-size:13px;background:#fff;color:#525252;line-height:40px;margin-left:-10px;padding:0 14px;border:1px solid #DDD;border-radius:2px;width:auto}span.zhan-widget-link.zhan-link-z1 {margin-top: -10px;}.zhan-widget-link-count i{margin-right:9px;font-size:17px;vertical-align:middle}.zhan-widget-link-title{position:absolute;top:-1px;right:-14px !important;bottom:-1px;width:100px;text-align:center;background:rgba(255,255,255,.08);transition:width .3s;border-radius:0 3px 3px 0}.zhan-widget-link:hover .zhan-widget-link-title{width:116px}.zhan-widget-link a{position:absolute;top:0;left:0;right:0;bottom:0}.zhan-link-z1{border-color:rgba(236,61,81,.39)}.zhan-link-z1 i{color:#FFF;margin-right:3px}.zhan-link-z1 .zhan-widget-link-title{background-color:#ec3d51;color:#fff}.zhan-link-z2{border-color:rgba(18,170,232,.39)}.zhan-link-z2 i{color:#FFF;margin-right:3px}.zhan-link-z2 .zhan-widget-link-title{background-color:#12aae8;color:#fff}.zhan-link-z3{border-color:rgba(221,7,208,.39)}.zhan-link-z3 i{color:#FFF;margin-right:3px}.zhan-link-z3 .zhan-widget-link-title{background-color:#dd07d0;color:#fff}.zhan-link-z4{border-color:rgba(249,82,16,.39)}.zhan-link-z4 i{color:#FFF;margin-right:3px}.zhan-link-z4 .zhan-widget-link-title{background-color:#f95210;color:#fff}.zhan-link-z5{border-color:rgba(25,152,114,.39)}.zhan-link-z5 i{color:#FFF;margin-right:3px}.zhan-link-z5 .zhan-widget-link-title{background-color:#199872;color:#fff}</style>
</div>

侧边栏小工具产品推广广告等代码HTML源码

适合用在WP小工具中,可以方便的放一张商品介绍图片和简洁的特色介绍，还有一个大气实用的跳转按钮，很适合在一些需要展示指定内容的场合使用。

美化教程

1.把下面复制到WordPress后台–>小工具–>选择html代码–>放到你需要放的位置

<div class="textwidget custom-html-widget"><div class="widget" style="top: 0px; visibility: visible; animation-name: fadeInUp;padding: 0px;">
  <div class="widget_product">
               
   <img title="某某什么服务器" src="https://img.leo.top/wanshiwu/2022/03/lanren-tuijie-280x100-1.png"> 
   <div class="product_content"> 
    <div class="product_info">
                   
     <h2>万事屋-某某什么-服务器</h2> 
     <ul>
    <li><i class="fa fa-check"></i> 搭建从万事屋开始！</li>
    <li><i class="fa fa-check"></i> 全程 CN2 GIA 防御防攻击</li> 
    <li><i class="fa fa-check"></i> 弹性主动防护 精确识别攻击</li> 
    <li><i class="fa fa-check"></i> 直连大带宽 防护更高效 <span class="but c-yellow">限7个</span>   名额！</li>
     </ul> 
    </div> 
    <div class="price_sale">
     <strong><small>￥</small>19.9</strong>
     <h2>限时售价</h2>
    </div>                
    <a class="btn" href="http://idc.lanrenidc.cn" target="_blank" rel="noopener">立即购买 - 万事屋</a> 
   </div> 
  </div>
   </div></div>

2.把下面代码复制到主题后台–>自定义代码–>自定义CSS样式-2022.1.5修复给背景改成透明色

/*掌柜的万事屋*/
/*<a href="https://leohi.top" title="【查看侧边栏小工具的文章】" target="_blank">侧边栏</a>主题推荐*/
.widget {
    clear: both;
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;

}
.widget_product {
    background: #fff;
    background-color:transparent;/*透明色*/
}
.product_content {
    padding: 15px;

}
.product_info h2 {
    font-size: 20px;

    margin: 0;
    font-weight: bold;
    padding: 5px 0 10px 0;

}
.widget ul {
    zoom: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}
.product_info>ul>li {
    font-size: 13px;
    margin-bottom: 28px;
    list-style: none;
}
.price_sale {
    border-top: 1px solid #eee;
    padding: 10px 0px;
}
.price_sale strong {
    float: right;
    font-size: 20px;
    line-height: 1;
    font-weight: 100;
}
small, .small {
    font-size: 85%;
}
.price_sale h2 {
    margin: 0;
    font-size: 14px;
    color: #999;
    line-height: 20px;
}
.product_content>.btn {
  top: 5px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
  background: linear-gradient(-125deg,#54e38e 0%, #41c7Af 100%);
  box-shadow: 0 3px 10px -1px #41c7Af!important;
    color: #ffffff;

}

/*侧边栏主题推荐*/

一个显示在首页居中下方可关闭的，可用于显示活动、通知、广告等浮窗的HTML

美化教程

html代码

<style>
.sitetips-default{background: #fff3e9;border: 1px solid #fcecdf;position: fixed;bottom: 20px;left:0;right: 0;z-index: 1000;width: 70%;max-width:1000px;border-radius: 3px;font-size: 15px;display: none;padding:14px 35px 12px;color:#f58b36;margin:0 auto;}
.sitetips-default .close{position:absolute;top:calc(50% - 12px);right:15px;color:#FF7C3C !important;text-decoration: none;height: 24px;line-height: 24px;}
.sitetips-default .close .icon{font-size:24px;top:-1px;}
.sitetips-default a{padding:0 !important;background:transparent !important;color:var(--theme-color) !important;text-decoration: underline;}
.sitetips-default .btn{padding:6px 12px !important;background: var(--theme-color) !important;color:#fff !important;border-radius: 20px;font-size:12px;display: inline-block;text-decoration: none;line-height: 1;}
.sitetips-default{width: 90%;text-align: left;font-size: 14px;padding:15px;right: 0;left: 0;bottom: 50px;}
.sitetips-default .close{right:calc(50% - 12px);bottom:-30px;top:inherit;font-size:28px;}
</style>

<div class="sitetips sitetips-default" style="display: block;" id="sitetips">
 <span style="font-family: Arial, sans-serif; font-size: 14px; text-align: justify;">为祖国庆生，为今朝华夏喝彩，愿祖国国泰民安，愿全球华人幸福安康！</span>
<strong><span style="font-family: Arial, sans-serif; font-size: 14px; text-align: justify;">国庆节10月1日-7日限时优惠，全站八五折(包括VIP)，优惠码：</span>dt85</strong><a href="javascript:;" class="close" id="close">×</i></a>
</div>
<script type="text/javascript">
window.onload=function(){
    var wenzi=document.getElementById('close');
    var div=document.getElementById('sitetips');
    wenzi.onfocus=function(){
            if(div.style.display=='block'){ // == 判断div.display是否为显示
                    div.style.display='none'; //= 赋值也可了解成改变
                }
                else{
                    div.style.display='block';
                }
        }
}; 
</script>

修改网站自定义右键菜单

一般情况下网页中的右键都基本是浏览器默认的菜单选项一模一样，但我们可以通过css+js实现自己小站的别具一格的html的右键菜单！

美化教程

将以下代码放到后台的自定义HTML代码中，代码中的一些文案跟链接请自行修改

<!--右击列表-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script><style type="text/css">a{text-decoration:none}div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba(0,0,0,.3);box-shadow:0px 0px 15px#333;position:absolute;display:none;z-index:10000;opacity:0.9;border-radius:8px}div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}div.usercm ul li{margin:0px;padding:0px;line-height:35px}div.usercm ul li a{color:#666;padding:0 15px;display:block}div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}div.usercm ul li a i{margin-right:10px}a.disabled{color:#c8c8c8!important;cursor:not-allowed}a.disabled:hover{background-color:rgba(255,11,11,0)!important}div.usercm{background:#fff!important}</style><div class="usercm"style="left: 199px; top: 5px; display: none;"><ul><li><a href="https://uuxmw.com><i class="fa fa-home fa-fw"></i><span>首页</span></a></li><li><a href="javascript:void(0);"onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li><li><a href="javascript:void(0);"onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li><li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li><li><a href="https://www.uuxmw.com/friends"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li><li><a href="https://uuxmw.com/message"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li></ul></div><script type="text/javascript">(function(a){a.extend({mouseMoveShow:function(b){var d=0,c=0,h=0,k=0,e=0,f=0;a(window).mousemove(function(g){d=a(window).width();c=a(window).height();h=g.clientX;k=g.clientY;e=g.pageX;f=g.pageY;h+a(b).width()>=d&&(e=e-a(b).width()-5);k+a(b).height()>=c&&(f=f-a(b).height()-5);a("html").on({contextmenu:function(c){3==c.which&&a(b).css({left:e,top:f}).show()},click:function(){a(b).hide()}})})},disabledContextMenu:function(){window.oncontextmenu=function(){return!1}}})})(jQuery);function getSelect(){""==(window.getSelection?window.getSelection():document.selection.createRange().text)?layer.msg("啊噢...你没还没选择文字呢！"):document.execCommand("Copy")}function baiduSearch(){var a=window.getSelection?window.getSelection():document.selection.createRange().text;""==a?layer.msg("啊噢...你没还没选择文字呢！"):window.open("https://www.baidu.com/s?wd="+a)}$(function(){for(var a=navigator.userAgent,b="Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"),d=!0,c=0;c<b.length;c++)if(0<a.indexOf(b[c])){d=!1;break}d&&($.mouseMoveShow(".usercm"),$.disabledContextMenu())});</script>

文青用的好看底部导航

美化教程

免费文青用的好看底部导航[主题美化笔记]

2年前

015525

美化教程

一、PHP代码

在主题目录下“func.php”文件合适位置添加下面的代码【默认图片url自己改】：

/**
* 子比文章上一篇/下一篇背景图函数
*/
function wiiuii_prev_next_cover($wiui_post){
    if(!empty($wiui_post)){
        $wiui_post_cover = get_post_meta($wiui_post->ID, 'cover_image', true);
        if(empty($wiui_post_cover)){
            $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $wiui_post->post_content, $matches);
            $wiui_post_cover = $matches[1][0];
        }
    }else{
        // 默认图片
        $wiui_post_cover = "https://pic.imgdb.cn/item/6312cd7b16f2c2beb18a8dee.jpg";
    }
    return '<img class="wiiuii-prev_next-cover" src="' . $wiui_post_cover . '" />';
}

在主题目录“zibll/inc/functions/functions.php”文件【自己看图中的代码，位置】添加下面的代码

图片[4]-子比主题美化教程(备忘录)[更新时间:2022年11月12日]-星语的小木屋

添加代码位置

<?php echo wiiuii_prev_next_cover($prev_post);/*455行a标签上方->上一篇文章封面*/ ?>

<?php echo wiiuii_prev_next_cover($prev_post);/*455行a标签上方->上一篇文章封面*/ ?>

二、CSS代码

css样式代码就不说哪里添加了，聪明人都知道

/*文章上一篇/下一篇背景图*/
.content-wrap>.content-layout>.theme-box>.article-nav{height:100%}
.article-nav>.main-bg.box-body.main-shadow{position:relative;overflow:hidden;height:100%}
.article-nav>.main-bg.box-body.main-shadow>a{position:absolute;z-index:2}
.article-nav>.box-body+.box-body>a{right:15px}
.wiiuii-prev_next-cover{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.article-nav>.main-bg.box-body.main-shadow::before,.wiiuii-prev_next-cover{position:absolute;top:0;left:0;right:0;bottom:0}
.article-nav>.main-bg.box-body.main-shadow::before{content:"";transition:opacity .5s cubic-bezier(.4,.01,.165,.99);z-index:1;background:var(--main-shadow);-webkit-backdrop-filter:saturate(0) blur(3px);backdrop-filter:saturate(0) blur(3px)}
.article-nav>.main-bg.box-body.main-shadow:hover::before{opacity:0}

WordPress文章简码添加Link链接卡片

Link链接卡片由简单的PHP+HTML+CSS代码制作而成，不仅适用于子比主题【夜/日间都适用】，还适用于很多的主题【其他主题只适应于日间模式下】，由于很多主题的夜间模式CSS样式不一样，如果你主题有夜间模式的话，只需更改一下代码中的CSS背景样式即可。

使用范围：写文章时需要跳转到本站某个页面、写文章是想分享一些网站的链接

美化教程

一、PHP代码
将下面的php代码放到【子比主题：func.php】【其他主题：functions.php】合适位置【最底部即可】

// 链接简码
function wiiuii_love_link($atts, $content = null) {
    extract(shortcode_atts(array(
        'href' => 'https://'.$_SERVER['HTTP_HOST'],
        'icon' => null,
        'blank' => true,
        'align' => null
    ), $atts));
    if(strcasecmp($align,'l')==0){
        $style_align = 'left';
    }else if(strcasecmp($align,'r')==0){
        $style_align = 'right';
    }else{
        $style_align = 'center';
    }
    $content = $content ? $content : '未知链接';
    $icon_html = $icon ? '<div class="link_card-image_cell"><img class="link_card-image" alt="'.$content.'" src="'.$icon.'"></div>' : '';
    $is_blank = eval("return $blank;") ? '_blank' : '_self';
    return '<div class="wiiuii-link_main" style="text-align:'.$style_align.'"><div class="wiiuii-link_container">
            <a class="wiiuii-link_card" href="'.$href.'" title="'.$content.'" target="'.$is_blank.'">
                <div class="link_card-content">
                    <div class="link_card-text">
                        <span class="link_card-title" title="'.$content.'">'.$content .'</span>
                        <div class="link_card-meta">
                            <svg class="link_card-svg" fill="currentColor" viewBox="0 0 24 24" width="14" height="14"><path d="M13.414 4.222a4.5 4.5 0 1 1 6.364 6.364l-3.005 3.005a.5.5 0 0 1-.707 0l-.707-.707a.5.5 0 0 1 0-.707l3.005-3.005a2.5 2.5 0 1 0-3.536-3.536l-3.005 3.005a.5.5 0 0 1-.707 0l-.707-.707a.5.5 0 0 1 0-.707l3.005-3.005zm-6.187 6.187a.5.5 0 0 1 .638-.058l.07.058.706.707a.5.5 0 0 1 .058.638l-.058.07-3.005 3.004a2.5 2.5 0 0 0 3.405 3.658l.13-.122 3.006-3.005a.5.5 0 0 1 .638-.058l.069.058.707.707a.5.5 0 0 1 .058.638l-.058.069-3.005 3.005a4.5 4.5 0 0 1-6.524-6.196l.16-.168 3.005-3.005zm8.132-3.182a.25.25 0 0 1 .353 0l1.061 1.06a.25.25 0 0 1 0 .354l-8.132 8.132a.25.25 0 0 1-.353 0l-1.061-1.06a.25.25 0 0 1 0-.354l8.132-8.132z"></path></svg>
                            <span class="link_card-link">'.$href.'</span>
                        </div>
                    </div>
                    '.$icon_html.'
                </div>
            </a>
        </div></div>';
}
add_shortcode("alink", "wiiuii_love_link");

二、CSS代码
将下面的CSS代码放到后台主题设置-》自定义CSS样式里面，CSS有两个版本【子比主题专用版本/其他主题版本】，只是更改了一点CSS代码。

1、子比主题专用CSS代码

/*链接卡片**/
.wiiuii-link_main{margin: 15px auto;text-align: center;}
.wiiuii-link_container{position:relative!important;display: inline-block;width:22em;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--main-radius);overflow:hidden;background:var(--muted-bg-color);transition: background 0.5s;}
.wiiuii-link_card .link_card-content{position:relative;display:flex;padding:8px;border-radius:inherit;align-items:center;justify-content:space-between}
.wiiuii-link_card .link_card-text{text-align:left}
.wiiuii-link_card .link_card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.25;color:var(--key-color)}
.wiiuii-link_card .link_card-meta{display:flex;margin-top:4px;font-size:14px;color:#999;align-items:center}
.wiiuii-link_card .link_card-svg{margin-right:4px;flex-shrink:0}
.wiiuii-link_card .link_card-link{display:-webkit-box;word-break:break-all;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.wiiuii-link_card .link_card-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.wiiuii-link_card .link_card-image_cell{width:60px;height:60px;margin-left:10px;border-radius:var(--main-radius);flex-shrink:0;overflow:hidden}
.wiiuii-link_container:hover{background:var(--body-bg-color)}

2、其他主题专用CSS代码

/*链接卡片**/
.wiiuii-link_main{margin: 15px auto;text-align: center;}
.wiiuii-link_container{position:relative!important;display: inline-block;width:22em;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;overflow:hidden;background:rgba(0, 0, 0, 0.03);transition: background 0.5s;}
.wiiuii-link_card .link_card-content{position:relative;display:flex;padding:8px;border-radius:inherit;align-items:center;justify-content:space-between}
.wiiuii-link_card .link_card-text{text-align:left}
.wiiuii-link_card .link_card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.25;color:#333}
.wiiuii-link_card .link_card-meta{display:flex;margin-top:4px;font-size:14px;color:#999;align-items:center}
.wiiuii-link_card .link_card-svg{margin-right:4px;flex-shrink:0}
.wiiuii-link_card .link_card-link{display:-webkit-box;word-break:break-all;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.wiiuii-link_card .link_card-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.wiiuii-link_card .link_card-image_cell{width:60px;height:60px;margin-left:10px;border-radius:5px;flex-shrink:0;overflow:hidden}
.wiiuii-link_container:hover{background:rgba(0, 0, 0, 0.05)}

说明：其他主题只需改background属性即可实现日/夜间自适应。

三、添加简码
第一步：打开写文章页面
这里已古登堡编辑器为例子，经典编辑器自己百度搜索“如何使用简码”。

第二步：添加“简码模块”

四、使用及参数
标准使用【注意看图】：最简单的使用方式，注意一定要闭合【alink】【/alink】,不然出错哦！

【alink href="网站链接" icon="网站图标"】网站标题【/alink】

注意注意：[]符号会转义成简码，所以本文章用【】代替[]，使用时请把【】符号改成[]

例子：

【alink href="http://www.baidu.com" icon="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"】百度【/alink】

[*]所有参数的使用：请看下面的示例

【alink href="http://www.baidu.com" align="l" blank="true"  icon="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"】百度【/alink】

【注意重要】参数说明：

href：【必填】网站链接
标题：【必填】在【alink】【/alink】的中间
icon：【非必填】网站图标
align：【非必填】对齐方式，默认居中方式，l或L-》左对齐、r或R-》右对齐、c或C-》居中对齐【居中可不填参数】
blank：【非必填】是否新建窗口打开，true-》新建窗口打开，false-》当前窗口打开
[]符号会转义成简码，所以本文章用【】代替[]，使用时请把【】符号改成[]

网站底部的网站地图和免责声明按钮美化教程

美化教程

教程分为两步，添加 css 样式和添加 HTML 代码即可如下

1.主题设置—>自定义代码—>自定义 CSS 样式：,添加以下 CSS 代码：

/*CSS 代码网站底部按钮美化 leohi.top*/
:root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    margin-bottom: 5px;
}
.badge-subject {
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.github-badge .bg-blue {
    background-color: #007ec6;
}
.github-badge .bg-brightgreen {
    background-color: #4dc820;
}
.github-badge .bg-blueviolet {
    background-color: #8833d7;
}
.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.github-badge .bg-orange {
    background-color: orange;
}
/*CSS 代码网站底部按钮美化结束 leohi.top*/

2、子比主题设置—>页面&显示—>底部页脚—>板块二,添加以下 HTML 代码：

<!--网站底部按钮美化-->
<div class="github-badge">

  <span class="badge-subject bg-blue">
     <a style="color:#fff" href="https://leohi.top/links" target="_blank">友链申请</a>
  </span>-
  <span class="badge-subject bg-brightgreen">
     <a style="color:#fff" href="https://leohi.top/sitemap.xml" target="_blank">网站地图</a>
  </span>-
  <span class="badge-subject bg-green">
     <a style="color:#fff" href="https://leohi.top/1057.html" target="_blank">本站主题</a>
  </span>-
  <span class="badge-subject bg-orange">
     <a style="color:#fff" href="http://wpa.qq.com/msgrd?v=3&uin=4223335&site=qq&menu=yes" target="_blank">广告合作</a>
  </span>-
    <span class="badge-value bg-blueviolet">
     <a style="color:#fff" href="https://leohi.top/disclaimers" target="_blank">免责申明</a>
  </span>-

</div>
<!--网站底部按钮美化-->

——本页内容已结束，点击以下按钮翻页——

温馨提示：本文最新于2023-07-10 18:23:41进行了更新，某些文章内容具有时效性，若失效或有错误，请在下方留言。

掌柜声明

本站网络名称： 楊仙森万事坞

本站永久网址： https://leohi.top

网站权益说明：文章部分源于网络，仅供大家学习与参考，并无商业用途，如有侵权，可联系本站管理员予以处理。
① 本站一切资源不代表本站立场，并不代表本坞赞同其观点和对其真实性负责。
② 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客若发现请通知坞长。
③ 本站资源来源于网络，如发现失效，可留言告知并第一时间更新。