该篇文章的内容收集了网络上常见可用的美化方法,并稍加改动,其中标记为 的即为本人博客所采用样式

本站基本环境:

  • Typecho:1.1(17.10.30)
  • handsome:8.4.0 Pro

1、头像

1.1 头像呼吸光环

头像呼吸光环 √

设置外观 → 开发者设置 → 自定义 CSS

/* 头像呼吸光环——begin */
@keyframes light {
    0% { box-shadow: 0 0 4px #f00; }
    25% { box-shadow: 0 0 16px #0f0; }
    50% { box-shadow: 0 0 4px #00f; }
    75% { box-shadow: 0 0 16px #0f0; }
    100% { box-shadow: 0 0 4px #f00; }
}
/* 头像呼吸光环——over */

1.2 头像栏右侧羽毛

头像栏右侧羽毛 √

设置外观 → 开发者设置 → 自定义 CSS

/* 头像栏右侧羽毛——begin */
.dropdown.wrapper {
    background:url(https://blog-images-1309598269.cos.ap-beijing.myqcloud.com/attire%2F%E7%BE%BD%E6%AF%9B.webp) right bottom no-repeat;
}
/* 头像栏右侧羽毛——over */

1.3 头像旁打字介绍效果

头像旁打字介绍效果 √

设置外观 → 初级设置 → 博主的介绍

<!-- 头像旁打字介绍效果——begin -->
<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>
<!-- 头像旁打字介绍效果——over -->

1.4 头像鼠标悬停旋转放大

头像鼠标悬停旋转放大

设置外观 → 开发者设置 → 自定义 CSS

/* 头像鼠标悬停旋转放大——begin */
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
.vertical-avatar img:hover {
    transform: scale(1.15) rotate(720deg);
}
/* 头像鼠标悬停旋转放大——over */

2、标签云

2.1 等距标签云

等距标签云

设置外观 → 开发者设置 → 自定义 CSS

/* 标签云等距美化——begin */
#tag_cloud-2 a {
    border-radius: 5px;
    width: 32%;
}
/* 标签云等距美化——over */

2.2 彩色标签云及左侧图标颜色

彩色标签云及左侧图标颜色 √

设置外观 → 开发者设置 → 自定义 JavaScript

如果主题中启用了 pjax,还需要将下述代码添加到设置外观 → PJAX → PJAX 回调函数

/* 彩色标签云及彩色图标——begin */
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
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
    }
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90", "#0043ff", "#cc00ff", "#8e7cc3", "#A0522D", "#FF7256", "#FFA500", "#8B0000", "#7CFC00", "#4EEE94", "#00FFFF", "#EE0000"];
leftHeader.forEach(tag => {
    tagsColor = leftHeaderColorArr[Math.floor(Math.random() * leftHeaderColorArr.length)];
    tag.style.color = tagsColor
});
/* 彩色标签云及彩色图标——over */

本站只有标签云颜色随机,其余左侧的图标和右侧的统计信息等颜色已固定

/* 彩色标签云——begin */
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;
});
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
    }
}
/* 彩色标签云——over */

3、文章

3.1 首页文章版式阴影化

首页文章版式阴影化

设置外观 → 开发者设置 → 自定义 CSS

/* 首页文章版式阴影化——begin */
.panel{
   box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}
.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255,112,173,0.35);
}
.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(232, 212, 220, 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(232, 212, 220, 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);
}
/* 首页文章版式阴影化——over */

3.2 首页文章版式圆角化

首页文章版式圆角化 √

设置外观 → 开发者设置 → 自定义 CSS

/* 首页文章版式圆角化——begin */
.panel{
    border: none;
    border-radius: 15px;
}
.panel-small{
    border: none;
    border-radius: 15px;
}
.item-thumb{
    border-radius: 15px;  
}
/* 首页文章版式圆角化——over */

3.3 文章列表悬停上浮

首页文章列表悬停上浮 √

设置外观 → 开发者设置 → 自定义 CSS

/* 文章列表悬停上浮——begin */
.blog-post .panel-small:not(article),
.blog-post .panel:not(article) {
    transition: all 0.3s;
}
.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
/* 文章列表悬停上浮——over */

3.4 文章列表头图悬停放大并隐藏超出范围部分

文章列表头图悬停放大并隐藏超出范围部分 √

设置外观 → 开发者设置 → 自定义 CSS

/* 文章列表头图悬停放大并隐藏超出范围部分——begin */
.index-post-img {
    overflow: hidden;
}
.item-thumb,
.item-thumb-small {
    transition: all 0.3s;
}
.item-thumb:hover,
.item-thumb-small:hover {
    transform: scale(1.05)
}
/* 文章列表头图悬停放大并隐藏超出范围部分——over */

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

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

设置外观 → 开发者设置 → 自定义 CSS

/* 文章内头图和图片悬停放大并隐藏超出范围部分——begin */
.entry-thumbnail {
    overflow: hidden;
}
#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}
#post-content img:hover {
    transform: scale(1.05);
}
/* 文章内头图和图片悬停放大并隐藏超出范围部分——over */

本站中,针对文章,只有文章最上面的头图配置了悬停放大,其内容部分图片不设置

/* 文章内头图和图片悬停放大并隐藏超出范围部分——begin */
.entry-thumbnail {
    overflow: hidden;
}
#post-content img {
    border-radius: 10px;
}
/* 文章内头图和图片悬停放大并隐藏超出范围部分——over */

3.6 左侧文章图标和评论头像圆角化且鼠标悬停旋转图标

左侧文章图标和评论头像圆角化且鼠标悬停旋转 √

设置外观 → 开发者设置 → 自定义 CSS

/* 左侧文章图标和评论头像圆角化且鼠标悬停旋转图标——begin */
.img-square {
    transition: all 0.3s;
    border-radius: 50%;
}
.img-square:hover {
    transform: rotate(360deg);
}
/* 左侧文章图标和评论头像圆角化且鼠标悬停旋转图标——over */

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

3.7 文章内段落与列表间隙缩小

文章内段落与列表间隙缩小 √

设置外观 → 开发者设置 → 自定义 CSS

/* 文章内段落与列表间隙缩小——begin */
#post-content ul, #post-content pre,  #post-content ul p, #post-content ol, #post-content ol p {
    margin: 0;
}
#post-content blockquote {
    margin: 1.5em 0;
}
#post-content p {
    margin:10px 0 10px 0;
}
/* 文章内段落与列表间隙缩小——over */

3.8 自定义文章顺序

自定义文章顺序 √

找到 var/Widget/Archive.php 文件中此行代码,将 created 更改为 order,发不完文章后可以去数据库中自定义顺序

image-20220615021930940

3.9 文章内容标题字体调整

文章内容标题字体调整 √

设置外观 → 开发者设置 → 自定义 CSS

/* 文章内容标题字体调整——begin */
#post-content h2 {
    font-size: 28px;
}
#post-content h3 {
    font-size: 24px;
}
#post-content h4 {
    font-size: 20px;
}
/* 文章内容标题字体调整——over */

4、背景

4.1 气泡背景

气泡背景

设置外观 → 开发者设置 → 自定义输出 body 尾部的 HTML 代码

<!-- 气泡背景——begin -->
<div id="bubble"></div>
<script>class BGBubble {
    constructor(i) {
        this.defaultOpts = {
            id: '',                             // 容器ID
            num: 100,                           // 个数
            start_probability: 0.1,             // 如果数量小于num,有这些几率添加一个新的
            radius_min: 1,                      // 初始半径最小值
            radius_max: 2,                      // 初始半径最大值
            radius_add_min: .3,                 // 半径增加最小值
            radius_add_max: .5,                 // 半径增加最大值
            opacity_min: 0.3,                   // 初始透明度最小值
            opacity_max: 0.5,                   // 初始透明度最大值
            opacity_prev_min: .003,             // 透明度递减值最小值
            opacity_prev_max: .005,             // 透明度递减值最大值
            light_min: 40,                      // 颜色亮度最小值
            light_max: 70,                      // 颜色亮度最大值
            is_same_color: false,               // 泡泡颜色是否相同
            background:"#f1f3f4"                // 背景颜色
        }, "[object Object]" == Object.prototype.toString.call(i) ? this.userOpts = {...this.defaultOpts, ...i} : this.userOpts = {
            ...this.defaultOpts,
            id: i
        }, this.color = this.random(0, 360), this.bubbleNum = [], this.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame, this.cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame
    }
    random(i, t) {
        return Math.random() * (t - i) + i
    }
    initBubble(i, t) {
        const a = window.innerWidth, s = window.innerHeight, n = this.userOpts,
            e = this.random(n.light_min, n.light_max);
        this.bubble = {
            x: this.random(0, a),
            y: this.random(0, s),
            radius: this.random(n.radius_min, n.radius_max),
            radiusChange: this.random(n.radius_add_min, n.radius_add_max),
            opacity: this.random(n.opacity_min, n.opacity_max),
            opacityChange: this.random(n.opacity_prev_min, n.opacity_prev_max),
            light: e,
            color: `hsl(${t ? i : this.random(0, 360)},100%,${e}%)`
        }
    }
    bubbling(i, t, a) {
        !this.bubble && this.initBubble(t, a);
        const s = this.bubble;
        i.fillStyle = s.color, i.globalAlpha = s.opacity, i.beginPath(), i.arc(s.x, s.y, s.radius, 0, 2 * Math.PI, !0), i.closePath(), i.fill(), i.globalAlpha = 1, s.opacity -= s.opacityChange, s.radius += s.radiusChange, s.opacity <= 0 && this.initBubble(t, a)
    }
    createCanvas() {
        this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), this.canvas.style.display = "block", this.canvas.width = window.innerWidth, this.canvas.height = window.innerHeight, this.canvas.style.position = "fixed", this.canvas.style.top = "0", this.canvas.style.left = "0", this.canvas.style.zIndex = "-1", document.getElementById(this.userOpts.id).appendChild(this.canvas), window.onresize = (() => {
            this.canvas.width = window.innerWidth, this.canvas.height = window.innerHeight
        })
    }
    start() {
        const i = window.innerWidth, t = window.innerHeight;
        this.color += .1, this.ctx.fillStyle = this.defaultOpts.background, this.ctx.fillRect(0, 0, i, t), this.bubbleNum.length < this.userOpts.num && Math.random() < this.userOpts.start_probability && this.bubbleNum.push(new BGBubble), this.bubbleNum.forEach(i => i.bubbling(this.ctx, this.color, this.userOpts.is_same_color));
        const a = this.requestAnimationFrame;
        this.myReq = a(() => this.start())
    }
    destory() {
        (0, this.cancelAnimationFrame)(this.myReq), window.onresize = null
    }
}
const bubbleDemo = new BGBubble("bubble");
bubbleDemo.createCanvas(), bubbleDemo.start();
</script>
<!-- 气泡背景——over -->

