声明

魔改是我看到有趣的展示效果而搬运的，有的不知道作者名字，而没标明出处的话，请大佬们手下留情。

给网站添加crisp在线客服插件

复制代码添加至后台主题设置自定义输出head头部的HTML代码即可

文章评论显示 UserAgent 功能

如果是使用松鼠大大的插件请把代码放在

<b class="fn"><?php echo $author; ?></b>
之后

简介

给博客加一个文章评论显示 UserAgent 功能，
左岸结合网上的代码，以及网上开源的图标的 png 格式重新安排了一个 Comment-UA，支持主流操作系统以及浏览器（没找到匹配的、不认识的浏览器通通视为 Google Chrome
1huaji.png
目前图片全部放在又拍云存储，不用担心拖慢速度。

效果显示

2730977122.png

  • 目前可以识别的操作系统以及浏览器
    3404854218.png

这里以 handsome 为例，其他主题操作方法类似

食用方法第一步

将下面这段 css 全部加入到 handsome/assets/css/handsome.min.css 末尾

 .ua-icon{display:inline-block;width:1pc;height:1pc;background-size:cover;background-repeat:no-repeat;vertical-align:text-top}.icon-360{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/360.png)}.icon-android{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/android.png);height:19px}.icon-apple{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/apple.png)}.icon-baidu{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/baidu.png)}.icon-chrome{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/chrome.png)}.icon-edge{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/edge.png)}.icon-firefox{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/firefox.png)}.icon-google{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/google.png)}.icon-ie{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/ie.png)}.icon-liebao{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/liebao.png)}.icon-linux{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/linux.png)}.icon-mac{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/mac.png)}.icon-opera{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/opera.png)}.icon-qq{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/qq.png)}.icon-quark{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/quark.png)}.icon-safari{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/safari.png)}.icon-ubuntu{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/ubuntu.png)}.icon-uc{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/uc.png)}.icon-win1{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/win1.png)}.icon-win2{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/win2.png)}

也可后台加入自定义 css 或是直接在 header.php 中引入

食用方法第二步

