Typecho Mirages 主题自定义公告样式
导读：使用步骤将以下代码加入到 标签中。对于本主题，依次进入 控制台 - 外观 - 设置外观 - 主题自定义扩展，将代码加入到 自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后 ，也可直接加入到主题对应的 header...
使用步骤
将以下代码加入到 标签中。对于本主题，依次进入 控制台 - 外观 - 设置外观 - 主题自定义扩展，将代码加入到 自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后)，也可直接加入到主题对应的 header.php 中的 标签前。
当前版本
// 自定义公告显示
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('欢迎来到 季春二九 的博客！', this.hello, 'success');
}
, 1000);
}
}
,
}
)
}
}
;
common.loadResources();
}
初始版本
// 修正公告显示
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));
}
}
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Typecho Mirages 主题自定义公告样式
本文地址： https://pptw.com/jishu/153.html