4.2 动态粒子几何背景

动态粒子几何背景 √

设置外观 → 开发者设置 → 自定义输出 body 尾部的 HTML 代码

<!-- 动态粒子几何背景——begin -->
<script type="text/javascript">
    !function () {
        //封装方法,压缩之后减少文件大小
        function get_attribute(node, attr, default_value) {
            return node.getAttribute(attr) || default_value;
        }
        //封装方法,压缩之后减少文件大小
        function get_by_tagname(name) {
            return document.getElementsByTagName(name);
        }
        //获取配置参数
        function get_config_option() {
            var scripts = get_by_tagname("script"),
                script_len = scripts.length,
                script = scripts[script_len - 1]; //当前加载的script
            return {
                l: script_len, //长度,用于生成id用
                z: get_attribute(script, "zIndex", -1), //z-index
                o: get_attribute(script, "opacity", 0.8), //opacity
                c: get_attribute(script, "color", "255,255,255"), //color
                n: get_attribute(script, "count", 350) //count
            };
        }
        //设置canvas的高宽
        function set_canvas_size() {
            canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        }
        //绘制过程
        function draw_canvas() {
            context.clearRect(0, 0, canvas_width, canvas_height);
            //随机的线条和当前位置联合数组
            var e, i, d, x_dist, y_dist, dist; //临时节点
            //遍历处理每一个点
            random_points.forEach(function (r, idx) {
                r.x += r.xa,
                    r.y += r.ya, //移动
                    r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
                    r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界,反向反弹
                    context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
                //从下一个点开始
                for (i = idx + 1; i < all_array.length; i++) {
                    e = all_array[i];
                    // 当前点存在
                    if (null !== e.x && null !== e.y) {
                        x_dist = r.x - e.x; //x轴距离 l
                        y_dist = r.y - e.y; //y轴距离 n
                        dist = x_dist * x_dist + y_dist * y_dist; //总距离, m

                        dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
                            d = (e.max - dist) / e.max,
                            context.beginPath(),
                            context.lineWidth = d / 2,
                            context.strokeStyle = "#0000FF",//这里是线条的颜色
                            context.moveTo(r.x, r.y),
                            context.lineTo(e.x, e.y),
                            context.stroke());
                    }
                }
            }), frame_func(draw_canvas);
        }
        //创建画布,并添加到body中
        var the_canvas = document.createElement("canvas"), //画布
            config = get_config_option(), //配置
            canvas_id = "c_n" + config.l, //canvas id
            context = the_canvas.getContext("2d"), canvas_width, canvas_height,
            frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (func) {
                window.setTimeout(func, 1000 / 40);
            }, random = Math.random,
            current_point = {
                x: null, //当前鼠标x
                y: null, //当前鼠标y
                max: 20000 // 圈半径的平方
            },
            all_array;
        the_canvas.id = canvas_id;
        the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
        get_by_tagname("body")[0].appendChild(the_canvas);
        //初始化画布大小
        set_canvas_size();
        window.onresize = set_canvas_size;
        //当时鼠标位置存储,离开的时候,释放当前位置信息
        window.onmousemove = function (e) {
            e = e || window.event;
            current_point.x = e.clientX;
            current_point.y = e.clientY;
        }, window.onmouseout = function () {
            current_point.x = null;
            current_point.y = null;
        };
        //随机生成config.n条线位置信息
        for (var random_points = [], i = 0; config.n > i; i++) {
            var x = random() * canvas_width, //随机位置
                y = random() * canvas_height,
                xa = 2 * random() - 1, //随机运动方向
                ya = 2 * random() - 1;
            // 随机点
            random_points.push({
                x: x,
                y: y,
                xa: xa,
                ya: ya,
                max: 6000 //沾附距离
            });
        }
        all_array = random_points.concat([current_point]);
        //0.1秒后绘制
        setTimeout(function () {
            draw_canvas();
        }, 100);
    }();
</script>
<!-- 动态粒子几何背景——over -->

5、评论打赏

5.1 评论边框

评论边框 √

设置外观 → 开发者设置 → 自定义 CSS

/* 评论边框——begin */
.comment-parent {
    margin: 5px 10px 10px 5px;
    padding: 20px;
    border-radius: 25px;
    border: 1px solid rgb(192, 229, 240);
}
/* 评论边框——over */

5.2 添加表情包

添加表情包 √

将以下代码内容添加到 /usr/themes/handsome/usr/OwO.json 文件中

并下载对应的表情包文件夹放到到 /usr/themes/handsome/assets/img/emotion 目录内

阿鲁表情包主题内原本就有,以下在原有阿鲁表情包的基础上进行扩充,直接覆盖阿鲁部分的源代码即可

