博客美化方法
点击卡片查看详情
一、添加复制提醒 - 2021.3.19
在头部引入
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
然后在 post.php <script> 标签中添加
document.body.addEventListener('copy', function (e) {
if (window.getSelection().toString() && window.getSelection().toString().length > 10) {
setClipboardText(e);
new Vue({data:function(){this.$notify({title:"复制成功",message:"若要转载请务必保留原文链接!",type:"success"});return{visible:false}}})
}
});
//再复制的内容中添加文本提示
function setClipboardText(event) {
var clipboardData = event.clipboardData || window.clipboardData;
if (clipboardData) {
event.preventDefault();
var htmlData = ''
+ window.getSelection().toString()
+ '<br><br> 著作权归作者所有。<br>'
+ '商业转载请联系作者获得授权,非商业转载请注明出处。<br>'
+ '作者:<?php $this->author() ?><br>'
+ '链接:' + window.location.href + '<br>'
+ '来源:<?php $this->options->siteUrl(); ?><br><br>' ;
var textData = ''
+ window.getSelection().toString()
+ '\n\n著作权归作者所有。\n'
+ '商业转载请联系作者获得授权,非商业转载请注明出处。\n'
+ '作者:<?php $this->author() ?>\n'
+ '链接:' + window.location.href + '\n'
+ '来源:<?php $this->options->siteUrl(); ?>\n\n' ;
clipboardData.setData('text/html', htmlData);
clipboardData.setData('text/plain',textData);
}
}
二、添加天气插件 - 2021.3.19
见 博客添加和风天气插件 文章
三、添加文章页百度收录 - 2021.3.20
见 博客为Typecho增加百度检测推送 文章
四、动态标题 - 2021.3.21
打开后台-外观-设置外观-自定义设置-底部自定义
<!--动态标题-->
<script>
//崩溃欺骗
var OriginTitle = document.title;
var titleTime;
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
document.title = "╭(°A°)╮ 页面崩溃啦 ~";
clearTimeout(titleTime);
} else {
document.title = "(ฅ>ω<*ฅ) 噫又好了~" + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>
五、博客手机显示卡片风格 - 2021.3.23
在
自定义设置
-> 头部自定义内容
-> 添加下面的css <link rel="stylesheet" href="https://blog.tzhhone.cn/usr/plugins/CuteenPlus/assets/css/app.css">
或自己保存本样式上传至您的服务器调用