找到 handsome/functions.php，将下面代码完整复制，加到 functions.php 文件的最末尾

  // 获取浏览器信息
    function getBrowser($agent)
    {
        if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) {
            $outputer = '<i class="ua-icon icon-ie"></i>&nbsp;&nbsp;Internet Explore';
        } else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) {
          $str1 = explode('Firefox/', $regs[0]);
    $FireFox_vern = explode('.', $str1[1]);
            $outputer = '<i class="ua-icon icon-firefox"></i>&nbsp;&nbsp;FireFox';
        } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) {
          $str1 = explode('Maxthon/', $agent);
    $Maxthon_vern = explode('.', $str1[1]);
            $outputer = '<i class="ua-icon icon-edge"></i>&nbsp;&nbsp;MicroSoft Edge';
        } else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) {
    $outputer = '<i class="ua-icon icon-360"></i>&nbsp;&nbsp;360极速浏览器';
        } else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) {
            $str1 = explode('Edge/', $regs[0]);
    $Edge_vern = explode('.', $str1[1]);
            $outputer = '<i class="ua-icon icon-edge"></i>&nbsp;&nbsp;MicroSoft Edge';
        } else if (preg_match('/UC/i', $agent)) {
                  $str1 = explode('rowser/',  $agent);
    $UCBrowser_vern = explode('.', $str1[1]);
            $outputer = '<i class="ua-icon icon-uc"></i>&nbsp;&nbsp;UC浏览器';
        }  else if (preg_match('/QQ/i', $agent, $regs)||preg_match('/QQBrowser\/([^\s]+)/i', $agent, $regs)) {
                      $str1 = explode('rowser/',  $agent);
    $QQ_vern = explode('.', $str1[1]);
            $outputer = '<i class= "ua-icon icon-qq"></i>&nbsp;&nbsp;QQ浏览器';
        } else if (preg_match('/UBrowser/i', $agent, $regs)) {
                  $str1 = explode('rowser/',  $agent);
    $UCBrowser_vern = explode('.', $str1[1]);
            $outputer = '<i class="ua-icon icon-uc"></i>&nbsp;&nbsp;UC浏览器';
        }  else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
            $outputer = '<i class= "ua-icon icon-opera"></i>&nbsp;&nbsp;Opera';
        } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) {
    $str1 = explode('Chrome/', $agent);
    $chrome_vern = explode('.', $str1[1]);
            $outputer = '<i class="ua-icon icon-chrome""></i>&nbsp;&nbsp;Google Chrome';
        } else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) {
             $str1 = explode('Version/',  $agent);
    $safari_vern = explode('.', $str1[1]);
            $outputer = '<i class="ua-icon icon-safari"></i>&nbsp;&nbsp;Safari';
        } else{
            $outputer = '<i class="ua-icon icon-chrome"></i>&nbsp;&nbsp;Google Chrome';
        }
        echo $outputer;
    }
    // 获取操作系统信息
    function getOs($agent)
    {
        $os = false;
     
        if (preg_match('/win/i', $agent)) {
            if (preg_match('/nt 6.0/i', $agent)) {
                $os = '&nbsp;&nbsp;<i class= "ua-icon icon-win1"></i>&nbsp;&nbsp;Windows Vista&nbsp;/&nbsp;';
            } else if (preg_match('/nt 6.1/i', $agent)) {
                $os = '&nbsp;&nbsp;<i class= "ua-icon icon-win1"></i>&nbsp;&nbsp;Windows 7&nbsp;/&nbsp;';
            } else if (preg_match('/nt 6.2/i', $agent)) {
                $os = '&nbsp;&nbsp;<i class="ua-icon icon-win2"></i>&nbsp;&nbsp;Windows 8&nbsp;/&nbsp;';
            } else if(preg_match('/nt 6.3/i', $agent)) {
                $os = '&nbsp;&nbsp;<i class= "ua-icon icon-win2"></i>&nbsp;&nbsp;Windows 8.1&nbsp;/&nbsp;';
            } else if(preg_match('/nt 5.1/i', $agent)) {
                $os = '&nbsp;&nbsp;<i class="ua-icon icon-win1"></i>&nbsp;&nbsp;Windows XP&nbsp;/&nbsp;';
            } else if (preg_match('/nt 10.0/i', $agent)) {
                $os = '&nbsp;&nbsp;<i class="ua-icon icon-win2"></i>&nbsp;&nbsp;Windows 10&nbsp;/&nbsp;';
            } else{
                $os = '&nbsp;&nbsp;<i class="ua-icon icon-win2"></i>&nbsp;&nbsp;Windows X64&nbsp;/&nbsp;';
            }
        } else if (preg_match('/android/i', $agent)) {
        if (preg_match('/android 9/i', $agent)) {
                $os = '&nbsp;&nbsp;<i class="ua-icon icon-android"></i>&nbsp;&nbsp;Android Pie&nbsp;/&nbsp;';
            }
        else if (preg_match('/android 8/i', $agent)) {
                $os = '&nbsp;&nbsp;<i class="ua-icon icon-android"></i>&nbsp;&nbsp;Android Oreo&nbsp;/&nbsp;';
            }
        else{
                $os = '&nbsp;&nbsp;<i class="ua-icon icon-android"></i>&nbsp;&nbsp;Android&nbsp;/&nbsp;';
        }
        }
        else if (preg_match('/ubuntu/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-ubuntu"></i>&nbsp;&nbsp;Ubuntu&nbsp;/&nbsp;';
        } else if (preg_match('/linux/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class= "ua-icon icon-linux"></i>&nbsp;&nbsp;Linux&nbsp;/&nbsp;';
        } else if (preg_match('/iPhone/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-apple"></i>&nbsp;&nbsp;iPhone&nbsp;/&nbsp;';
        } else if (preg_match('/mac/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-mac"></i>&nbsp;&nbsp;MacOS&nbsp;/&nbsp;';
        }else if (preg_match('/fusion/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-android"></i>&nbsp;&nbsp;Android&nbsp;/&nbsp;';
        } else {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-linux"></i>&nbsp;&nbsp;Linux&nbsp;/&nbsp;';
        }
        echo $os;
    }

终极主菜：

在 handsome/component/comments.php 中找到合适位置添加以下代码：
（Mirages 在 mirages/libs/comments.php）

  <span class="comment-ua">
        <?php getOs($comments->agent); ?>
        <?php getBrowser($comments->agent); ?></span>

1611624341.png
如果修改完都显示 Linux 的话，需要将上面的 $comments 替换成 $this 即可，注意代码缩进
修改完后刷新浏览器缓存，现在你的评论 UA 已经变得很漂亮啦！

恩嗯嗯！老规矩来个出处传送门：：左岸大大

评论一键打卡


以handsome主题为例教程：

1、首先在后台-->设置外观-->开发者设置-->自定义JavaScript加入以下代码:

function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}

2、打开主题目录的component/comments.php里面的126行到141行：
17-33-06-2594808842.png

替换以下代码：

                <div class="comment-form-comment form-group">
                    <label for="comment"><?php _me("评论") ?> <span class="required text-danger">（请使用真实邮箱地址，方便接收评论回复）</span>
                        <span class="required text-danger"></span></label>
                    <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                    <div class="OwO" style="display: inline;"></div><div class="OwO" style="display: inline;"><a href="javascript:addNumber('滴！访客卡！请上车的乘客系好安全带，现在是：')" class="OwO-logo"><i class="fontello fontello-user face"></i><span class="OwOlogotext">打卡</span></a></div>
                    <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                    data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                        <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                        <div class="secret_comment_check">
                            <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                <input type="checkbox" id="secret_comment_checkbox">
                                <i></i>
                            </label>
                        </div>
                    </div>
                </div>

3、在后台-->设置外观-->开发者设置-->自定义CSS加入以下代码:

.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}

本文转自:久念's Blog

主题的一些小修改教程--添加至后台主题设置 自定义CSS

首页文章版式圆角化
本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。

 #圆角大小可修改15px数值(别复制该行)
    /*首页文章版式圆角化*/
    .panel{
        border: none;
        border-radius: 15px;
    }
    
    .panel-small{
        border: none;
        border-radius: 15px;
    }
    
    .item-thumb{
        border-radius: 15px;  
    }

首页文章图片获取焦点放大
本项修改的是首页文章图片，将鼠标放到首页头图后使其放大。

 #放大的时间和大小自行修改以下数值(别复制该行)
    /*首页文章图片获取焦点放大*/
    .item-thumb{
        cursor: pointer;  
        transition: all 0.6s;  
    }
    
    .item-thumb:hover{
          transform: scale(1.05);  
    }
    
    .item-thumb-small{
        cursor: pointer;  
        transition: all 0.6s;
    }
    
    .item-thumb-small:hover{
        transform: scale(1.05);
    }

首页头像转动并放大
本项修改的是首页头像，将鼠标放至头像后使其转动并放大。

   #转动快慢和头像大小自行修改数值(别复制该行)
    /*首页头像自动旋转*/
    .thumb-lg{
        width:130px;
    }
    
    .avatar{
        -webkit-transition: 0.4s;
        -webkit-transition: -webkit-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out; 
    }
    
    .avatar:hover{
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
    }
    
    #aside-user span.avatar{
        animation-timing-function:cubic-bezier(0,0,.07,1)!important;
        border:0 solid
    }
    
    #aside-user span.avatar:hover{
        transform:rotate(360deg) scale(1.2);
        border-width:5px;
        animation:avatar .5s
    }

首页头像自动旋转
本项修改的是首页头像，效果就是首页使其自动旋转。

 #旋转速度请修改3s数值(别复制该行)
    /*首页头像放大并自动旋转*/
    .thumb-lg{
        width:130px;
    }
    
    @-webkit-keyframes rotation{
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }
    
    .img-full{
        -webkit-transform: rotate(360deg);
        animation: rotation 3s linear infinite;
        -moz-animation: rotation 3s linear infinite;
        -webkit-animation: rotation 3s linear infinite;
        -o-animation: rotation 3s linear infinite;
    }

文章标题居中
本项修改的是文章标题。

    /*文章标题居中*/
    .panel h2{
        text-align: center; 
    }
    .post-item-foot-icon{
        text-align: center;
    }

首页文章版式阴影化
本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。

 #阴影颜色修改rgba后面的值(别复制该行)
    /*panel阴影*/
    .panel{
       box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }
    
    .panel:hover{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }
    
    .panel-small{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }
    
    .panel-small:hover{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }
    
    /*如果也想使盒子四周也有阴影，加上以下代码*/
    .app.container {
        box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
    }

自定义滚动条滑块
本项修改针对浏览器最右边的滚动条滑块，使其改变样式。

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar{
        width: 3px;
        height: 16px;
        background-color: rgba(255,255,255,0);
    }
     
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: rgba(255,255,255,0);
    }
     
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb{
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }

鼠标点击特效
将以下代码放在主题的handsome/component/footer.php中的</body>之前即可。

  #字体自行修改
    <script type="text/javascript"> 
    /* 鼠标特效 */
    var a_idx = 0; 
    jQuery(document).ready(function($) { 
        $("body").click(function(e) { 
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
            var $i = $("<span/>").text(a[a_idx]); 
            a_idx = (a_idx + 1) % a.length; 
            var x = e.pageX, 
            y = e.pageY; 
            $i.css({ 
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
                "top": y - 20, 
                "left": x, 
                "position": "absolute", 
                "font-weight": "bold", 
                "color": "#ff6651" 
            }); 
            $("body").append($i); 
            $i.animate({ 
                "top": y - 180, 
                "opacity": 0 
            }, 
            1500, 
            function() { 
                $i.remove(); 
            }); 
        }); 
    }); 
    </script>

原文出处传送门：Rat's 何以解忧，唯有暴富。

后续增加来啦！！！

左侧文章图标和评论头像鼠标悬停旋转

/*左侧文章图标和评论头像鼠标悬停旋转*/
.img-circle {
    transition: all 0.3s;
}

.img-circle:hover {
    transform: rotate(360deg);
}

打赏图标跳动

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

彩色标签云

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

首页文章列表悬停上浮