"阿鲁": {
    "name": "aru",
        "type": "image",
        "container": [
        {
            "icon": "0000",
            "text": "**"
        },
        {
            "icon": "0010",
            "text": "**"
        },
        {
            "icon": "0020",
            "text": "**"
        },
        {
            "icon": "0030",
            "text": "**"
        },
        {
            "icon": "0040",
            "text": "**"
        },
        {
            "icon": "0050",
            "text": "**"
        },
        {
            "icon": "0060",
            "text": "**"
        },
        {
            "icon": "0070",
            "text": "**"
        },
        {
            "icon": "0080",
            "text": "**"
        },
        {
            "icon": "0090",
            "text": "**"
        },
        {
            "icon": "0100",
            "text": "**"
        },
        {
            "icon": "0110",
            "text": "**"
        },
        {
            "icon": "0120",
            "text": "**"
        },
        {
            "icon": "0130",
            "text": "**"
        },
        {
            "icon": "0140",
            "text": "**"
        },
        {
            "icon": "0150",
            "text": "**"
        },
        {
            "icon": "0160",
            "text": "**"
        },
        {
            "icon": "0171",
            "text": "**"
        },
        {
            "icon": "0180",
            "text": "**"
        },
        {
            "icon": "0181",
            "text": "**"
        },
        {
            "icon": "0190",
            "text": "**"
        },
        {
            "icon": "0200",
            "text": "**"
        },
        {
            "icon": "0210",
            "text": "**"
        },
        {
            "icon": "0220",
            "text": "**"
        },
        {
            "icon": "0230",
            "text": "**"
        },
        {
            "icon": "0240",
            "text": "**"
        },
        {
            "icon": "0241",
            "text": "**"
        },
        {
            "icon": "0250",
            "text": "**"
        },
        {
            "icon": "0260",
            "text": "**"
        },
        {
            "icon": "0270",
            "text": "**"
        },
        {
            "icon": "0280",
            "text": "**"
        },
        {
            "icon": "0290",
            "text": "**"
        },
        {
            "icon": "0300",
            "text": "**"
        },
        {
            "icon": "0310",
            "text": "**"
        },
        {
            "icon": "0320",
            "text": "**"
        },
        {
            "icon": "0330",
            "text": "**"
        },
        {
            "icon": "0331",
            "text": "**"
        },
        {
            "icon": "0340",
            "text": "**"
        },
        {
            "icon": "0350",
            "text": "**"
        },
        {
            "icon": "0360",
            "text": "**"
        },
        {
            "icon": "0370",
            "text": "**"
        },
        {
            "icon": "0380",
            "text": "**"
        },
        {
            "icon": "0390",
            "text": "**"
        },
        {
            "icon": "0391",
            "text": "**"
        },
        {
            "icon": "0400",
            "text": "**"
        },
        {
            "icon": "0410",
            "text": "**"
        },
        {
            "icon": "0420",
            "text": "**"
        },
        {
            "icon": "0430",
            "text": "**"
        },
        {
            "icon": "0431",
            "text": "**"
        },
        {
            "icon": "0440",
            "text": "**"
        },
        {
            "icon": "0450",
            "text": "**"
        },
        {
            "icon": "0451",
            "text": "**"
        },
        {
            "icon": "0460",
            "text": "**"
        },
        {
            "icon": "0461",
            "text": "**"
        },
        {
            "icon": "0462",
            "text": "**"
        },
        {
            "icon": "0470",
            "text": "**"
        },
        {
            "icon": "0480",
            "text": "**"
        },
        {
            "icon": "0490",
            "text": "**"
        },
        {
            "icon": "0500",
            "text": "**"
        },
        {
            "icon": "0510",
            "text": "**"
        },
        {
            "icon": "0520",
            "text": "**"
        },
        {
            "icon": "0530",
            "text": "**"
        },
        {
            "icon": "0540",
            "text": "**"
        },
        {
            "icon": "0550",
            "text": "**"
        },
        {
            "icon": "0560",
            "text": "**"
        },
        {
            "icon": "0570",
            "text": "**"
        },
        {
            "icon": "0580",
            "text": "**"
        },
        {
            "icon": "0590",
            "text": "**"
        },
        {
            "icon": "0600",
            "text": "**"
        },
        {
            "icon": "0610",
            "text": "**"
        },
        {
            "icon": "0620",
            "text": "**"
        },
        {
            "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": "1010",
            "text": "**"
        },
        {
            "icon": "1020",
            "text": "**"
        },
        {
            "icon": "1030",
            "text": "**"
        },
        {
            "icon": "1040",
            "text": "**"
        },
        {
            "icon": "1050",
            "text": "**"
        },
        {
            "icon": "1060",
            "text": "**"
        },
        {
            "icon": "1070",
            "text": "**"
        },
        {
            "icon": "1080",
            "text": "**"
        },
        {
            "icon": "2010",
            "text": "**"
        },
        {
            "icon": "2020",
            "text": "**"
        },
        {
            "icon": "2030",
            "text": "**"
        },
        {
            "icon": "2040",
            "text": "**"
        },
        {
            "icon": "2050",
            "text": "**"
        },
        {
            "icon": "2060",
            "text": "**"
        },
        {
            "icon": "2070",
            "text": "**"
        },
        {
            "icon": "2080",
            "text": "**"
        },
        {
            "icon": "2090",
            "text": "**"
        },
        {
            "icon": "2100",
            "text": "**"
        },
        {
            "icon": "2101",
            "text": "**"
        },
        {
            "icon": "2110",
            "text": "**"
        },
        {
            "icon": "2120",
            "text": "**"
        },
        {
            "icon": "2130",
            "text": "**"
        },
        {
            "icon": "2140",
            "text": "**"
        },
        {
            "icon": "2141",
            "text": "**"
        },
        {
            "icon": "2145",
            "text": "**"
        },
        {
            "icon": "2150",
            "text": "**"
        },
        {
            "icon": "2151",
            "text": "**"
        },
        {
            "icon": "2152",
            "text": "**"
        },
        {
            "icon": "2160",
            "text": "**"
        },
        {
            "icon": "2161",
            "text": "**"
        },
        {
            "icon": "2165",
            "text": "**"
        },
        {
            "icon": "2170",
            "text": "**"
        },
        {
            "icon": "2171",
            "text": "**"
        },
        {
            "icon": "3010",
            "text": "**"
        },
        {
            "icon": "3011",
            "text": "**"
        },
        {
            "icon": "3020",
            "text": "**"
        },
        {
            "icon": "3030",
            "text": "**"
        },
        {
            "icon": "3040",
            "text": "**"
        },
        {
            "icon": "3050",
            "text": "**"
        },
        {
            "icon": "3060",
            "text": "**"
        },
        {
            "icon": "3061",
            "text": "**"
        },
        {
            "icon": "4010",
            "text": "**"
        },
        {
            "icon": "4020",
            "text": "**"
        },
        {
            "icon": "4021",
            "text": "**"
        },
        {
            "icon": "4022",
            "text": "**"
        },
        {
            "icon": "4023",
            "text": "**"
        },
        {
            "icon": "4024",
            "text": "**"
        },
        {
            "icon": "4025",
            "text": "**"
        },
        {
            "icon": "4030",
            "text": "**"
        },
        {
            "icon": "4031",
            "text": "**"
        },
        {
            "icon": "4040",
            "text": "**"
        },
        {
            "icon": "4041",
            "text": "**"
        },
        {
            "icon": "4042",
            "text": "**"
        },
        {
            "icon": "4100",
            "text": "**"
        },
        {
            "icon": "4110",
            "text": "**"
        },
        {
            "icon": "4111",
            "text": "**"
        },
        {
            "icon": "4112",
            "text": "**"
        },
        {
            "icon": "4113",
            "text": "**"
        },
        {
            "icon": "4114",
            "text": "**"
        },
        {
            "icon": "4115",
            "text": "**"
        },
        {
            "icon": "4120",
            "text": "**"
        },
        {
            "icon": "4121",
            "text": "**"
        },
        {
            "icon": "4130",
            "text": "**"
        },
        {
            "icon": "4140",
            "text": "**"
        },
        {
            "icon": "4200",
            "text": "**"
        },
        {
            "icon": "4201",
            "text": "**"
        },
        {
            "icon": "4210",
            "text": "**"
        },
        {
            "icon": "4211",
            "text": "**"
        },
        {
            "icon": "4212",
            "text": "**"
        },
        {
            "icon": "4213",
            "text": "**"
        },
        {
            "icon": "4220",
            "text": "**"
        },
        {
            "icon": "4300",
            "text": "**"
        },
        {
            "icon": "4301",
            "text": "**"
        },
        {
            "icon": "4302",
            "text": "**"
        },
        {
            "icon": "4303",
            "text": "**"
        },
        {
            "icon": "4304",
            "text": "**"
        },
        {
            "icon": "tongue",
            "text": "吐舌"
        },
        {
            "icon": "4310",
            "text": "#"
        },
        {
            "icon": "5000",
            "text": "#"
        },
        {
            "icon": "5001",
            "text": "#"
        },
        {
            "icon": "5002",
            "text": "#"
        },
        {
            "icon": "5003",
            "text": "#"
        },
        {
            "icon": "5010",
            "text": "#"
        },
        {
            "icon": "5020",
            "text": "#"
        },
        {
            "icon": "5030",
            "text": "#"
        },
        {
            "icon": "5040",
            "text": "#"
        },
        {
            "icon": "5050",
            "text": "#"
        },
        {
            "icon": "5060",
            "text": "#"
        },
        {
            "icon": "5069",
            "text": "#"
        },
        {
            "icon": "5070",
            "text": "#"
        },
        {
            "icon": "5080",
            "text": "#"
        },
        {
            "icon": "5090",
            "text": "#"
        },
        {
            "icon": "5091",
            "text": "#"
        },
        {
            "icon": "5100",
            "text": "#"
        },
        {
            "icon": "5110",
            "text": "#"
        },
        {
            "icon": "5120",
            "text": "#"
        },
        {
            "icon": "5130",
            "text": "#"
        },
        {
            "icon": "5131",
            "text": "#"
        },
        {
            "icon": "5140",
            "text": "#"
        },
        {
            "icon": "5141",
            "text": "#"
        },
        {
            "icon": "5150",
            "text": "#"
        },
        {
            "icon": "5151",
            "text": "#"
        },
        {
            "icon": "5160",
            "text": "#"
        },
        {
            "icon": "5161",
            "text": "#"
        },
        {
            "icon": "5170",
            "text": "#"
        },
        {
            "icon": "5180",
            "text": "#"
        },
        {
            "icon": "5190",
            "text": "#"
        },
        {
            "icon": "5200",
            "text": "#"
        },
        {
            "icon": "5210",
            "text": "#"
        },
        {
            "icon": "5220",
            "text": "#"
        },
        {
            "icon": "5230",
            "text": "#"
        },
        {
            "icon": "6000",
            "text": "#"
        },
        {
            "icon": "6001",
            "text": "#"
        },
        {
            "icon": "6010",
            "text": "#"
        },
        {
            "icon": "6020",
            "text": "#"
        },
        {
            "icon": "6030",
            "text": "#"
        },
        {
            "icon": "6040",
            "text": "#"
        },
        {
            "icon": "6050",
            "text": "#"
        },
        {
            "icon": "6051",
            "text": "#"
        },
        {
            "icon": "6060",
            "text": "#"
        },
        {
            "icon": "6061",
            "text": "#"
        },
        {
            "icon": "6070",
            "text": "#"
        },
        {
            "icon": "6080",
            "text": "#"
        },
        {
            "icon": "6090",
            "text": "#"
        },
        {
            "icon": "6091",
            "text": "#"
        },
        {
            "icon": "6092",
            "text": "#"
        },
        {
            "icon": "6100",
            "text": "#"
        },
        {
            "icon": "6110",
            "text": "#"
        },
        {
            "icon": "6120",
            "text": "#"
        },
        {
            "icon": "6121",
            "text": "#"
        },
        {
            "icon": "6130",
            "text": "#"
        },
        {
            "icon": "6131",
            "text": "#"
        },
        {
            "icon": "6132",
            "text": "#"
        },
        {
            "icon": "6140",
            "text": "#"
        },
        {
            "icon": "6150",
            "text": "#"
        },
        {
            "icon": "6151",
            "text": "#"
        },
        {
            "icon": "6160",
            "text": "#"
        },
        {
            "icon": "6500",
            "text": "#"
        },
        {
            "icon": "6510",
            "text": "#"
        },
        {
            "icon": "6520",
            "text": "#"
        },
        {
            "icon": "6530",
            "text": "#"
        },
        {
            "icon": "7000",
            "text": "#"
        },
        {
            "icon": "7010",
            "text": "#"
        },
        {
            "icon": "7011",
            "text": "#"
        },
        {
            "icon": "7012",
            "text": "#"
        },
        {
            "icon": "7020",
            "text": "#"
        },
        {
            "icon": "7021",
            "text": "#"
        },
        {
            "icon": "7030",
            "text": "#"
        },
        {
            "icon": "7040",
            "text": "#"
        },
        {
            "icon": "7045",
            "text": "#"
        },
        {
            "icon": "7046",
            "text": "#"
        },
        {
            "icon": "7050",
            "text": "#"
        },
        {
            "icon": "7051",
            "text": "#"
        },
        {
            "icon": "7052",
            "text": "#"
        },
        {
            "icon": "7053",
            "text": "#"
        },
        {
            "icon": "7054",
            "text": "#"
        },
        {
            "icon": "7060",
            "text": "#"
        },
        {
            "icon": "7061",
            "text": "#"
        },
        {
            "icon": "7062",
            "text": "#"
        },
        {
            "icon": "7070",
            "text": "#"
        },
        {
            "icon": "7071",
            "text": "#"
        },
        {
            "icon": "7080",
            "text": "#"
        },
        {
            "icon": "7081",
            "text": "#"
        },
        {
            "icon": "7090",
            "text": "#"
        },
        {
            "icon": "7100",
            "text": "#"
        },
        {
            "icon": "7110",
            "text": "#"
        },
        {
            "icon": "7111",
            "text": "#"
        },
        {
            "icon": "7112",
            "text": "#"
        },
        {
            "icon": "7113",
            "text": "#"
        },
        {
            "icon": "7200",
            "text": "#"
        },
        {
            "icon": "7201",
            "text": "#"
        },
        {
            "icon": "7210",
            "text": "#"
        },
        {
            "icon": "7220",
            "text": "#"
        },
        {
            "icon": "7230",
            "text": "#"
        },
        {
            "icon": "8000",
            "text": "#"
        },
        {
            "icon": "8001",
            "text": "#"
        },
        {
            "icon": "8010",
            "text": "#"
        },
        {
            "icon": "8020",
            "text": "#"
        },
        {
            "icon": "8021",
            "text": "#"
        },
        {
            "icon": "8030",
            "text": "#"
        },
        {
            "icon": "8040",
            "text": "#"
        },
        {
            "icon": "8041",
            "text": "#"
        },
        {
            "icon": "8042",
            "text": "#"
        },
        {
            "icon": "8050",
            "text": "#"
        },
        {
            "icon": "8051",
            "text": "#"
        },
        {
            "icon": "8060",
            "text": "#"
        },
        {
            "icon": "8062",
            "text": "#"
        },
        {
            "icon": "8070",
            "text": "#"
        },
        {
            "icon": "8071",
            "text": "#"
        },
        {
            "icon": "8072",
            "text": "#"
        },
        {
            "icon": "8080",
            "text": "#"
        },
        {
            "icon": "8081",
            "text": "#"
        },
        {
            "icon": "8082",
            "text": "#"
        },
        {
            "icon": "8083",
            "text": "#"
        },
        {
            "icon": "8084",
            "text": "#"
        },
        {
            "icon": "8085",
            "text": "#"
        },
        {
            "icon": "8090",
            "text": "#"
        },
        {
            "icon": "8091",
            "text": "#"
        },
        {
            "icon": "8092",
            "text": "#"
        },
        {
            "icon": "8100",
            "text": "#"
        },
        {
            "icon": "8101",
            "text": "#"
        },
        {
            "icon": "8102",
            "text": "#"
        },
        {
            "icon": "8103",
            "text": "#"
        },
        {
            "icon": "8110",
            "text": "#"
        },
        {
            "icon": "x010",
            "text": "#"
        },
        {
            "icon": "x011",
            "text": "#"
        },
        {
            "icon": "x012",
            "text": "#"
        },
        {
            "icon": "x013",
            "text": "#"
        },
        {
            "icon": "x014",
            "text": "#"
        },
        {
            "icon": "x021",
            "text": "#"
        },
        {
            "icon": "x022",
            "text": "#"
        },
        {
            "icon": "x031",
            "text": "#"
        },
        {
            "icon": "x032",
            "text": "#"
        },
        {
            "icon": "x041",
            "text": "#"
        },
        {
            "icon": "x042",
            "text": "#"
        },
        {
            "icon": "x050",
            "text": "#"
        },
        {
            "icon": "x060",
            "text": "#"
        },
        {
            "icon": "x061",
            "text": "#"
        },
        {
            "icon": "x062",
            "text": "#"
        },
        {
            "icon": "x063",
            "text": "#"
        },
        {
            "icon": "x069",
            "text": "#"
        },
        {
            "icon": "x070",
            "text": "#"
        },
        {
            "icon": "x071",
            "text": "#"
        },
        {
            "icon": "x080",
            "text": "#"
        },
        {
            "icon": "x081",
            "text": "#"
        },
        {
            "icon": "x082",
            "text": "#"
        },
        {
            "icon": "x083",
            "text": "#"
        },
        {
            "icon": "x090",
            "text": "#"
        },
        {
            "icon": "x091",
            "text": "#"
        },
        {
            "icon": "x092",
            "text": "#"
        },
        {
            "icon": "x093",
            "text": "#"
        },
        {
            "icon": "x094",
            "text": "#"
        },
        {
            "icon": "x099",
            "text": "#"
        }
    ]
}

