一、文章字数统计

（一）功能

顾名思义，统计博客文章字数的插件，可在设置里调是否统计隐藏/私有文章字数。源码地址

1.下载插件，解压放到usr/plugins/目录中
2.文件夹名改为WordsCounter
3.登录管理后台，激活插件

（二）调用方法
1.文章字数统计

在你想要输出的地方加上

<?php $this->charactersNum(); ?>

2.全站字数统计

在你想要输出的地方加上

<?php WordsCounter_Plugin::allOfCharacters(); ?>

二、鼠标特效

感谢Hoe大佬的辛苦开发，在这里源码地址下载源码，使用方法很简单，与一般插件一样。

1.下载插件，解压放到usr/plugins/目录中
2.文件夹名改为HoerMouse
3.登录管理后台，激活插件

三、评论框打字特效

1.复制下面代码，单独存独为一个文件，比如：commentTyping.js，放在网站的根目录。

    (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);

2.调用方法

在Mirages主题的自定义扩展里调用：

<!-- In footer.php -->
<script type="text/javascript" src="https://flypig.xyz/commentTyping.js"></script>

如下图：

或者，直接修改主题里的footer.php文件，我的是在themes\Mirages\componet\footer.php，把代码放在</body>之前，即可。

四、网站F12显示有趣的Console.log()信息

Console 信息就是在大多数浏览器里面按下 F12 之后看到的内容（用 console.log 输出的），例如百度的：

给人一种 F12 小惊喜的感觉，虽然百度是用它来招聘，我们未尝不能做点其他的。

这个小功能我觉得蛮有趣的，实现起来也很简单，一段小代码就行。

实现方法就是将以下代码添加到footer.php即可，按下 F12 或右键审查元素，找到 Console 就能看到效果，内容自己改哦。

<!--Console.log-->
<script type="text/javascript" language="javascript">
if(window.console&&window.console.log){  
    console.log("%c 哟，高人您好,祝您扒代码愉快~！","color:red");
    console.log("独立之人格，自由之精神，");
    console.log("逻辑只是工具，心地才是主宰，");
    console.log("最美的旅程，是不断的经历！");
    console.log("我是flypig,一个普通的金融民工。");
    console.log("欢迎沟通交流:flypig.xyz@outlook.com");
}  
</script>

效果看本博客按下 F12 以后的 Console 信息哦~懒得按就看题图吧~

当然，也可以输出字符画或图片等更多有趣信息，如下：

下面的代码可以复制到控制台自己尝试下效果：

1.改变文字样式等

console.log("%c 前端开发 %c tangwei %c 呀!", "color:red","","color:orange;font-weight:bold")

2.添加图片

console.log("%c ", "background: url(http://图片地址.jpg) no-repeat center;padding-left:80px;padding-bottom: 80px;border-radius:50%;")
console.log("%c ", "background: url(http://图片地址.jpeg) no-repeat center;padding-left:640px;padding-bottom: 242px;")

3.打印字符画

就是知乎那样的字符画

推荐2款在线的生成工具：

在线工具：asciipainting

在线工具：mg2txt

在线将文字表情或者图片生成为字符的形式，利用sublime等idea工具在每行最后加换行符号"n"，再去掉换行，粘贴到console.log里面就可以了

附：sublime换行的修改方法：

鼠标滚轮选中所有行的末尾添加"n"，再一起home键回到行首，统一删除换行即可

五、代码块复制

比照前面的评论框特效，在根目录建立codecopy.js文件，贴入如下代码：

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

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


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


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

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

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

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

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

    }(i);

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

并在footer.php中引用：

<!--In footer.php，代码块复制功能-->
<script type="text/javascript". src="https://flypig.xyz/codecopy.js">

刷新你的页面吧，大功告成！

另外说一句，这里没有设置 PJAX 回调函数，因为主题作者老大说：

我是小白，不敢贸然修改啊！！

累了，今天先写到这里吧。媳妇催着我去给她做炸藕夹和油焖大虾呢！！@(乖)@(乖)