MENU

Typecho Mirages 主题自定义公告样式

2020 年 01 月 19 日 • 阅读: 11816 • 博客

最近博客更换域名,打算把公告置顶一段时间,但发现其样式与博客冲突了,具体为: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>

TG 大佬群 QQ 大佬群

最后编辑于: 2020 年 02 月 24 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码
添加新评论

Loading captcha...

已有 12 条评论
  1. Xz Xz   Windows 10 x64 Edition  Google Chrome 97.0.4692.71

    为什么我设置的时候出现只要点击任意一个上方栏框里的内容就会弹出提醒,而不是只是第一次进入时只弹出一次?

  2. mzrme mzrme   GNU/Linux x64  Google Chrome 81.0.4029.4

    高度比导航栏低。这个脚本怎么改可以实现

    1. LOGI LOGI   Windows 10 x64 Edition  Google Chrome 80.0.3987.149

      @mzrme演示代码可直接使用,定制则需付费

    2. mzrme mzrme   GNU/Linux x64  Google Chrome 81.0.4029.4

      @LOGI要多少钱呢?

    3. LOGI LOGI   Windows 10 x64 Edition  Google Chrome 80.0.3987.149

      @mzrme加群私聊群主

  3. LeeYD LeeYD   Windows 10 x64 Edition  Google Chrome 78.0.3904.97

    想问一下导航栏那个“更多”的二级菜单怎么加的@(真棒)

    1. LOGI LOGI   Windows 10 x64 Edition  Google Chrome 79.0.3945.130

      @LeeYD主题设置一般都有,没有就用js实现

    2. LeeYD LeeYD   Windows 10 x64 Edition  Google Chrome 78.0.3904.97

      @LOGIMirages主题我好像没找到设置的地方,求大佬告知方法@(哈哈)

    3. LOGI LOGI   Windows 10 x64 Edition  Google Chrome 79.0.3945.130

      @LeeYD
      你可以把主题帮助文档全部读一遍,具体到这个问题看两个地方,独立页面和高级设置

      https://mirages.docs.get233.com/#/docs/quickstart/QA?id=%e4%be%a7%e8%be%b9%e6%a0%8f%e8%8f%9c%e5%8d%95%e6%80%8e%e4%b9%88%e9%85%8d%e7%bd%ae%ef%bc%9f

      https://mirages.docs.get233.com/#/docs/settings/hidden-settings?id=%e9%a1%b6%e9%83%a8%e5%af%bc%e8%88%aa%e6%a0%8f%e6%9c%80%e5%a4%a7%e8%8f%9c%e5%8d%95%e6%95%b0%e9%87%8f

    4. LeeYD LeeYD   Windows 10 x64 Edition  Google Chrome 78.0.3904.97

      @LOGI懂了,非常感谢大佬

  4. 于长野 于长野   Android 10  Google Chrome 79.0.3945.116

    等有时间,我一定要学好js#(吐血倒地)

    1. LOGI LOGI   Windows 10 x64 Edition  Google Chrome 79.0.3945.130

      @于长野哈哈哈,感兴趣或者要用就学,不必强迫自己