"贴吧":{
    "type": "image",
        "name": "tieba",
        "container":[
        {
            "icon": "Y.tb1",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb2",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb3",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb4",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb5",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb6",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb7",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb8",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb9",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb10",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb11",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb12",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb13",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb14",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb15",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb17",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb18",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb19",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb20",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb23",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb24",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb25",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb26",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb27",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb28",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb29",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb30",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb31",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb32",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb33",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb34",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb35",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb36",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb37",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb38",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb39",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb40",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb41",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb42",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb43",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb44",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb45",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb46",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb47",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb48",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb49",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb50",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb51",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb52",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb53",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb54",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb55",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb56",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb57",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb58",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb59",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb60",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb61",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb62",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb63",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb64",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb65",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb66",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb67",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb68",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb69",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb70",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb71",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb72",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb73",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb74",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb75",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb76",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb77",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb78",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb79",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb80",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb81",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb82",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb83",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb84",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb85",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb86",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb87",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb88",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb89",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb90",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb91",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb92",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb93",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb94",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb95",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb96",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb97",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb98",
            "text": "贴吧"
        },
        {
            "icon": "Y.tb99",
            "text": "贴吧"
        }
    ]
}

"微博":{
    "type": "image",
        "name": "weibo",
        "container":[
        {
            "icon": "Y.wb1",
            "text": "微博"
        },
        {
            "icon": "Y.wb2",
            "text": "微博"
        },
        {
            "icon": "Y.wb3",
            "text": "微博"
        },
        {
            "icon": "Y.wb4",
            "text": "微博"
        },
        {
            "icon": "Y.wb5",
            "text": "微博"
        },
        {
            "icon": "Y.wb6",
            "text": "微博"
        },
        {
            "icon": "Y.wb7",
            "text": "微博"
        },
        {
            "icon": "Y.wb8",
            "text": "微博"
        },
        {
            "icon": "Y.wb9",
            "text": "微博"
        },
        {
            "icon": "Y.wb10",
            "text": "微博"
        },
        {
            "icon": "Y.wb11",
            "text": "微博"
        },
        {
            "icon": "Y.wb12",
            "text": "微博"
        },
        {
            "icon": "Y.wb13",
            "text": "微博"
        },
        {
            "icon": "Y.wb14",
            "text": "微博"
        },
        {
            "icon": "Y.wb15",
            "text": "微博"
        },
        {
            "icon": "Y.wb16",
            "text": "微博"
        },
        {
            "icon": "Y.wb17",
            "text": "微博"
        },
        {
            "icon": "Y.wb18",
            "text": "微博"
        },
        {
            "icon": "Y.wb19",
            "text": "微博"
        },
        {
            "icon": "Y.wb20",
            "text": "微博"
        },
        {
            "icon": "Y.wb21",
            "text": "微博"
        },
        {
            "icon": "Y.wb22",
            "text": "微博"
        },
        {
            "icon": "Y.wb23",
            "text": "微博"
        },
        {
            "icon": "Y.wb24",
            "text": "微博"
        },
        {
            "icon": "Y.wb25",
            "text": "微博"
        },
        {
            "icon": "Y.wb26",
            "text": "微博"
        },
        {
            "icon": "Y.wb27",
            "text": "微博"
        },
        {
            "icon": "Y.wb28",
            "text": "微博"
        },
        {
            "icon": "Y.wb29",
            "text": "微博"
        },
        {
            "icon": "Y.wb30",
            "text": "微博"
        },
        {
            "icon": "Y.wb31",
            "text": "微博"
        },
        {
            "icon": "Y.wb32",
            "text": "微博"
        },
        {
            "icon": "Y.wb33",
            "text": "微博"
        },
        {
            "icon": "Y.wb34",
            "text": "微博"
        },
        {
            "icon": "Y.wb35",
            "text": "微博"
        },
        {
            "icon": "Y.wb36",
            "text": "微博"
        },
        {
            "icon": "Y.wb37",
            "text": "微博"
        },
        {
            "icon": "Y.wb38",
            "text": "微博"
        },
        {
            "icon": "Y.wb39",
            "text": "微博"
        },
        {
            "icon": "Y.wb40",
            "text": "微博"
        },
        {
            "icon": "Y.wb41",
            "text": "微博"
        },
        {
            "icon": "Y.wb42",
            "text": "微博"
        },
        {
            "icon": "Y.wb43",
            "text": "微博"
        },
        {
            "icon": "Y.wb44",
            "text": "微博"
        },
        {
            "icon": "Y.wb45",
            "text": "微博"
        },
        {
            "icon": "Y.wb46",
            "text": "微博"
        },
        {
            "icon": "Y.wb47",
            "text": "微博"
        },
        {
            "icon": "Y.wb48",
            "text": "微博"
        },
        {
            "icon": "Y.wb49",
            "text": "微博"
        },
        {
            "icon": "Y.wb50",
            "text": "微博"
        },
        {
            "icon": "Y.wb51",
            "text": "微博"
        },
        {
            "icon": "Y.wb52",
            "text": "微博"
        },
        {
            "icon": "Y.wb53",
            "text": "微博"
        },
        {
            "icon": "Y.wb54",
            "text": "微博"
        },
        {
            "icon": "Y.wb55",
            "text": "微博"
        },
        {
            "icon": "Y.wb56",
            "text": "微博"
        },
        {
            "icon": "Y.wb57",
            "text": "微博"
        },
        {
            "icon": "Y.wb58",
            "text": "微博"
        },
        {
            "icon": "Y.wb59",
            "text": "微博"
        },
        {
            "icon": "Y.wb60",
            "text": "微博"
        },
        {
            "icon": "Y.wb61",
            "text": "微博"
        },
        {
            "icon": "Y.wb62",
            "text": "微博"
        },
        {
            "icon": "Y.wb63",
            "text": "微博"
        },
        {
            "icon": "Y.wb64",
            "text": "微博"
        },
        {
            "icon": "Y.wb65",
            "text": "微博"
        },
        {
            "icon": "Y.wb66",
            "text": "微博"
        },
        {
            "icon": "Y.wb67",
            "text": "微博"
        },
        {
            "icon": "Y.wb68",
            "text": "微博"
        },
        {
            "icon": "Y.wb69",
            "text": "微博"
        },
        {
            "icon": "Y.wb70",
            "text": "微博"
        },
        {
            "icon": "Y.wb71",
            "text": "微博"
        },
        {
            "icon": "Y.wb72",
            "text": "微博"
        },
        {
            "icon": "Y.wb73",
            "text": "微博"
        },
        {
            "icon": "Y.wb74",
            "text": "微博"
        },
        {
            "icon": "Y.wb75",
            "text": "微博"
        },
        {
            "icon": "Y.wb76",
            "text": "微博"
        },
        {
            "icon": "Y.wb77",
            "text": "微博"
        },
        {
            "icon": "Y.wb78",
            "text": "微博"
        },
        {
            "icon": "Y.wb79",
            "text": "微博"
        },
        {
            "icon": "Y.wb80",
            "text": "微博"
        },
        {
            "icon": "Y.wb81",
            "text": "微博"
        },
        {
            "icon": "Y.wb82",
            "text": "微博"
        },
        {
            "icon": "Y.wb83",
            "text": "微博"
        },
        {
            "icon": "Y.wb84",
            "text": "微博"
        },
        {
            "icon": "Y.wb85",
            "text": "微博"
        },
        {
            "icon": "Y.wb86",
            "text": "微博"
        },
        {
            "icon": "Y.wb87",
            "text": "微博"
        },
        {
            "icon": "Y.wb88",
            "text": "微博"
        },
        {
            "icon": "Y.wb89",
            "text": "微博"
        },
        {
            "icon": "Y.wb90",
            "text": "微博"
        },
        {
            "icon": "Y.wb91",
            "text": "微博"
        },
        {
            "icon": "Y.wb92",
            "text": "微博"
        },
        {
            "icon": "Y.wb93",
            "text": "微博"
        },
        {
            "icon": "Y.wb94",
            "text": "微博"
        },
        {
            "icon": "Y.wb95",
            "text": "微博"
        },
        {
            "icon": "Y.wb96",
            "text": "微博"
        },
        {
            "icon": "Y.wb97",
            "text": "微博"
        },
        {
            "icon": "Y.wb98",
            "text": "微博"
        },
        {
            "icon": "Y.wb99",
            "text": "微博"
        },
        {
            "icon": "Y.wb100",
            "text": "微博"
        },
        {
            "icon": "Y.wb101",
            "text": "微博"
        },
        {
            "icon": "Y.wb102",
            "text": "微博"
        },
        {
            "icon": "Y.wb103",
            "text": "微博"
        },
        {
            "icon": "Y.wb104",
            "text": "微博"
        },
        {
            "icon": "Y.wb105",
            "text": "微博"
        },
        {
            "icon": "Y.wb106",
            "text": "微博"
        },
        {
            "icon": "Y.wb107",
            "text": "微博"
        },
        {
            "icon": "Y.wb108",
            "text": "微博"
        },
        {
            "icon": "Y.wb109",
            "text": "微博"
        },
        {
            "icon": "Y.wb110",
            "text": "微博"
        },
        {
            "icon": "Y.wb111",
            "text": "微博"
        },
        {
            "icon": "Y.wb112",
            "text": "微博"
        }
    ]
}

