Typecho Mirages 主题自定义公告样式
使用步骤
将以下代码加入到 <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('欢迎来到 季春二九 的博客！', 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>
Typecho Mirages 主题自定义公告样式的更多相关文章
- [android] 练习样式主题自定义activity切换动画
主要练习了自定义样式和主题,继承android系统默认的样式并修改,练习xml定义淡入淡出动画 anim/fade_in.xml <?xml version="1.0" en ...
- CARDS主题 & 导航栏样式修改
每个人对于主题样式的感觉是不一样的,譬如字体大小,间距,高宽,距离,颜色等,我们可以一定程度内很直观地去修改主题的某些样式. 首先,在浏览器中利用开发者工具进行调试,找到我们所要改动的那部分结构,写入 ...
- Siteserver-stl:searchOutput(搜索结果)自定义显示样式
stl:searchOutput 自定义显示样式 自定义搜索提交表单需要在<stl:searchOutput>中嵌入显示搜索结果的标签,必须包含的标签 有<stl:pageConte ...
- 044. asp.net主题之二为主题添加CSS样式和动态加载主题
1. 新建任意一个网站, 默认主页为Default.aspx, 增加一个App_Themes目录, 用于存储主题, 添加一个MyTheme的主题, 在MyTheme主题下添加一个样式表文件, 默认名称 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 自定义plain 样式的 tableview,模拟器上不显示分割线,真机上却显示分割线.
一, 经历 1> 自定义plain 样式的 tableview,模拟器上不显示分割线,真机上却显示cell 下面的分割线. 2> 尝试使用表格的separatorStyle属性,尝试失败. ...
- Winform自定义窗体样式，实现标题栏可灵活自定义
最近在编写C/S结构应用程序时,感觉窗体的标题栏样式太死板了,标题文字不能更改大小.颜色.字体等,按钮不能隐藏等问题,在网上也查找了许多相关的资料,没有找到合适的解决方案,发现许多人也在寻求这个问题, ...
- ASP.NET加载主题和皮肤样式的各种方式
一.加载主题(皮肤.样式表)的多种方式 除了在页面指令中采用Theme或者StylesheetTheme为单个页面加载主题外,还可以通过配置文件为多个页面批量加载主题,另外,还可以通过改变页面的The ...
- WPF 自定义滚动条样式
先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...
- Android设置选项开发及自定义Preference样式
一个完整的Android应用程序都应该提供选项(或者叫偏好设置等等)让用户对APP的表现形式能够进行设置,比如说是否加入用户体验计划,或者是否自动升级.定时提醒.开启自启动.后台运行等等.提供一个好的 ...
随机推荐
- Swagger 调试，我不想再复制粘贴token啦~
作为后端开发,进行Web Api 调试,除了使用 Postman, Apifox 等 Web Api 调试工具之外,我想使用Swagger进行调试应该是更方便,更常用的方式了吧. 那么在需要 toke ...
- 【Android】屏幕超时休眠
前言 屏幕超时休眠指的是在设备一段时间没有操作后,自动关闭屏幕显示以节省电量并防止误触.当屏幕进入休眠状态时,通常会关闭屏幕背光,但设备可能仍在运行后台进程. 正文 Settings应用相关 Sett ...
- node + vue 实现服务端单向推送消息，利用EventSource
场景:后台系统需要实时收到电池报警消息,并语音提醒,前台不需要发送任何东西,所以想的是,服务端单向推送 1. 实现EventSource参考博客: https://www.jqhtml.com/412 ...
- nanoFramework
nanoFramework 01: Getting started with nanoFramework! 08: .NET nanoFramework GPIO, I2C, SPI and othe ...
- Uninstall or delete MariaDB completely for re-installation
I am new to this forum so pse forgive me if I am asking a question which already has been answered. ...
- Kerberos认证代码分析Can't get Kerberos realm
1. Can't get Kerberos realm 原因分析: 原始代码为: 1 2 org.apache.hadoop.security.UserGroupInformation.setConf ...
- 总结几个Qt版本的冷知识
Qt4.8.7是Qt4的终结版本,是Qt4系列版本中最稳定最经典的(很多嵌入式板子还是用Qt4.8),其实该版本是和Qt5.5差不多时间发布的.参考链接 https://www.qt.io/blog/ ...
- # 个人认为windows下最好用的一批软件 #
个人认为windows下最好用的一批软件 chrome 为什么是chrome而不是edge2? 这当然不是因为我是谷歌吹什么的.其实当得知edge2比chrome更省内存,运行更快,而且不跨越城墙就能 ...
- python_pip 安装工具包
e.g: pip install pygame http://mirrors.aliyun.com/pypi/simple/ 安装方法可以直接在命令行输入pip install -扩展包名字. 加快安 ...
- CDS标准视图：优先级描述数据 I_GenericPriorityTextData
视图名称:优先级描述数据 I_GenericPriorityTextData 视图类型:基础视图 视图代码: 点击查看代码 @AbapCatalog.sqlViewName: 'IGENPRIOTEX ...