声明
魔改是我看到有趣的展示效果而搬运的，有的不知道作者名字，而没标明出处的话，请大佬们手下留情。
给网站添加crisp在线客服插件
- 注册crisp账户并添加网站：https://app.crisp.chat/initiate/signup/
- 注册完成后点击设置----网站设置----显示整合----HTML
复制代码添加至后台主题设置自定义输出head头部的HTML代码即可
文章评论显示 UserAgent 功能
如果是使用松鼠大大的插件请把代码放在
<b class="fn"><?php echo $author; ?></b>
之后
简介
给博客加一个文章评论显示 UserAgent 功能，
左岸结合网上的代码，以及网上开源的图标的 png 格式重新安排了一个 Comment-UA，支持主流操作系统以及浏览器（没找到匹配的、不认识的浏览器通通视为 Google Chrome
目前图片全部放在又拍云存储，不用担心拖慢速度。
效果显示
- 目前可以识别的操作系统以及浏览器
这里以 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> 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> 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> MicroSoft Edge';
} else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-360"></i> 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> 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> 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> 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> UC浏览器';
} else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
$outputer = '<i class= "ua-icon icon-opera"></i> 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> 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> Safari';
} else{
$outputer = '<i class="ua-icon icon-chrome"></i> Google Chrome';
}
echo $outputer;
}
// 获取操作系统信息
function getOs($agent)
{
$os = false;
if (preg_match('/win/i', $agent)) {
if (preg_match('/nt 6.0/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1"></i> Windows Vista / ';
} else if (preg_match('/nt 6.1/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1"></i> Windows 7 / ';
} else if (preg_match('/nt 6.2/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i> Windows 8 / ';
} else if(preg_match('/nt 6.3/i', $agent)) {
$os = ' <i class= "ua-icon icon-win2"></i> Windows 8.1 / ';
} else if(preg_match('/nt 5.1/i', $agent)) {
$os = ' <i class="ua-icon icon-win1"></i> Windows XP / ';
} else if (preg_match('/nt 10.0/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i> Windows 10 / ';
} else{
$os = ' <i class="ua-icon icon-win2"></i> Windows X64 / ';
}
} else if (preg_match('/android/i', $agent)) {
if (preg_match('/android 9/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> Android Pie / ';
}
else if (preg_match('/android 8/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> Android Oreo / ';
}
else{
$os = ' <i class="ua-icon icon-android"></i> Android / ';
}
}
else if (preg_match('/ubuntu/i', $agent)) {
$os = ' <i class="ua-icon icon-ubuntu"></i> Ubuntu / ';
} else if (preg_match('/linux/i', $agent)) {
$os = ' <i class= "ua-icon icon-linux"></i> Linux / ';
} else if (preg_match('/iPhone/i', $agent)) {
$os = ' <i class="ua-icon icon-apple"></i> iPhone / ';
} else if (preg_match('/mac/i', $agent)) {
$os = ' <i class="ua-icon icon-mac"></i> MacOS / ';
}else if (preg_match('/fusion/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> Android / ';
} else {
$os = ' <i class="ua-icon icon-linux"></i> Linux / ';
}
echo $os;
}终极主菜：
在 handsome/component/comments.php 中找到合适位置添加以下代码：
（Mirages 在 mirages/libs/comments.php）
<span class="comment-ua">
<?php getOs($comments->agent); ?>
<?php getBrowser($comments->agent); ?></span>
如果修改完都显示 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行：
替换以下代码：
<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
}主题的一些小修改教程--添加至后台主题设置 自定义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会用到。
找到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&m=7&c=e63100&cr1=ffffff&f=arial&l=0&bv=90&lx=-420&ly=420&hi=20&he=7&hc=a8ddff&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下方
这里直接剪切整个公告到header下方即可，如图。
编写公告
这里我已经写好了，首先是HTML:
<!--公告位置-->
<div class="notice notice-open">
<div class="notice-header">
<i class="glyphicon glyphicon-eye-open"> </i>
<div class="notice-title">皇榜</div>
<i class="glyphicon glyphicon-align-right"> 闭合</i>
</div>
<ul class="notice-body">
<?php $this->options->blogNotice(); ?>
</ul>
</div>
<!--/公告位置-->替换掉原来的：
接着上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>分条写就行了。例如下面这样：
老规矩 来个文章出处：大佬
版权属于：月丶小柒’s Blog
本文链接：https://www.xiaoqi22.cn/archives/20190908/85.html
版权声明：若无注明，本文皆为“月丶小柒’s Blog”原创，所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。 您可以自由的转载和修改，但请务必注明文章来源且不可用于商业目的
4 comments
写得好好哟,我要给你生猴子！::funny:04::
哈哈哈
球球好康
不错