"QQ":{
    "type": "image",
        "name": "QQ",
        "container":[
        {
            "icon": "Y.qq1",
            "text": "QQ"
        },
        {
            "icon": "Y.qq2",
            "text": "QQ"
        },
        {
            "icon": "Y.qq3",
            "text": "QQ"
        },
        {
            "icon": "Y.qq4",
            "text": "QQ"
        },
        {
            "icon": "Y.qq5",
            "text": "QQ"
        },
        {
            "icon": "Y.qq6",
            "text": "QQ"
        },
        {
            "icon": "Y.qq7",
            "text": "QQ"
        },
        {
            "icon": "Y.qq8",
            "text": "QQ"
        },
        {
            "icon": "Y.qq9",
            "text": "QQ"
        },
        {
            "icon": "Y.qq10",
            "text": "QQ"
        },
        {
            "icon": "Y.qq11",
            "text": "QQ"
        },
        {
            "icon": "Y.qq12",
            "text": "QQ"
        },
        {
            "icon": "Y.qq13",
            "text": "QQ"
        },
        {
            "icon": "Y.qq14",
            "text": "QQ"
        },
        {
            "icon": "Y.qq15",
            "text": "QQ"
        },
        {
            "icon": "Y.qq17",
            "text": "QQ"
        },
        {
            "icon": "Y.qq18",
            "text": "QQ"
        },
        {
            "icon": "Y.qq19",
            "text": "QQ"
        },
        {
            "icon": "Y.qq20",
            "text": "QQ"
        },
        {
            "icon": "Y.qq23",
            "text": "QQ"
        },
        {
            "icon": "Y.qq24",
            "text": "QQ"
        },
        {
            "icon": "Y.qq25",
            "text": "QQ"
        },
        {
            "icon": "Y.qq26",
            "text": "QQ"
        },
        {
            "icon": "Y.qq27",
            "text": "QQ"
        },
        {
            "icon": "Y.qq28",
            "text": "QQ"
        },
        {
            "icon": "Y.qq29",
            "text": "QQ"
        },
        {
            "icon": "Y.qq30",
            "text": "QQ"
        },
        {
            "icon": "Y.qq31",
            "text": "QQ"
        },
        {
            "icon": "Y.qq32",
            "text": "QQ"
        },
        {
            "icon": "Y.qq33",
            "text": "QQ"
        },
        {
            "icon": "Y.qq34",
            "text": "QQ"
        },
        {
            "icon": "Y.qq35",
            "text": "QQ"
        },
        {
            "icon": "Y.qq36",
            "text": "QQ"
        },
        {
            "icon": "Y.qq37",
            "text": "QQ"
        },
        {
            "icon": "Y.qq38",
            "text": "QQ"
        },
        {
            "icon": "Y.qq39",
            "text": "QQ"
        },
        {
            "icon": "Y.qq40",
            "text": "QQ"
        },
        {
            "icon": "Y.qq41",
            "text": "QQ"
        },
        {
            "icon": "Y.qq42",
            "text": "QQ"
        },
        {
            "icon": "Y.qq43",
            "text": "QQ"
        },
        {
            "icon": "Y.qq44",
            "text": "QQ"
        },
        {
            "icon": "Y.qq45",
            "text": "QQ"
        },
        {
            "icon": "Y.qq46",
            "text": "QQ"
        },
        {
            "icon": "Y.qq47",
            "text": "QQ"
        },
        {
            "icon": "Y.qq48",
            "text": "QQ"
        },
        {
            "icon": "Y.qq49",
            "text": "QQ"
        },
        {
            "icon": "Y.qq50",
            "text": "QQ"
        },
        {
            "icon": "Y.qq51",
            "text": "QQ"
        },
        {
            "icon": "Y.qq52",
            "text": "QQ"
        },
        {
            "icon": "Y.qq53",
            "text": "QQ"
        },
        {
            "icon": "Y.qq54",
            "text": "QQ"
        },
        {
            "icon": "Y.qq55",
            "text": "QQ"
        },
        {
            "icon": "Y.qq56",
            "text": "QQ"
        },
        {
            "icon": "Y.qq57",
            "text": "QQ"
        },
        {
            "icon": "Y.qq58",
            "text": "QQ"
        },
        {
            "icon": "Y.qq59",
            "text": "QQ"
        },
        {
            "icon": "Y.qq60",
            "text": "QQ"
        },
        {
            "icon": "Y.qq61",
            "text": "QQ"
        },
        {
            "icon": "Y.qq62",
            "text": "QQ"
        },
        {
            "icon": "Y.qq63",
            "text": "QQ"
        },
        {
            "icon": "Y.qq64",
            "text": "QQ"
        },
        {
            "icon": "Y.qq65",
            "text": "QQ"
        },
        {
            "icon": "Y.qq66",
            "text": "QQ"
        },
        {
            "icon": "Y.qq67",
            "text": "QQ"
        },
        {
            "icon": "Y.qq68",
            "text": "QQ"
        },
        {
            "icon": "Y.qq69",
            "text": "QQ"
        },
        {
            "icon": "Y.qq70",
            "text": "QQ"
        },
        {
            "icon": "Y.qq71",
            "text": "QQ"
        },
        {
            "icon": "Y.qq72",
            "text": "QQ"
        },
        {
            "icon": "Y.qq73",
            "text": "QQ"
        },
        {
            "icon": "Y.qq74",
            "text": "QQ"
        },
        {
            "icon": "Y.qq75",
            "text": "QQ"
        },
        {
            "icon": "Y.qq76",
            "text": "QQ"
        },
        {
            "icon": "Y.qq77",
            "text": "QQ"
        },
        {
            "icon": "Y.qq78",
            "text": "QQ"
        },
        {
            "icon": "Y.qq79",
            "text": "QQ"
        },
        {
            "icon": "Y.qq80",
            "text": "QQ"
        }
    ]
}

"emoji":{
    "type": "image",
        "name": "emoji",
        "container":[
        {
            "icon": "Y.emoji1",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji2",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji3",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji4",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji5",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji6",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji7",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji8",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji9",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji10",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji11",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji12",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji13",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji14",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji15",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji17",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji18",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji19",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji20",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji23",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji24",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji25",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji26",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji27",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji28",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji29",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji30",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji31",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji32",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji33",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji34",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji35",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji36",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji37",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji38",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji39",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji40",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji41",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji42",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji43",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji44",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji45",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji46",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji47",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji48",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji49",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji50",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji51",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji52",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji53",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji54",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji55",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji56",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji57",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji58",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji59",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji60",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji61",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji62",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji63",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji64",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji65",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji66",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji67",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji68",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji69",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji70",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji71",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji72",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji73",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji74",
            "text": "emoji"
        },
        {
            "icon": "Y.emoji75",
            "text": "emoji"
        }
    ]
}

