阅读视图

发现新文章,点击刷新页面。

Comic—二次元风格美化插件

[scode type="blue"]本篇文章记录对Comic插件更新以及维护,有版本更新会及时上传.[/scode]
[scode type="green"]更新时间:20240915日[/scode]
[scode type="red"]新的插件已上线~ 可以替代原先的插件咯~[/scode]

前言

博主自用的一款页面美化插件,页面整体简约白。
[scode type="yellow"]插件支持版本:HandsomePro v9.2.1[/scode]

功能介绍

效果展示

[scode type="blue"]参考博主站点:https://starsei.com/[/scode]
[scode type="red"]说明:目前插件版本还在v2.0.1,以下插件设置图为下个插件版本,暂未上线。赞赏博主喝个奶茶会加快上线进度。
目前上线进度:16.8%[/scode]

功能说明

[tabs]
[tab name="插件设置" active="true"]Comic v3.0.0[/tab]
[/tabs]

插件下载

[scode type="green"]期待赞赏一杯奶茶哦~ ::douyin:17:: [/scode]

食用方法

  • 下载插件,解压到usr/plugins/目录中
  • 修改文件夹名改为Comic
  • 进入后台设置激活插件

Handsome主题美化记录

[scode type="blue"]这篇文章作为对 Handsome 9.2.1 Pro美化记录,有新增时会实时更新。[/scode]
[scode type="red"]本文内容部分来源于网络,如有侵权请留言删除![/scode]
[scode type="green"]更新时间 20240818日[/scode]

说明

[scode type="blue"]文件源码下载 CSS文件 custom.css和JS文件 custom.js[/scode]
[scode type="yellow"]本站所有美化样式均放在以下文件中[/scode]
[scode type="red"]以下CSS文件以及JS文件失效,请下载Comic插件使用或者单独添加CSS以及JS。[/scode]
[tabs]
[tab name="提示" active="true"]部分样式代码是纯粹的CSS或者JS,如果单独放到 配置外观—自定义CSS或者 自定义JS中,代码多的话是比较乱的,所以才将这些整理成文件。
[button color="success" icon="glyphicon glyphicon-download-alt" url="https://alist.starsei.com/TencentCloud/handsome/custom.css" type=""]下载Custom.css[/button] [button color="info" icon="glyphicon glyphicon-download-alt" url="https://alist.starsei.com/TencentCloud/handsome/custom.js" type=""]下载timeinfo.js[/button]
[/tab]
[/tabs]

美化记录

自定义CSS

[scode type="green"]该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS[/scode]

文章顶部内容居中

[collapse status="false" title="文章顶部内容居中"]

header.bg-light.lter.wrapper-md {
  text-align: center;
}

[/collapse]

首页文章标题居中

[collapse status="false" title="首页文章标题居中"]

.post_title_wrapper
{
    justify-content: center;
}

[/collapse]

首页文章日期居中

[collapse status="false" title="首页文章日期居中"]

.text-muted.post-item-foot-icon.text-ellipsis.list-inline {
    text-align: center;
    background-color: #fff;
}

[/collapse]

标签字体颜色

[collapse status="false" title="标签字体颜色"]

.badge,.padder-v-ssm{
    color:#fff;
}

[/collapse]

赞赏按钮跳动

[collapse status="false" title="赞赏按钮跳动"]

/*赞赏按钮跳动*/
.btn-pay {
  animation: star 0.5s ease-in-out infinite alternate; 
} 
@keyframes star { 
  from { transform: scale(1); } 
  to { transform: scale(1.1); } 
}

[/collapse]

标题悬停颜色

[collapse status="false" title="标题悬停颜色"]

.index-post-title a:hover {
  color: #2ebaae;
}

[/collapse]

全站页面纯白

[scode type="yellow"]全站页面使用白色时,需要在后台设置-外观设置-主题色调自定义搭配修改为white-white-white[/scode]
[collapse status="false" title="全站页面纯白"]

/*白色整体背景*/
div#alllayout {
    background-color: #fff;
}
.night div#alllayout {
    background-color: #1d1f20;
}
/*左侧-顶部-底部*/
.bg-white{
    background-color: #fff;
}
/*页面底部*/
.bg-light {
    background-color: #fff;
}
/*首页标题背景变白*/
.bg-light .lter, .bg-light.lter {
    background-color: #fff;
}
/* 右侧背景 */
.bg-white-only{
    background-color:#fff;
}
/*文章页面变白*/
#post-panel {
    background: white;
}
/*登录后前台头像下变白*/
li.wrapper.b-b.m-b-sm.bg-light.m-t-n-xs {
    background-color: #fff;
}

[/collapse]

局部阴影

[collapse status="false" title="局部阴影"]

/*博客信息-搜索框-幻灯片 阴影*/
.box-shadow-wrap-normal {
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.16);
}
/*盒子四周阴影*/
.app.container {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.16)!important;
}
/*文章圆角-阴影*/
.panel {
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
  border-radius: 6px!important;
}
/*文章标题阴影*/
.bg-white-pure {
  background: white;
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
}

[/collapse]

获取焦点放大

[collapse status="false" title="首页文章图片获取焦点放大"]

/*首页文章图片获取焦点放大*/
.item-thumb {
    cursor: pointer;
    transition: all .6s;
}
.item-thumb:hover {
    transform: scale(1.05);
}

[/collapse]

文章悬浮效果

[collapse status="false" title="文章悬浮效果"]

/* 文章悬浮效果 */
.blog-post .panel:not(article){transition:all .3s}
.blog-post .panel:not(article):hover{transform:translateY(-10px)}

[/collapse]

滚动条效果

[collapse status="false" title="滚动条效果"]

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width:9px;
    height:8px;
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color:white;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #ff676c;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    cursor: pointer;
}

[/collapse]

自定义JavaScript

[scode type="green"]该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义Javascript[/scode]

左侧彩色图标&右侧彩色标签云

[collapse status="false" title="左侧彩色图标&右侧彩色标签云"] [scode type="yellow" size="simple"]需要将以下代码添加到PJAX->PJAX回调函数中[/scode]

//左侧图标多彩
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#ff3300","#ff3399","#54d100","#9900cc","#0033ff","#FF6699","#FF33FF","#ff8100","#33CC00","#FF1493","#8A2BE2","#8B3E2F","#00CC33"];
leftHeader.forEach(
    tag=>{
        tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];
        tag.style.color=tagsColor
    }
);    
// 右侧彩色标签云
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#0089ff", "#00c919", "#ff4747", "#c052ff", "#ff8939","#ff1200","#ff3399","#ffde00","#6000ff"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
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
    }
}
$(function(){
    $("#PageLoading").fadeOut(400);
    $("#body").css('overflow','');
});

[/collapse]

其他修改

[scode type="blue"]修改源文件记得备份哦~[/scode]

博主文字介绍动态化

[collapse status="false" title="博主文字介绍动态化"]将代码里的 这是我的介绍文字内容修改成需要展示的文字内容即可,顺便那个❤也是可以改的。 将以下代码放到 主题后台-外观-设置外观-初级设置-博主的介绍内即可

<span class="text-muted text-xs block"><div id="chakhsu"></div>
<script>
var chakhsu = function(r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() + 33)
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(), l.style.color = t(), n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) :
"forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- :
(c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI =
(c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ?
Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
}
/*以下内容自定义修改*/
var l = "❤",
o = ["这是我的介绍"].map(function(r) {
return r + ""
}),
a = 2,
g = 1,
s = 5,
d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)",
"rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)",
"rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)",
"rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"
],
c = {
text: "",
prefixP: -s,
skillI: 0,
skillP: 0,
direction: "forward",
delay: a,
step: g
};
i()
};
chakhsu(document.getElementById('chakhsu'));
</script>
</span>

放之前记得先清空博主的介绍栏内的所有内容
[/collapse]

页面-底部页脚美化

[collapse status="false" title="底部页脚美化"]修改文件/themes/handsome/component/footer.php版权代码或者删除

<div class="wrapper bg-light">
    <span class="pull-right hidden-xs text-ellipsis">
       <?php $this->options->BottomInfo();?>
       <!--可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解-->
    </span>
    <span class="text-ellipsis">
       <?php $this->options->BottomleftInfo(); ?>
    </span>
</div>

[scode type="blue" size="simple"]以下代码放在外观设置-开发者设置-自定义css中[/scode]

/*底部页脚css*/
.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    background-color:#4d4d4d;
    text-shadow:0px 0.86px 0.2px #3333336b;
} 
.github-badge .badge-subject {
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}
.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
    background-color: #00a1fd;
}
.github-badge .bg-orange {
    background-color: #ffa500;
}
.github-badge .bg-green {
    background-color: #3bca6e;
}
.github-badge .bg-purple{
    background-color:#ab34e9;
}
.github-badge .bg-red{
    background-color:#ff1010;
}

[scode type="yellow" size="simple"]以下代码放在外观设置-开发者设置-博客底部左侧信息中[/scode]

<!--左侧底部-->
<div class="github-badge">
    <span class="badge-subject">Copyright</span>
    <a href="https://starsei.com/" target="_blank">
        <span class="badge-value bg-orange">©2024 猫不吃鱼</span>
    </a>
</div> | 
<div class="github-badge">
    <span class="badge-subject"><i class="iconfont icon-beian"></i>京ICP备</span>
    <a href="https://beian.miit.gov.cn/" target="_blank">
        <span class="badge-value bg-green">2022013581号-1</span></a>
</div>

[scode type="yellow" size="simple"]以下代码放在外观设置-开发者设置-博客底部右侧信息中[/scode]

<!--右侧底部-->
<div class="github-badge">
    <span class="badge-subject"><i class="iconfont icon-tengxunyun"></i>本站由</span>
     <a href="https://cloud.tencent.com" target="_blank">
        <span class="badge-value bg-blue">腾讯云提供服务</span>
      </a>
</div> |
<div class="github-badge">
    <span class="badge-subject"><i class="iconfont icon-typecho"></i>Theme by</span>
    <a href="https://www.ihewro.com/archives/489/" target="_blank">
        <span class="badge-value bg-purple">Handsome</span></a>
</div>

[/collapse]

自定义字体

[collapse status="false" title="自定义字体"]选择字体,然后去字体转换otf、ttf转换成 woff格式。
将转换成功后的字体上传至网站目录中,默认字体目录是 /usr/themes/handsome/assets/fonts文件夹里。
前往 外观设置-开发者设置-自定义css中添加以下代码

