MENU

Typecho Mirages 主题自定义公告样式

August 13, 2020 • Read: 236 • 代码笔记

最近博客更换域名,打算把公告置顶一段时间,但发现其样式与博客冲突了,具体为:1. 关闭按钮被音乐插件挡住。2. 高度比导航栏低。3. 关闭后再次打开仍然显示。于是花几分钟用 JS 打个补丁,记录下过程,有需要修改公告样式的博友也可参考。

使用步骤

将以下代码加入到 <head> 标签中。对于本主题,依次进入 控制台 - 外观 - 设置外观 - 主题自定义扩展,将代码加入到 自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后),也可直接加入到主题对应的 header.php 中的 </head> 标签前。

当前版本

<script>
// 自定义公告显示
document.addEventListener('DOMContentLoaded', initNotice2);
document.head.append(document.createRange().createContextualFragment(
    `<style> 
        .blog-notice { 
            display: none; 
        }
        @media screen and (max-device-width: 767px) {
            .el-notification.right {
                margin: 0 auto;
                left: 0;
                right: 0 !important;
            }
        }
    </style>`
).firstElementChild);
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();
                    if (this.notice) {
                        this.showNotice();
                    }
                    window.alert = this.alert;
                },
                computed: {
                    notice: function () {
                        const blgNotice = document.querySelector('.blog-notice p');
                        if (blgNotice) {
                            const oldNotice = localStorage.getItem('BLOG-NOTICE');
                            const newNotice = blgNotice.innerText;
                            if (!oldNotice || oldNotice !== newNotice) {
                                return newNotice;
                            }
                        }
                        return ''
                    },
                    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
                        })
                    },
                    showNotice: function () {
                        setTimeout(() => {
                            const notice = this.notice;
                            this.alert(notice, '公告', 'info', 0, true, null, function () {
                                localStorage.setItem('BLOG-NOTICE', notice);
                            });
                        }, 1000);
                    },
                    sayHello: function () {
                        setTimeout(() => {
                            this.alert('欢迎来到 LOGI 的博客!', this.hello, 'success');
                        }, 1000);
                    }
                },
            })
        }
    };
    common.loadResources();
}
</script>

初始版本

<script>
// 修正公告显示
document.addEventListener('DOMContentLoaded', initNotice);
document.head.append(document.createRange().createContextualFragment(`
<style>
    .blog-notice {
        display: none;
        z-index: 9999 !important;
    }
    .blog-notice .blog-notice-close {
        line-height: 2.2em !important;
    }
</style>`.trim()).firstElementChild);
function initNotice() {
    const blgNotice = document.querySelector('.blog-notice');
    if (blgNotice) {
        const oldNotice = localStorage.getItem('BlogNotice');
        const newNotice = blgNotice.querySelector('p').innerText;
        if (!oldNotice || oldNotice !== newNotice) {
            blgNotice.style.display = 'initial';
            blgNotice.querySelector('.blog-notice-close').addEventListener('click',
                () => localStorage.setItem('BlogNotice', newNotice));
        }
    }
}
</script>

Last Modified: August 15, 2020
Archives QR Code
QR Code for this page
Tipping QR Code
0:00