"蛆音娘": {
    "name": "quyin",
        "type": "image",
        "container": [
        {
            "icon": "hematemesis",
            "text": "吐血"
        },
        {
            "icon": "1huaji",
            "text": "滑稽"
        },
        {
            "icon": "amazing",
            "text": "吃惊"
        },
        {
            "icon": "angry",
            "text": "生气"
        },
        {
            "icon": "cry",
            "text": "哭泣"
        },
        {
            "icon": "die",
            "text": "die"
        },
        {
            "icon": "doubt",
            "text": "疑问"
        },
        {
            "icon": "feizao",
            "text": "肥皂"
        },
        {
            "icon": "fue",
            "text": "扶额"
        },
        {
            "icon": "heng",
            "text": "哼"
        },
        {
            "icon": "laughing",
            "text": "大笑"
        },
        {
            "icon": "look",
            "text": "偷看"
        },
        {
            "icon": "maimeng",
            "text": "卖萌"
        },
        {
            "icon": "OK",
            "text": "OK!"
        },
        {
            "icon": "scare",
            "text": "吓死宝宝惹"
        },
        {
            "icon": "shakinghead",
            "text": "摇头"
        },
        {
            "icon": "sleep",
            "text": "睡觉"
        },
        {
            "icon": "speechless",
            "text": "无语"
        },
        {
            "icon": "watermaleon",
            "text": "吃瓜"
        },
        {
            "icon": "witty",
            "text": "机智"
        }
    ]
}

"哔哩哔哩":{
    "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": "抓狂"
        }
    ]
}

设置外观 → 开发者设置 → 自定义 CSS

注意emotion-后面即为表情名字,即OwO.json文件里的name,每个表情包都要写一个css添加进去才可以

/* 表情包大小调整——begin */
.emotion-QQ {width:35px;}
.emotion-aru {width:35px;}
.emotion-bilibili {width:35px;}
.emotion-weibo {width:35px;}
.emotion-quyin {width:35px;}
.emotion-tieba {width:35px;}
/* 表情包大小调整——over */

5.3 赞赏按钮跳动

赞赏按钮跳动

设置外观 → 开发者设置 → 自定义 CSS

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

5.4 文本框打字机特效

文本框打字机特效 √

设置外观 → 开发者设置 → 自定义 JavaScript

/* 文本框打字机特效——begin */
(function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);
/* 文本框打字机特效——over */

5.5 评论一键打卡赞踩

评论一键打卡赞踩 √

设置外观 → 开发者设置 → 自定义 JavaScript

/* 评论一键打卡赞踩——begin */
function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 文章写得不错,给你点个赞,继续加油哈!")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章!")
    }
};
/* 评论一键打卡赞踩——over */

设置外观 → 开发者设置 → 自定义 CSS

/* 评论一键打卡赞踩——begin */
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}
/* 评论一键打卡赞踩——over */

首先找到 /usr/themes/handsome/component/comments.php 文件

1652368791219

直接将画框中代码块替换为如下代码:

<!-- 评论一键打卡赞踩——begin -->
<div class="comment-form-comment form-group">
    <label for="comment"><?php _me("评论") ?>
        <span class="required text-danger">*</span></label>
    <span class="required text-danger">(请使用真实邮箱地址,方便及时接收评论回复!)</span>
    <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="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" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
    <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
    <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></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>
<!-- 评论一键打卡赞踩——over -->

6、版权

6.1 禁止 F12

禁止 F12 √

设置外观 → 开发者设置 → 自定义 JavaScript

如果主题中启用了pjax,还需要将下述代码添加到设置外观 → PJAX → PJAX 回调函数。

/* 禁止F12——begin */
$(document).ready(function() {
    document.oncontextmenu = function() {
        return false;
    }
    document.onkeydown = function() {
        //f12
        if (window.event && window.event.keyCode == 123) {
            event.keyCode = 0;
            event.returnValue = false;
            return false;
        }
        //ctrl+u
        if (event.ctrlKey && window.event.keyCode == 85) {
            return false;
        }
        //ctrl+shift+i
        if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
            return false;
        }
        // Ctrl+S
        else if ((event.ctrlKey) && (event.keyCode == 83)) {
            return false;
        }
    };
});
/* 禁止F12——begin */

6.2 自定义右键

自定义右键 √

设置外观 → 开发者设置 → 自定义输出 body 头部的 HTML 代码

<!-- 自定义右键——begin -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 自定义右键——over -->

设置外观 → 开发者设置 → 自定义输出 body 尾部的 HTML 代码

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

6.3 底部版权美化

禁底部版权美化 √

左侧底部放在设置外观 → 开发者设置 → 博客底部左侧信息

<!-- 左侧底部版权美化——begin -->
<div class="github-badge">
    <span class="badge-subject">Copyright</span>
    <a href="https://www.pendulumye.com/" target="_blank"><span class="badge-value bg-blue">PendulumYe</span></a>
</div> |
<div class="github-badge">
    <span class="badge-subject">津ICP备</span>
    <a href="http://www.beian.gov.cn/" target="_blank"><span class="badge-value bg-green">2022001988号-1</span></a>
</div>
<!-- 左侧底部版权美化——over -->

右侧底部放在设置外观 → 开发者设置 → 博客底部右侧信息

<!-- 右侧底部版权美化——begin -->
<div class="github-badge">
    <span class="badge-subject">站点地图</span>
    <a href="https://www.pendulumye.com/index.php/sitemap.xml" target="_blank">
        <span class="badge-value bg-blue">sitemap</span>
    </a>
</div> |
<div class="github-badge">
    <span class="badge-subject">Theme by</span>
    <a href="https://auth.ihewro.com/user/docs#/preference/" target="_blank">
    <span class="badge-value bg-orange">Handsome</span></a>
</div>
<!-- 右侧底部版权美化——over -->

设置外观 → 开发者设置 → 自定义 CSS

/* 底部版权美化——begin */
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}
.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: #007ec6
}
.github-badge .bg-orange {
  background-color: #ffa500
}
.github-badge .bg-green {
  background-color: #3bca6e
}
/* 底部版权美化——over */

把下面代码放在主题目录 usr/themes/handsome/component/footer.php 内,覆盖源代码

1651811991753

<!-- 右侧底部版权美化——begin-->
<footer id="footer" class="app-footer" role="footer">
    <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>
</footer>
<!-- 右侧底部版权美化——over -->

6.4 文章末尾版权声明

文章末尾版权声明 √

进入 usr/themes/handsome/post.php 文件内

1651847298651

在 83 行代码下方加入以下代码:

<!-- 文章末尾版权声明——begin -->
<br><div class="entry-content l-h-2x">
    <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
    <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
</div><br>
<div class="entry-content l-h-2x">
    <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
        <span class="tt-license-icon"><i data-feather="award"></i></span>
        <span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"><?php $this->author(); ?></a><br></span>
        <span class="tt-license-icon"><i data-feather="link"></i></span>
        <span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
        <span class="tt-license-icon"><i data-feather="shield"></i></span>
        <span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
        <span class="tt-license-icon"><i data-feather="alert-circle"></i></span>
        <span>版权说明:若无注明,本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span>
    </div>
</div>
<!-- 文章末尾版权声明——over -->

设置外观 → 开发者设置 → 自定义 CSS

<!-- 文章末尾版权声明——begin -->
.tt-license {
    font-size: 12px;
    font-weight: 600;
    padding: 1rem;
    background: repeating-linear-gradient(135deg, #f6f6f6, #f6f6f6 12px, #fff 0, #fff 24px);
    background-color: #f3f5f7;
    border-left: 3px solid #dde6e9;
    margin-bottom: 20px;
}
.tt-license-icon {
    align-items: center;
    position: relative;
    float: left;
    margin: -5px -10px -10px 0;
    margin-right: 10px;
    overflow: hidden;
    text-align: center;
    display: flex;
    height: 40px;
    color: #ff5722;
}
.tt-license a {
    color: #337ab7;
    text-decoration: underline;
    margin: 0 5px;
}
/*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {
    background: repeating-linear-gradient(135deg, #191919, #191919 12px, #222 0, #222 24px);
    border-left: 3px solid #494949;
}
.tt-license p {
    line-height: 1.5em;
    margin: 5px 0 !important;
}
<!-- 文章末尾版权声明——over -->

6.5 复制版权居中提示

复制版权居中提示 √

设置外观 → 开发者设置 → 自定义输出 body 尾部的 HTML代码

<!-- 复制版权居中提示——begin -->
<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
<!-- 复制版权居中提示——over -->

设置外观 → 开发者设置 → 自定义 JavaScript

/* 复制版权居中提示——begin */
document.body.oncopy=function(){layer.msg('复制成功,若要转载请务必保留原文链接!');};
/* 复制版权居中提示——over */

6.6 复制版权右侧提示

复制版权右侧提示

设置外观 → 开发者设置 → 自定义 JavaScript

/* 复制成功提示代码——begin */
kaygb_copy();
function kaygb_copy() {
    $(document).ready(function () {
        $("body").bind('copy', function (e) {
            hellolayer()
        })
    });
    var sitesurl = window.location.href;
    function hellolayer() {
        $.message({
            message: "尊重原创,转载请注明出处!<br> 本文作者:PendulumYe.<br>原文链接:" + sitesurl,
            title: "复制成功",
            type: "warning",
            autoHide: !1,
            time: "3000"
        })
    }
}
/* 复制成功提示代码结束——over */

7、加载与统计

7.1 网站加载效果

网站加载效果 √

找到 /usr/themes/handsome/component/header.php 将代码添加至此处:

1651899553595

<!-- 网站加载效果——begin -->
<style>
    #PageLoading{background-color:#fff;height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px;}
    #PageLoading-center{width:100%;height:100%;position:relative;}
    #PageLoading-center-absolute{
        position:absolute;left:50%;top:50%;
        height:200px;width:200px;
        margin-top:-100px;
        margin-left:-100px;
    }
    .object2{
        -moz-border-radius:50% 50% 50% 50%;
        -webkit-border-radius:50% 50% 50% 50%;
        border-radius:50% 50% 50% 50%;
        position:absolute;
        border-left:5px solid #FFB6C1;
        border-right:5px solid #b6def7;
        border-top:5px solid transparent;
        border-bottom:5px solid transparent;
        -webkit-animation:animate 2s infinite;
        animation:animate 2s infinite;

    }
    #object_one{left:75px;top:75px;width:50px;height:50px;}
    #object_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}
    #object_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}
    #object_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}
    @-webkit-keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
        100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
    @keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
        100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
