Spzac主题折腾笔记

侧栏疫情动态

user - sider.php

<div class="sidebox fixside s_ping" >
<h4 class="sidebox__title">新冠动态</h4>
<i class="bg-primary"></i>
                    <iframe width="100%" frameborder="0" src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" onload='this.style.height=Math.max(this.contentWindow.document.body.scrollHeight,this.contentWindow.document.documentElement.scrollHeight,200)+"px";'></iframe>

</div>

<div class="sidebox fixside s_ping" >
<h4 class="sidebox__title">新冠动态</h4>
<i class="bg-primary"></i>
                    <iframe width="100%" frameborder="0" src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" onload='this.style.height=Math.max(this.contentWindow.document.body.scrollHeight,this.contentWindow.document.documentElement.scrollHeight,200)+"px";'></iframe>

</div>

修改文章外链样式

external-link {    
    display: inline-block;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxMTc2NDQ2NTMwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0MDIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik04NjQuMTA3NTgzIDk2MC4xMTk1MzdINjMuODgwNDYzVjE1OS44OTI0MTdoNDQ3LjkyODI3OFY5Ni4wMTE5NTRIMHY5MjcuOTg4MDQ2aDkyNy45ODgwNDZWNTI3Ljg3NDQ4NmgtNjMuODgwNDYzdjQzMi4yNDUwNTF6IiBwLWlkPSIxNDAyMSIgZmlsbD0iIzAwN2JmZiI+PC9wYXRoPjxwYXRoIGQ9Ik01OTIuMTM3NDY3IDB2NjMuODgwNDYzaDMyMi40NjI0NThMNDU3LjQ5MTIyMiA1MjEuMzcxNjg1bDQ1LjEzNzA5MyA0NS4xMzcwOTNMOTYwLjExOTUzNyAxMDkuNDAwMDc1djMyMi40NjI0NThoNjMuODgwNDYzVjBINTkyLjEzNzQ2N3oiIHAtaWQ9IjE0MDIyIiBmaWxsPSIjMDA3YmZmIj48L3BhdGg+PC9zdmc+);
    background-size: 1em;
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 1.3em;
    text-indent: 0px;
    border-bottom: 1px solid #007bff;
    }

functions.php

在后台编辑文章输出function costcn($cid,$mid,$str,$status){下面加上

/*给外链加上class*/
    $str = preg_replace("/<a href=\"([^\"]*)\">/i", "<a href=\"\\1\" class=\"external-link\" target=\"_blank\" rel=\"nofollow\">", $str);

开启了short_links插件，直接修改插件文件

Plugin.php

156行加上class="external-link"

        $target = ($pluginOption->target) ? ' target="_blank" class="external-link" ' : ''; // 新窗口打开

底部好久不见

1.修改footer.php

首先，在页脚文件footer.php文件的最下面放入以下代码：

<!-- 好久不见 -->
<div class="chenyuyc">
    <div class="footer-fav">
      <div class="container">
        <div class="fl site-info">
          <h2><a href="https://nie.su/" target="_blank">錯愛涅槃</a></h2>
          <div class="site-p">
              <p>LOVE2WIND.CN【白茶清欢无别事，我在等风也等你】</p>
              <p>风风雨雨中，恭迎本站第<?php echo theAllViews();?>位来访的小伙伴。</p>
                    <!--<script  type="text/javascript">
                    var colorStr="";
                    var randomArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
                    for(var i=0;i<6;i++){
                        colorStr+=randomArr[Math.ceil(Math.random()*(15-0)+0)];
                    }
                    var now =new Date(); 
                    function StorageTime() { 
                        var grt= new Date("11/27/2011 00:00:00");//时间格式：月/日/年  时/分/秒
                        now.setTime(now.getTime()+250); 
                        years = Math.floor((now - grt ) / 1000 / 60 / 60 / 24 /365);
                        days = Math.floor((now - grt ) / 1000 / 60 / 60 / 24 - (years * 365)); 
                        hours = Math.floor((now - grt ) / 1000 / 60 / 60 - (24 * Math.floor((now - grt ) / 1000 / 60 / 60 / 24)));
                        if(String(hours).length ==1 ){hours = "0" + hours;} 
                        minutes = Math.floor((now - grt ) / 1000 /60 - (24 * 60 * Math.floor((now - grt ) / 1000 / 60 / 60 / 24)) - (60 * hours));
                        if(String(minutes).length ==1 ){minutes = "0" + minutes;}
                        seconds = Math.floor((now - grt ) / 1000 - (24 * 60 * 60 * Math.floor((now - grt ) / 1000 / 60 / 60 / 24)) - (60 * 60 * hours) - (60 * minutes)); 
                        if(String(seconds).length ==1 ){seconds = "0" + seconds;}
                        if(years!=0){var outputtime=+years+"年"+days+"天"+hours+"时"+minutes+"分"+seconds+"秒";}else{var outputtime=+days+"天"+hours+"时"+minutes+"分"+seconds+"秒";}
                        document.getElementById("siteday").style.color="#"+colorStr;
                        document.getElementById("siteday").innerHTML = outputtime;
                    } 
                    setInterval("StorageTime()",250);
                    </script>-->
          </div>
        </div>
        <div class="fr site-fav">
          <a href="https://nie.su/" class="btn btn-fav btn-orange">Ctrl+D收藏本站</a></div>
        <div class="site-girl">
            <div class="girl fl"> <i class="thumb " style="background-image:url(https://gcore.jsdelivr.net/gh/love2wind/blogcdn@3.5/spzac/img/hjbj.png);"></i> </div>
            <div class="girl-info hide_md">
              <h4>绿水本无忧，因风皱面</h4>
              <h4>青山原不老，为雪白头</h4>
            </div>
        </div>
      </div>
    </div>
</div>

2.新增CSS样式

<link rel="stylesheet" href="https://gcore.jsdelivr.net/gh/love2wind/blogcdn@3.5/spzac/css/footerdown.css">

3.备注

风风雨雨1年266天3小时23分，你是第45,355位相遇的小伙伴……这里的实现看这里：https://nie.su/archives/2164.html#ci_title21

Typecho模板常用调用代码

 #### 站点动态标题 ``` ``` #### 站点地址，名称与描述 ``` //站点地址 //名称 //描述 ``` #### index.php文章循环输出 ``` //判断文章存在与否 //开始循环

4.Joe主题

Joe主题开启显示建站时间后，并配置好总访问量小伙伴。

<p><a href="javascript:;" id="chenyutime">风风雨雨N年，你是第N位相遇的小伙伴</a></p>

修改为：

              <p><?php if ($this->options->JBirthDay) : ?>
            <div class="item run">
                <span>风风雨雨 <strong class="joe_run__day">00</strong> 天 <strong class="joe_run__hour">00</strong> 时 <strong class="joe_run__minute">00</strong> 分，你是第<?php echo theAllViews();?>位相遇的小伙伴</span>
            </div>
        <?php endif; ?> </p>

修改好后，请删除原有的建站时间显示（第六行到第十行），不然会重复显示。

            <?php if ($this->options->JBirthDay) : ?>
            <div class="item run">
                <span>已运行 <strong class="joe_run__day">00</strong> 天 <strong class="joe_run__hour">00</strong> 时 <strong class="joe_run__minute">00</strong> 分 <strong class="joe_run__second">00</strong> 秒</span>
            </div>
        <?php endif; ?>

添加目录

1.安装插件

https://github.com/typecho-fans/plugins/blob/master/MenuTree

2.添加代码

info - sidebar.php最后添加

<?php if ($this->is('post')): ?> 
<div class="sidebox sidebox--desk fixside" style="z-index:1;">
                        <h4 class="sidebox__title">本文目录</h4>
                        <i class="bg-primary"></i>
                        <div class="sidebox__content" style="overflow-y: auto;max-height: 420px;">
                            <?php $this->treeMenu(); ?>                            
                        </div>
                    </div>
<?php endif; ?>

3.添加CSS

/*目录*/
.index-menu {
    font-size: 14px;
    list-style: none outside none;
    padding-right: 20px;
}
.index-menu-list {
    margin-left:15px;
    padding-left: 0;
}
.index-menu-item {
    padding:3px 0;
}
.index-menu-link:hover {
    background:0 0;
    color:#fa7268;
    text-decoration:underline;
}
.index-menu-link {
    color: #4e4e4e;
    text-decoration: none;
    display: inline;
    padding: 5px 0;
    line-height: 26px;
}
.menu-target-fix {display:block; position:relative; top:-75px; /*偏移量}    锚点跳转定位*/

添加彩色标签云

1.适当位置添加

                    <div class="sidebox sidebox--desk">
                        <h4 class="sidebox__title">标签云</h4>
                        <i class="bg-primary"></i>
                        <div class="sidebox__content">
                            <style>#tag-clould-color {
                                padding: 3px 5px 3px 5px;
                                border-radius: 4px;
                                color: #FFFFFF;
                                margin: 3px 3px 3px 0;
                                display: inline-block;
                            }
                            #tag-clould-color a{
                                color: #FFFFFF;
                            }
                            </style>
                           <div class="tags l-h-2x">
                           <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=20')->to($tags); ?>
                           <?php if($tags->have()): ?>
                               <?php while ($tags->next()): ?>
                               <span id="tag-clould-color"  style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>);font-size:<?php echo log($tags->count)*5+10; ?>%;">
                                   <a  href="<?php $tags->permalink();?>"  title="该标签下有<?php $tags->count(); ?>篇文章" data-toggle="tooltip" >
                                   <?php $tags->name(); ?></a>
                               </span>
                               <?php endwhile; ?>
                           <?php endif; ?>
                           </div>
                        </div>
                    <!--    <a href="#" class="sidebox__more">View more</a>-->
                    </div>

