Typecho主题美化/魔改教程

2025-01-22 11:33:56•文章

29 0

本文记录了其他博主修改美化主题的代码，主要是起到合集的作用，方便大家查阅。注意事项：如果模版中有同名class，记得修改CSS类名；如果对HTML、CSS、JavaScript完全不了解的话，不建议使用。

一、PC端侧边栏仿IOS小点点

展开查看详情

1、找到模版中侧边栏标题的位置加入下方代码

<span class="ios"></span>

2、进入后台主题设置中添加自定义CSS样式的区域，加入下方代码（直接修改CSS文件也可以）

/*PC端侧栏仿ios小点点*/
    .ios {
        content: " ";
        position: absolute;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #fc625d !important;
        width: 10px;
        height: 10px;
    z-index:999;
        -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
        box-shadow: 19px 0 #fdbc40, 40px 0 #35cd4b;
        float: right;
        right: 58px;
        top: 22px;
    z-index:100;
    }

二、网站底部添加站点运行时间

展开查看详情

1、找到页脚对应模版，将下面的代码放到要显示的位置

已运行<span id="runtime_span"></span>

2、在合适位置加入下方代码

<script type="text/javascript">
  function show_runtime(){window.setTimeout("show_runtime()",1000);X=new 
Date("05/14/2021 00:00:00");
Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);
runtime_span.innerHTML=""+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();
</script>

三、网站底部添加加载耗时

展开查看详情

1、找到页脚模版，将下面代码放到要显示的位置

<span id="TimeShow"></span>

2、在合适位置，加入下方代码

<SCRIPT LANGUAGE="JavaScript"> 
window.onload = function() 
{ 
document.getElementById("TimeShow").innerHTML = "本次加载耗时"+ (new Date().getTime()-t1) +"毫秒"; 
} 
</SCRIPT>

四、浏览器动态标题

展开查看详情

在合适位置添加以下代码（建议添加在网站底部）

<!--浏览器动态标题开始-->
<script>
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png");
         document.title = 'ヽ(●-`Д´-)ノ我藏好了哦！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png");
         document.title = 'ヾ(Ő∀Ő3)ノ被你发现啦~！' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
</script>
<!--浏览器动态标题结束-->

五、复制弹窗提示

展开查看详情

1、在模板合适位置引入layer资源文件代码

<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>

2、在主题自定义JavaScript中添加以下代码

document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');};

六、复制代码自带版权说明

展开查看详情

将以下JS代码放在模版合适位置

<!--复制代码自带版权说明-->
<script>
document.body.addEventListener('copy', function (e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
        setClipboardText(e);
        // alert('商业转载请联系作者获得授权，非商业转载请注明出处哦~\n谢谢合作~(｡・`ω´･)');
    }
}); 
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();
        var htmlData = ''
            + '著作权归作者所有。<br>'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
            + '作者：<?php $this->author() ?><br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：<?php $this->options->siteUrl(); ?><br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
            + '作者：<?php $this->author() ?>\n'
            + '链接：' + window.location.href + '\n'
            + '来源：<?php $this->options->siteUrl(); ?>\n\n'
            + window.getSelection().toString();
 
        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
</script>
<!--复制代码自带版权说明-->

最后更新 2025-01-22 11:33:56