</style>

<body id="body" class="fix-padding" style="overflow:hidden">
    <div id="PageLoading" style="z-index:99999999;">
        <div id="PageLoading-center">
            <div id="PageLoading-center-absolute">
                <div class="object2" id="object_four"></div>
                <div class="object2" id="object_three"></div>
                <div class="object2" id="object_two"></div>
                <div class="object2" id="object_one"></div>
            </div>
        </div>
    </div>
</body>
<!-- 网站加载效果——over -->

7.2 动态网站标题

动态网站标题 √

设置外观 → 开发者设置 → 自定义 JavaScript

/* 动态网站标题——begin */
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         //$('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/warning.webp");
         document.title = '网页崩溃了!!!';
         clearTimeout(titleTime);
     }
     else {
         //$('[rel="icon"]').attr('href', "https://blog-images-1309598269.cos.ap-beijing.myqcloud.com/attire/favicon.ico");
         document.title = '咦,又好啦(✿◡‿◡)' ;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
/* 动态网站标题——over */

7.3 右侧边栏添加时间统计

右侧边栏添加时间统计

首先在主题 usr/themes/handsome/component/sidebar.php

将以下代码加到 usr/themes/handsome/component/sidebar.php

<!-- 右侧边栏添加时间统计——begin -->
<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>
<!-- 右侧边栏添加时间统计——over -->

将以下代码放入外观设置 → 开发者设置 → 自定义 css

/* 右侧边栏添加时间统计——begin */
.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)
}
/* 右侧边栏添加时间统计——over */

添加完成后,在到 usr/themes/handsome/assets/js 里面创建名为 timeinfo.js 后把下面代码复制进去保存

添加完成,将以下代码放入外观设置 → 开发者设置 → 自定义输出 body 尾部

/* 右侧边栏添加时间统计——begin */
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();
/* 右侧边栏添加时间统计——over */

再将以下代码放入设置外观 → 开发者设置 → 自定义 JavaScript

/* 右侧边栏添加时间统计——begin */
$(function(){
     $("#PageLoading").fadeOut(400);
    $("#body").css('overflow','');
});
/* 右侧边栏添加时间统计——over */

7.4 小版图片模式列表斜切

小版图片模式列表斜切 √

打开 usr/themes/handsome/libs/Content.php 将以下代码替换:

1651904571546

<!-- 小版图片模式列表斜切——begin -->
<div class="panel-small single-post box-shadow-wrap-normal tt-small-blur">
    <div class="index-post-img-small post-feature index-img-small tt-left-box">
        <a href="{$parameterArray['linkUrl']}">
            <div class="item-thumb-small lazy tt-left-img" {$backgroundImageHtml}></div>
        </a>
    </div>
    <div class="tt-blur-img" {$backgroundImageHtml}></div>
<!-- 小版图片模式列表斜切——over-->

设置外观 → 开发者设置 → 自定义 css

/* 小版图片模式列表斜切——begin */
.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#333;color:#fff;}
.tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);}
.tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);}
.tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;}
.tt-small-blur .text-title{color:inherit;}
.tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;}
.tt-small-blur .text-muted{color:inherit;}
.tt-small-blur .post-meta {padding: 30px 30px 15px 30px;}
@media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}}
@media (max-width:500px){.tt-small-blur .summary{display:none;}}
@media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}}
@media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}
/* 小版图片模式列表斜切——over */

7.5 网站初始化加载完成提示代码

网站初始化加载完成提示代码 √

设置外观 → 开发者设置 → 自定义 JavaScript

/* 网站初始化加载完成提示代码——begin */ 
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问! 您来自:<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: kaygb_referrer() + "怀才就像怀孕,时间久了才能看出来<br>知识就像内裤,看不见但却重要",
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"/*弹框显示的时长(ms)*/
})
/* 网站初始化加载完成提示代码——over */

7.6 右侧边栏添加访客总数、响应耗时、全站字数

右侧边栏添加访客总数、响应耗时、全站字数 √

进入 usr/themes/handsome/libs/Content.php 文件

1651843307907

在该位置里加入以下统计代码:

/* 总访问量——begin */
function theAllViews() {
    $db = Typecho_Db::get();
    $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
    echo number_format($row[0]['SUM(VIEWS)']);
}
/* 总访问量——over */
/* 加载时间——begin */
function timer_start() {
    global $timestart;
    $mtime = explode( ' ', microtime()  );
    $timestart = $mtime[1] + $mtime[0];
    return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3  ) {
    global $timestart, $timeend;
    $mtime = explode( ' ', microtime()  );
    $timeend = $mtime[1] + $mtime[0];
    $timetotal = number_format( $timeend - $timestart, $precision  );
    $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
    if ( $display  ) {
        echo $r;
    }
    return $r;
}
/* 加载时间——over */
/* 统计字数——begin*/
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
} 
/* 统计字数——over*/

usr/themes/handsome/component/sidebar.php 添加显示代码,

1651843481729

在 105 行代码下方插入以下代码:

<!-- 访客总数代码——begin -->
<li class="list-group-item text-second"> 
    <span class="blog-info-icons"> <i data-feather="users"></i></span>
    <span class="badge pull-right"><?php echo theAllViews();?></span>
    <?php _me("访客总数") ?>
</li>
<!-- 访客总数代码——over -->
<!-- 响应耗时代码——begin -->
<li class="list-group-item text-second"> 
    <span class="blog-info-icons"><i data-feather="refresh-ccw"></i></span>
    <span class="badge pull-right"><?php echo timer_stop();?></span>
    <?php _me("响应耗时") ?>
</li>
<!-- 响应耗时代码——over -->  
<!-- 全站字数代码——begin -->
<li class="list-group-item text-second">
    <span class="blog-info-icons"><i data-feather="edit-3"></i></span>
    <span class="badge pull-right"><?php echo allOfCharacters(); ?></span>
    <?php _me("全站字数") ?>
</li>
<!-- 全站字数代码——over -->

7.7 统计信息彩色图标和文字

统计信息彩色图标和文字 √

usr/themes/handsome/component/sidebar.php 文件中

1653124628142

将以下代码替换如图所示标签中的所有内容:

<ul class="list-group box-shadow-wrap-normal">
    <?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
    <li class="list-group-item text-second">
        <span class="blog-info-icons" style="color:#DA99FF;"><i data-feather="award"></i></span>
        <span class="badge pull-right" style="background-color:#ECA9A7;"><?php $stat->publishedPostsNum() ?></span>
        <?php _me("文章数目") ?>
    </li>
    <?php if (COMMENT_SYSTEM == 0): ?>
    <li class="list-group-item text-second">
        <span class="blog-info-icons" style="color:#D9B999;"><i data-feather="message-circle"></i></span>
        <span class="badge pull-right" style="background-color:#428BCA;"><?php $stat->publishedCommentsNum() ?></span>
        <?php _me("评论数目") ?>
    </li>
    <?php endif; ?>
    <li class="list-group-item text-second">
        <span class="blog-info-icons" style="color:#FF69B4;"> <i data-feather="calendar"></i></span>
        <span class="badge pull-right" style="background-color:#AEDCAE;"><?php echo Utils::getOpenDays(); ?></span>
        <?php _me("运行天数") ?>
    </li>
    <li class="list-group-item text-second">
        <span class="blog-info-icons"><i data-feather="activity"></i></span>
        <span class="badge pull-right" style="background-color:#FFB380;"><?php echo Utils::getLatestTime($this); ?></span>
        <?php _me("最后活动") ?>
    </li>
    <!-- 访客总数代码——begin -->
    <li class="list-group-item text-second">
        <span class="blog-info-icons" style="color:#AEDCAE;"> <i data-feather="users"></i></span>
        <span class="badge pull-right" style="background-color:#FF69B4;"><?php echo theAllViews();?></span>
        <?php _me("访客总数") ?>
    </li>
    <!-- 访客总数代码——over -->
    <!-- 响应耗时代码——begin -->
    <li class="list-group-item text-second">
        <span class="blog-info-icons" style="color:#428BCA;"><i data-feather="refresh-ccw"></i></span>
        <span class="badge pull-right" style="background-color:#D9B999;"><?php echo timer_stop();?></span>
        <?php _me("响应耗时") ?>
    </li>
    <!-- 响应耗时代码——over -->
    <!-- 全站字数代码——begin -->
    <li class="list-group-item text-second">
        <span class="blog-info-icons" style="color:#ECA9A7;"><i data-feather="edit-3"></i></span>
        <span class="badge pull-right" style="background-color:#DA99FF;"><?php echo allOfCharacters(); ?></span>
        <?php _me("全站字数") ?>
    </li>
    <!-- 全站字数代码——over -->
</ul>

7.8 右侧边栏文章图标

右侧边栏文章图标 √

进入 usr/themes/handsome/assets/img/sj2 目录下,替换原有的文件即可

8、其他美化

8.1 主题标题居中

主题标题居中 √

设置外观 → 开发者设置 → 自定义 CSS

/* 主题标题居中——begin */
header.bg-light.lter.wrapper-md {
    text-align: center;
}
/* 主题标题居中——over */

8.2 最右侧滚动条

最右侧滚动条 √

设置外观 → 开发者设置 → 自定义 CSS

/* 滚动条——begin */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #BFBFBF;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,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
}
/* 滚动条——over */

8.3 左上角 logo 扫光

左上角 logo 扫光 √

设置外观 → 开发者设置 → 自定义 CSS