/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

首页文章列表头图悬停放大并将超出范围隐藏

/*首页文章列表头图悬停放大并将超出范围隐藏*/
.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}

文章内头图和文章图片悬停放大并将超出范围隐藏

/*文章内头图和文章图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

复制弹框

首先将下方代码复制添加至后台主题设置自定义输出body 尾部的HTML代码

<!--复制弹框-->
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};

最后复制下方代码打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};

文本框打字机特效

<!--文本框打字机特效-->
<script type="text/javascript" src="https://lioeo.cn/usr/commentTyping.js"></script>

再来一个出处：云雾！！

在右侧添加一个能够实时统计访问你站点的地球插件

这是一个能够实时统计访问你的站点或者博客的插件。

RevolverMaps官网
使用方法也很简单，选出自己喜欢的样式之后，复制下面的代，在后面添加自定义js会用到。
20190919221754.png
找到handsome/component/sidebar.php，搜索在文章页面输出目录，在其他页面输出标签云，并在这行上面插入如下代码：

<section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
              <h3 class="widget-title m-t-none text-md">访客统计</h3>
              <div id="visitors" class="tags l-h-2x">
              </div>
        </section>

这里要注意，您在RevolverMaps上复制的代码是必须手动转义的，也就是把/,"变为/,"，
假设<script src="a.js"></script>，那么转义后为<script src="a.js"></script>
您也可以使用我转义好的代码，这个代码会放到下面自定义js我给的注释那里：

<script type=\"text/javascript\" src=\"//rf.revolvermaps.com/0/0/6.js?i=5ue85yb3j5j&amp;m=7&amp;c=e63100&amp;cr1=ffffff&amp;f=arial&amp;l=0&amp;bv=90&amp;lx=-420&amp;ly=420&amp;hi=20&amp;he=7&amp;hc=a8ddff&amp;rs=80\" async=\"async\"><\/script>

然后添加自定义js：

$(document).ready(function(){
$("#visitors").append("这里是您在RevolverMaps地球网站上复制的转义后的代码");
});
$(document).on('pjax:complete', function() {
$('#morphing').tooltip('show'); 
$("#visitors").append("这里是您在RevolverMaps地球网站上复制的转义后的代码");
});

然后刷新页面，您就可以玩球了。

最终来个文章出处：gogobody

标签栏装修

### 浏览器标签栏装修

  • 放在footer.php文件的最后body标签外：
<script>
/*标签移走后显示的文字*/
document.addEventListener('visibilitychange',function()
{if(document.visibilityState=='hidden')
{normal_title=document.title;document.title='..(˚ ˃̣̣̥᷄⌓˂̣̣̥᷅ )‧º·˚ 宝贝别走啊 - 月丶小柒';}
else{document.title=normal_title;}});</script>
<?php $this->options->bottomHtml(); ?>

主题公告样式修改

修改教程

handsome主题公告相关文件位置：/handsome/index.php

新版本主题注释第34行<?php Content::getNoticeContent(); ?>代码将替换代码放到需要的地方

把公告移至header下方
1376989804.png
这里直接剪切整个公告到header下方即可，如图。
00

编写公告

这里我已经写好了，首先是HTML:

<!--公告位置-->
<div class="notice notice-open">
  <div class="notice-header">
      <i class="glyphicon glyphicon-eye-open">&nbsp;</i>
    <div class="notice-title">皇榜</div>
    <i class="glyphicon glyphicon-align-right">&nbsp;闭合</i>
  </div>
  <ul class="notice-body">
      <?php $this->options->blogNotice(); ?>
  </ul>
</div>
<!--/公告位置-->

替换掉原来的：
00
接着上CSS:

  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;

    src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://cdn.irow.top/mdui/0.4.3/icons/material-icons/MaterialIcons-Regular.woff2) format('woff2'), url(https://cdn.irow.top/mdui/0.4.3/icons/material-icons/MaterialIcons-Regular.woff) format('woff');
  }

  .notice {
    background-color: #fff;
    color: rgba(0, 0, 0, 0.87);
    display: block;
    font-size: 14.5px;
    line-height: 16.675px;
    text-size-adjust: 100%;
    width: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .notice-header {
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    height: 48px;
    min-height: 48px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 0px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 0px;
    position: relative;
    text-decoration-color: rgba(0, 0, 0, 0.87);
    text-decoration-line: none;
    text-decoration-style: solid;
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-property: background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    -webkit-box-align: center;
  }

  .notice-icon {
    direction: ltr;
    display: block;
    font-family: "Material Icons";
    font-feature-settings: "liga";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    height: 24px;
    letter-spacing: normal;
    line-height: 24px;
    overflow-wrap: normal;
    text-align: center;
    text-rendering: optimizelegibility;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
    width: 24px;
    -webkit-font-smoothing: antialiased;
  }

  .notice-title {
    box-sizing: content-box;
    display: block;
    flex-grow: 1;
    font-size: 16px;
    font-weight: 400;
    height: 20px;
    line-height: 20px;
    padding-bottom: 14px;
    padding-top: 14px;
    -webkit-box-flex: 1;
  }

  .notice-collapse {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
    -webkit-transform: rotate(0);
    transform: rotate(0);
    will-change: transform;
  }

  .notice-body {
    background-color: rgba(0, 0, 0, 0);
    font-size: 13px;
    line-height: 14.95px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-block-end: 0px;
    margin-block-start: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 0px;
    padding-inline-start: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    will-change: height;
  }

  .notice-body>li {
    min-height: 40px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 16px;
    padding-left: 72px;
    overflow: hidden;
    line-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .notice-body>li:before {
    position: absolute;
    right: 0;
    left: 0;
    display: block;
    height: 1px;
    content: ' ';
    background-color: rgba(0, 0, 0, .12);
  }

  .notice-header:hover,
  .notice-body>li:hover {
    background-color: rgba(0, 0, 0, .08);
  }

  .notice-open>.notice-header .notice-collapse {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

CSS随便加到页面里就行，你可以加在外部样式表中，也可以加到外观设置中的自定义CSS里。
完成后效果如下：
00
最后添加JS实现折叠功能：

  $(function() {
    if (!$('.notice').hasClass('notice-open')) {
      $('.notice-body').hide();
    }
    $('.notice-header').click(function() {
      $(this).parent().toggleClass('notice-open');
      $('.notice-body').fadeToggle('fast');
    });
  })

同样只要加到网页中即可，你可以直接加在外观设置的自定义JS中。
另外如果你开了pjax的话，这里给出简单解决方案。在pjax回调函数中加入：

if (null != $('.notice')) {
    $('.notice').removeClass('notice-open');
    $('.notice-body').hide();
    $('.notice-header').click(function () {
        $(this).parent().toggleClass('notice-open');
        $('.notice-body').fadeToggle('fast');
    });
}

炫彩透明模式
找到如下路径/usr/themes/handsome/assets/css/features中的coolopacity.min.css文件，在末尾添加：

.notice {
    background-color: rgba(255, 255, 255, .15);
    color: #fff;
}

食用方法
之后公告只要在外观设置的公告里用<li>分条写就行了。例如下面这样：
11.png
老规矩 来个文章出处：大佬

版权属于：月丶小柒’s Blog

本文链接：https://www.xiaoqi22.cn/archives/20190908/85.html

版权声明：若无注明，本文皆为“月丶小柒’s Blog”原创，所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。 您可以自由的转载和修改，但请务必注明文章来源且不可用于商业目的

Last modification：October 13th, 2021 at 06:30 pm
© 允许规范转载
如果觉得不错，请随意赞赏