Typecho Mirages 主题自定义公告样式
最近博客更换域名，打算把公告置顶一段时间，但发现其样式与博客冲突了，具体为：1. 关闭按钮被音乐插件挡住。2. 高度比导航栏低。3. 关闭后再次打开仍然显示。于是花几分钟用 JS 打个补丁，记录下过程，有需要修改公告样式的博友也可参考。
使用步骤
将以下代码加入到 <head> 标签中。对于本主题，依次进入 控制台 - 外观 - 设置外观 - 主题自定义扩展，将代码加入到 自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后)，也可直接加入到主题对应的 header.php 中的 </head> 标签前。
[collapse title="当前版本"]
<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>[/collapse]
[collapse title="初始版本"]
<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>[/collapse]