/* 左上角 logo 扫光——begin */
.navbar-brand {
    position: relative;
    overflow: hidden;
    margin: 0px 0 0 0px;
}
.navbar-brand:before {
    content: "";
    position: absolute;
    left: -665px;
    top: -460px;
    width: 200px;
    height: 15px;
    background-color: rgba(255, 255, 255, .5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 6s ease-in 0s infinite;
    -o-animation: searchLights 6s ease-in 0s infinite;
    animation: searchLights 6s ease-in 0s infinite;
}
@-moz-keyframes searchLights {
    50% {
        left: -100px;
        top: 0;
    }
    65% {
        left: 120px;
        top: 100px;
    }
}
@keyframes searchLights {
    40% {
        left: -100px;
        top: 0;
    }
    60% {
        left: 120px;
        top: 100px;
    }
    80% {
        left: -100px;
        top: 0px;
    }
}
/* 左上角 logo 扫光——over */

8.4 文章百度收录查询

文章百度收录查询 √

首先去 usr/themes/handsome/post.php,添加以下代码:

1652516810841

<!-- 文章百度收录查询——begin -->
<li class="meta-baidu">
    <span class="post-icons">
    <i class="glyphicon glyphicon-refresh" id="baidu_icon"></i>
    </span><span class="meta-value" id="baidu_result">加载中</span>
</li>
<!-- 文章百度收录查询——over -->

在该文件最底部添加:

/* 文章百度收录查询——begin */
<script>
    function baidu_check(){
        $.getJSON("https://xiaochamao.com/api/baidu.php?domain="+window.location.href,function(result){ 
            if (result.code == 200) {
                $('#baidu_icon').removeClass('glyphicon-refresh');
                $('#baidu_icon').addClass('glyphicon-ok-circle');
                $('#baidu_result').text('百度已收录');
            }else if(result.code == 403){
                $('#baidu_icon').removeClass('glyphicon-refresh');
                $('#baidu_icon').addClass('glyphicon-info-sign');
                $('#baidu_result').text('百度未收录');
                baidu_push();
            }else{
                $('#baidu_icon').removeClass('glyphicon-refresh');
                $('#baidu_icon').addClass('glyphicon-remove-circle');
                $('#baidu_result').text('查询收录失败');
            }
        });
    }
    function baidu_push(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';  
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    }
    baidu_check();
</script>
/* 文章百度收录查询——over */

设置外观 → PJAX → PJAX 回调函数

/* 文章百度收录查询——begin */
if((typeof baidu_check) !== "undefined"){
    baidu_check();
}
/* 文章百度收录查询——over */

8.5 右侧边栏上方3图标

右侧边栏上方3图标 √

进入 usr/themes/handsome/component/sidebar.php 文件

image-20220530012424000

将红框处代码替换为以下代码即可:

ul class="nav nav-tabs nav-justified box-shadow-bottom-normal tablist" role="tablist">
    <li data-index="0" class="active" role="presentation">
        <a data-target="#widget-tabs-4-hots" role="tab"
           aria-controls="widget-tabs-4-hots" aria-expanded="true"
           data-toggle="tab">
            <div class="sidebar-icon wrapper-sm">
                <img src="https://blog-images-1309598269.cos.ap-beijing.myqcloud.com/headImg/202205300108360.svg" style="height: 2.5em;">
            </div>
            <span class="sr-only"><?php _me("热门文章") ?></span>
        </a>
    </li>
    <?php if (COMMENT_SYSTEM == 0): ?>
    <li role="presentation" data-index="1">
        <a data-target="#widget-tabs-4-comments" role="tab"
           aria-controls="widget-tabs-4-comments" aria-expanded="false"
           data-toggle="tab">
            <div class="sidebar-icon wrapper-sm">
                <img src="https://blog-images-1309598269.cos.ap-beijing.myqcloud.com/headImg/202205300112228.svg" style="height: 2.5em;">
            </div>
            <span class="sr-only"><?php _me("最新评论") ?></span>
        </a>
    </li>
    <?php endif; ?>
    <li data-index="2" role="presentation">
        <a data-target="#widget-tabs-4-random" role="tab"
           aria-controls="widget-tabs-4-random" aria-expanded="false"
           data-toggle="tab">
            <div class="sidebar-icon wrapper-sm">
                <img src="https://blog-images-1309598269.cos.ap-beijing.myqcloud.com/headImg/202205300113292.svg" style="height: 2.5em;">
            </div>
            <span class="sr-only"><?php _me("随机文章") ?></span>
        </a>
    </li>
    <span class="navs-slider-bar"></span>
</ul>

8.6 右上角导航栏显示文字

右上角导航栏显示文字 √

进入 usr/themes/handsome/compent/headnav.php 文件中

将红框处代码替换为以下代码即可:

$headerItemsOutput .= '<li class="dropdown"><a '.$linkStatus.' href="'.$itemLink.'" class="feathericons dropdown-toggle" '.$iconColor.'>'.Content::returnIconHtml($iconName,true).'<div style="float:right;margin-top:2px"><span style="margin-left:5px; color:#FFFFFF">'._mt($itemName).'</span></div></a></li>';

8.7 去除右上角导航栏的登录接口

去除右上角导航栏的登录接口 √

进入 usr/themes/handsome/compent/headnav.php 文件中将以下部分注释掉即可:

1652779790075

8.8 去除顶部博客名称

去除顶部博客名称 √

修改 /usr/themes/handsome/index.php 文件,删除以下代码:

<h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>

8.9 博客首页顶部添加倒计时

博客首页顶部添加倒计时 √

设置外观 → 开发者设置 → 自定义 CSS

/* 博客首页顶部添加倒计时——begin */
.gn_box {
    padding: 10px 14px;
    margin-bottom: 20px;
    text-align: center;
    background-color: #fff;
}
#t_d{
    color: #982585;
    font-size: 18px;
}
#t_h{
    color: #8f79c1;
    font-size: 18px;
}
#t_m{
    color: #65b4b5;
    font-size: 18px;
}
#t_s{
    color: #83caa3;
    font-size: 18px;
}
/* 博客首页顶部添加倒计时——over */

设置外观 → 开发者设置 → 首页列表最前方广告位

<!-- 博客首页顶部添加倒计时——begin -->
<div class="gn_box">
    <h1><font color=#E80017>距</font><font color=#D1002E>离</font><font color=#BA0045>2</font><font color=#A3005C>0</font><font
            color=#8C0073>2</font><font color=#75008A>3</font><font color=#5E00A1>年</font><font
            color=#4700B8>毕</font><font color=#3000CF>业</font><font color=#1900E6>还</font><font color=#0200FD>有</font>
    </h1>
    <center>
        <div id="CountMsg" class="HotDate">
            <span id="t_d">157 天</span>
            <span id="t_h">9 时</span>
            <span id="t_m">7 分</span>
            <span id="t_s">42 秒</span>
        </div>
    </center>
    <script type="text/javascript"> function getRTime() {
        var EndTime = new Date('2023/06/18 00:00:00');
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var d = Math.floor(t / 1000 / 60 / 60 / 24);
        var h = Math.floor(t / 1000 / 60 / 60 % 24);
        var m = Math.floor(t / 1000 / 60 % 60);
        var s = Math.floor(t / 1000 % 60);
        document.getElementById("t_d").innerHTML = d + " 天";
        document.getElementById("t_h").innerHTML = h + " 时";
        document.getElementById("t_m").innerHTML = m + " 分";
        document.getElementById("t_s").innerHTML = s + " 秒";
    }
    setInterval(getRTime, 1000);
    </script>
</div>
<!-- 博客首页顶部添加倒计时——over -->

8.10 右侧边栏栏目前SVG图标

右侧边栏栏目前SVG图标 √

usr/themes/handsome/component/siderbar.php 文件这些位置分别添加相应代码:

image-20220530203804665

<img src="https://blog-images-1309598269.cos.ap-beijing.myqcloud.com/blogImgs/202207232129594.svg" style="height: 1.5em;">&nbsp;

image-20220530204429516

<img src="https://blog-images-1309598269.cos.ap-beijing.myqcloud.com/blogImgs/202207232127056.svg" style="height: 1.5em;">&nbsp;

image-20220530204535779

<img src="https://blog-images-1309598269.cos.ap-beijing.myqcloud.com/blogImgs/202207232130739.svg" style="height: 1.5em;">&nbsp;

image-20220530204608277

<img src="  https://blog-images-1309598269.cos.ap-beijing.myqcloud.com/blogImgs/202207232131820.svg" style="height: 1.5em;">&nbsp;

image-20220530204654860

<img src="https://blog-images-1309598269.cos.ap-beijing.myqcloud.com/blogImgs/202207232132542.svg" style="height: 1.5em;">&nbsp;

image-20220530204729702

<img src="https://blog-images-1309598269.cos.ap-beijing.myqcloud.com/blogImgs/202207232134150.svg" style="height: 1.5em;">&nbsp;

9、整体优化

9.1 伪静态设置

伪静态设置 √

后台管理 → 设置 → 永久链接,启用地址重写功能

同时去宝塔面板中配置伪静态:

image-20220530121114542

9.2 添加GZIP压缩

添加GZIP压缩 √

在Typecho站点根目录下的 config.inc.php 文件内加入下面的配置:

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

9.3 解决QQ微信内置浏览器评论失败

解决QQ微信内置浏览器评论失败 √

进入数据库中,执行下方 SQL 命令:

ALTER TABLE `typecho_comments` CHANGE `agent` `agent` VARCHAR(512)

如果启用了插件 Access,建议执行下方 SQL 命令:

ALTER TABLE `typecho_access_log` CHANGE `ua` `ua` VARCHAR(512)

10、插件汇总及参考网站

插件汇总及参考博文

插件名 说明 详情链接地址
GoTop 置顶悬挂猫插件
CodePrettify 代码高亮插件
HoerMouse 炫彩鼠标插件
CommentFilter 智能垃圾评论过滤插件
CommentPush 评论推送提醒插件
MarkdownParse 更快、更全的 Markdown 解析插件
UserAgent 显示评论者信息插件
ZFonts 字体美化插件
ShortLinks 外链转内链插件
Sitemap 自动生成站点地图插件
Tagshelper 文章标签选择插件


END

本文作者:
文章标题:HandSome 博客美化
本文地址:https://www.pendulumye.com/station-construction/9.html
版权说明:若无注明,本文皆PendulumYe原创,转载请保留文章出处。
最后修改:2022 年 07 月 23 日
千山万水总是情,给个一毛行不行💋