2.相关函数

随机颜色代码

color:#<?php echo substr(md5(rand()), 0, 6); ?>;

固定颜色代码

color:#<?php echo substr(md5($tags->name), 0, 6); ?>;

根据标签文章个数调整字体大小代码

font-size:<?php echo log($tags->count)*50+100; ?>%;

整数字体大小

font-size:<?php printf("%u%%", log($tags->count)*50+100); ?>

完整代码

<style>.widget-list-tag li{display:inline-block;list-style:none;font-family:monospace;margin:1px;padding:1px;}</style>
<?php $this->widget('Widget_Metas_Tag_Cloud', 'sort=name&ignoreZeroCount=1&desc=0&limit=30')->to($tags); ?>
<ul class="widget-list widget-list-tag">
<?php if($tags->have()): ?>
<?php while ($tags->next()): ?>
<li><a style="font-size:<?php printf("%u%%", log($tags->count)*50+100); ?>; color:#<?php echo substr(md5($tags->name.'rand'), 0, 6); ?>;" href="<?php $tags->permalink(); ?>" title="<?php $tags->count(); ?> 个话题"><?php $tags->name(); ?></a></li>
<?php endwhile; ?>
<?php else: ?>
<li><?php _e('没有任何标签'); ?></li>
<?php endif; ?>
</ul>

其他修改

侧边栏滚动固定不起作用

main.css

html,
body {
  height: 100%;
}

手机端不显示排行榜、右侧边栏

@media screen and (max-width: 768px) {
.pagecontent{display:none; }
}
@media screen and (max-width: 768px) {
.sidebox{display:none; }
}

删除height: 100%;

文章页粗体颜色：

