MENU

Typecho博客添加弹出公告

• June 20, 2020 • Read: 212 • typecho

最近在逛博客的时候,发现右上角弹出公告挺好看的。
刚开始去问别人,都在说这个是插件,我就小心翼翼的问了一下插件的名字是什么......
A:这个插件叫什么名字哇,我去下载一下
B:你不会百度?这个插件是?
百度
我傻了(这不是发一下名字的事么...)::quyin:fue::

当然,我还是太菜了

非常感谢博主的帮助->季春二九 感谢他告诉我这个不是插件
通过自己的摸索与他人的帮助,我也成功的将通知显示了出来.
话不多说,上教程!

1、需要去将下边代码加入到你的footer.php文件中,也可以只放到自己需要的位置!

代码

<script>
    // 自定义公告显示
    document.addEventListener('DOMContentLoaded', initNotice2);
    function initNotice2() {
        const common = {
            loadResource: function (id, resource, type) {
                return new Promise(function (resolve, reject) {
                    let loaded = document.head.querySelector('#' + id);
                    if (loaded) {
                        resolve('success: ' + resource);
                        return;
                    }
                    const element = document.createElement(type);
                    element.onload = element.onreadystatechange = () => {
                        if (!loaded && (!element.readyState || /loaded|complete/.test(element.readyState))) {
                            element.onload = element.onreadystatechange = null;
                            loaded = true;
                            resolve('success: ' + resource);
                        }
                    }
                    element.onerror = function () {
                        reject(Error(resource + ' load error!'));
                    };
                    if (type === 'link') {
                        element.rel = 'stylesheet';
                        element.href = resource;
                    } else {
                        element.src = resource;
                    }
                    element.id = id;
                    document.getElementsByTagName('head')[0].appendChild(element);
                });
            },
            loadResources: function () {
                const initVue = this.initVue;
                const loadResource = this.loadResource;
                const host = '//s0.pstatp.com/cdn/expire-1-M/';
                const resources = [
                    'vue/2.6.10/vue.min.js',
                    'element-ui/2.8.2/index.js',
                    'element-ui/2.8.2/theme-chalk/index.css'
                ];
                const loadPromises = [];
                resources.forEach(resource => {
                    loadPromises.push(loadResource(btoa(resource).replace(/[=+\/]/g, ''), host + resource,
                        ({
                            'css': 'link',
                            'js': 'script'
                        })[resource.split('.').pop()]
                    ));
                });
                Promise.all(loadPromises).then(
                    function () {
                        let flag = false;
                        const waitVue = setInterval(() => {
                            if (!flag && typeof Vue === 'function') {
                                flag = true;
                                initVue();
                                clearInterval(waitVue);
                            }
                        }, 100);
                    }
                );
            },
            initVue: function () {
                var blog = new Vue({
                    el: document.createElement('div'),
                    created() {
                        this.sayHello();
                        window.alert = this.alert;
                    },
                    computed: {
                        hello: function () {
                            var hours = (new Date()).getHours()
                            var t
                            if (hours < 5) {
                                t = '凌晨了,注意休息哦!'
                            } else if (hours >= 5 && hours < 8) {
                                t = '早上好,新的一天又是元气满满呢!'
                            } else if (hours >= 8 && hours < 12) {
                                t = '上午好!'
                            } else if (hours === 12) {
                                t = '中午好!'
                            } else if (hours > 12 && hours <= 18) {
                                t = '下午好!'
                            } else if (hours > 18 && hours <= 22) {
                                t = '晚上好!'
                            } else if (hours > 22 && hours < 24) {
                                t = '夜深了,注意休息哦!'
                            }
                            return t
                        }
                    },
                    methods: {
                        alert: function (message, title, type, duration, showClose, offset, onClose) {
                            if (duration !== 0) {
                                duration = 4500;
                            }
                            this.$notify({
                                message: message,
                                type: type || 'error',
                                title: title || '警告',
                                duration: duration,
                                showClose: showClose || false,
                                offset: offset || 0,
                                onClose: onClose
                            })
                        },
                        sayHello: function () {
                            setTimeout(() => {
                                this.alert('欢迎来到 吃货智 的Blog!', this.hello, 'success');
                            }, 1000);
                        }
                    },
                })
            }
        };
        common.loadResources();
    }
</script>

2、在此代码中主要使用的ElementUI框架中的通知组件,有需要更改的小伙伴可以自行去查看文档哦!

Element-UI

3、成功之后就是这个亚子

公告

4、感兴趣的小伙伴可以把这个做成一个插件,分享给大家

Last Modified: June 29, 2020