在博客上养一只可爱的阿夸

效果展示

首页效果：

点击效果：

点击Aqua后会在网站上随机浮现neeeeeeeee~或mooooooooo~字样的粉色泡泡

点击超过一定次数：

Aqua从页面消失5分钟，并留下一句话

为了不影响到阅读效果，毕竟我文章界面一大半空间已经放了兔子小分队¹的图了，所以Aqua只会在PC端首页显示，下面就来说说是如何实现的吧！

实现

因为大部分功能都是依赖这个博客主题VOID里面一些部件修改而来的，比如Aqua通知框其实就是模板通知部件VOID.alert()改了个颜色。So，咱要干的第一件事就是在模板自带JS文件里仿照模板原生方法加一个自定义小组件²

泡泡的类名为msg_box

    msg_box: function (content, time) {
        var errTemplate = '<div class="msg_box" id="msg{id}">{Text}</div>';
        var id = new Date().getTime();
        $('body').prepend(errTemplate.replace('{Text}', content).replace('{id}', id));
        $.each($('.msg_box'), function (i, item) {
            if ($(item).attr('id') != 'msg_box' + id) {
                $(item).css('top', $(item).offset().top - $(document).scrollTop() + $('.msg_box#msg' + id).outerHeight() + 20 + 'px');
            }
        });
        $('.msg_box#msg' + id).addClass('show');
        var t = time;
        if (typeof (t) != 'number') {
            t = 2500;
        }
        setTimeout(function () {
            $('.msg_box#msg' + id).addClass('hide');
            setTimeout(function () {
                $('.msg_box#msg' + id).remove();
            }, 1000);
        }, t);
    }

然后在模板css文件里加入样式如下：

.msg_box {
    color: white;
    position: fixed;
    top: 70px;
    background: #FFA6EA;
    padding: .7rem;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 20px 2px rgba(0,0,0,.1);
    box-shadow: 0 0 20px 2px rgba(0,0,0,.1);
    -webkit-transition: .5s cubic-bezier(.25,.46,.45,.94) all;
    transition: .5s cubic-bezier(.25,.46,.45,.94) all;
    right: 0;
    line-height: 1.5;
    z-index: 20;
    max-width: calc(100vw - 3rem);
    overflow: hidden;
    word-break: break-all
}

.msg_box.show {
    -webkit-animation: fade-in .5s;
    animation: fade-in .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: .3;
    animation-delay: .3
}

.msg_box.hide {
    -webkit-animation: fade-out .5s;
    animation: fade-out .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: .3;
    animation-delay: .3
}

样式表修改完后可以开个无痕模式在console里运行以下代码试试，成功的话页面会正确显示hello world的粉色泡泡

VOID.msg_box("hello world")

接下来在主页的html上写个<div>用来显示/隐藏Aqua

<div id="waifu" style="bottom: 0; position: fixed"></div>

最后写个点击事件就行了 ，因为博主没学过js，代码是网上东拼西凑写出来的

// Aqua组件
if (!/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
    function createCookie(name, value, minutes) {
        if (minutes) {
            var date = new Date();
            date.setTime(date.getTime() + (minutes * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
        } else {
            var expires = "";
        }
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    var onion_img = document.createElement("img");
    onion_img.src = "https://static.cirno.me/pictures/onion.png";
    onion_img.id = "onion_img";
    onion_img.width = 126.989;
    onion_img.alt = "waifu";
    onion_img.draggable = false;

    onion_c = (document.cookie.match(/^(?:.*;)?\s*onion\s*=\s*([^;]+)(?:.*)?$/) || [, null])[1];
    onion_show = (document.cookie.match(/^(?:.*;)?\s*onion_show\s*=\s*([^;]+)(?:.*)?$/) || [, null])[1];
    var onion_event = document.getElementById("waifu");
    // init onion image
    if (onion_c != null && onion_event != null) {
        onion_event.remove();
    } else if (onion_event != null && document.getElementById("onion_img") == null) {
        onion_event.appendChild(onion_img);
    }
    var click_count = 0;
    var events = ['Aqua date with mea', 'Aqua in WC', 'Aqua on streaming', 'Aqua play CSGO',
        'Aqua doesn\'t wanna see u', 'Aqua play arcaea'
    ];
    $(function() {
        if (onion_event != null) {
            if (onion_c != null && onion_show == null) {
                VOID.msg_box("Waiting for Aqua...");
                createCookie("onion_show", true, 1);
            }
            onion_event.onclick = function() {
                click_count += 1;
                if (click_count > 15) {
                    VOID.msg_box(events[Math.floor(Math.random() * events.length)] + '...');
                    createCookie('onion', true, 5);
                    onion_event.remove();
                } else if (Boolean(Math.round(Math.random()))) {
                    VOID.msg_box("ねぇぇぇぇぇぇぇぇぇ～");
                } else {
                    VOID.msg_box("もぉぉぉぉぉぉぉぉぉ～");
                }
            }
        }
    });
}

一切就绪不出所料大家博客上也会多一只可爱的阿夸啦