最近博客更换域名，打算把公告置顶一段时间，但发现其样式与博客冲突了，具体为：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>如有问题请在下方留言，文章转载请注明出处，详细交流请加下方群组！请大佬不要屏蔽文中广告，因为它将帮我分担服务器开支，如果能帮忙点击我将万分感谢。
为什么我设置的时候出现只要点击任意一个上方栏框里的内容就会弹出提醒，而不是只是第一次进入时只弹出一次？
高度比导航栏低。这个脚本怎么改可以实现
演示代码可直接使用，定制则需付费
要多少钱呢？
加群私聊群主
想问一下导航栏那个“更多”的二级菜单怎么加的@(真棒)
主题设置一般都有，没有就用js实现
Mirages主题我好像没找到设置的地方，求大佬告知方法@(哈哈)
你可以把主题帮助文档全部读一遍，具体到这个问题看两个地方，独立页面和高级设置
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
懂了，非常感谢大佬
等有时间，我一定要学好js#(吐血倒地)
哈哈哈，感兴趣或者要用就学，不必强迫自己