MENU

Typecho Mirages 主题自定义公告样式

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

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

使用步骤

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

<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 大佬群 QQ 追番群

返回文章列表 文章二维码
本页链接的二维码
打赏二维码
添加新评论

已有 7 条评论
  1. LeeYD LeeYD     Windows 10 /    Google Chrome

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

    1. LOGI LOGI     Windows 10 /    Google Chrome

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

    2. LeeYD LeeYD     Windows 10 /    Google Chrome

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

    3. LOGI LOGI     Windows 10 /    Google Chrome

      @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 /    Google Chrome

      @LOGI懂了,非常感谢大佬

  2. 于长野 于长野     Android /    Google Chrome

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

    1. LOGI LOGI     Windows 10 /    Google Chrome

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

0:00