/*自定义字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(填写字体所在的位置) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium} body {font- family: HarmonyOS!important;}

[/collapse]

自定义右键美化

[collapse status="false" title="自定义右键美化"] [scode type="green" size="simple"]以下代码放在开发者设置➡自定义输出body尾部的HTML代码中[/scode]
需要引入JS文件https://lib.baomitu.com/layer/3.1.1/layer.js,以下代码已经添加,无需再次引入。

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

[/collapse]

右侧添加人生倒计时(岁月不待人)

[collapse status="false" title="右侧添加人生倒计时(岁月不待人)"]首先找到网站根目录 /usr/themes/handsome/component/sidebar.php文件,找到 <!--广告位置-->这一行内容。 在该内容向上两行找到 <?php endif; ?>,在该行紧接着下面添加如下代码:

<section id="blog_info" class="widget widget_categories wrapper-md clear">
    <h5 class="widget-title m-t-none text-md"><?php _me("岁月不待人") ?></h5>
<div class="sidebar sidebar-count">
    <div class="content">
        <div class="item" id="dayProgress">
            <div class="title">今日已经过去<span></span>小时</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-1"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
        <div class="item" id="weekProgress">
            <div class="title">这周已经过去<span></span>天</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-2"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
        <div class="item" id="monthProgress">
            <div class="title">本月已经过去<span></span>天</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-3"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
        <div class="item" id="yearProgress">
            <div class="title">今年已经过去<span></span>个月</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-4"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
    </div>
</div>
     </section>
<!-- 时间倒计时代码结束 -->

改好后保存退出,进入网站根目录 /usr/themes/handsome/assets/js/的文件夹
创建一个名为 timeinfo.js的文件,并将以下代码放进该文件后,保存并退出

function init_life_time() {
function getAsideLifeTime() {
/* 当前时间戳 */
let nowDate = +new Date();
/* 今天开始时间戳 */
let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
/* 今天已经过去的时间 */
let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
/* 今天已经过去的时间比 */
let todayPassHoursPercent = (todayPassHours / 24) * 100;
$('#dayProgress .title span').html(parseInt(todayPassHours));
$('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
$('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
/* 当前周几 */
let weeks = {
0: 7,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6
};
let weekDay = weeks[new Date().getDay()];
let weekDayPassPercent = (weekDay / 7) * 100;
$('#weekProgress .title span').html(weekDay);
$('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
$('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
let year = new Date().getFullYear();
let date = new Date().getDate();
let month = new Date().getMonth() + 1;
let monthAll = new Date(year, month, 0).getDate();
let monthPassPercent = (date / monthAll) * 100;
$('#monthProgress .title span').html(date);
$('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
$('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
let yearPass = (month / 12) * 100;
$('#yearProgress .title span').html(month);
$('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
$('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
}
getAsideLifeTime();
setInterval(() => {
getAsideLifeTime();
}, 1000);
}
init_life_time()

js文件弄好后,在 设置外观-开发者设置-自定义输出body尾部的HTML代码处添加以下代码。
注意第一行timeinfo.js前面的域名要改成你自己的域名

<!-- 时间倒计时 -->
<script src="https://你的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>

最后一步,去自定义CSS里面添加以下代码

/* 时间流逝 */
.sidebar-count .content {
  padding: 15px
}
.sidebar-count .content .item {
  margin-bottom: 15px
}
.sidebar-count .content .item:last-child {
  margin-bottom: 0
}
.sidebar-count .content .item .title {
  font-size: 12px;
  color: var(--minor);
  margin-bottom: 5px;
  display: flex;
  align-items: center
}
.sidebar-count .content .item .title span {
  color: var(--theme);
  font-weight: 500;
  font-size: 14px;
  margin: 0 5px
}
.sidebar-count .content .item .progress {
  display: flex;
  align-items: center
}
.sidebar-count .content .item .progress .progress-bar {
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--classC);
  width: 0;
  min-width: 0;
  flex: 1;
  margin-right: 5px
}
@keyframes progress {
 0% {
    background-position: 0 0
 }

 100% {
    background-position: 30px 0
 }

}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
  width: 0;
  height: 100%;
  border-radius: 5px;
  transition: width 0.35s;
  -webkit-animation: progress 750ms linear infinite;
  animation: progress 750ms linear infinite
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
  background: #bde6ff;
  background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
  background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
  background: #ffd980;
  background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
  background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
  background: #ffa9a9;
  background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
  background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
  background: #67c23a;
  background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
  background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-percentage {
  color: var(--info)
}

步骤完成以后就可以去查看效果了~
[/collapse]

新年灯笼

[collapse status="false" title="新年灯笼"] [scode type="blue" size="simple"]以下代码放在外观设置-开发者设置-自定义css中[/scode]

@media only screen and (max-width: 760px) {
    .deng-box, .deng-box1 {
        display:none;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .right {
        float: left!important;
    }
}
.tc_dl1{
    position: relative;
    left: -13.625px;
   width:70.75px;
    }
.tc_dl1 img{width: 95px;/* height: 488px;*/justify-content: center;}
.tc_dl2{position: relative;left:-13.625px;width:70.75px;}
.tc_dl2 img{width: 95px;}
.deng-box {
    position: fixed;
    top:-3rem;
    left: -3rem;
    z-index: 9999;
}
.deng-box1 {
    position: fixed;
    top: -3rem;
    right: -3rem;
    z-index: 9999;
}
.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: 12px 8px 8px 10px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
 .deng-b {
    width: 45px;
    height: 154px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
.shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}
.shui-b {
    position: absolute;
    top: 22px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}
   .shui-c {
    position: absolute;
    top: 28px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
}
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
   .deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
    font-family: "楷体";
    font-size: 26px;
    color: #f9b842;
    font-weight: bold;
    line-height: 37px;
    text-align: center;
   padding-top:10px;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
    background: transparent !important;
}
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg);
    }
    50% {
        -moz-transform: rotate(10deg);
    }
    100% {
        -moz-transform: rotate(-10deg);
    }
}
@-webkit-keyframes swing {
    0% {
        box-shadow: -5px 5px 50px 4px gold;
        -webkit-transform: rotate(-10deg);
    }
    50% {
        box-shadow: -5px 5px 50px 4px  rgba(250, 108, 0, 1);
        -webkit-transform: rotate(10deg);
    }
    100% {
        box-shadow: -5px 5px 50px 4px gold;
        -webkit-transform: rotate(-10deg);
    }
}
#envelope{width:35px;margin-bottom:25px;}

[scode type="green" size="simple"]以下代码放在开发者设置➡自定义输出body尾部的HTML代码中[/scode]
[scode type="red" size="simple"]img标签中的所有src均可更换[/scode]

<div class="deng-box">              
        <div class="deng">
        <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b">
                    <div class="deng-t">新春
                        <img src="https://s11.ax1x.com/2024/01/25/pFmEvb8.png" id="envelope"/> 
                        <div class="tc_dl1">
                            <img src="https://s11.ax1x.com/2024/01/25/pFmVSUg.jpg"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="shuishui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>     
        </div>   
    </div>
    <div class="deng-box1">   
        <div class="deng">  
            <div class="xian"></div>
            <div class="deng-a">    
                <div class="deng-b">
                    <div class="deng-t">快乐 
                    <img src="https://s11.ax1x.com/2024/01/25/pFmEvb8.png" id="envelope"/>
                    <div class="tc_dl2 ">
                        <img src="https://s11.ax1x.com/2024/01/25/pFmEzVS.jpg"/>
                    </div>
                    </div>
                </div>       
            </div>
            <div class="shuishui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>
        </div>
    </div>

[/collapse]

插件推荐

鼠标美化插件HoerMouse

[collapse status="false" title="鼠标美化插件HoerMouse"]插件下载:[button color="info" icon="" url="https://pan.starsei.com/%E5%8D%9A%E5%AE%A2/typecho/plugins/HoerMouse.zip" type="round"]HoerMouse v1.3.0[/button]
食用方法:

  • 下载插件,解压到usr/plugins/目录中
  • 修改文件夹名为HoerMouse
  • 进入后台设置激活插件

[/collapse]

UserAgent插件

[collapse status="false" title="UserAgent插件"]插件下载:[button color="success" icon="" url="https://pan.starsei.com/%E5%8D%9A%E5%AE%A2/typecho/plugins/UserAgent.zip" type="round"]UserAgent v1.1.1[/button]
食用方法:
[scode type="blue" size="simple"]操作前请做好相应备份工作,此插件只针对于Handsome主题[/scode]

  • 下载插件,解压到usr/plugins目录中
  • 修改文件夹名为UserAgent
  • 进入后台设置激活插件
  • 修改Handsome主题component目录下comments.php,代码大概在99~100行左右。
<span class="star_count"><?php $stars = $comments->stars;  echo ($stars) ? $stars : ""; ?></span></a>

添加代码<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?> ,修改后代码如下:

<span class="star_count"><?php  $stars = $comments->stars; echo ($stars) ? $stars : ""; ?></span>
</a><!--UserAgent--><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>

原文链接:点击此处跳转
[/collapse]

邮箱评论通知插件CommentToMail

[collapse status="false" title="邮箱评论通知插件CommentToMail"]插件下载:[button color="primary" icon="" url="https://pan.starsei.com/%E5%8D%9A%E5%AE%A2/typecho/plugins/CommentToMail.zip" type="round"]CommentToMail[/button]
食用方法:

  • 下载插件,解压到usr/plugins/目录中
  • 修改文件夹名为CommentToMail
  • 进入后台设置激活插件

[/collapse]

看板娘插件PioModify

[collapse status="false" title="看板娘插件PioModify"]插件下载:[button color="warning" icon="" url="https://pan.starsei.com/%E5%8D%9A%E5%AE%A2/typecho/plugins/PioModify.tar.gz" type="round"]PioModify[/button]
食用方法:

  • 下载插件,解压到usr/plugins/目录中
  • 修改文件夹名为PioModify
  • 进入后台设置激活插件

[/collapse]

网站优化

Typecho开启Gzip加速

[collapse status="false" title="Typecho开启Gzip加速"]找到Typecho安装目录中的config.inc.php文件,添加一行代码即可。

/* 开启gzip压缩 */
ob_start('ob_gzhandler');

[/collapse]

设置gravatar国内源

[collapse status="false" title="设置gravatar国内源"]找到Typecho安装目录中的config.inc.php文件,添加一行代码即可更换为国内源

define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');

Handsome主题可以直接在外观设置-速度优化-Gravatar镜像源地址中填入https://cdn.v2ex.com/gravatar/
国内镜像源:
V2EX:https://cdn.v2ex.com/gravatar/
极客族:https://sdn.geekzu.org/avatar/
loli:https://gravatar.loli.net/avatar/
[/collapse]

handsome评论区表情包拓展

[scode type="green"]handsome评论区表情包拓展[/scode]
[scode type="blue"]支持handsome 9.2.1pro,表情包更新时间2024-07-11[/scode]
[scode type="yellow"]更多表情包正在努力中....[/scode]

更新记录

[collapse status="false" title="更新记录"] 更新日期:2024-07-11
更新内容:

  • 小红书表情包

[/collapse]

预览

阿鲁推特flentb站网e猫抖音酷安
::aru:tongue::::twemoji:smile::::fluent:1::::bilibili:weixiao::::E-Meow:E-Meow0::::douyin:26::::kuan:coolapk_emotion_48_weiweiyixiao::
::aru:bigeye::::twemoji:love::::fluent:91::::bilibili:zhuakuang::::E-Meow:E-Meow9::::douyin:65::::kuan:coolapk_emotion_1017::
::aru:proud::::twemoji:shy::::fluent:75::::bilibili:dianzan::::E-Meow:E-Meow22::::douyin:90::::kuan:coolapk_emotion_1013::
小红书更多表情...
::xiaohongshu:5::
::xiaohongshu:8::
::xiaohongshu:33::

获取

[collapse status="false" title="颜文字"] [tabs]
[tab name="JSON" active="true"]

"颜文字": {
    "type": "emoticon",
    "container": [
      {
        "icon": "OωO",
        "text": "Author: DIYgod"
      },
      {
        "icon": "|´・ω・)ノ",
        "text": "Hi"
      },
      {
        "icon": "ヾ(≧∇≦*)ゝ",
        "text": "开心"
      },
      {
        "icon": "(☆ω☆)",
        "text": "星星眼"
      },
      {
        "icon": "(╯‵□′)╯︵┴─┴",
        "text": "掀桌"
      },
      {
        "icon": " ̄﹃ ̄",
        "text": "流口水"
      },
      {
        "icon": "(/ω\)",
        "text": "捂脸"
      },
      {
        "icon": "∠( ᐛ 」∠)_",
        "text": "给跪"
      },
      {
        "icon": "(๑•̀ㅁ•́ฅ)",
        "text": "Hi"
      },
      {
        "icon": "→_→",
        "text": "斜眼"
      },
      {
        "icon": "୧(๑•̀⌄•́๑)૭",
        "text": "加油"
      },
      {
        "icon": "٩(ˊᗜˋ*)و",
        "text": "有木有WiFi"
      },
      {
        "icon": "(ノ°ο°)ノ",
        "text": "前方高能预警"
      },
      {
        "icon": "(´இ皿இ`)",
        "text": "我从未见过如此厚颜无耻之人"
      },
      {
        "icon": "⌇●﹏●⌇",
        "text": "吓死宝宝惹"
      },
      {
        "icon": "(ฅ´ω`ฅ)",
        "text": "已阅留爪"
      },
      {
        "icon": "(╯°A°)╯︵○○○",
        "text": "去吧大师球"
      },
      {
        "icon": "φ( ̄∇ ̄o)",
        "text": "太萌惹"
      },
      {
        "icon": "ヾ(´・ ・`。)ノ\"",
        "text": "咦咦咦"
      },
      {
        "icon": "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃",
        "text": "气呼呼"
      },
      {
        "icon": "(ó﹏ò。)",
        "text": "我受到了惊吓"
      },
      {
        "icon": "Σ(っ °Д °;)っ",
        "text": "什么鬼"
      },
      {
        "icon": "( ,,´・ω・)ノ\"(´っω・`。)",
        "text": "摸摸头"
      },
      {
        "icon": "╮(╯▽╰)╭ ",
        "text": "无奈"
      },
      {
        "icon": "o(*////▽////*)q ",
        "text": "脸红"
      },
      {
        "icon": ">﹏<",
        "text": ""
      },
      {
        "icon": "( ๑´•ω•) \"(ㆆᴗㆆ)",
        "text": ""
      },
      {
        "icon": "(。•ˇ‸ˇ•。)",
        "text": ""
      }
    ]
  }

[/tab]
[/tabs] [/collapse]
[collapse status="false" title="阿鲁"] [tabs]
[tab name="表情包" active="true"] [/tab]
[tab name="JSON"]

"阿鲁": {
    "name": "aru",
    "type": "image",
    "container": [
      {
        "icon": "despise",
        "text": "鄙视"
      },
      {
        "icon": "knife",
        "text": "插刀"
      },
      {
        "icon": "pouting",
        "text": "亲嘴"
      },
      {
        "icon": "shutup",
        "text": "闭嘴"
      },
      {
        "icon": "unhappy",
        "text": "不开心"
      },
      {
        "icon": "discovertruth",
        "text": "发现真相"
      },
      {
        "icon": "shit",
        "text": "便便"
      },
      {
        "icon": "distressed",
        "text": "烦恼"
      },
      {
        "icon": "shy",
        "text": "捂脸"
      },
      {
        "icon": "speechless",
        "text": "无语"
      },
      {
        "icon": "confuse",
        "text": "迷惑"
      },
      {
        "icon": "frown",
        "text": "皱眉"
      },
      {
        "icon": "proud",
        "text": "得意"
      },
      {
        "icon": "cheer",
        "text": "欢呼"
      },
      {
        "icon": "meditation",
        "text": "沉思"
      },
      {
        "icon": "diving",
        "text": "潜水"
      },
      {
        "icon": "cryingface",
        "text": "掩面哭泣"
      },
      {
        "icon": "lurking",
        "text": "潜伏"
      },
      {
        "icon": "thumb",
        "text": "大拇指"
      },
      {
        "icon": "smile",
        "text": "微笑"
      },
      {
        "icon": "clap",
        "text": "拍掌"
      },
      {
        "icon": "envious",
        "text": "眼馋"
      },
      {
        "icon": "surrender",
        "text": "投降"
      },
      {
        "icon": "bigeye",
        "text": "大眼睛"
      },
      {
        "icon": "nose",
        "text": "抠鼻"
      },
      {
        "icon": "sweat",
        "text": "流汗"
      },
      {
        "icon": "flower",
        "text": "小花花"
      },
      {
        "icon": "crying",
        "text": "流泪"
      },
      {
        "icon": "spit",
        "text": "吐"
      },
      {
        "icon": "surprised",
        "text": "吃惊"
      },
      {
        "icon": "blood",
        "text": "一滩血"
      },
      {
        "icon": "blood2",
        "text": "吐血"
      },
      {
        "icon": "shy2",
        "text": "脸红"
      },
      {
        "icon": "angry",
        "text": "生气"
      },
      {
        "icon": "nomatter",
        "text": "无所谓"
      },
      {
        "icon": "dead",
        "text": "死翘翘"
      },
      {
        "icon": "insidious",
        "text": "阴险"
      },
      {
        "icon": "tongue",
        "text": "吐舌"
      }

    ]
  }

[/tab]
[/tabs] [/collapse]
[collapse status="false" title="推特"] [tabs]
[tab name="表情包" active="true"] [/tab]
[tab name="JSON"]

  "推特":{
    "type": "image",
    "name": "twemoji",
    "container":[
      {
        "icon": "smile",
        "text": "微笑"
      },
      {
        "icon": "tongue",
        "text": "吐舌"
      },
      {
        "icon": "tilted",
        "text": "歪头"
      },
      {
        "icon": "tiaomei",
        "text": "挑眉"
      },
      {
        "icon": "shy",
        "text": "害羞"
      },
      {
        "icon": "sweat",
        "text": "流汗"
      },
      {
        "icon": "proud",
        "text": "得意"
      },
      {
        "icon": "uncomfort",
        "text": "难受"
      },
      {
        "icon": "smilecry",
        "text": "笑哭"
      },
      {
        "icon": "love",
        "text": "喜欢"
      },
      {
        "icon": "notalk",
        "text": "不说话"
      },
      {
        "icon": "happy",
        "text": "开心"
      },
      {
        "icon": "frightened",
        "text": "惊恐"
      },
      {
        "icon": "dtongue",
        "text": "吐舌"
      },
      {
        "icon": "cry",
        "text": "哭泣"
      },
      {
        "icon": "cool",
        "text": "炫酷"
      },
      {
        "icon": "bigsmile",
        "text": "红脸笑"
      },
      {
        "icon": "ok",
        "text": "可以"
      },
      {
        "icon": "kiss",
        "text": "亲亲"
      },
      {
        "icon": "angry",
        "text": "生气"
      },
      {
        "icon": "family",
        "text": "家庭"
      },
      {
        "icon": "congratulate",
        "text": "祝贺"
      },
      {
        "icon": "gift",
        "text": "礼物"
      },
      {
        "icon": "prayer",
        "text": "祈祷"
      },
      {
        "icon": "star",
        "text": "星星"
      }
    ]
  }

[/tab]
tab name="CSS"
[/tabs] [/collapse]
[collapse status="false" title="flent"] [tabs]
[tab name="表情包" active="true"] [/tab]
[tab name="JSON"]

 "fluent":{
    "type":"image",
    "name":"fluent",
    "container":[
      {
        "icon":"1",
        "text":"微笑"
      },
      {
        "icon":"2",
        "text":"微笑"
      },
      {
        "icon":"3",
        "text":"轻轻微笑"
      },
      {
        "icon":"4",
        "text":"轻轻微笑"
      },
      {
        "icon":"5",
        "text":"天使笑"
      },
      {
        "icon":"6",
        "text":"眨眼笑"
      },
      {
        "icon":"7",
        "text":"眨眼笑"
      },
      {
        "icon":"8",
        "text":"咧嘴笑"
      },
      {
        "icon":"9",
        "text":"咧嘴笑"
      },
      {
        "icon":"10",
        "text":"咧嘴笑"
      },
      {
        "icon":"11",
        "text":"流汗"
      },
      {
        "icon":"12",
        "text":"咧嘴笑"
      },
      {
        "icon":"13",
        "text":"难受"
      },
      {
        "icon":"14",
        "text":"疲惫"
      },
      {
        "icon":"15",
        "text":"思考"
      },
      {
        "icon":"16",
        "text":""
      },
      {
        "icon":"17",
        "text":"打哈欠"
      },
      {
        "icon":"18",
        "text":"面无表情"
      },
      {
        "icon":"19",
        "text":"打喷嚏"
      },
      {
        "icon":"20",
        "text":""
      },
      {
        "icon":"21",
        "text":"滑稽"
      },
      {
        "icon":"22",
        "text":"笑哭"
      },
      {
        "icon":"23",
        "text":""
      },
      {
        "icon":"24",
        "text":"炫酷"
      },
      {
        "icon":"25",
        "text":"撇嘴"
      },
      {
        "icon":"26",
        "text":"傻笑"
      },
      {
        "icon":"27",
        "text":"嗜睡"
      },
      {
        "icon":"28",
        "text":"苦笑"
      },
      {
        "icon":"29",
        "text":"疲惫"
      },
      {
        "icon":"30",
        "text":"亲嘴"
      },
      {
        "icon":"31",
        "text":"皱眉"
      },
      {
        "icon":"32",
        "text":"恳求"
      },
      {
        "icon":"33",
        "text":"嗜睡"
      },
      {
        "icon":"34",
        "text":"皱眉"
      },
      {
        "icon":"35",
        "text":"击倒"
      },
      {
        "icon":"36",
        "text":""
      },
      {
        "icon":"37",
        "text":"失望"
      },
      {
        "icon":"38",
        "text":"呲牙"
      },
      {
        "icon":"39",
        "text":"安静"
      },
      {
        "icon":"40",
        "text":""
      },
      {
        "icon":"41",
        "text":"大哭"
      },
      {
        "icon":"42",
        "text":""
      },
      {
        "icon":"43",
        "text":""
      },
      {
        "icon":"44",
        "text":"哭泣"
      },
      {
        "icon":"45",
        "text":"困惑"
      },
      {
        "icon":"46",
        "text":"无语"
      },
      {
        "icon":"47",
        "text":"失望"
      },
      {
        "icon":"48",
        "text":"流口水"
      },
      {
        "icon":"49",
        "text":"亲嘴"
      },
      {
        "icon":"50",
        "text":"亲嘴"
      },
      {
        "icon":"51",
        "text":""
      },
      {
        "icon":"52",
        "text":"失望"
      },
      {
        "icon":"53",
        "text":"汗流浃背"
      },
      {
        "icon":"54",
        "text":"张嘴"
      },
      {
        "icon":"55",
        "text":""
      },
      {
        "icon":"56",
        "text":"扬眉"
      },
      {
        "icon":"57",
        "text":"脸红"
      },
      {
        "icon":"58",
        "text":"斜眼"
      },
      {
        "icon":"59",
        "text":"困惑"
      },
      {
        "icon":"60",
        "text":""
      },
      {
        "icon":"61",
        "text":"愤怒"
      },
      {
        "icon":"62",
        "text":""
      },
      {
        "icon":"63",
        "text":"惊讶"
      },
      {
        "icon":"64",
        "text":"面无表情"
      },
      {
        "icon":"65",
        "text":"笑容满面"
      },
      {
        "icon":"66",
        "text":"气呼呼"
      },
      {
        "icon":"67",
        "text":"亲吻"
      },
      {
        "icon":"68",
        "text":"翻白眼"
      },
      {
        "icon":"69",
        "text":"偷笑"
      },
      {
        "icon":"70",
        "text":"偷窥"
      },
      {
        "icon":"71",
        "text":"强忍泪水"
      },
      {
        "icon":"72",
        "text":"叹气"
      },
      {
        "icon":"73",
        "text":"恐惧"
      },
      {
        "icon":"74",
        "text":"焦虑"
      },
      {
        "icon":"75",
        "text":"破涕为笑"
      },
      {
        "icon":"76",
        "text":"喜欢"
      },
      {
        "icon":"77",
        "text":"生病"
      },
      {
        "icon":"78",
        "text":"晕"
      },
      {
        "icon":"79",
        "text":"生病"
      },
      {
        "icon":"80",
        "text":"美味"
      },
      {
        "icon":"81",
        "text":"呕吐"
      },
      {
        "icon":"82",
        "text":"发烧"
      },
      {
        "icon":"83",
        "text":""
      },
      {
        "icon":"84",
        "text":""
      },
      {
        "icon":"85",
        "text":""
      },
      {
        "icon":"86",
        "text":"恐惧"
      },
      {
        "icon":"87",
        "text":""
      },
      {
        "icon":"88",
        "text":""
      },
      {
        "icon":"89",
        "text":""
      },
      {
        "icon":"90",
        "text":"惊讶"
      },
      {
        "icon":"91",
        "text":"喜欢"
      },
      {
        "icon":"92",
        "text":"金钱"
      },
      {
        "icon":"93",
        "text":""
      },
      {
        "icon":"94",
        "text":"愤怒"
      },
      {
        "icon":"95",
        "text":"敬礼"
      },
      {
        "icon":"96",
        "text":""
      },
      {
        "icon":"97",
        "text":"恶心"
      },
      {
        "icon":"98",
        "text":""
      },
      {
        "icon":"99",
        "text":""
      },
      {
        "icon":"100",
        "text":"愤怒"
      },
      {
        "icon":"101",
        "text":"微笑"
      },
      {
        "icon":"102",
        "text":"牛仔笑"
      },
      {
        "icon":"103",
        "text":"小丑笑"
      },
      {
        "icon":"104",
        "text":""
      },
      {
        "icon":"105",
        "text":""
      },
      {
        "icon":"106",
        "text":"咧嘴笑"
      },
      {
        "icon":"107",
        "text":"微笑"
      },
      {
        "icon":"108",
        "text":"惊讶"
      },
      {
        "icon":"109",
        "text":"轻轻微笑"
      },
      {
        "icon":"110",
        "text":""
      },
      {
        "icon":"111",
        "text":"破涕为笑"
      },
      {
        "icon":"112",
        "text":"哭泣"
      },
      {
        "icon":"113",
        "text":"愤怒"
      },
      {
        "icon":"114",
        "text":"喜欢"
      },
      {
        "icon":"115",
        "text":"亲亲"
      },
      {
        "icon":"116",
        "text":"轻轻微笑"
      },
      {
        "icon":"117",
        "text":""
      },
      {
        "icon":"118",
        "text":"骷髅"
      },
      {
        "icon":"119",
        "text":""
      },
      {
        "icon":"120",
        "text":"南瓜"
      },
      {
        "icon":"121",
        "text":"大眼睛"
      },
      {
        "icon":"122",
        "text":""
      }
    ]
  }

[/tab]
[tab name="CSS"]

.emotion-fluent{width:25px;}

[/tab] [/tabs] [/collapse]
[collapse status="false" title="b站"] [tabs]
[tab name="表情包" active="true"] [/tab]
[tab name="JSON"]

"哔哩哔哩":{
    "type": "image",
    "name": "bilibili",
    "container":[
      {
        "icon": "baiyan",
        "text": "白眼"
      },
      {
        "icon": "bishi",
        "text": "鄙视"
      },
      {
        "icon": "bizui",
        "text": "闭嘴"
      },
      {
        "icon": "chan",
        "text": "馋"
      },
      {
        "icon": "daku",
        "text": "大哭"
      },
      {
        "icon": "dalao",
        "text": "大佬"
      },
      {
        "icon": "dalian",
        "text": "打脸"
      },
      {
        "icon": "dianzan",
        "text": "点赞"
      },
      {
        "icon": "doge",
        "text": "doge"
      },
      {
        "icon": "facai",
        "text": "发财"
      },
      {
        "icon": "fadai",
        "text": "发呆"
      },
      {
        "icon": "fanu",
        "text": "发怒"
      },
      {
        "icon": "ganga",
        "text": "尴尬"
      },
      {
        "icon": "guzhang",
        "text": "鼓掌"
      },
      {
        "icon": "haixiu",
        "text": "害羞"
      },
      {
        "icon": "heirenwenhao",
        "text": "黑人问号"
      },
      {
        "icon": "huaixiao",
        "text": "坏笑"
      },
      {
        "icon": "jingxia",
        "text": "惊吓"
      },
      {
        "icon": "keai",
        "text": "可爱"
      },
      {
        "icon": "koubi",
        "text": "抠鼻"
      },
      {
        "icon": "kun",
        "text": "困"
      },
      {
        "icon": "liubixie",
        "text": "流鼻血"
      },
      {
        "icon": "liuhan",
        "text": "流汗"
      },
      {
        "icon": "miantian",
        "text": "腼腆"
      },
      {
        "icon": "nanguo",
        "text": "难过"
      },
      {
        "icon": "outu",
        "text": "呕吐"
      },
      {
        "icon": "qinqin",
        "text": "亲亲"
      },
      {
        "icon": "se",
        "text": "色"
      },
      {
        "icon": "shengbing",
        "text": "生病"
      },
      {
        "icon": "shengqi",
        "text": "生气"
      },
      {
        "icon": "shuizhao",
        "text": "睡着"
      },
      {
        "icon": "sikao",
        "text": "思考"
      },
      {
        "icon": "tiaopi",
        "text": "调皮"
      },
      {
        "icon": "touxiao",
        "text": "偷笑"
      },
      {
        "icon": "tuxie",
        "text": "吐血"
      },
      {
        "icon": "weiqu",
        "text": "委屈"
      },
      {
        "icon": "weixiao",
        "text": "微笑"
      },
      {
        "icon": "wunai",
        "text": "无奈"
      },
      {
        "icon": "xiaoku",
        "text": "笑哭"
      },
      {
        "icon": "xieyanxiao",
        "text": "斜眼笑"
      },
      {
        "icon": "yiwen",
        "text": "疑问"
      },
      {
        "icon": "yun",
        "text": "晕"
      },
      {
        "icon": "zaijian",
        "text": "再见"
      },
      {
        "icon": "zhuakuang",
        "text": "抓狂"
      }
    ]
  }

[/tab]
[tab name="CSS"]

.emotion-bilibili{width:25px;}

[/tab] [/tabs] [/collapse]
[collapse status="false" title="网e猫"] [tabs]
[tab name="表情包" active="true"] [/tab]
[tab name="JSON"]

"网e猫":{
    "type": "image",
    "name": "E-Meow",
    "container":[
      {
        "icon": "E-Meow0",
        "text": ""
      },
      {
        "icon": "E-Meow1",
        "text": ""
      },
      {
        "icon": "E-Meow2",
        "text": ""
      },
      {
        "icon": "E-Meow3",
        "text": ""
      },
      {
        "icon": "E-Meow4",
        "text": ""
      },
      {
        "icon": "E-Meow5",
        "text": ""
      },
      {
        "icon": "E-Meow6",
        "text": ""
      },
      {
        "icon": "E-Meow7",
        "text": ""
      },
      {
        "icon": "E-Meow8",
        "text": ""
      },
      {
        "icon": "E-Meow9",
        "text": ""
      },
      {
        "icon": "E-Meow10",
        "text": ""
      },
      {
        "icon": "E-Meow11",
        "text": ""
      },
      {
        "icon": "E-Meow12",
        "text": ""
      },
      {
        "icon": "E-Meow13",
        "text": ""
      },
      {
        "icon": "E-Meow14",
        "text": ""
      },
      {
        "icon": "E-Meow15",
        "text": ""
      },
      {
        "icon": "E-Meow16",
        "text": ""
      },
      {
        "icon": "E-Meow17",
        "text": ""
      },
      {
        "icon": "E-Meow18",
        "text": ""
      },
      {
        "icon": "E-Meow19",
        "text": ""
      },
      {
        "icon": "E-Meow20",
        "text": ""
      },
      {
        "icon": "E-Meow21",
        "text": ""
      },
      {
        "icon": "E-Meow22",
        "text": ""
      },
      {
        "icon": "E-Meow23",
        "text": ""
      },
      {
        "icon": "E-Meow24",
        "text": ""
      },
      {
        "icon": "E-Meow25",
        "text": ""
      },
      {
        "icon": "E-Meow26",
        "text": ""
      },
      {
        "icon": "E-Meow27",
        "text": ""
      },
      {
        "icon": "E-Meow28",
        "text": ""
      },
      {
        "icon": "E-Meow29",
        "text": ""
      },
      {
        "icon": "E-Meow30",
        "text": ""
      },
      {
        "icon": "E-Meow31",
        "text": ""
      },
      {
        "icon": "E-Meow32",
        "text": ""
      },
      {
        "icon": "E-Meow33",
        "text": ""
      },
      {
        "icon": "E-Meow34",
        "text": ""
      },
      {
        "icon": "E-Meow35",
        "text": ""
      },
      {
        "icon": "E-Meow36",
        "text": ""
      },
      {
        "icon": "E-Meow37",
        "text": ""
      },
      {
        "icon": "E-Meow38",
        "text": ""
      },
      {
        "icon": "E-Meow39",
        "text": ""
      },
      {
        "icon": "E-Meow40",
        "text": ""
      },
      {
        "icon": "E-Meow41",
        "text": ""
      },
      {
        "icon": "E-Meow42",
        "text": ""
      },
      {
        "icon": "E-Meow43",
        "text": ""
      }
    ]
  }

[/tab]
[tab name="CSS"]

.emotion-E-Meow{width:25px;}

[/tab]
[/tabs] [/collapse]
[collapse status="false" title="抖音"] [tabs]
[tab name="表情包" active="true"] [/tab]
[tab name="JSON"]

"抖音":{
    "type":"image",
    "name":"douyin",
    "container": [
      {
        "icon": 1,
        "text": ""
      },
      {
        "icon": 2,
        "text": ""
      },
      {
        "icon": 3,
        "text": ""
      },
      {
        "icon": 4,
        "text": ""
      },
      {
        "icon": 5,
        "text": ""
      },
      {
        "icon": 6,
        "text": ""
      },
      {
        "icon": 7,
        "text": ""
      },
      {
        "icon": 8,
        "text": ""
      },
      {
        "icon": 9,
        "text": ""
      },
      {
        "icon": 10,
        "text": ""
      },
      {
        "icon": 11,
        "text": ""
      },
      {
        "icon": 12,
        "text": ""
      },
      {
        "icon": 13,
        "text": ""
      },
      {
        "icon": 14,
        "text": ""
      },
      {
        "icon": 15,
        "text": ""
      },
      {
        "icon": 16,
        "text": ""
      },
      {
        "icon": 17,
        "text": ""
      },
      {
        "icon": 18,
        "text": ""
      },
      {
        "icon": 19,
        "text": ""
      },
      {
        "icon": 20,
        "text": ""
      },
      {
        "icon": 21,
        "text": ""
      },
      {
        "icon": 22,
        "text": ""
      },
      {
        "icon": 23,
        "text": ""
      },
      {
        "icon": 24,
        "text": ""
      },
      {
        "icon": 25,
        "text": ""
      },
      {
        "icon": 26,
        "text": ""
      },
      {
        "icon": 27,
        "text": ""
      },
      {
        "icon": 28,
        "text": ""
      },
      {
        "icon": 29,
        "text": ""
      },
      {
        "icon": 30,
        "text": ""
      },
      {
        "icon": 31,
        "text": ""
      },
      {
        "icon": 32,
        "text": ""
      },
      {
        "icon": 33,
        "text": ""
      },
      {
        "icon": 34,
        "text": ""
      },
      {
        "icon": 35,
        "text": ""
      },
      {
        "icon": 36,
        "text": ""
      },
      {
        "icon": 37,
        "text": ""
      },
      {
        "icon": 38,
        "text": ""
      },
      {
        "icon": 39,
        "text": ""
      },
      {
        "icon": 40,
        "text": ""
      },
      {
        "icon": 41,
        "text": ""
      },
      {
        "icon": 42,
        "text": ""
      },
      {
        "icon": 43,
        "text": ""
      },
      {
        "icon": 44,
        "text": ""
      },
      {
        "icon": 45,
        "text": ""
      },
      {
        "icon": 46,
        "text": ""
      },
      {
        "icon": 47,
        "text": ""
      },
      {
        "icon": 48,
        "text": ""
      },
      {
        "icon": 49,
        "text": ""
      },
      {
        "icon": 50,
        "text": ""
      },
      {
        "icon": 51,
        "text": ""
      },
      {
        "icon": 52,
        "text": ""
      },
      {
        "icon": 53,
        "text": ""
      },
      {
        "icon": 54,
        "text": ""
      },
      {
        "icon": 55,
        "text": ""
      },
      {
        "icon": 56,
        "text": ""
      },
      {
        "icon": 57,
        "text": ""
      },
      {
        "icon": 58,
        "text": ""
      },
      {
        "icon": 59,
        "text": ""
      },
      {
        "icon": 60,
        "text": ""
      },
      {
        "icon": 61,
        "text": ""
      },
      {
        "icon": 62,
        "text": ""
      },
      {
        "icon": 63,
        "text": ""
      },
      {
        "icon": 64,
        "text": ""
      },
      {
        "icon": 65,
        "text": ""
      },
      {
        "icon": 66,
        "text": ""
      },
      {
        "icon": 67,
        "text": ""
      },
      {
        "icon": 68,
        "text": ""
      },
      {
        "icon": 69,
        "text": ""
      },
      {
        "icon": 70,
        "text": ""
      },
      {
        "icon": 71,
        "text": ""
      },
      {
        "icon": 72,
        "text": ""
      },
      {
        "icon": 73,
        "text": ""
      },
      {
        "icon": 74,
        "text": ""
      },
      {
        "icon": 75,
        "text": ""
      },
      {
        "icon": 76,
        "text": ""
      },
      {
        "icon": 77,
        "text": ""
      },
      {
        "icon": 78,
        "text": ""
      },
      {
        "icon": 79,
        "text": ""
      },
      {
        "icon": 80,
        "text": ""
      },
      {
        "icon": 81,
        "text": ""
      },
      {
        "icon": 82,
        "text": ""
      },
      {
        "icon": 83,
        "text": ""
      },
      {
        "icon": 84,
        "text": ""
      },
      {
        "icon": 85,
        "text": ""
      },
      {
        "icon": 86,
        "text": ""
      },
      {
        "icon": 87,
        "text": ""
      },
      {
        "icon": 88,
        "text": ""
      },
      {
        "icon": 89,
        "text": ""
      },
      {
        "icon": 90,
        "text": ""
      },
      {
        "icon": 91,
        "text": ""
      },
      {
        "icon": 92,
        "text": ""
      },
      {
        "icon": 93,
        "text": ""
      },
      {
        "icon": 94,
        "text": ""
      },
      {
        "icon": 95,
        "text": ""
      }
    ]
  }

[/tab]
[tab name="CSS"]

.emotion-douyin{width:25px;}

[/tab]
[/tabs] [/collapse]
[collapse status="false" title="酷安"] [tabs]
[tab name="表情包" active="true"] [/tab]
[tab name="JSON"]

"酷安":{
    "type":"image",
    "name":"kuan",
    "container": [
      {
        "icon": "coolapk_emotion_100_qqdoge"
      },
      {
        "icon": "coolapk_emotion_1010"
      },
      {
        "icon": "coolapk_emotion_1011"
      },
      {
        "icon": "coolapk_emotion_1012"
      },
      {
        "icon": "coolapk_emotion_1013"
      },
      {
        "icon": "coolapk_emotion_1014"
      },
      {
        "icon": "coolapk_emotion_1015"
      },
      {
        "icon": "coolapk_emotion_1016"
      },
      {
        "icon": "coolapk_emotion_1017"
      },
      {
        "icon": "coolapk_emotion_1018"
      },
      {
        "icon": "coolapk_emotion_1019"
      },
      {
        "icon": "coolapk_emotion_101_pyjiaoyi",
        "text": "py交易"
      },
      {
        "icon": "coolapk_emotion_1020"
      },
      {
        "icon": "coolapk_emotion_1021"
      },
      {
        "icon": "coolapk_emotion_102_fadai",
        "text": "发呆"
      },
      {
        "icon": "coolapk_emotion_103_nb"
      },
      {
        "icon": "coolapk_emotion_104"
      },
      {
        "icon": "coolapk_emotion_105"
      },
      {
        "icon": "coolapk_emotion_106"
      },
      {
        "icon": "coolapk_emotion_107"
      },
      {
        "icon": "coolapk_emotion_108"
      },
      {
        "icon": "coolapk_emotion_109"
      },
      {
        "icon": "coolapk_emotion_10_aoman",
        "text": "傲慢"
      },
      {
        "icon": "coolapk_emotion_11_yiwen",
        "text": "疑问"
      },
      {
        "icon": "coolapk_emotion_12_wuyu",
        "text": "无语"
      },
      {
        "icon": "coolapk_emotion_13_huaixiao",
        "text": "坏笑"
      },
      {
        "icon": "coolapk_emotion_14_bishi",
        "text": "鄙视"
      },
      {
        "icon": "coolapk_emotion_15_fanu",
        "text": "发怒"
      },
      {
        "icon": "coolapk_emotion_16_tuosai",
        "text": "托腮"
      },
      {
        "icon": "coolapk_emotion_17_tushe",
        "text": "吐舌"
      },
      {
        "icon": "coolapk_emotion_18_han",
        "text": "憨"
      },
      {
        "icon": "coolapk_emotion_19_koubi",
        "text": "抠鼻"
      },
      {
        "icon": "coolapk_emotion_1_hahaha",
        "text": "哈哈"
      },
      {
        "icon": "coolapk_emotion_20_qinqin",
        "text": "亲亲"
      },
      {
        "icon": "coolapk_emotion_21_penxue",
        "text": "喷血"
      },
      {
        "icon": "coolapk_emotion_22_xiaoyan",
        "text": "消炎"
      },
      {
        "icon": "coolapk_emotion_23_shui",
        "text": "睡"
      },
      {
        "icon": "coolapk_emotion_24_wuzuixiao",
        "text": "捂嘴笑"
      },
      {
        "icon": "coolapk_emotion_25_zaijian",
        "text": "再见"
      },
      {
        "icon": "coolapk_emotion_26_kelian",
        "text": "可怜"
      },
      {
        "icon": "coolapk_emotion_27_qiang",
        "text": "强"
      },
      {
        "icon": "coolapk_emotion_28_ruo",
        "text": "弱"
      },
      {
        "icon": "coolapk_emotion_29_baoquan",
        "text": "抱拳"
      },
      {
        "icon": "coolapk_emotion_2_jingya",
        "text": "惊讶"
      },
      {
        "icon": "coolapk_emotion_30_ok",
        "text": "ok"
      },
      {
        "icon": "coolapk_emotion_31_xiaoku",
        "text": "笑哭"
      },
      {
        "icon": "coolapk_emotion_32_heiha",
        "text": "嘿哈"
      },
      {
        "icon": "coolapk_emotion_33_wulian",
        "text": "捂脸"
      },
      {
        "icon": "coolapk_emotion_34_jizhi",
        "text": "机智"
      },
      {
        "icon": "coolapk_emotion_35_ye",
        "text": "耶"
      },
      {
        "icon": "coolapk_emotion_36_ku",
        "text": "哭"
      },
      {
        "icon": "coolapk_emotion_37_doge"
      },
      {
        "icon": "coolapk_emotion_38_wozuimei",
        "text": "我最美"
      },
      {
        "icon": "coolapk_emotion_39_caidao",
        "text": "菜刀"
      },
      {
        "icon": "coolapk_emotion_3_ciya",
        "text": "呲牙"
      },
      {
        "icon": "coolapk_emotion_40_aixin",
        "text": "爱心"
      },
      {
        "icon": "coolapk_emotion_41_meigui",
        "text": "玫瑰"
      },
      {
        "icon": "coolapk_emotion_42_diaoxie",
        "text": "凋谢"
      },
      {
        "icon": "coolapk_emotion_43_heixian",
        "text": "黑线"
      },
      {
        "icon": "coolapk_emotion_44_pen",
        "text": "喷"
      },
      {
        "icon": "coolapk_emotion_45_yinxian",
        "text": "阴险"
      },
      {
        "icon": "coolapk_emotion_46_nanguo",
        "text": "难过"
      },
      {
        "icon": "coolapk_emotion_47_weiqu",
        "text": "委屈"
      },
      {
        "icon": "coolapk_emotion_48_weiweiyixiao",
        "text": "微微一笑"
      },
      {
        "icon": "coolapk_emotion_49_huanhu",
        "text": "欢呼"
      },
      {
        "icon": "coolapk_emotion_4_liulei",
        "text": "流泪"
      },
      {
        "icon": "coolapk_emotion_50_xinsui",
        "text": "心碎"
      },
      {
        "icon": "coolapk_emotion_51_chigua",
        "text": "吃瓜"
      },
      {
        "icon": "coolapk_emotion_52_hejiu",
        "text": "喝酒"
      },
      {
        "icon": "coolapk_emotion_53_pu",
        "text": "噗~"
      },
      {
        "icon": "coolapk_emotion_54_hongyaowan",
        "text": "红药丸"
      },
      {
        "icon": "coolapk_emotion_55_lvyaowan",
        "text": "绿药丸"
      },
      {
        "icon": "coolapk_emotion_56_dogexiaoku"
      },
      {
        "icon": "coolapk_emotion_57_dogehechi"
      },
      {
        "icon": "coolapk_emotion_58_dogeyuanliangta"
      },
      {
        "icon": "coolapk_emotion_59_erha"
      },
      {
        "icon": "coolapk_emotion_5_keai"
      },
      {
        "icon": "coolapk_emotion_60_kuan"
      },
      {
        "icon": "coolapk_emotion_61_lvmao"
      },
      {
        "icon": "coolapk_emotion_62_huaji",
        "text": "滑稽"
      },
      {
        "icon": "coolapk_emotion_63_liuhanhuaji",
        "text": "流汗滑稽"
      },
      {
        "icon": "coolapk_emotion_64_shounuehuaji",
        "text": "受虐滑稽"
      },
      {
        "icon": "coolapk_emotion_65_coshuaji"
      },
      {
        "icon": "coolapk_emotion_66_doujiyanhuaji",
        "text": "斗鸡眼滑稽"
      },
      {
        "icon": "coolapk_emotion_67_mojinghuaji",
        "text": "墨镜滑稽"
      },
      {
        "icon": "coolapk_emotion_68"
      },
      {
        "icon": "coolapk_emotion_69"
      },
      {
        "icon": "coolapk_emotion_6_weixiao",
        "text": "微笑"
      },
      {
        "icon": "coolapk_emotion_70"
      },
      {
        "icon": "coolapk_emotion_71"
      },
      {
        "icon": "coolapk_emotion_72"
      },
      {
        "icon": "coolapk_emotion_73"
      },
      {
        "icon": "coolapk_emotion_74"
      },
      {
        "icon": "coolapk_emotion_75"
      },
      {
        "icon": "coolapk_emotion_76"
      },
      {
        "icon": "coolapk_emotion_77"
      },
      {
        "icon": "coolapk_emotion_78"
      },
      {
        "icon": "coolapk_emotion_79"
      },
      {
        "icon": "coolapk_emotion_7_hehe",
        "text": "呵呵"
      },
      {
        "icon": "coolapk_emotion_80"
      },
      {
        "icon": "coolapk_emotion_81_naikezui"
      },
      {
        "icon": "coolapk_emotion_82_miaomiao"
      },
      {
        "icon": "coolapk_emotion_83_huoba",
        "text": "火把"
      },
      {
        "icon": "coolapk_emotion_84_baiyan",
        "text": "白眼"
      },
      {
        "icon": "coolapk_emotion_85"
      },
      {
        "icon": "coolapk_emotion_86"
      },
      {
        "icon": "coolapk_emotion_87"
      },
      {
        "icon": "coolapk_emotion_88"
      },
      {
        "icon": "coolapk_emotion_89"
      },
      {
        "icon": "coolapk_emotion_8_piezui",
        "text": "撇嘴"
      },
      {
        "icon": "coolapk_emotion_90"
      },
      {
        "icon": "coolapk_emotion_91"
      },
      {
        "icon": "coolapk_emotion_92"
      },
      {
        "icon": "coolapk_emotion_93"
      },
      {
        "icon": "coolapk_emotion_94"
      },
      {
        "icon": "coolapk_emotion_95_erhading"
      },
      {
        "icon": "coolapk_emotion_96_kuanlvmao"
      },
      {
        "icon": "coolapk_emotion_97_haixiu",
        "text": "害羞"
      },
      {
        "icon": "coolapk_emotion_98_wunai",
        "text": "无奈"
      },
      {
        "icon": "coolapk_emotion_99_zhoumei",
        "text": "皱眉"
      },
      {
        "icon": "coolapk_emotion_9_se",
        "text": "色"
      },
      {
        "icon": "c_coolb"
      },
      {
        "icon": "c_fived"
      },
      {
        "icon": "c_fivef"
      },
      {
        "icon": "c_fivem"
      },
      {
        "icon": "c_fiveo"
      },
      {
        "icon": "c_fivey"
      },
      {
        "icon": "c_fy"
      },
      {
        "icon": "c_oned"
      },
      {
        "icon": "c_onef"
      },
      {
        "icon": "c_onem"
      },
      {
        "icon": "c_oneo"
      },
      {
        "icon": "c_oney"
      },
      {
        "icon": "c_oy"
      },
      {
        "icon": "c_teny"
      },
      {
        "icon": "c_twod"
      },
      {
        "icon": "c_twof"
      },
      {
        "icon": "c_twom"
      },
      {
        "icon": "c_twoo"
      },
      {
        "icon": "c_twoy"
      },
      {
        "icon": "c_ty"
      }
    ]
  }

[/tab]
[tab name="CSS"]

.emotion-kuan{width:25px;}

[/tab]
[/tabs] [/collapse]
[collapse status="false" title="小红书"] [tabs]
[tab name="表情包" active="true"] [/tab]
[tab name="JSON"]

"小红书":{
    "type": "image",
    "name": "xiaohongshu",
    "container":[
      {
        "icon": 1,
        "text": "微笑"
      },
      {
        "icon": 2,
        "text": "害羞"
      },
      {
        "icon": 3,
        "text": "失望"
      },
      {
        "icon": 4,
        "text": "汗颜"
      },
      {
        "icon": 5,
        "text": "哇"
      },
      {
        "icon": 6,
        "text": "喝奶茶"
      },
      {
        "icon": 7,
        "text": "自拍"
      },
      {
        "icon": 8,
        "text": "微笑"
      },
      {
        "icon": 9,
        "text": "飞吻"
      },
      {
        "icon": 10,
        "text": "石化"
      },
      {
        "icon": 11,
        "text": "笑哭"
      },
      {
        "icon": 12,
        "text": "赞"
      },
      {
        "icon": 13,
        "text": "暗中观察"
      },
      {
        "icon": 14,
        "text": "买爆"
      },
      {
        "icon": 15,
        "text": "大笑"
      },
      {
        "icon": 16,
        "text": "色色"
      },
      {
        "icon": 17,
        "text": "生气"
      },
      {
        "icon": 18,
        "text": "哭惹"
      },
      {
        "icon": 19,
        "text": "萌萌哒"
      },
      {
        "icon": 20,
        "text": "斜眼"
      },
      {
        "icon": 21,
        "text": "可怜"
      },
      {
        "icon": 22,
        "text": "鄙视"
      },
      {
        "icon": 23,
        "text": "皱眉"
      },
      {
        "icon": 24,
        "text": "抓狂"
      },
      {
        "icon": 25,
        "text": "捂脸"
      },
      {
        "icon": 26,
        "text": "派对"
      },
      {
        "icon": 27,
        "text": "吧唧"
      },
      {
        "icon": 28,
        "text": "惊恐"
      },
      {
        "icon": 29,
        "text": "抠鼻"
      },
      {
        "icon": 30,
        "text": "再见"
      },
      {
        "icon": 31,
        "text": "叹气"
      },
      {
        "icon": 32,
        "text": "睡觉"
      },
      {
        "icon": 33,
        "text": "得意"
      },
      {
        "icon": 34,
        "text": "吃瓜"
      },
      {
        "icon": 35,
        "text": "扶墙"
      },
      {
        "icon": 36,
        "text": "黑薯问号"
      },
      {
        "icon": 37,
        "text": "黄金薯"
      },
      {
        "icon": 38,
        "text": "吐舌头"
      },
      {
        "icon": 39,
        "text": "扯脸"
      },
      {
        "icon": 40,
        "text": "dog"
      },
      {
        "icon": 41,
        "text": "点赞"
      },
      {
        "icon": 42,
        "text": "合十"
      },
      {
        "icon": 43,
        "text": "OK"
      },
      {
        "icon": 44,
        "text": "加油"
      },
      {
        "icon": 45,
        "text": "握手"
      },
      {
        "icon": 46,
        "text": "鼓掌"
      },
      {
        "icon": 47,
        "text": "弱"
      },{
        "icon": 48,
        "text": "抱拳"
      },
      {
        "icon": 49,
        "text": "勾引"
      },
      {
        "icon": 50,
        "text": "拥抱"
      },
      {
        "icon": 51,
        "text": "举手"
      },
      {
        "icon": 52,
        "text": "庆祝"
      },
      {
        "icon": 53,
        "text": "烟花"
      },
      {
        "icon": 54,
        "text": "看"
      },
      {
        "icon": 55,
        "text": "新月"
      },
      {
        "icon": 56,
        "text": "满月"
      },
      {
        "icon": 57,
        "text": "大便"
      },
      {
        "icon": 58,
        "text": "玫瑰"
      },
      {
        "icon": 59,
        "text": "凋谢"
      }
    ]
  }

[/tab]
[tab name="CSS"]

.emotion-xiaohongshu{width:25px;}

[/tab]
[/tabs] [/collapse]

食用

[scode type="red"]修改OwO.json文件请注意json格式,表情包文件夹名称需要与json配置中的name值相同[/scode]
[scode type="green"]如果开启了CDN加速,请将表情包文件夹上传至您的assets/img/emotion目录下[/scode]

  • 下载文件解压到/usr/themes/handsome/assets/img/emotion/目录下
  • 修改/usr/themes/handsome/usr/OwO.json文件

Markdown使用

::表情包文件夹名称:表情包文件名:: 

微信小程序构建npm详解

[scode type="green"]更新时间20240627日[/scode]

环境准备

确保当前环境已经安装了Node.jsnpm。可以通过查看版本号的方式检测是否安装,可执行以下命令查看

# Node.js查看
node --version
node -v

# npm查看
npm --version
npm -v

如果未安装可通过Node.js官网点此进入下载安装

安装依赖

[scode type="yellow"]请在小程序项目根目录下或者在微信开发者工具—调试器—终端执行[/scode]

初始化package.json

npm init -y

[scode type="blue"]这里使用腾讯开源企业设计体系UI组件库TDesign点此进入来安装[/scode]

安装tdesign

npm i tdesign-miniprogram -S --production

[scode type="share"]-S或者-save:将包保存到package.json文件中的dependencies字段,以便在将来重新安装时能够正确安装相同版本的包。
--production:只安装生产环境依赖,而不安装开发环境依赖。例如测试工具、构建工具等。
[/scode]
[scode type="red"]npm WARN config production Use --omit=dev instead.[/scode]
如果提示这个警告是npm在告诉你,正在使用一个过时的命令来设置配置。
npm5.0版本开始,这个命令已经不再推荐使用。可以用--production或者是--omit

全局范围内设置npm忽略开发依赖

npm config set omit=dev

安装时npm临时忽略开发依赖

npm install --production
npm install --omit=dev

[scode type="green"]安装完成后会在小程序项目根目录下生成一个新的文件目录node_modules[/scode]

构建npm

配置project.config.json

"setting": {
  "packNpmManually": true,
  "packNpmRelationList": [
    {
      "packageJsonPath": "./package.json",
      "miniprogramNpmDistDir": "./"
    }
  ]
}

构建npm

在微信开发者工具顶部菜单栏—工具—构建npm
[scode type="green"]构建成功后会在小程序项目根目录下生成一个新的文件目录miniprogram_npm[/scode]
[scode type="yellow"]提示:每次安装一个新的npm包都需要在微信开发者工具中重新构建npm[/scode]
[scode type="blue" status="default"]构建成功后请在微信开发者工具中—详情—本地设置—将JS编译成ES5开启[/scode]

引入使用

修改app.json

app.json中的"style":"v2"移出
[scode type="blue"]因为该配置表示启用新版组件样式,将会导致TDesign的组件样式错乱。[/scode]

使用npm包中的自定义组件

在需要使用这些组件的页面的.json文件中,通过"usingComponents"字段引入这些组件。
[scode type="red"]以下内容仅举例说明,其余UI组件请参考该文档说明使用。[/scode]

{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  }
}

接着就可以在wxml中直接使用这些组件

<t-button theme="primary">按钮</t-button>

附:如何使用官方weuiUI组件开发

在小程序项目根目录下的app.json中添加以下配置即可。

{
  "useExtendedLib": {
    "weui": true
  }
}

weui可通过https://weui.io查看效果,在https://github.com/Tencent/weui中复制对应组件使用。无需进行其他配置。

Windows下使用虚拟机安装MacOS

[scode type="blue"]这篇文章只针对于想要使用Mac的小伙伴~ ::douyin:48:: [/scode]
如果预算不够但又想体验一下电脑,该怎么办?
答案很简单,直线去线下苹果体验店啊!
哈哈,我是开玩笑的,接下来咱们言归正传~
[scode type="yellow"]毕竟站长是买不起Mac的,所以只能基于Windows安装使用,当然肯定是比不上Mac。[/scode]

系统准备

所需容量:至少40GB的硬盘空间,推荐80GB。

需要资源

  • VMware虚拟机(如果没有激活密钥,可以选择下载站长资源,当然其他虚拟机也可以)
  • macOS系统镜像(一般使用iso镜像文件挂载,如果是dwg、cdr等其他格式请转换成iso镜像文件)
  • Unlock解锁工具(让虚拟机兼容mac)

安装

[scode type="blue"]安装VMware虚拟机请提前自备镜像(不包括当前macOS镜像)[/scode]

步骤1:VMware安装激活

下载虚拟机

  • 官网安装VMware 17.0.2
  • 文章底部资源包含虚拟机17.0.2的安装包,无需官网注册。

安装

  • 按照引导顺序一步一步操作即可。

步骤2:解锁macOS安装限制

[scode type="red"]开始之前,请在任务管理器中关闭所有VMware的进程。[/scode]
[scode type="green"]如果可以最好关闭杀毒软件。[/scode]
GitHub下载Unlock后解压,右键以管理员权限运行Win-install.cmd,等待安装下载完毕即可。

步骤3:创建macOS Sonoma虚拟机

解锁镜像

  • 打开VMware软件,选择创建新的虚拟机(或者在文件->创建新的虚拟机)
  • 选择「稍后安装操作系统」-选择「Apple Mac OS X」作为客户机操作系统–然后选择「macOS 14」作为版本。
  • 设置虚拟机名称并指定虚拟机位置
  • 指定磁盘容量大小,建议设置磁盘容量为80GB,然后点击下一步直至完成。
  • 创建完成后如下图所示:

    挂载镜像

  • 挂载创建的iso镜像文件并勾选启动时连接

    步骤4:编辑 VMX 文件

    [scode type="yellow"]该文件包含虚拟机的硬件仿真信息。[/scode]

  • 找到创建的虚拟机文件路径-使用文本编辑器打开.vmx文件,在smc.present="TRUE"后添加以下内容:

    smc.version = "0"

  • 保存文件并退出。

    步骤5:在VMware中安装macOS Sonoma

  • 启动虚拟机,正如物理机开机按键一样,静静等待传说中的黑苹果。
  • 语言选择【简体中文】
    [scode type="green"]一定要记住抹掉磁盘,不然会失败,需要重新操作~ 抹掉磁盘不会抹除你Windows系统任何东西,只是抹除你新建的虚拟机下面的磁盘。[/scode]
  • 选择【磁盘工具-抹掉磁盘】,完成后关闭该窗口,返回上一界面,选择install macOS,正式进入苹果系统安装流程。
  • 选中磁盘,点击继续,之后耐心等待安装完成。
  • 配置系统(创建一个macOS账户后,即可看到以下界面:)

    步骤6:为macOS Sonoma 安装 VMware Tools

    要启用全屏模式和在 Windows 和 macOS 之间拖放文件等功能,需要安装适用于 macOS Sonoma 的 VMware Tools:

  • 挂载iso镜像文件 - 双击VMware Tools按向导进行安装。
  • 安装出现系统扩展已被禁用,在系统设置-隐私与安全中允许VMware,inc.系统软件,并重启macOS即可。

    常见问题

    CDR文件如何转换ISO文件?

    直接将CDR文件后缀名修改成ISO即可。

    本文资源

    macOS镜像:[button color="success" icon="download" url="https://pan.baidu.com/s/11SIWUsiCyL6G0CH_QAhhJg?pwd=p2yt" type=""]点击下载[/button]
    Unlock解锁工具:[button color="info" icon="github" url="https://github.com/paolo-projects/unlocker/releases" type=""]Unlock解锁工具[/button]
    VMware Pro 17.0:[button color="primary" icon="download" url="https://pan.baidu.com/s/1yoCgQv80QJIv_Q2WWreskw?pwd=pc7e" type=""]VMware Pro 17.0[/button]

百度网盘下载提速

[scode type="blue"]针对百度网盘用户下载提速[/scode]

方法一

  • 某多多/某宝 购买会员
  • 百度网盘官方会员

方法二

  • Pandownload
    (当年用的还是比较不错的,可惜的是去年下半年突然不能用了,主要是这个免费软件被人恶意利用牟利,所以也暂时停止服务了,不过后来听说又能用了,具体情况大家可以去下载试试。)
    优点:操作比较方便,直接选择下载用的文件
    缺点:封号、限速的概率比较大,不太稳定,需要注意。

方法三

1.点击百度网盘右上角设置小图标->进入设置页面
2.点击左侧传输一栏将"优化速率"开启即可。效果如下:
pan_01.png

Git 查看密钥、生成密钥、初始化用户名及邮箱、查看配置信息

查看Git配置信息

git config -l

查看密钥文件位置

  • 进入ssh文件夹(如果没有此文件夹,就生成密钥,生成此文件路径)
cd ~/.ssh
  • 输出具体路径
pwd

生成密钥

  • 输入以下命令生成密钥
ssh-keygen -t rsa -C "your@email.com"

查看密钥

cd ~/.ssh

cat id_rsa.pub

初始化用户名、邮箱

git config --global user.name '用户名'
git config --global user.email '邮箱'

使用ServerStatus-Hotaru给服务器搭建监控探针

🔖前言

[scode type="blue"]ServerStatus-Hotaru是一款云探针、多服务器探针、云监控、多服务器云监控平台
基于 ServerStatus-Toyo 最新版本稍作修改。[/scode]

效果演示

✨特征

服务端客户端脚本支持系统:Centos 7、Debian 8、Ubuntu 15.10 及以上、ArchLinux

Python 客户端:支持 Python 版本:Python 2.7+

Go 客户端:如果您的客户端环境无法使用 Python, 可以使用 Go 编写的客户端

开源地址:https://github.com/cokemine/ServerStatus-goclient

流量计算:客户端可以选择使用 vnStat 按月计算流量,会自动编译安装最新版本vnStat(ArchLinux 会从软件源安装最新版本)。如不使用 vnStat ,则默认计算流量方式为重启后流量清零。请注意 ServerStatus 不会把协议为 GPLv2 的 vnStat 作为必须的依赖。

前端基于 Vue 3.0 和 SemanticUI 制作,如需修改前端建议自行修改打包。

前端所使用一些静态资源见前端仓库下的声明。

前端开源地址:https://github.com/cokemine/hotaru_theme

🛠️安装

服务端

wget https://raw.githubusercontent.com/cokemine/ServerStatus-Hotaru/master/status.sh
# wget https://cokemine.coding.net/p/hotarunet/d/ServerStatus-Hotaru/git/raw/master/status.sh 若服务器位于中国大陆建议选择 Coding.net 仓库
bash status.sh s


1.输入数字1选择安装服务端

2.没什么需求的话端口为默认就可以了,默认端口号35601

3.如果本地没有装Nginx或者Apache之类的,直接Y就好。如果你是宝塔平台或者APPNODE一类的,不想多安装caddy。直接N就好。详情说明请参照常见问题

4.绑定域名或者IP访问

5.端口自主选择

6.添加客户端

客户端

bash status.sh c


直接选择1按照服务端填写即可

🔍常见问题

国内服务器无法连接raw.githubusercontent.com或github.com

原因:GFW长城防火墙(细节就不用说了)

[scode type="yellow"]🔧解决方法[/scode]

🚀利用修改hosts,让服务器定向访问通的IP地址

1.在SSH中输入vi /etc/hosts

2.在ipip.net中ping一下raw.githubusercontent.com

3.把ping通的ip写进hosts里面,按a就可以输入文字了

4.输完后按ESC键,输入:wq进行保存文本,之后在运行脚本即可。

🚀利用反代实现国内访问下载github.com资源

打开服务器根目录,进入/root找到status.sh修改里面关于github.com的连接改成https://ghproxy.com/github.com,之后在运行脚本即可。

使用宝塔面板搭建ServerStatus

1.打开宝塔,创建网站,设置基本配置信息。

2.网站设置->配置文件,在root后面的目录改成/usr/local/ServerStatus/web然后保存即可。

🔗相关探针

ServerStatus-Toyo:https://github.com/ToyoDAdoubiBackup/ServerStatus-Toyo
ServerStatus中文版:https://github.com/cppla/ServerStatus
[演示链接:https://tz.cloudcpp.com/]
青蛇探针serverMmon:https://github.com/souying/serverMmon
哪吒面板nezha:https://github.com/naiba/nezha

自定义PS启动界面教程

📌说明

[scode type="blue"]🔊非常简单的启动界面更换教程[/scode]

🛠️教程

准备环境

[scode type="yellow"]当然一般操作系统是没有问题的哦~[/scode]
软件名称:PhotoShop CS6中文版(CC版本需要更换修改软件)
测试环境:Win10 x64中文版/Win7 x64中文版(其他系统版本请自行测试)
更新日期:2023-06-19

操作步骤

首先,下载ResHacker.exe v5.1.7软件并启动(部分操作系统需要管理员权限)

文件-打开找到PS软件安装目录下的PSArt.dll打开

点击PNGF找到文件SPLASHBACKGROUND.PNG(标准版)或者SPLASHEXTENDEDBACKGROUND.PNG(扩展版),注意两个文件启动时是哪张就修改哪张。

右键单击选择替换资源,在弹出框中单击【选择文件】并选择自己想要作为启动界面的图片,单击替换。
[scode type="red"]注:图片尺寸大小要和原图保持一致[/scode]
[scode type="blue"]替换文件名称必须和资源名称一致[/scode]


全部填写完毕后,生成预览图就说明修改成功了。完成后保存即可。

下载

微信dat文件批量转换查看软件

🔖软件简介

软件名称:WxDatViewer 2.0(微信dat图片查看器)
测试环境:Win10 中文版/Win7 中文版
更新日期:2023.08.01
软件图示:

📋软件说明

[collapse status="false" title="软件说明"]本软件具有如下特性:

  1. 把 dat 加密文件视为普通的图片文件,尽可能地模拟资源管理器的操作方式对它们进行批量展示/管理;
  
  能以缩略图的形式(在 大图标/超大图标 模式下),直接批量展示指定文件夹下的dat图片画面;双击dat图片文件时,将在全屏模式下查看单张图片,并允许自由切换到 上一张/下一张/第一张/最后一张 dat图片;允许直接在程序内部对文件进行各种操作:复制、删除、改名……

  2. 能查看/导出的图片格式非常齐全,囊括了被微信加密保存的所有静态图片格式:jpg、bmp、png,以及被转为dat后缀的gif动图(表情包图片除外);

  若进一步对jpg格式的图片进行限制,还可以只提取出照片,对只关心微信聊天记录中照片的人士十分友好。

  3. 导出dat图片时,可以处理已选文件或文件夹,还可选择是否同时处理子文件夹;

  4. 查看/导出速度非常快

  5. 筛选功能非常丰富,可根据文件大小、画面尺寸、dat文件创建或最后修改日期筛选要导出的图片,可跳过重复图片,其中,文件大小、画面尺寸、dat文件创建或最后修改日期的范围可以一次性指定多个

  6. 导出后的图片可以按类别保存,也可以按源文件夹的结构保存,还可选择同步删除已经导出的dat文件

  7. 导出后的图片命名非常灵活:

  既可以与原 dat 文件同名,也可以按转换顺序编号,还可以附加拍摄时间。
  按整理顺序的序号命名时,可以指定起始值和步长,甚至允许每种类别的图片各自计算起始值。
  附加拍摄时间字符串时,可以指定多种格式:可以保留年月日时分秒,也可以只保留年月日……

  8. 导出图片重名时允许有多种选择:可以选择覆盖、跳过,或是在文件名后添加序号

  9. 提供了较为详细的导出日志,记录了每次导出前后的文件名,方便事后核对

  10. 智能定位要查看/导出的dat图片文件

  可以列出所有曾经在本机登录的微信ID,通过微信ID列表可定位到"按年月保存的聊天图片"、"表情包缩略图"、"老版微信Data文件夹下的图片"这三类dat图片所在的文件夹(方法:鼠标在主窗口地址栏后的按钮上悬停)。

  通过按钮打开文件夹路径时的逻辑:

  点击按钮选择dat文件所在目录时,按照 ①上次定位的目录 → ②本机第一个微信账号下最后一个月份的图片文件夹 → ③资源管理器中当前打开的文件夹路径 → ④程序所在文件夹 的顺序定位文件夹路径,这4者之中以最先检测到的文件夹路径作为待选目录;

  点击按钮选择图片文件保存路径时,按照 ①→③→④ 的顺序定位文件夹;

  若在点击这两个按钮的同时加按 Ctrl 键,则在前述定位流程中优先定位到资源管理器中当前打开的文件夹路径;

[/collapse]

💊食用方法

[scode type="blue"]🔊注意:首次打开程序等待缩略图生成期间,请勿点击主窗口,以防致程序暂时失去响应;再次打开程序时生成缩略图的速度会大幅提升[/scode]

  • 打开微信dat图片文件所在的文件夹(首次运行时会自动定位,鼠标指向地址栏尾部的按钮时会弹出下拉菜单供选择)
  • 视图模式切换到 大图标/超大图标 任一模式下(主菜单的“查看”菜单下可选,或者在文件列表的空白处点 右键→视图,或者底部状态栏最后一栏上点击,展开 查看模式),将显示dat图片文件的缩略图
  • 双击dat文件,将在全屏模式下查看该dat图片,Esc、鼠标中键 或 双击 可退出全屏查看模式
  • 在文件列表框中,或者dat图片全屏查看窗口中,点击右键,支持更多的操作,例如:导出dat图片

🔍使用技巧

🚀主窗口

文件列表框中:
😐鼠标在文件列表框上时,按住 Ctrl 并转动滚轮,可切换文件的查看模式
😛在大图标超大图标查看模式下,文件列表框中的dat图片文件将显示缩略图
😬鼠标双击 dat 图片文件,将用全屏模式查看该图片
😮在空白处双击,将退到上一级文件夹
😴若需要文件排序功能,请在任一dat文件上点击右键,弹出菜单中展开 "文件排序",或者切换到 详细信息 视图下,直接点击列表框相应表头字段

🚀图片全屏查看窗口

鼠标移到图片跳转按钮上,当光标变成四向箭头形状时,可把图片跳转按钮拖放到其它位置;点击右键有更多选项可操作

🔧快捷键

[collapse status="false" title="快捷键"]⭐主窗口:
  Ctrl+O 打开文件夹
  Ctrl+D 仅显示重复图片
  Ctrl+M 返回上一级文件夹
  Ctrl+F1 按修改时间升/降序排列
  Ctrl+F2 按图片大小升/降序排列
  Ctrl+F3 按文件类型升/降序排列
  Ctrl+F4 按文件名升/降序排列
  F12 弹出选项设置窗口

⭐图片列表框:
  F3 查看当前dat图片
  E/Ctrl+E 导出已选的dat图片
  Ctrl+Alt+E 导出当前目录下的dat图片
  Ctrl+Del 弹出 删除当前文件夹下的dat图片文件 对话框
  单键D 根据 选项→常规 中的设置,对已选图片执行 删除到回收站/彻底删除 操作
  Ctrl+F 图片过滤
  Ctrl+1 选中所有重复的dat图片,但每组第一个除外
  Ctrl+2 选中所有与当前已选重复的dat图片,但每组第一个除外
  Ctrl+3 选中所有重复的dat图片
  Ctrl+4 选中所有与当前已选重复的dat图片
  Ctrl+5 选中所有与当前已选重复的其它dat图片

⭐图片全屏查看窗口:
⭐图片切换快捷键:
  ←/PageUp 上一张dat图片
  →/PageDown 下一张dat图片
  Ctrl+←/↑/PageUp 第一张dat图片
  Ctrl+→/↓/PageDown 最后一张dat图片
  ↑ 主窗口文件在缩略图模式下时,查看当前列的上一张dat图片;主窗口在列表模式下时,查看上一张dat图片
  ↓ 主窗口文件在缩略图模式下时,查看当前列的下一张dat图片;主窗口在列表模式下时,查看下一张dat图片
  空格键 下一张dat图片
  Shift+空格键 上一张dat图片
  鼠标滚轮向下滚动 下一张dat图片
  鼠标滚轮向上滚动 上一张dat图片

⭐图片旋转/翻转快捷键(仅查看):
  L 向左旋转图片
  R 向右旋转图片
  H 水平翻转图片
  V 垂直翻转图片
  数字0 恢复正常图片(缩略图不翻转、高宽适合窗口)

⭐图片缩放快捷键(仅查看):
  1~9 缩略图放大到原图的X倍
  = 放大缩略图
  - 缩小缩略图
  F 缩略图适合窗口
  Ctrl+滚轮上滚 放大缩略图
  Ctrl+滚轮下滚 缩小缩略图

⭐跳转到图片指定部位的快捷键:
  Ctrl+1 跳转到Y轴顶部
  Ctrl+2 跳转到Y轴中部
  Ctrl+3 跳转到Y轴底部
  Ctrl+4 跳转到X轴左侧
  Ctrl+5 跳转到X轴中部
  Ctrl+6 跳转到X轴右侧
  Shift+1 跳转到左上角
  Shift+2 跳转到顶部中央
  Shift+3 跳转到右上角
  Shift+4 跳转到左侧中央
  Shift+5 跳转到画面中央
  Shift+6 跳转到右侧中央
  Shift+7 跳转到左下角
  Shift+8 跳转到底部中央
  Shift+9 跳转到右下角 

⭐操控图片跳转面板快捷键:
  Alt+1 移动到底部,居中
  Alt+2 移动到底部左侧
  Alt+3 移动到底部右侧
  F4 显示/隐藏跳转面板

⭐其它操作:
  E/Ctrl+E 导出当前dat图片
  Del 删除当前dat文件到回收站
  D/Shift+Del 彻底删除当前dat文件
  F12 弹出选项设置窗口
  Esc/双击/鼠标中键 退出全屏查看窗口
[/collapse]

软件下载

[tabs]
[tab name="下载" active="true"] [button color="info" icon="download" url="https://alist.starsei.com/TencentCloud/typecho/software/WxDatViewer2.0.rar" type=""]下载WxDatViewer 2.0[/button]
[/tab]
[tab name="密码"] [/tab]
[/tabs]

Cloudreve个人网盘搭建教程

前期准备

  • 域名、服务器备案
  • 基础环境配置完成
  • 宝塔面板 / 其他

部署

[scode type="blue"]操作时请使用Linux终端或者直接使用远程终端[/scode]
[scode type="green"]更新时间2024620日[/scode]

✨特性

☁️ 支持本机、从机、七牛、阿里云 OSS、腾讯云 COS、又拍云、OneDrive (包括世纪互联版) 作为存储端
📤 上传/下载 支持客户端直传,支持下载限速
💾 可对接 Aria2 离线下载,可使用多个从机节点分担下载任务
📚 在线 压缩/解压缩、多文件打包下载
💻 覆盖全部存储策略的 WebDAV 协议支持
⚡ 拖拽上传、目录上传、流式上传处理
🗃️ 文件拖拽管理
👩‍👧‍👦 多用户、用户组
🔗 创建文件、目录的分享链接,可设定自动过期
👁️‍🗨️ 视频、图像、音频、文本、Office 文档在线预览
🎨 自定义主题颜色、深色模式、PWA 应用、SPA、i18n
🚀 多合一包装,具有开箱即用的所有功能。
🌈 ... ...

🛠️安装

[scode type="green"]当前安装环境只支持Linux系统[/scode]
[scode type="yellow"]Cloudreve在首次启动时,会创建初始管理员账号,请注意保管密码,密码只有在首次启动才会出现。[/scode]

# 下载Cloudreve
wget https://github.com/cloudreve/Cloudreve/releases/download/3.8.3/cloudreve_3.8.3_linux_amd64.tar.gz

# 解压获取到的主程序
tar -zxvf cloudreve_3.8.3_linux_amd64.tar.gz

# 赋予执行权限
chmod +x ./cloudreve

# 启动 Cloudreve
./cloudreve

启动成功
如果不需要通过域名进行访问的话,到这里就算安装完成了。
[scode type="blue" size="simple"]注意,Cloudreve默认监听端口为5212,请在服务器安全组开放此端口,如果是宝塔面板设置防火墙,请开启此端口通过ip+端口进行访问。例如:http://127.0.0.1:5212[/scode]

域名访问

通过宝塔面板直接设置反向代理即可!可以参考下面文章内容进行配置。
[post cid="8" size="large"/]

进程守护

[scode type="red"]设置进程守护后无须每次单独启动Cloudreve[/scode]

安装升级systemd

sudo yum install systemd-*

编辑systemd配置文件

# 编辑配置文件
vim /usr/lib/systemd/system/cloudreve.service

添加内容

[scode type="green"]复制前请把Documentation修改为你的域名,WorkingDirectoryExecStart路径修改为你的Cloudreve安装路径,如果是默认安装目录,修改域名然后复制即可。[/scode]
[scode type="blue"]按i进入编辑模式,将下面内容粘贴进去,然后按ESC键退出编辑模式,输入:wq按回车保存。[/scode]

[Unit]
Description=Cloudreve
Documentation=https://pan.starsei.com
After=network.target
After=mysqld.service
Wants=network.target

[Service]
WorkingDirectory=/root
ExecStart=/root/cloudreve
Restart=on-abnormal
RestartSec=5s
KillMode=mixed

StandardOutput=null
StandardError=syslog

[Install]
WantedBy=multi-user.target

更新配置

# 更新配置
systemctl daemon-reload

启动服务

# 启动服务
systemctl start cloudreve

设置开机启动

# 设置开机启动
systemctl enable cloudreve

管理命令

# 启动服务
systemctl start cloudreve

# 停止服务
systemctl stop cloudreve

# 重启服务
systemctl restart cloudreve

# 查看状态
systemctl status cloudreve

原文档地址:[button color="info" icon="external-link" url="https://docs.cloudreve.org/" type=""]点击此处跳转[/button]

❌