首页 主题美化 😋

博客美化方法

点击卡片查看详情

一、添加复制提醒 - 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

四、动态标题 - 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">

或自己保存本样式上传至您的服务器调用




文章评论