.conts b, strong { color: #red;}

文章页链接颜色：

.post__description a

单行代码颜色：

.conts code

2021.9.17自定义CSS

body {
    font-family: 'Open Sans', sans-serif;
    font-family: nexzhu!important;
    font-weight: 500;
    background-color: #fafafa;
    background-image: url(https://gcore.jsdelivr.net/gh/love2wind/blogcdn@v3.3/spzac/img/bg.jpg);
    background-position: left top;
    background-size: 25% auto;
    background-repeat: repeat;
    background-attachment: scroll;
    -webkit-font-smoothing: antialiased;
    text-indent: 0;
}
@font-face {
    font-family: "nexzhu";
    src: url(https://gcore.jsdelivr.net/gh/love2wind/blogcdn@v3.3/spzac/fonts/blockdole.woff2) format("woff2"),
     url(https://gcore.jsdelivr.net/gh/love2wind/blogcdn@v3.3/spzac/fonts/blockdole.woff) format("woff"),
     url(https://gcore.jsdelivr.net/gh/love2wind/blogcdn@v3.3/spzac/fonts/blockdole.ttf) format("truetype"),
     url(https://gcore.jsdelivr.net/gh/love2wind/blogcdn@v3.3/spzac/fonts/blockdole.eot) format("embedded-opentype"),
     url(https://gcore.jsdelivr.net/gh/love2wind/blogcdn@v3.3/spzac/fonts/blockdole.svg) format("svg");
}
.header {background-color: #ffffff; box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);}
  @media (min-width: 1200px){
.header__nav-link { color: #000000;}
}
  @media screen and (max-width: 1120px) {
.pagecontent{display:none; }
}
  /*@media screen and (max-width: 768px) {
.sidebox,.sidebox--desk{display:none; }
}*/
  @media (min-width: 768px){
.header__search-input { background: #f3f5f6;}
}
.header__nav {left:30px;}
.header__nav-item {
    margin: 0 30px 0 0;
    width: auto;
}
.header__search {left:80px;}
.header__search .ion-ios-search{color:#3796f6;}
.header__content .ion-ios-notifications{ color: black; }
.header__search-input {   color: #000;}
li.header__nav-item:nth-of-type(3) a:after {
    content: '';
    background: url(https://gcore.jsdelivr.net/gh/love2wind/blogcdn@v3.3/spzac/img/icon_hot.png) no-repeat;
    width: 20px;
    height: 11px;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
    margin-bottom:5px;
}
.image_title{display:none;}
.signin {color: #000000;}
.header__btn span {background-color: #000;color: #000000;}
.header__profile-btn:hover span {color: #3796f6;}
.header__profile-btn span {color:#999999;}
.header__dropdown-menu {
    min-width: 150px !important;
    padding: 15px !important;
}
.header__dropdown-menu svg {
    overflow: hidden;
    vertical-align: middle;
    margin-right: 2px;
    margin-left: 0;
}
  /*.post-content p{ 
  text-indent: 2em; em是相对单位，2em即现在一个字大小的两倍 
} */
.user__head {
    background: #3796f6 url(https://gcore.jsdelivr.net/gh/love2wind/blogcdn@v3.3/spzac/img/hbg.jpg) center no-repeat;
    position: relative;
    height: 120px;
    width: 100%;
    animation: gradientBG 15s ease infinite;
}
.bg_color{
    margin: 0;
    width: 100%;
    height: 120px;
    font-family: "Exo", sans-serif;
    color: #fff;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}
.header__logo img {
    width: 90%;
    display: block;
    border-radius: 2%;
}
.footer__logo img {
    width: 70%;
    display: block;
}
.footer__nav a {
    margin-right: 20px;
}
.profile__title {
    margin-top: 10px;
    margin-bottom: 0px;
    line-height: 130%;
}
.profile__actions {
    margin-top: 10px;
}
.profile__actions svg {
    margin-right: 4px;
    vertical-align: top;
    margin-bottom:2px;
}
.sidebox__content {
    padding: 10px 20px;
}
.sidebox__job {
    margin-bottom: 10px;
}
.sidebox__job-title a, .sidebox__job-title span {
    font-size: 14px;
    color: #364e65;
    line-height: 160%;
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    word-wrap: break-word;
}
.sidebox__user-title h5 a {
     font-size:13px;
}
.profile__logo img {
    width: 100%;
    height: 146px !important;
}
.post__head-title p svg,.post__head-title h5  svg{
  vertical-align: bottom;
}
.footer__back a{
    color:#fff;
}
.Copyrightnew {
    background: #e8eef3;
    padding: 12px 20px;
    border-radius: 0 5px 5px 0;
    font-size: 14px;
    border-radius: 5px;
    margin: 0 0 20px 0;
    color: #999;
    width: 100%;
    line-height: 1.5rem;
    position: relative;
}
.Copyrightnew::before {
    position: absolute;
    top: 6px;
    right: 6px;
    content: '';
    background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxODA0MDQ5MzU0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU4MDciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCI+PHBhdGggZD0iTTUxMiAxNkMyMzguMDY2IDE2IDE2IDIzOC4wNjYgMTYgNTEyczIyMi4wNjYgNDk2IDQ5NiA0OTYgNDk2LTIyMi4wNjYgNDk2LTQ5NlM3ODUuOTM0IDE2IDUxMiAxNnogbTIzNC4yNjggNjkzLjUwNmMtMy4xODQgMy43MzQtNzkuNTUyIDkxLjQ2Mi0yMTkuNzAyIDkxLjQ2Mi0xNjkuMzg0IDAtMjg4Ljk2OC0xMjYuNTItMjg4Ljk2OC0yOTEuMTM0IDAtMTYyLjYwNiAxMjQuMDA4LTI4Ni44MDIgMjg3LjUyNC0yODYuODAyIDEzMy45MTQgMCAyMDMuOTMgNzQuNjMgMjA2Ljg0NCA3Ny44MDhhMjQgMjQgMCAwIDEgMi40NzYgMjkuMjQ2bC00NC43NiA2OS4zMWMtOC4wOTggMTIuNTM0LTI1LjU0OCAxNC43MDItMzYuNDY4IDQuNTktMC40NjYtMC40MjgtNTMuMDU4LTQ3Ljc2LTEyMy43Ni00Ny43Ni05Mi4yMzIgMC0xNDcuODMyIDY3LjE1LTE0Ny44MzIgMTUyLjE2NCAwIDc5LjIwNCA1MS4wMjggMTU5LjM4NCAxNDguNTU0IDE1OS4zODQgNzcuMzk0IDAgMTMwLjU2LTU2LjY3NiAxMzEuMDg4LTU3LjI1IDEwLjI2NC0xMS4xMyAyOC4xMTgtMTAuMDY2IDM3LjAxNiAyLjEwNmw0OS4wOTQgNjcuMTQ0YTI0LjAwMiAyNC4wMDIgMCAwIDEtMS4xMDYgMjkuNzMyeiIgZmlsbD0iIzhmMDg4NCIgcC1pZD0iNTgwOCI+PC9wYXRoPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-size: 28px;
    width: 28px;
    height: 28px;
}
.post__stats div svg {
    margin-right: 7px;
    vertical-align: middle;
  margin-bottom: 4px;
}
/*文章css*/
.post__title_c {
    font-size: 1.4rem;
    position: relative;
    text-align: center;
    margin: auto;
}
.post__title_c::before {
    content: '「';
    color: #448EF6;
    margin-right: 3px;
    font-weight: 900;
}
.post__title_c::after {
    content: '」';
    color: #448EF6;
    margin-left: 3px;
    font-weight: 900;
}
/*.post__title_c {
    text-align: center;
    font-size: 24px;
    margin: 10px auto 15px auto;
    color: #000;
}
.post__title_c span{
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
    background-size:20px auto;
    -webkit-animation:waveMove 1s infinite linear;
    animation:waveMove 1s infinite linear;
    line-height:30px;
    padding-bottom:5px
}*/
.post__description h1,.post__description h2 ,.post__description h3,.post__description h4,.post__description h5,.post__description h6  {
    font-weight: 900;
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Serif SC", "PingFang SC", "Microsoft Yahei UI", "Microsoft Yahei", sans-serif;
    color: rgb(88, 88, 88);
}
.post__description h1 {
    font-size: 1.7rem;
    line-height: 1.4;
    padding: 0 15px 0 28px;
    margin: 15px 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxMzI3MjQzMzkxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEyMTMgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjMyMzk2IiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik0xMTIyLjg0NCA0OC4wNzJjLTE3LjgwNi03LjY2OS0zOC40NzMtMTIuNTE2LTYwLjE2MS0xMy40MDYtNzAuODI1LTEyLjEwNS0xNjYuOTE0IDYuNTI2LTI0My4wMzggNDcuMDk1IDIyLjQ1My01NC42NjctNjMuMDU4LTMwLjY4NC05NS42NDUtMjIuMjc2LTEwNC43MjkgMjcuMDA1LTE5OC43NzMgNzUuODU4LTI4Mi42MTMgMTQyLjU2IDcuNDE0LTQ2LjQtNTEuNTItMTkuMzI1LTkzLjY1MyAxNS40MzEtODMuMTQ3IDY4LjY1OC0xNDkuMjggMTUwLjYxMy0xODkuNzA3IDI0OS43OTYtMzUuOTY0IDg4LjI4NC0zNS43MzQgMTc3LjgzMi0zLjQ2NyAyNjAuOTk1IDEwOS4xMDItMTE5Ljg3NSAyMTIuODU0LTIzNC40NTQgMzQ2LjQzNS0zNDkuNjg4IDE0OS41MjgtMTI5LjEzOCAzMjguMTk1LTIyOC40MjcgNDMxLjkyOS0yMzcuMzM0LTM5MC44OCAxOTUuODQtNjQ5LjM2OSA1MTkuODIyLTkwMC45MjQgODUwLjc1Nmg0MzUuNjQ0di0xNi42NzVoLTM4OS42NTNjNy4zOTYtMy4yNTMgMTMuODY3LTcuMzYgMjAuMjQ5LTE0LjMyOSAyOC45OTYtMzEuNTkxIDUyLjgxOC02Ny44NzYgODMuNTItOTcuOTU2IDM4LjY4NC0zNy44MTMgNDEuMDE0LTM0LjYxMyA3NC4yOTMtMzUuNDg0IDY0Ljc2NC0xLjY1NCAxMzAuMjIyLTYuNCAxOTMuODMxLTE4LjAwOCAxMzUuMzA3LTI0LjY5NCAyNTAuNzM4LTg2LjExNiAzMzkuMDQwLTE5MiAyMi4wMjctMjYuNDE4IDQzLjQ0OC03MS4zOTUtMTMuNTI5LTY5LjYxOCAyMC4wODktOS40NCAzNC4zNjQtMTUuMTgyIDQ3LjY2Mi0yMi41NDIgMTAzLjY0NC01Ny40MjIgMTk5LjgwNS0xMjMuMzI0IDI2MC43NDctMjI3LjQxMyAxNi40NDUtMjguMDg4IDM1LjItODEuNzYtMjAuMzAzLTcxLjI3MiAzMC42MTMtMjkuNzI0IDYwLjgxNy01NC4yNCA4NC44ODktODMuNTM4IDM1LjczNC00My40NDggMjYuMzI5LTczLjU4Mi0yNS41NDctOTUuMDkzeiIgZmlsbD0iIzQ0OEVGNiIgcC1pZD0iMzIzOTciPjwvcGF0aD48L3N2Zz4=);
    background-size: 1.7rem;
    background-position: left center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #448ef6;
    color: #448ef6;
}
.post__description h2 {
    font-size: 1.5rem;
    line-height: 1.4;
    background: linear-gradient(to bottom, transparent 50%, rgba(189,202,219,0.3) 0) no-repeat;
    line-height: 30px;
    margin: 10px 0;
    width: auto;
    display: inline-flex;
    color: rgb(255,102,0);
}
/*.post__description h2:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxMzI3MjQzMzkxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEyMTMgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjMyMzk2IiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik0xMTIyLjg0NCA0OC4wNzJjLTE3LjgwNi03LjY2OS0zOC40NzMtMTIuNTE2LTYwLjE2MS0xMy40MDYtNzAuODI1LTEyLjEwNS0xNjYuOTE0IDYuNTI2LTI0My4wMzggNDcuMDk1IDIyLjQ1My01NC42NjctNjMuMDU4LTMwLjY4NC05NS42NDUtMjIuMjc2LTEwNC43MjkgMjcuMDA1LTE5OC43NzMgNzUuODU4LTI4Mi42MTMgMTQyLjU2IDcuNDE0LTQ2LjQtNTEuNTItMTkuMzI1LTkzLjY1MyAxNS40MzEtODMuMTQ3IDY4LjY1OC0xNDkuMjggMTUwLjYxMy0xODkuNzA3IDI0OS43OTYtMzUuOTY0IDg4LjI4NC0zNS43MzQgMTc3LjgzMi0zLjQ2NyAyNjAuOTk1IDEwOS4xMDItMTE5Ljg3NSAyMTIuODU0LTIzNC40NTQgMzQ2LjQzNS0zNDkuNjg4IDE0OS41MjgtMTI5LjEzOCAzMjguMTk1LTIyOC40MjcgNDMxLjkyOS0yMzcuMzM0LTM5MC44OCAxOTUuODQtNjQ5LjM2OSA1MTkuODIyLTkwMC45MjQgODUwLjc1Nmg0MzUuNjQ0di0xNi42NzVoLTM4OS42NTNjNy4zOTYtMy4yNTMgMTMuODY3LTcuMzYgMjAuMjQ5LTE0LjMyOSAyOC45OTYtMzEuNTkxIDUyLjgxOC02Ny44NzYgODMuNTItOTcuOTU2IDM4LjY4NC0zNy44MTMgNDEuMDE0LTM0LjYxMyA3NC4yOTMtMzUuNDg0IDY0Ljc2NC0xLjY1NCAxMzAuMjIyLTYuNCAxOTMuODMxLTE4LjAwOCAxMzUuMzA3LTI0LjY5NCAyNTAuNzM4LTg2LjExNiAzMzkuMDQwLTE5MiAyMi4wMjctMjYuNDE4IDQzLjQ0OC03MS4zOTUtMTMuNTI5LTY5LjYxOCAyMC4wODktOS40NCAzNC4zNjQtMTUuMTgyIDQ3LjY2Mi0yMi41NDIgMTAzLjY0NC01Ny40MjIgMTk5LjgwNS0xMjMuMzI0IDI2MC43NDctMjI3LjQxMyAxNi40NDUtMjguMDg4IDM1LjItODEuNzYtMjAuMzAzLTcxLjI3MiAzMC42MTMtMjkuNzI0IDYwLjgxNy01NC4yNCA4NC44ODktODMuNTM4IDM1LjczNC00My40NDggMjYuMzI5LTczLjU4Mi0yNS41NDctOTUuMDkzeiIgZmlsbD0iIzQ0OEVGNiIgcC1pZD0iMzIzOTciPjwvcGF0aD48L3N2Zz4=);
    background-size: 100% 100%;
    color: #ff0036;
}*/
.post__description h3 {
    font-size: 1.4rem;
    position: relative;
    border-left: 3px solid #FF1493;
    margin: 10px 0;
    padding: 0 0 0 10px;
}
.post__description h4 {
    font-size: 1.2rem;
    background: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxMzMxMDg0MTk3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEzMDQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjUwMDk4IiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik0xMTgzLjc0NCA1MjAuMjc3Yy02MS45MzUgNDYuMTE0LTExNC43OSA0Ni4xMTQtMTc2Ljc0MiAwLTQwLjM5Ny0zMC4wNzEtNzQuODg5LTMwLjA3MS0xMTUuMjg2IDAtNjEuMzcxIDQ1LjY3LTExMS40MSA0NS42Ny0xNzIuNzgzIDAtNS42NDktNC4yMTUtMTEuMDI1LTcuNzgyLTE2LjI0Ny0xMC44MmwtOC4xNzUgMTAuODJjLTE1Ljc3LTExLjc1OS0yOC40NjctMTkuMDEyLTQwLjQ0OC0yMS44MjgtMTMuODI0IDIuNDA2LTI4LjA1OCA5LjYyNi00NC40NDIgMjEuODI4bC02LjM4My04LjQ0OGEyMzYuMDk3IDIzNi4wOTcgMCAwIDAtMTIuMDgzIDguNDQ4Yy02MS45NTIgNDYuMTE0LTExNC43OSA0Ni4xMTQtMTc2Ljc0MiAwLTQwLjM5Ny0zMC4wNzEtNzQuODg5LTMwLjA3MS0xMTUuMjg2IDAtNjEuMzcxIDQ1LjY3LTExMS40MjggNDUuNjctMTcyLjc4MiAwLTQwLjg1OC0zMC40My02OC40MzgtMzAuNDMtMTA5LjMzIDBMMC4xNzEgNDk3Ljk1NGM0OS42NjQtMzYuOTUgOTEuMzkyLTM4LjQ1MSAxNDMuMDM1IDAgNDguNjc1IDM2LjI1IDg0LjYgNDAuNTUgMTM5LjA3NyAwIDUxLjYyNi0zOC40NTEgOTkuNjM1LTM2LjcxIDE0OC45OTIgMCA1MC42NTQgMzcuNzE3IDkwLjM4NSAzOS4yMDIgMTQzLjAxOCAwIDMwLjYxOC0yMi43NjcgNTQuOTU1LTMxLjk0OSA4MC40MzYtMjcuNzMzIDI2LjAxLTIuOTAyIDUxLjk2OCA2LjA1OCA4MS4wNjYgMjcuNzMzIDQ4LjY3NCAzNi4yNSA4NC42IDQwLjU1IDEzOS4wNzYgMCA1MS42MjctMzguNDUxIDk5LjY1My0zNi43MSAxNDguOTkyIDAgNTAuNjU0IDM3LjcxNyA5MC40MDMgMzkuMjAyIDE0My4wMzYgMCA1MS42NjEtMzguNDUxIDg1LjQzNi0zOC40NTEgMTM3LjA4IDBsLTE2Ljg4IDIyLjMyM2MtNDEuNTA1LTMwLjkyNC02MS44MTUtMzAuOTI0LTEwMy4zNTUgMHogbTAtNzUuNjljLTYxLjkzNSA0Ni4xMTQtMTE0Ljc5IDQ2LjExNC0xNzYuNzQyIDAtNDAuMzk3LTMwLjA4OS03NC44ODktMzAuMDg5LTExNS4yODYgMC02MS4zNzEgNDUuNjctMTExLjQxIDQ1LjY3LTE3Mi43ODMgMC01LjY0OS00LjIxNi0xMS4wMjUtNy43NjYtMTYuMjQ3LTEwLjgybC04LjE3NSAxMC44MmMtMTUuNzctMTEuNzQyLTI4LjQ2Ny0xOS4wMTMtNDAuNDQ4LTIxLjgyOS0xMy44MjQgMi40MjQtMjguMDU4IDkuNjQzLTQ0LjQ0MiAyMS44MjlsLTYuMzgzLTguNDMxYTIzNS4yNzggMjM1LjI3OCAwIDAgMC0xMi4wODMgOC40M2MtNjEuOTUyIDQ2LjExNS0xMTQuNzkgNDYuMTE1LTE3Ni43NDIgMC00MC4zOTctMzAuMDg4LTc0Ljg4OS0zMC4wODgtMTE1LjI4NiAwLTYxLjM3MSA0NS42NzEtMTExLjQyOCA0NS42NzEtMTcyLjc4MiAwLTQwLjg1OC0zMC40My02OC40MzgtMzAuNDMtMTA5LjMzIDBMMC4xNzEgNDIyLjI4MmM0OS42NjQtMzYuOTg0IDkxLjM5Mi0zOC40NjkgMTQzLjAzNSAwIDQ4LjY3NSAzNi4yMzIgODQuNiA0MC41MzMgMTM5LjA3NyAwIDUxLjYyNi0zOC40NjkgOTkuNjM1LTM2LjcyOCAxNDguOTkyIDAgNTAuNjU0IDM3LjcxNyA5MC4zODUgMzkuMTg1IDE0My4wMTggMCAzMC42LTIyLjc4NCA1NC45MzgtMzEuOTUgODAuNDE4LTI3Ljc1IDI2LjAxLTIuOTIgNTEuOTY4IDYuMDU4IDgxLjA4NCAyNy43NSA0OC42NzQgMzYuMjMyIDg0LjYgNDAuNTMzIDEzOS4wNzYgMCA1MS42MjctMzguNDY5IDk5LjY1My0zNi43MjggMTQ4Ljk5MiAwIDUwLjY1NCAzNy43MTcgOTAuNDAzIDM5LjE4NSAxNDMuMDM2IDAgNTEuNjYxLTM4LjQ2OSA4NS40MzYtMzguNDY5IDEzNy4wOCAwbC0xNi44OCAyMi4zMDZjLTQxLjUwNS0zMC45MjUtNjEuODE1LTMwLjkyNS0xMDMuMzU1IDB6TTE0My4yMDYgNTczLjY0NWM0OC42NzUgMzYuMjY2IDg0LjYgNDAuNTUgMTM5LjA3NyAwIDUxLjYyNi0zOC40NTEgOTkuNjM1LTM2LjcyOCAxNDguOTkyIDAgNTAuNjU0IDM3LjczNCA5MC4zODUgMzkuMjE5IDE0My4wMTggMCAzMC42MTgtMjIuNzg0IDU0Ljk1NS0zMS45NDkgODAuNDM2LTI3LjczNCAyNi4wMS0yLjkxOCA1MS45NjggNi4wNiA4MS4wNjYgMjcuNzM0IDQ4LjY3NCAzNi4yNjYgODQuNiA0MC41NSAxMzkuMDc2IDAgNTEuNjI3LTM4LjQ1MSA5OS42NTMtMzYuNzI4IDE0OC45OTIgMCA1MC42NTQgMzcuNzM0IDkwLjQwMyAzOS4yMTkgMTQzLjAzNiAwIDUxLjY2MS0zOC40NTEgODUuNDM2LTM4LjQ1MSAxMzcuMDggMGwtMTYuODggMjIuMzIzYy00MS41MDUtMzAuOTA4LTYxLjgxNS0zMC45MDgtMTAzLjM1NSAwLTYxLjkzNSA0Ni4xMTQtMTE0Ljc5IDQ2LjEzMS0xNzYuNzQyIDAtNDAuMzk3LTMwLjA4OS03NC44ODktMzAuMDg5LTExNS4yODYgMC02MS4zNzEgNDUuNjg3LTExMS40MSA0NS42ODctMTcyLjc4MyAwLTUuNjQ5LTQuMjE1LTExLjAyNS03Ljc4Mi0xNi4yNDctMTAuODJsLTguMTc1IDEwLjgyYy0xNS43ODctMTEuNzU5LTI4LjUwMS0xOS4wMTItNDAuNDgyLTIxLjgyOC0xMy44MjQgMi40MjMtMjguMDQgOS42NDItNDQuNDA4IDIxLjgyOGwtNi4zODMtOC40NDhhMjM2LjA5NyAyMzYuMDk3IDAgMCAwLTEyLjA4MyA4LjQ0OGMtNjEuOTUyIDQ2LjExNC0xMTQuNzkgNDYuMTMxLTE3Ni43NDIgMC00MC4zOTctMzAuMDg5LTc0Ljg4OS0zMC4wODktMTE1LjI4NiAwLTYxLjM3MSA0NS42ODctMTExLjQyOCA0NS42ODctMTcyLjc4MiAwLTQwLjg1OC0zMC40My02OC40MzgtMzAuNDMtMTA5LjMzIDBMMC4xNzEgNTczLjY0NWM0OS42NjQtMzYuOTUgOTEuMzkyLTM4LjQ1MSAxNDMuMDM1IDB6IiBmaWxsPSIjZTkxNTJlIiBwLWlkPSI1MDA5OSI+PC9wYXRoPjwvc3ZnPg==)repeat-x 0 100%;
    background-position-y: bottom;
    background-size: 25px auto;
    -webkit-animation: waveMove 1s infinite linear;
    animation: waveMove 1s infinite linear;
    /* line-height: 30px; */
    padding-bottom: 10px;
    width: 100%;
    margin: 10px 0; 
    display: inline;
}
.post__description h5 {
    font-size: 1.1rem;
    background: linear-gradient(to bottom, transparent 80%, rgb(241 162 132 / 30%) 0) no-repeat;
    line-height: 30px;
    display: inline;
    margin: 10px 0;
}
.post__description h6 {
    font-size: 1rem;
    margin: 10px 0;
    border-bottom: 1px;
    border-bottom-style: dashed;
    display: inline-flex;
}
.conts b,.conts strong { 
  color: #294a68;
}
.conts em {
    color: #800000;
    font-style:normal;
    font-weight: 400;
}
.conts table {
    margin:auto;
}
/*代码*/
/* hljs行号 */
.hljs ol{list-style:decimal;margin:0 0 0 40px!important;padding:0}
.hljs ol li{font-size:12px;list-style:decimal-leading-zero;border-left:1px solid #545454!important;margin:0!important;white-space:pre;padding:0 10px;line-height:inherit;color:#f8f8f8 !important;}
/*.conts code{background-color:#141414;color:#f8f8f8;font-size:.95em;padding:.065em .4em;margin:0 4px}
}

/* hljs代码高亮 */
.hljs-comment,.hljs-quote{color:#8e908c}
.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#c82829}
.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5871f}
.hljs-attribute{color:#eab700}
.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#718c00}
.hljs-section,.hljs-title{color:#4271ae}
.hljs-keyword,.hljs-selector-tag{color:#8959a8}
/*.hljs{display:block;overflow-x:auto;background:#141414;color:#f8f8f8;padding:.5em;border-radius:8px}*/
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:700}
code, pre {
    font-family: Pacifico,Monaco,Menlo,Consolas,"Courier New",FontAwesome,monospace;
    line-height: 1.5;
    white-space: pre-line;
    max-height: 550px;
}
pre {
    background-color: #141414;
    color: #f8f8f8;
    margin: 1em 4px;
    position: relative;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    border-radius: 8px;
    padding-top: 20px;
    margin: 1.2em 4px;
   /* padding-bottom: 10px;*/
    overflow-y: auto;
    /* overflow-x: hidden; */
}
.conts pre code {
    max-height: 550px;
    background-color: #141414;
    color: #f8f8f8;
    /* line-height: 1.5; */
    /* font-size: 16px; */
    /* border-radius: 100px; */
    /* padding: 22px 20px; */
    /* border-radius: 8px; */
    /* box-shadow: rgb(0 0 0 / 20%) 0 5px 20px; */
    /* margin-top: 15px!important; */
    /* margin-bottom: 15px!important; */
    /* padding-top: 55px; */
    /* border-radius: 8px; */
}
.conts pre code::before {
    content: "";
    position: absolute;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDU0IDE0Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI2IiBmaWxsPSIjRkY1RjU2IiBzdHJva2U9IiNFMDQ0M0UiIHN0cm9rZS13aWR0aD0iLjUiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjI2IiBjeT0iNiIgcj0iNiIgZmlsbD0iI0ZGQkQyRSIgc3Ryb2tlPSIjREVBMTIzIiBzdHJva2Utd2lkdGg9Ii41Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI0NiIgY3k9IjYiIHI9IjYiIGZpbGw9IiMyN0M5M0YiIHN0cm9rZT0iIzFBQUIyOSIgc3Ryb2tlLXdpZHRoPSIuNSI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==) no-repeat;
    background-position-y: center;
    top: 15px;
    left: 16px;
    height: 14px;
    width: 54px;
    margin-left: 5px;
    display: block;
}
.conts code {
    border-radius: 4px;
    color: #f14668;
    font-size: .875em;
    font-weight: 400;
    padding: .25em .5em .25em;
    margin: 0 .25em;
    text-indent: 0;
    white-space: inherit;
    background-color: #feecf0;
}


.hljs ol {
    list-style: decimal;
    margin: 0 0 0 45px!important;
    padding: 0;
}
.hljs ol li {
    font-size: 14px; 
    list-style: decimal-leading-zero;
    border-left: 1px solid #545454!important;
    margin: 0!important;
    white-space: pre;
    padding: 0 10px;
    line-height: inherit;
    color: #f8f8f8 !important;
}
pre code::-webkit-scrollbar {
    height: 6px;
}
/*代码结束*/
.post__description a {
    color: #007bff;
    font-weight: 500;
}
.post__description p {
    font-size: 1rem;
    line-height: 1.4rem;
    color: #345471;
    text-indent: 0em;
}
.post__description blockquote {
    background: #f8f8f8;
    padding: 20px 20px 10px 50px;
    border-left: 4px solid #42b983;
    margin: 10px 0 10px 10px;
    position: relative;
    text-indent: 0;
    line-height: 1.8em;
}
.post__description blockquote::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 8px;
    width: 30px;
    height: 30px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxMzMzNzc1NjUzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDE0MDggMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU1NjMzIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTM1MS4yOTYgMzg2LjgyNGM2My42LTE1Mi44IDIwMy42LTI5Mi44IDIwMy42LTI5Mi44QzYwNS44IDQzLjEyOCA1ODAuMjk2IDUuMDI0IDUxNi43MDQgNS4wMjRjMCAwLTEyNy4zMDQgMC0zMTguMiAyNTQuNTA0QzcuNiA1MTQuMDI0IDcuNiA2NDEuMzI4IDcuNiA3MDQuOTI4YTMxNSAzMTUgMCAwIDAgMzE4LjIgMzE4LjJjODkgMCAxNjUuNDk2LTM4LjIgMjI5LTg5IDUxLTYzLjcwNCA4OS4yLTE0MCA4OS4yLTIyOS4yIDAtMTY1LjQtMTI3LjI5Ni0zMDUuNC0yOTIuNzA0LTMxOC4xMDR6TTE0MDcuNiA3MDQuOTI4YzAtMTY1LjQtMTI3LjI5Ni0zMDUuNC0yOTIuNjk2LTMxOC4xMDQgNjMuNi0xNTIuOCAyMDMuNi0yOTIuOCAyMDMuNi0yOTIuOEMxMzY5LjUwNCA0My4xMjggMTM0NCA1LjAyNCAxMjgwLjI5NiA1LjAyNGMwIDAtMTI3LjIgMC0zMTguMTA0IDI1NC41MDRDNzcxLjIgNTE0LjAyNCA3NzEuMiA2NDEuMzI4IDc3MS4yIDcwNC45MjhhMzE1IDMxNSAwIDAgMCAzMTguMiAzMTguMmM4OS4xMDQgMCAxNjUuNTA0LTM4LjIgMjI5LjEwNC04OSA1MS02My43MDQgODkuMDk2LTE0MCA4OS4wOTYtMjI5LjJ6IiBwLWlkPSI1NTYzNCIgZmlsbD0iIzhhOGE4YSI+PC9wYXRoPjwvc3ZnPg==);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 30px auto;
}
.post__description blockquote p{
    text-indent: 0;
}
/* 侧栏社交css*/
.sidebar-box-two{
  min-height:unset;
}
.social{
  display: flex;
    justify-content: space-around;
  border-bottom: 1px solid var(--classC);}
.social img {
     width: 20px;
     height: auto;
     margin: 15px 0;
     border-radius: 50px;
}
.social svg {
     width: 28px;
     height: auto;
     margin: 15px 0;
     border-radius: 5px;
}
.texiao:hover{
  transform: scale(1.4);
  transition: all .5s;
}
.bg_cl{
    background: url(https://gcore.jsdelivr.net/gh/love2wind/blogcdn@v3.3/spzac/img/bg-service-3.svg) right bottom no-repeat;
    background-size: 25%;
}
.msg_remind {
    top: 26px;
    left: 15px;
}
  
  /*短代码css*/
.j-line {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}
.j-line span {
    position: relative;
    color: #909399;
    line-height: 24px;
    height: 24px;
    padding: 0 15px;
    transition: padding 0.35s;
}
.j-line span::after {
    right: -35px;
    content: '';
    position: absolute;
    top: 50%;
    width: 20px;
    height: 1px;
    border-top: 1px solid #f73859;}
.j-line span::before {
    left: -35px;
    content: '';
    position: absolute;
    top: 50%;
    width: 20px;
    height: 1px;
    border-top: 1px solid #f73859;
}
.j-btn {
  display: inline-block;
    white-space: nowrap;
    font-weight: 400;
    line-height: 1.3;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .65rem 1.5rem .475rem 1.1rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin: auto 5px;
    text-indent: 0;
}
.j-alt {
    width: 100%;
    padding: 15px 15px 15px 35px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    line-height: 2em;
    white-space: inherit;
    text-overflow: ellipsis;
    transition: opacity 0.2s;
    font-size: 15px;
    border: 2px #e6a23c;
    margin: 5px auto;
}
.j-alt::before {
    content:'';
    position:absolute;
    top:50%;
    left:10px;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    width:20px;
    height:20px;
    vertical-align:top;
    background-size: 20px;
}
.j-alt.success {
    background-color:#f0f9eb;
    color: #67c23a;
    border: 1px solid #67c23a;
}
.j-alt.success strong{
    color: #67c23a;
}
.j-alt.success::before {
    background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjA1NzQ4Nzc4NzcyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI0MTUiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA4NS4zMzMzMzNjMjM1LjY0OCAwIDQyNi42NjY2NjcgMTkxLjAxODY2NyA0MjYuNjY2NjY3IDQyNi42NjY2NjdzLTE5MS4wMTg2NjcgNDI2LjY2NjY2Ny00MjYuNjY2NjY3IDQyNi42NjY2NjdTODUuMzMzMzMzIDc0Ny42NDggODUuMzMzMzMzIDUxMiAyNzYuMzUyIDg1LjMzMzMzMyA1MTIgODUuMzMzMzMzeiBtLTc0Ljk2NTMzMyA1NTAuNEwzNDYuNDUzMzMzIDU0NS4xNTJhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDEgMC02MC4zMzA2NjYgNjAuMzMwNjY3bDEyMC43MDQgMTIwLjcwNGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwIDYwLjMzMDY2NiAwbDMwMS42NTMzMzQtMzAxLjY5NmE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAwLTYwLjI4OC02MC4zMzA2NjdsLTI3MS41MzA2NjcgMjcxLjQ4OCAwLjA0MjY2NyAwLjA4NTMzM3oiIGZpbGw9IiM1MkM0MUEiIHAtaWQ9IjI0MTYiPjwvcGF0aD48L3N2Zz4=");
    background-repeat:no-repeat;
    background-position:center center;
}
.j-alt.info {
    background-color: #e2f2fb;
    color: #50bfff;
    border: 1px solid #50bfff;
}
.j-alt.info strong{
    color: #50bfff;
}
.j-alt.info::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxNDEyMjk2MTAyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU3MTg2IiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiPjxwYXRoIGQ9Ik01MTIgMGE1MTIgNTEyIDAgMSAwIDUxMiA1MTIgNTEyIDUxMiAwIDAgMC01MTItNTEyeiBtNTYuOTYgODUzLjMxMkg0NTUuMTA0di0xMTMuNzkyaDExMy43Mjh6IG0xMjkuNTM2LTM3MS4yYy01NS42OCA4NC44LTEyOC4zODQgOTcuMjgtMTI4LjM4NCAyMDAuMTkySDQ1NC40di0zMy42YTE3Ny42IDE3Ny42IDAgMCAxIDg3LjQ4OC0xNTguMDhjNjEuMzc2LTQ0LjggODEuNzI4LTU3LjYgODEuNzI4LTEyMC4yNTYgMC02OC4xNi02Ni41Ni04Ni42NTYtMTEyLjUxMi04Ni42NTZhMTA5LjQ0IDEwOS40NCAwIDAgMC0xMTIuOTYgMTE1LjJsLTExMy4yOC0wLjMyYzAtMTYzLjQ1NiAxMjUuMDU2LTIyNy4xMzYgMjUzLjY5Ni0yMjcuMTM2YTE5MC44NDggMTkwLjg0OCAwIDAgMSAyMDAuOTYgMTc0Ljc4NCAyMTkuMjY0IDIxOS4yNjQgMCAwIDEtNDEuMTUyIDEzNS44NzJ6IG0wIDAiIHAtaWQ9IjU3MTg3IiBmaWxsPSIjNTBiZmZmIj48L3BhdGg+PC9zdmc+);
    background-repeat: no-repeat;
    background-position:center center;
    background-size: 18px;
}
.j-alt.warning {
    background-color:#fdf6ec;
    color: #df8807;
    border: 1px solid #e6a23c;
}
.j-alt.warning strong{
    color: #e6a23c;
}
.j-alt.warning::before {
    background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjA1NzQ5NTM3NTM2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwNjciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA3OC43NjkyMzFDMjczLjcyMzA3NyA3OC43NjkyMzEgNzguNzY5MjMxIDI3My43MjMwNzcgNzguNzY5MjMxIDUxMnMxOTQuOTUzODQ2IDQzMy4yMzA3NjkgNDMzLjIzMDc2OSA0MzMuMjMwNzY5IDQzMy4yMzA3NjktMTk0Ljk1Mzg0NiA0MzMuMjMwNzY5LTQzMy4yMzA3NjlTNzUwLjI3NjkyMyA3OC43NjkyMzEgNTEyIDc4Ljc2OTIzMXogbTYxLjU5NzUzOCAyMDIuNDc2MzA3bC0xMy44NjMzODQgMzA2LjgwNjE1NGMwIDE4Ljc4NjQ2Mi0xNi42MjAzMDggMzIuMjU2LTM1Ljk5NzUzOSAzMi4yNTZoLTguMjcwNzY5Yy0xOS40MTY2MTUgMC0zMy4yOC0xMy40Njk1MzgtMzYuMDM2OTIzLTMyLjI5NTM4NGwtMTMuODYzMzg1LTMwNi43NjY3N2MwLTE4LjgyNTg0NiAxMy44NjMzODUtMzIuMjk1Mzg1IDMwLjQ4MzY5My0zMi4yOTUzODRoNDQuMzA3NjkyYzE5LjM3NzIzMSAwIDM1Ljk5NzUzOCAxMy40Njk1MzggMzMuMjQwNjE1IDMyLjI5NTM4NHogbS0xOC4xOTU2OTIgNDc3LjUzODQ2MmE1MS41NTQ0NjIgNTEuNTU0NDYyIDAgMCAxLTM2Ljk4MjE1NCAxNi4yNjU4NDZjLTE1Ljg3MiAwLTI2LjQyNzA3Ny01LjQzNTA3Ny0zNi45ODIxNTQtMTYuMjY1ODQ2LTEwLjU5NDQ2Mi0xMC44MzA3NjktMTUuODcyLTIxLjY2MTUzOC0xNS44NzItMzcuODg4IDAtMTYuMjY1ODQ2IDUuMjc3NTM4LTI3LjA5NjYxNSAxNS44NzItMzcuOTI3Mzg1IDEwLjU1NTA3Ny0xMC44MzA3NjkgMjEuMTEwMTU0LTE2LjIyNjQ2MiAzNi45ODIxNTQtMTYuMjI2NDYxIDE1LjgzMjYxNSAwIDI5LjA2NTg0NiA1LjM5NTY5MiAzOS42MjA5MjMgMTYuMjI2NDYxIDEwLjU1NTA3NyAxMC44MzA3NjkgMTUuODMyNjE1IDIxLjY2MTUzOCAxNS44MzI2MTYgMzcuOTI3Mzg1LTIuNTk5Mzg1IDE2LjIyNjQ2Mi03Ljg3NjkyMyAyOS43NzQ3NjktMTguNDcxMzg1IDM3Ljg4OHoiIGZpbGw9IiNGRjhGMDAiIHAtaWQ9IjYwNjgiPjwvcGF0aD48L3N2Zz4=");
    background-repeat:no-repeat;
    background-position:center center;
}
.j-alt.error {
    background-color:#fef0f0;
    color: #f56c6c;
    border: 1px solid #f56c6c;
}
.j-alt.error strong{
    color: #f56c6c;
}
.j-alt.error::before {
    background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjA1NzQ5NjAwMDMxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc0ODEiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA2NGE0NDggNDQ4IDAgMSAwIDQ0OCA0NDhBNDQ4IDQ0OCAwIDAgMCA1MTIgNjR6IG0yMjIuMDggNjA5LjkyYTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAxIDEtNjAuMzczMzMzIDYwLjM3MzMzM0w1MTIgNTcxLjUybC0xNjIuNzczMzMzIDE2Mi43NzMzMzNhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDAgMS02MC4zNzMzMzQtNjAuMzczMzMzTDQ1MC43NzMzMzMgNTEybC0xNjIuNzczMzMzLTE2My42MjY2NjdhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDEgMSA2MC4zNzMzMzMtNjAuMzczMzMzTDUxMiA0NTAuNzczMzMzbDE2Mi43NzMzMzMtMTYyLjc3MzMzM2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAxIDYwLjM3MzMzNCA2MC4zNzMzMzNMNTcxLjUyIDUxMnoiIGZpbGw9IiNGRjNEMUQiIHAtaWQ9Ijc0ODIiPjwvcGF0aD48L3N2Zz4=");
    background-repeat:no-repeat;
    background-position:center center;
}
.tip-success {
    position: relative;
    color: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    background: #61be33;
    background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
    background: -webkit-linear-gradient(left,#61be33,#8fce44);
    background: linear-gradient(90deg,#61be33,#8fce44);
    text-shadow: 0 -1px #61be33;
    -webkit-box-shadow: 0 3px 5px rgb(104 195 59 / 50%);
    box-shadow: 0 3px 5px rgb(104 195 59 / 50%);
    padding: 20px 20px 20px 40px;

}
.tip-success strong{
    color: #f56c6c;
}
.tip-success::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxNzc5NTQ2NDA1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM3MjgiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTUxMiA4NS4zMzMzMzNjMjM1LjY0OCAwIDQyNi42NjY2NjcgMTkxLjAxODY2NyA0MjYuNjY2NjY3IDQyNi42NjY2NjdzLTE5MS4wMTg2NjcgNDI2LjY2NjY2Ny00MjYuNjY2NjY3IDQyNi42NjY2NjdTODUuMzMzMzMzIDc0Ny42NDggODUuMzMzMzMzIDUxMiAyNzYuMzUyIDg1LjMzMzMzMyA1MTIgODUuMzMzMzMzeiBtLTc0Ljk2NTMzMyA1NTAuNEwzNDYuNDUzMzMzIDU0NS4xNTJhNDIuNjY2NjY3IDQyLjY2NjY2NyAwIDEgMC02MC4zMzA2NjYgNjAuMzMwNjY3bDEyMC43MDQgMTIwLjcwNGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAwIDYwLjMzMDY2NiAwbDMwMS42NTMzMzQtMzAxLjY5NmE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAwLTYwLjI4OC02MC4zMzA2NjdsLTI3MS41MzA2NjcgMjcxLjQ4OHoiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjM3MjkiPjwvcGF0aD48L3N2Zz4=");
    background-repeat: no-repeat;
    background-size: 26px;
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    top: 18px;
    left: 8px;
} 
.tip-info {
    position: relative;
    color: #fff;
    border-radius: 10px;
    background: #20a0ff;
    background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
    background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
    background: linear-gradient(90deg,#20a0ff,#20b8ff);
    -webkit-box-shadow: 0 3px 5px rgb(32 160 255 / 50%);
    text-shadow: 0 -1px #20a0ff;
    box-shadow: 0 3px 5px rgb(32 160 255 / 50%);
    margin-bottom: 20px;
    padding: 20px 20px 20px 40px;
}
.tip-info strong{
    color: #fff;
}
.tip-info::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxNzgwNTY0NTgzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU4NTEiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0eiBtODQgMzQzLjFsLTg3IDMwMS40Yy00LjggMTcuMi03LjIgMjguNi03LjIgMzMuOSAwIDMuMSAxLjMgNiAzLjggOC43czUuMiA0IDguMSA0YzQuOCAwIDkuNi0yLjEgMTQuNC02LjQgMTIuNy0xMC41IDI4LTI5LjQgNDUuOC01Ni44bDE0LjQgOC41Yy00Mi43IDc0LjQtODggMTExLjYtMTM2LjEgMTExLjYtMTguNCAwLTMzLTUuMi00My45LTE1LjUtMTAuOS0xMC4zLTE2LjMtMjMuNC0xNi4zLTM5LjIgMC0xMC41IDIuNC0yMy43IDcuMi0zOS45bDU4LjktMjAyLjdjNS43LTE5LjUgOC41LTM0LjIgOC41LTQ0LjEgMC02LjItMi43LTExLjctOC4xLTE2LjUtNS40LTQuOC0xMi43LTcuMi0yMi03LjItNC4yIDAtOS4zIDAuMS0xNS4zIDAuNGw1LjUtMTdMNTcwLjQgNDA3SDU5NnYwLjF6IG0xNy44LTg4LjdjLTEyLjIgMTIuMi0yNi45IDE4LjItNDQuMSAxOC4yLTE3IDAtMzEuNS02LjEtNDMuNy0xOC4yLTEyLjItMTIuMi0xOC4yLTI2LjktMTguMi00NC4xczYtMzEuOSAxOC00NC4xYzEyLTEyLjEgMjYuNi0xOC4yIDQzLjktMTguMiAxNy41IDAgMzIuMyA2LjEgNDQuMyAxOC4yIDEyIDEyLjIgMTggMjYuOSAxOCA0NC4xcy02LjEgMzEuOS0xOC4yIDQ0LjF6IiBwLWlkPSI1ODUyIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+");
    background-repeat: no-repeat;
    background-size: 25px;
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    top: 20px;
    left: 8px;
} 
.tip-error {
    position: relative;
    color: #fff;
    background: #ff4040;
    background: -webkit-gradient(linear,left top,right top,from(#ff4040),to(#f85c5c));
    background: -webkit-linear-gradient(left,#ff4040,#f85c5c);
    background: linear-gradient(90deg,#ff4040,#f85c5c);
    border-radius: 10px;
    -webkit-box-shadow: 0 3px 5px rgb(245 2 2 / 50%);
    box-shadow: 0 3px 5px rgb(245 2 2 / 50%);
    text-shadow: 0 -1px #ff4040;
    margin-bottom: 20px;
    padding: 20px 20px 20px 40px;
}
.tip-error strong{
    color: #fff;
}
.tip-error::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxNzgxNjAxMDUwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIwMTYiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTUxMiAxMDI0YTUxMiA1MTIgMCAxIDEgNTEyLTUxMiA1MTIgNTEyIDAgMCAxLTUxMiA1MTJ6IG0yNTkuMDcyLTY4MC4xOTJhNDIuNzUyIDQyLjc1MiAwIDAgMC02MC42NzItNjAuMTZsLTE4My4yOTYgMTgzLjI5Ni0xODMuMDQtMTgzLjI5NmE0My4wMDggNDMuMDA4IDAgMCAwLTMwLjIwOC0xMi41NDQgNDEuOTg0IDQxLjk4NCAwIDAgMC0zMC4yMDggMTIuNTQ0IDQyLjQ5NiA0Mi40OTYgMCAwIDAgMCA2MC4xNmwxODMuNTUyIDE4My44MDgtMTgzLjI5NiAxODMuNTUyYTQyLjc1MiA0Mi43NTIgMCAwIDAgNjAuNDE2IDYwLjE2TDUyNy4xMDQgNTg4LjhsMTgzLjI5NiAxODMuMjk2YTQyLjc1MiA0Mi43NTIgMCAwIDAgNjAuNjcyLTYwLjE2TDU4OC44IDUyNy42MTZsMTgzLjI5Ni0xODMuODA4eiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iMjAxNyI+PC9wYXRoPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-size: 22px;
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    top: 20px;
    left: 8px;
} 
.tip-warning {
    position: relative;
    margin-bottom: 20px;
    padding: 20px 20px 20px 40px;
    color: #fff;
    border-radius: 10px;
    background: #ff953f;
    background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
    background: -webkit-linear-gradient(left,#ff953f,#ffb449);
    background: linear-gradient(90deg,#ff953f,#ffb449);
    text-shadow: 0 -1px #ff953f;
    -webkit-box-shadow: 0 3px 5px rgb(255 154 73 / 50%);
    box-shadow: 0 3px 5px rgb(255 154 73 / 50%);
}

.tip-warning strong{
    color: #fff;
}
.tip-warning::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxNzgxMDcxMzgyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE1NDIiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTAgMGgxMDI0djEwMjRIMHoiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMCIgcC1pZD0iMTU0MyI+PC9wYXRoPjxwYXRoIGQ9Ik01MTAuMDQ1IDBDMjI4LjM1MiAwIDAgMjI4LjM1MiAwIDUxMC4wNDVjMCAyODEuNjcgMjI4LjM1MiA1MDkuOTk5IDUxMC4wNDUgNTA5Ljk5OSAyODEuNjcgMCA1MTAuMDIyLTIyOC4zNTIgNTEwLjAyMi01MTAuMDIyQzEwMjAuMDY3IDIyOC4zNTIgNzkxLjczOCAwIDUxMC4wNDUgMHogbTAgNzkyLjk3MmE1Ni41NzYgNTYuNTc2IDAgMSAxIDAtMTEzLjE3NiA1Ni41NzYgNTYuNTc2IDAgMCAxIDAgMTEzLjE3NnogbTI4LjI3Ni0yMjkuNGMwIDMxLjM0OS0xMi45ODYgNTYuNTc2LTI4LjI3NiA1Ni41NzZzLTI4LjMtMjUuMjI3LTI4LjMtNTYuNTc2bC0yOC4zLTI1MS41NzhhNTYuNTc2IDU2LjU3NiAwIDAgMSAxMTMuMTc2IDBsLTI4LjMgMjUxLjU3OHoiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjE1NDQiPjwvcGF0aD48L3N2Zz4=");
    background-repeat: no-repeat;
    background-size: 22px;
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    top: 20px;
    left: 8px;
} 

/*外链样式*/
.external-link {
    display: inline;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxMjAzNjg5NTAzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxNDMyIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik01MTIgMjEzLjMzMzMzM2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxIDAgODUuMzMzMzM0SDIxMy4zMzMzMzNsLTUuODAyNjY2IDAuNDI2NjY2YTQyLjUzODY2NyA0Mi41Mzg2NjcgMCAwIDAtMzYuNDggMzYuNDM3MzM0TDE3MC42NjY2NjcgMzQxLjMzMzMzM3Y0NjkuMzMzMzM0bDAuNDI2NjY2IDUuODAyNjY2YTQyLjUzODY2NyA0Mi41Mzg2NjcgMCAwIDAgMzYuNDM3MzM0IDM2LjQ4TDIxMy4zMzMzMzMgODUzLjMzMzMzM2g0NjkuMzMzMzM0bDUuODAyNjY2LTAuNDI2NjY2YTQyLjUzODY2NyA0Mi41Mzg2NjcgMCAwIDAgMzYuNDgtMzYuNDM3MzM0TDcyNS4zMzMzMzMgODEwLjY2NjY2N3YtMjk4LjY2NjY2N2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMCAxIDg1LjMzMzMzNCAwdjI5OC42NjY2NjdhMTI4IDEyOCAwIDAgMS0xMjggMTI4SDIxMy4zMzMzMzNhMTI4IDEyOCAwIDAgMS0xMjgtMTI4VjM0MS4zMzMzMzNhMTI4IDEyOCAwIDAgMSAxMjgtMTI4aDI5OC42NjY2Njd6IG0zODQtMTI4aDAuODUzMzMzYzAuODk2IDAgMS44MzQ2NjcgMC4wODUzMzMgMi43MzA2NjcgMC4xNzA2NjdMODk2IDg1LjMzMzMzM2E0My4wMDggNDMuMDA4IDAgMCAxIDcuNTA5MzMzIDAuNjgyNjY3bDAuOTgxMzM0IDAuMTcwNjY3YTQyLjM2OCA0Mi4zNjggMCAwIDEgMTcuNjY0IDguMTA2NjY2bDAuMDg1MzMzIDAuMDQyNjY3IDAuNDI2NjY3IDAuMzg0YzIuNTYgMi4wNDggNC45MDY2NjcgNC4zOTQ2NjcgNi45MTIgNi45NTQ2NjdsLTMuNDEzMzM0LTMuODRhNDMuMDA4IDQzLjAwOCAwIDAgMSAxMi40NTg2NjcgMjguOHYtMC4wNDI2NjdMOTM4LjY2NjY2NyAxMjh2MjU2YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEtODUuMzMzMzM0IDBWMjMwLjk5NzMzM2wtMzc5LjczMzMzMyAzNzkuNzMzMzM0YTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEtNjAuMzMwNjY3LTYwLjM3MzMzNEw3OTIuOTE3MzMzIDE3MC42NjY2NjdINjQwYTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAwIDEgMC04NS4zMzMzMzRoMjU2eiIgZmlsbD0iIzAwN2JmZiIgcC1pZD0iNDE0MzMiPjwvcGF0aD48L3N2Zz4=);
    background-size: 1em;
    background-repeat: no-repeat;
    background-position: right top;
    padding-right: 1.3em;
    text-indent: 0px;
    border-bottom: 1px solid #007bff;
    padding-bottom: 1px;
}
.tips {
border-radius: 0 2px 2px 0;
    border-left: 4px solid #f66;
    margin: 1em 10px 1em 3px;
    padding: 12px 24px 12px 30px;
    position: relative;
    line-height: 1.7rem;
    word-spacing: .05rem;
    background-color: #f8f8f8;
    overflow: revert;
    font-size: 15px;
}
.tips::before {
background-color: #f66;
    border-radius: 100%;
    color: #fff;
    content: "i";
    font-family: "Font Awesome 5 Free",Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;
    font-size: 15px;
    /* font-weight: 700; */
    left: -12px;
    line-height: 20px;
    position: absolute;
    height: 20px;
    width: 20px;
    text-align: center;
    top: 20px;
}
.bid__head-img {
    display: block;
    width: 180px;
    margin-right: 15px;
}
  #toc-list {
    max-width: 220px;
    min-width: 180px;
}
/*目录*/
.index-menu {
    font-size: 14px;
    list-style: none outside none;
    padding-right: 20px;
}
.index-menu-list {
    margin-left:15px;
    padding-left: 0;
}
.index-menu-item {
    padding:3px 0;
}
.index-menu-link:hover {
    background:0 0;
    color:#fa7268;
    text-decoration:underline;
}
.index-menu-link {
    color: #4e4e4e;
    text-decoration: none;
    display: inline;
    padding: 5px 0;
    line-height: 26px;
}
.menu-target-fix {display:block; position:relative; top:-75px; /*偏移量}    锚点跳转定位*/
  /*标签云*/
#tag-clould-color {
    padding: 3px 5px 3px 5px;
    border-radius: 4px;
    color: #FFFFFF;
    margin: 3px 3px 3px 0;
    display: inline-block;
}
  #tag-clould-color a{
    color: #FFFFFF;
}
/*文章页标签*/
.post__tags a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 26px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid rgba(133,153,171,0.2);
    background-color: #fafafa;
    color: #AAAEB3;
    font-size: 13px;
    margin-right: 15px;
    margin-bottom: 15px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjMxMjYyMzQ2Njc1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc0NjIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE0NS42NjQgNzE3Ljk5NDY2N2ExNzAuNjY2NjY3IDE3MC42NjY2NjcgMCAwIDEgMC0yNDEuMzIyNjY3bDM0MS4zMzMzMzMtMzQxLjMzMzMzM0ExNzAuNjY2NjY3IDE3MC42NjY2NjcgMCAwIDEgNjA3LjcwMTMzMyA4NS4zMzMzMzNIODUzLjMzMzMzM2E4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAxIDg1LjMzMzMzNCA4NS4zMzMzMzR2MjQ1LjYzMmExNzAuNjY2NjY3IDE3MC42NjY2NjcgMCAwIDEtNTAuMDA1MzM0IDEyMC43MDRsLTM0MS4zMzMzMzMgMzQxLjMzMzMzM2ExNzAuNjY2NjY3IDE3MC42NjY2NjcgMCAwIDEtMjQxLjMyMjY2NyAwbC0xNjAuMzQxMzMzLTE2MC4zNDEzMzN6IG02MC4zMzA2NjctNjAuMzMwNjY3bDE2MC4zNDEzMzMgMTYwLjM0MTMzM2E4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAwIDEyMC42NjEzMzMgMGwzNDEuMzMzMzM0LTM0MS4zMzMzMzNBODUuMzMzMzMzIDg1LjMzMzMzMyAwIDAgMCA4NTMuMzMzMzMzIDQxNi4yOTg2NjdWMTcwLjY2NjY2N2gtMjQ1LjYzMmE4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAwLTYwLjM3MzMzMyAyNS4wMDI2NjZsLTM0MS4zMzMzMzMgMzQxLjMzMzMzNGE4NS4zMzMzMzMgODUuMzMzMzMzIDAgMCAwIDAgMTIwLjY2MTMzM3pNNzA0IDM4NGE2NCA2NCAwIDEgMSAwLTEyOCA2NCA2NCAwIDAgMSAwIDEyOHoiIGZpbGw9IiNlMDYyMGQiIHAtaWQ9Ijc0NjMiPjwvcGF0aD48L3N2Zz4=);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-right: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    background-size: 16px;
}
.sidebox__content::-webkit-scrollbar { width: 0 !important }
pre code::-webkit-scrollbar { width: 0 !important }
.respond #new_comment_form textarea {
    background: url(https://gcore.jsdelivr.net/gh/drew233/cdn/20200409110727.webp) right bottom no-repeat;
}

为代码添加复制

//html5 给typecho添加 复制代码 功能 
// by 兔子昂
var codeblocks = document.getElementsByTagName("pre")
//循环每个pre代码块，并添加 复制代码

for (var i = 0; i < codeblocks.length; i++) {
    //显示 复制代码 按钮
    currentCode = codeblocks[i]
    currentCode.style = "position: relative;"
    var copy = document.createElement("div")
    copy.style = "position: absolute;right: 4px;\
    top: 4px;background-color: white;padding: 2px 8px;\
    margin: 8px;border-radius: 4px;cursor: pointer;\
    box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05);"
    copy.innerHTML = "复制"
    currentCode.appendChild(copy)
    //让所有 "复制"按钮 全部隐藏
    copy.style.visibility = "hidden"
}


for (var i = 0; i < codeblocks.length; i++) {


    !function (i) {
        //鼠标移到代码块，就显示按钮
        codeblocks[i].onmouseover = function () {
            codeblocks[i].childNodes[1].style.visibility = "visible"
        }

        //执行 复制代码 功能
        function copyArticle(event) {
            const range = document.createRange();

            //范围是 code，不包括刚才创建的div
            range.selectNode(codeblocks[i].childNodes[0]);

            const selection = window.getSelection();
            if (selection.rangeCount > 0) selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand('copy');

            codeblocks[i].childNodes[1].innerHTML = "复制成功"
            setTimeout(function () {
                codeblocks[i].childNodes[1].innerHTML = "复制"
            }, 1000);
            //清除选择区
            if (selection.rangeCount > 0) selection.removeAllRanges(); 0
        }
        codeblocks[i].childNodes[1].addEventListener('click', copyArticle, false);

    }(i);

    !function (i) {
        //鼠标从代码块移开 则不显示复制代码按钮
        codeblocks[i].onmouseout = function () {
            codeblocks[i].childNodes[1].style.visibility = "hidden"
        }
    }(i);
}

将上面代码另存为 codecopy.js 放置到主题目录，然后在页尾添加下面代码

<script src="你的主题目录路径/codecopy.js"></script>

via:利用JavaScript 为Typecho添加 复制代码 功能 仿csdn - 兔子昂

美化插件

https://github.com/racns/AliceStyle

AliceStyle美化插件（十分强大的插件） - 萌卜兔's (racns.com)