滚动条效果

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
   ::-webkit-scrollbar {
    width:9px;
    height:8px;
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color:white;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #ff676c;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    cursor: pointer;
}


左侧彩色图标&右侧彩色标签云


需要将以下代码添加到PJAX->PJAX回调函数中
红色为主,不太好看

//左侧图标多彩
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#ff3300","#ff3399","#54d100","#9900cc","#0033ff","#FF6699","#FF33FF","#ff8100","#33CC00","#FF1493","#8A2BE2","#8B3E2F","#00CC33"];
leftHeader.forEach(
    tag=>{
        tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];
        tag.style.color=tagsColor
    }
);    
// 右侧彩色标签云
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#0089ff", "#00c919", "#ff4747", "#c052ff", "#ff8939","#ff1200","#ff3399","#ffde00","#6000ff"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}
$(function(){
    $("#PageLoading").fadeOut(400);
    $("#body").css('overflow','');
});


博主文字介绍动态化

将代码里的 这是我的介绍文字内容修改成需要展示的文字内容即可,顺便那个❤也是可以改的。 将以下代码放到 主题后台-外观-设置外观-初级设置-博主的介绍内即可

<span class="text-muted text-xs block"><div id="chakhsu"></div>
<script>
var chakhsu = function(r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() + 33)
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(), l.style.color = t(), n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) :
"forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- :
(c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI =
(c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ?
Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
}
/*以下内容自定义修改*/
var l = "❤",
o = ["这是我的介绍"].map(function(r) {
return r + ""
}),
a = 2,
g = 1,
s = 5,
d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)",
"rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)",
"rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)",
"rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"
],
c = {
text: "",
prefixP: -s,
skillI: 0,
skillP: 0,
direction: "forward",
delay: a,
step: g
};
i()
};
chakhsu(document.getElementById('chakhsu'));
</script>
</span>


Typecho开启Gzip加速

Typecho开启Gzip加速

找到Typecho安装目录中的config.inc.php文件,添加一行代码即可。
/* 开启gzip压缩 */
ob_start('ob_gzhandler');


handsome实现评论一键打卡、赞、踩功能

handsome实现评论一键打卡、赞、踩功能
在handsome/component/comment.php中替换成如下内容

<div class="comment-form-comment form-group">
    <label for="comment"><?php _me("评论") ?>
        <span class="required text-danger">*</span>
    </label>
    <span class="required text-danger">(请使用真实邮箱地址,方便及时接收评论回复!)</span>
    <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?>
    </textarea>
    <div class="OwO padder-v-sm" style="display: inline;" ></div>
    <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();"><div class="OwO-logo"><span class="smile-icons"><i class="iconfont icon-daohanglan-01"></i></span><span class="OwOlogotext">打卡</span></div></div>
    <div class="OwO" title="语录" style="display: inline;" onclick="javascript:SIMPALED.Editor.yulu();"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">语录</span></div></div>
    <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
    <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
                                
    <?php $options = mget(); if (in_array('ajaxComment', Utils::checkArray( $options->featuresetup))): ?>                        
    <div class="secret_comment" id="secret_comment" data-toggle="tooltip" data-original-title="<?php _me("开启该功能,您的评论仅作者和评论双方可见") ?>">
        <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
            <div class="secret_comment_check">
                <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                    <input type="checkbox" id="secret_comment_checkbox">
                    <i></i>
                </label>
            </div>
    </div>
    <?php endif; ?>
</div>

在后台 --> 设置外观 --> 开发者设置 --> 自定义JavaScript 加入以下代码:

<!--评论 打卡、赞、踩 功能-->
window.SIMPALED = {}; // 创建全局对象 SIMPALED,用于存放编辑器功能

// ... (existing code)

// 定义一个函数 a,用于在文本框中插入文字
function a(a, b, c) {
  if (document.selection) {
    a.focus();
    sel = document.selection.createRange();
    c ? (sel.text = b + sel.text + c) : (sel.text = b);
    a.focus();
  } else if (a.selectionStart || "0" == a.selectionStart) {
    var l = a.selectionStart;
    var m = a.selectionEnd;
    var n = m;
    c
      ? (a.value =
          a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length))
      : (a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length));
    c ? (n += b.length + c.length) : (n += b.length - m + l);
    l == m && c && (n -= c.length);
    a.focus();
    a.selectionStart = n;
    a.selectionEnd = n;
  } else {
    a.value += b + c;
    a.focus();
  }
}

window.SIMPALED.Editor = {
 daka: function() {
    var b = new Date().toLocaleTimeString();
    var c = document.getElementById("comment") || 0;
    a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~<br>");

    // 将光标移到文本最后
    if (c.setSelectionRange) {
      var len = c.value.length;
      c.setSelectionRange(len, len);
      c.focus();
    } else if (c.createTextRange) {
      var range = c.createTextRange();
      range.collapse(false);
      range.select();
      c.focus();
    }
  },

  zan: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 这篇文章展现了作者深邃的思想和独特的观点,令人赞叹不已。 ::aru:proud::  <br>",
      " 文章中的优美语言和精彩描写让人感受到一种心灵的震撼和触动,实在值得赞美。 ::aru:proud::  <br>",
      " 作者以敏锐的洞察力和真挚的情感,将文字融为一体,这种写作技巧令人赞赏。::aru:proud::  <br>",
      " 这篇文章展现了作者的才华和学识,无不让人对其赞美有加。 ::aru:proud::  <br>",
      " 文章中的感人故事和深刻的寓意令人深深地感动和赞叹。::aru:proud::  <br> ",
      " 作者的文字流畅而富有节奏感,令人为之倾倒,实在是一篇令人赞美的佳作。 ::aru:proud::  <br>",
      " 文章中的深邃思考和清晰逻辑令人对作者的才华赞赏不已。 ::aru:proud::  <br>",
      " 这篇文章的独到见解和新颖观点,让人对作者的创意赞美有加。 ::aru:proud::  <br>",
      " 作者运用生动的比喻和细腻的描写,让读者仿佛身临其境,实在是一种令人赞美的写作艺术。 ::aru:proud::  <br>",
      " 这篇文章的深情笔触和真挚感受让人深深感叹,实在是一篇值得赞美的美文。 ::aru:proud::  <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
  cai: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 我是来替大家批评博主的,我是来批评的,这篇文章的结构有点混乱,需要更好地组织和展开内容。博主多多像我学习啊!::aru:spit:: <br>",
      " 我是来替大家批评博主的,作者的表达能力有待提高,有些地方表述不够清晰,读者可能会感到困惑。博主多多像我学习啊! ::aru:spit::  <br>",
      " 我是来替大家批评博主的,文章的语法错误较多,建议仔细检查并进行修改。博主多多像我学习啊! ::aru:spit:: <br>",
      " 我是来替大家批评博主的,内容有些空洞,需要更多具体的例子或细节来支撑观点。博主多多像我学习啊!::aru:spit:: <br>",
      " 我是来替大家批评博主的,文章缺乏逻辑,有些段落之间的衔接不够自然。博主多多像我学习啊! ::aru:spit:: <br>",
      " 我是来替大家批评博主的,作者的观点没有充分论证,需要更多的证据和理由来支持主张。博主多多像我学习啊! ::aru:spit::  <br>",
      " 我是来替大家批评博主的,文章中出现了一些拼写错误和用词不当的情况,建议进行仔细校对。博主多多像我学习啊! ::aru:spit:: <br>",
      " 我是来替大家批评博主的,语言表达过于简单,可以尝试使用更丰富的词汇和句式来提升文章质量。博主多多像我学习啊!::aru:spit::  <br>",
      " 我是来替大家批评博主的,这篇文章的主题不够突出,需要更好地明确中心思想。博主多多像我学习啊! ::aru:spit:: <br>",
      " 我是来替大家批评博主的,文章缺乏吸引人的开头,建议引入更有趣的故事或引语来吸引读者注意。博主多多像我学习啊! ::aru:spit:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
  yulu: function() {
    var c = document.getElementById("comment") || 0;
    var yuluResponses = [
      " 有你在的日子才是我的日常。 ::aru:nomatter:: <br>",
      " 夹在我女友与前女友与青梅竹马间的果然是修罗场! ::aru:nomatter:: <br>",
      " 既然如此,就再努力一次吧。别在这里愁眉不展,也不要再自欺欺人,重新来过! ::aru:nomatter:: <br>",
      " 比自己,比梦想更重要的东西永远都存在着... ::aru:nomatter:: <br>",
      " 嘛,那又怎么样呢? ::aru:nomatter:: <br>",
      " 自身不先改变的话,一切都不会改变。 ::aru:nomatter:: <br>",
      " 比起有一百个朋友,不如有个比一百人还要重要的真心朋友。 ::aru:nomatter:: <br>",
      " 我有在反省,但我不后悔。 ::aru:nomatter:: <br>",
      " 要超越过去与悲伤,用坚强和笑容去开拓明天。 ::aru:nomatter:: <br>",
      " 男人许下的诺言就一定要遵守。 ::aru:nomatter:: <br>",
      " 没有回忆就去创造回忆,没有道路就去开辟道路。 ::aru:nomatter:: <br>",
      " 我敬你是条汉子! ::aru:nomatter:: <br>",
      " 不相信自己的人,连努力的价值都没有。 ::aru:nomatter:: <br>",
      " 微风摇曳着窗帘,夕阳斜射入教室,在那里鼓起勇气告白的少年。即使现在也能清晰地回想起她的声音「当朋友,不行吗?」 ::aru:nomatter:: <br>",
      " 就算是沉落地面的太阳,只要夜晚过了一定会再度升起,不管有什么痛苦或难过的事,跟今天截然不同的明天也一定会到来。 ::aru:nomatter:: <br>",
      " 我的腿让我停下,可是心却不允许我那么做。 ::aru:nomatter:: <br>",
      " 生活就像超级女生,走到最后的都是纯爷们。 ::aru:nomatter:: <br>",
      " 我要拼,装上假牙也要拼! ::aru:nomatter:: <br>",
      " 想要成为无论多么悲伤的时候,也能够漂亮微笑的人吧。 ::aru:nomatter:: <br>",
      " 人们只是用好人来称呼对自己有用的人而以,不存在对所有人都有用的人。 ::aru:nomatter:: <br>",
      " 烈焰中舞动的火花,将赐予邪恶异性交往以天罚。 ::aru:nomatter:: <br>",
      " 无论乌云有多浓厚,星星也一定还在,只是暂时看不到了而已。 ::aru:nomatter:: <br>",
      " 不相信人咬不到肚脐的,咬破肚脐去死如何? ::aru:nomatter:: <br>",
      " 人一生会遇到约万人,两个人相爱的概率是.。所以你不爱我,我不怪你。 ::aru:nomatter:: <br>",
      " 不管看到什么样的过去,都请不要迷失自己,不管你变成什么样子,我都是你的同伴。 ::aru:nomatter:: <br>",
      " 心,可是很重的。 ::aru:nomatter:: <br>",
      " 我爱上的人,称我为怪叔叔 ::aru:nomatter:: <br>",
      " 慕君之心,至死方休。 ::aru:nomatter:: <br>",
      " 虚伪的眼泪,会伤害别人,虚伪的笑容,会伤害自己。 ::aru:nomatter:: <br>",
      " 若隐若现才是艺术! ::aru:nomatter:: <br>",
      " 生我何用?不能欢笑。灭我何用?不减狂骄。 ::aru:nomatter:: <br>",
      " 就是因为你不好,才要留在你身边,给你幸福。 ::aru:nomatter:: <br>",
      " 呐,我们好像是,被宇宙和地球拆散的恋人似的。 ::aru:nomatter:: <br>",
      " 你会梦游,我会磨牙,我们晚上一起去吓人吧! ::aru:nomatter:: <br>",
      " 或许只需一滴露水,便能守护这绽放的花朵。 ::aru:nomatter:: <br>",
      " 自己永远是孤单的,但你可以让其他人变得不孤单。 ::aru:nomatter:: <br>",
      " 和哥哥的便当比起来夜空的薯片就像大便一样!只会给我大便的大便夜空是笨蛋~笨蛋~ ::aru:nomatter:: <br>",
      " 我手中的魔法,是守护挚爱的力量,是坚定这个信念所必须的力量,我一定会拯救你的,无论在何时、何地。 ::aru:nomatter:: <br>",
      " 要改变别人的心真是件很难办的事,不过改变自己要容易一点。 ::aru:nomatter:: <br>",
      " 风筝的线你随时可以放开,只是别盼望我会回来。 ::aru:nomatter:: <br>",
      " 与你的生命等价的东西,这个世界上根本没有。 ::aru:nomatter:: <br>",
      " 君子可寓意于物,但不可留意于物。 ::aru:nomatter:: <br>",
      " 最好的感觉,是有人懂你的欲言又止。 ::aru:nomatter:: <br>",
      " 看似美好的东西,往往藏着陷阱。 ::aru:nomatter:: <br>",
      " 爱,其实很简单,困难的是去接受它。 ::aru:nomatter:: <br>",
      " 喜欢大胸只是本能,喜欢贫乳才是审美。 ::aru:nomatter:: <br>",
      " 二次元什么的我本来是不感冒的,直到我的膝盖中了一箭。 ::aru:nomatter:: <br>",
      " 你才是⑨!你全家都是⑨! ::aru:nomatter:: <br>",
      " 努力是不会背叛自己的,虽然梦想有时会背叛自己。 ::aru:nomatter:: <br>",
      " 面对就好,去经历就好。 ::aru:nomatter:: <br>",
      " 我从小就害怕虫子 ::aru:nomatter:: <br>",
      " 做不到的话,不过就是一死 。但是,赢了就能活下去,要是不战斗就赢不了。 ::aru:nomatter:: <br>",
      " 既然认准这条路,何必去打听要走多久。 ::aru:nomatter:: <br>",
      " 研表究明,汉字的序顺并不定一能影阅响读,比如当你看完这句话后,才发这现里的字全是都乱的。 ::aru:nomatter:: <br>",
      " 少年心意,一如明月松间的青石流水,那些年里看到了,却不懂。 ::aru:nomatter:: <br>",
      " 明明只是活着,哀伤却无处不在⋯⋯ ::aru:nomatter:: <br>",
      " 少罗嗦,你还不如虫子呢! ::aru:nomatter:: <br>",
      " 天空是连着的,如果我们也能各自发光的话,无论距离有多远,都能看到彼此努力的身影。 ::aru:nomatter:: <br>",
      " 别人恋爱不成功,你连暗恋都不成功! ::aru:nomatter:: <br>",
      // // 添加更多额外的语录内容
    ];

    var randomIndex = Math.floor(Math.random() * yuluResponses.length);
    var randomResponse = yuluResponses[randomIndex];
    a(c, randomResponse);
  },
};

左侧彩色导航

左侧彩色导航
自定义 JavaScript 和pjax回调添加下面代码

<!--左侧彩色图标--> 
  let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#7887EB","#ABDEF3", "#6CC3E8", "#86DEF3", "#7887EB", "#9BA8F5","#7988EC","#B3BCF5","#ABDEF3","#B3BCD7","#91D7F3","#7988EC","#9CD2E9","#9BA8F5","#B3BCF5"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});


右侧标签云

右侧标签云
自定义 JavaScript 和pjax回调添加下面代码

 <!--淡蓝标签云--> 
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a"); let colorArr = ["#ABB6F5", "#6B7CEB", "#86D2F3", "#5DBDE7", "#A3DBF3", "#ADD8E6"]; tags.forEach(tag => {     tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];     tag.style.backgroundColor = tagsColor; });  

左上角fps显示

左上角fps显示
自定义 JavaScript 和pjax回调添加下面代码

$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
var e,pe,pid,fps,last,offset,step,appendFps;

fps = 0;
last = Date.now();
step = function(){
offset = Date.now() - last;
fps += 1;
if( offset >= 1000 ){
last += offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps+'FPS');
$('#fps').html(fps+'FPS');
};
step();
})();
 

CSS修改

CSS修改
将以下代码添加至后台-开发者设置-自定义CSS。

/*手机不显示标签云*/
@media (max-width:767px) {
    #tag_cloud,#tag_cloud a,#tag_cloud-post,#tag_cloud-post a {
        display: none;
    }
}
/*标题居中*/
header.bg-light.lter.wrapper-md {
    text-align: center;
}
/*小字体背景色右侧博客信息*/
.badge {
    background-color: #ABB6F5;
}
/* 非盒子模式页面宽度 */
.no-container #post-panel, .no-container .blog-posts {
    max-width: 90%;
}
/*标签云整齐排列*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}
/*头像旋转*/
.img-circle {
    border-radius: 80%;
    animation: light 5s ease-in-out infinite;
    transition: 0.5s;
}
.img-circle:hover {
    transform: scale(1.15) rotate(360deg);
}
.img-square {
    border-radius: 80%;
    animation: light 5s ease-in-out infinite;
    transition: 0.5s;
}
.img-square:hover {
    transform: rotate(360deg);
}


首页图片放大

首页图片放大

/**首页图片放大**/
.item-thumb {
    transition: 0.5s;
    transform: scale(1.0);
}
.item-thumb:hover {
    transition: 0.5s;
    transform: scale(1.06);
}


文章end标识

文章end标识

文章end标识
在模板文件 post.php内添加以下代码,建议在83行广告输出结束后添加。

<!--内容结束分割线-->
<div class="tt-fenge-end">
    <span>End</span>
</div>
<!--/ 内容结束分割线-->
在后台 自定义css中添加如下代码
/*文章正文下的结束End分割线样式*/
.tt-fenge-end{border-top: 2px dotted #8e8e8e96;margin: 100px 0px 50px;text-align: center;width: 100%;line-height: 0.1em;}
.tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 5px 15px;top: -14px;border-radius: 20px;font-size: 12px;}
/*深色模式下文章正文下的结束End分割线颜色*/
html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}


自定义海浪背景

自定义海浪背景

添加至后台主题设置-开发者设置-自定义CSS
/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } 
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } 
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } 
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } 
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } 
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }
添加至后台主题设置-开发者设置-自定义网站头部代码
<div id="wavesDIV" style="display: block;">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
                <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
            </g>
        </svg>
    </div>


背景添加冒泡动画

背景添加冒泡动画

<!--背景添加冒泡动画-->
   <div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>

说明

id: '',                           //容器ID
num: 100,                        // 个数
start_probability: 0.1,          // 如果数量小于num,有这些几率添加一个新的
radius_min: 1,                   // 初始半径最小值
radius_max: 2,                   // 初始半径最大值
radius_add_min: .3,               // 半径增加最小值
radius_add_max: .5,               // 半径增加最大值
opacity_min: 0.3,                 // 初始透明度最小值
opacity_max: 0.5,                // 初始透明度最大值
opacity_prev_min: .003,            // 透明度递减值最小值
opacity_prev_max: .005,            // 透明度递减值最大值
light_min: 40,                 // 颜色亮度最小值
light_max: 70,                 // 颜色亮度最大值
is_same_color: false,          //泡泡颜色是否相同
background:"#f1f3f4"           //背景颜色


文章头图放大

文章头图放大

.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

加载耗时及访问总量字数统计

加载耗时及访问总量字数统计

在主题的functions.php文件中添加以下代码
//字数统计
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}
/*访问总量*/
     function theAllViews(){
             $db = Typecho_Db::get();
             $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
                 echo number_format($row[0]['SUM(VIEWS)']);
     }
//加载耗时
    function timer_start() {
        global $timestart;
        $mtime     = explode( ' ', microtime() );
        $timestart = $mtime[1] + $mtime[0];
        return true;
    }
    timer_start();
    function timer_stop( $display = 0, $precision = 3 ) {
        global $timestart, $timeend;
        $mtime     = explode( ' ', microtime() );
        $timeend   = $mtime[1] + $mtime[0];
        $timetotal = number_format( $timeend - $timestart, $precision );
        $r         = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
        if ( $display ) {
            echo $r;
        }
        return $r;
    }
然后在/usr/themes/handsome/component/sidebar.php中添加以下代码
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="edit"></i></span> <span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="user"></i></span> <span class="badge pull-right"><?php echo theAllViews(); ?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="clock"></i></span> <span class="badge pull-right"><?php echo timer_stop(); ?></span><?php _me("加载耗时") ?></li>

正文结束添加版权信息

正文结束添加版权信息
post添加

               <!--版权声明开始-->
              <div class="entry-content l-h-2x">
              <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
              <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
           </div>
           <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
           <span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
           <span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
           <span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
           <span>版权说明:若无注明,本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span>
          </div>
       </div>
              <!--版权声明结束-->


文章中添加网页

文章中添加网页

<iframe align="center" width="100%" height="740px" src="链接地址"  frameborder="no" border="0"  scrolling="no" marginwidth="0" marginheight="0" ></iframe>


修改右侧缩略图

修改右侧缩略图

路径handsome/functions_mine

2.1 找到这行代码,并把jpg,修改为svg
$random = STATIC_PATH . 'img/sj2/' . $randomNum[$index] . '.svg';


首页list模糊显示

首页list模糊显示

libs/content.php中修改
添加内容:

<div class="tt-blur-img" style="background-image:url($parameterArray[imgSrc])" ></div>

                    $html .= <<<EOF
<div class="panel-small single-post box-shadow-wrap-normal tt-small-blur">
    <div class="index-post-img-small post-feature index-img-small tt-left-box">
        <a href="{$parameterArray['linkUrl']}">
            <div class="item-thumb-small lazy tt-left-img">
            <img $img class="post-pic lazy">
</div>
        </a>
    </div>
XXXX这里
EOF;

添加自定义css

/*首页list模糊显示*/
.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#8abcd1;color:#fff;}
.tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);}
.tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);}
.tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;}
.tt-small-blur .text-title{color:inherit;}
.tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;}
.tt-small-blur .text-muted{color:inherit;}
.tt-small-blur .post-meta {padding: 30px 30px 15px 30px;}
.post-item-foot {background: #eeeeee52;}
html.theme-dark .text-muted {
    color: #eeeeeed6!important;
}
html.theme-dark .text-title {
    color: #ffffffad!important;
}
@media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}}
@media (max-width:500px){.tt-small-blur .summary{display:none;}}
@media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}}
@media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}


修改字体

选择字体,然后去字体转换把 otf、ttf转换成 woff格式。
将转换成功后的字体上传至网站目录中,默认字体目录是 /usr/themes/handsome/assets/fonts文件夹里。
前往 外观设置-开发者设置-自定义css中添加以下代码

/*自定义字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(填写字体所在的位置) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium} body {font- family: HarmonyOS!important;}


添加浏览器UA标识


在comment你想要的位置加入

<!--客户端ua-->
<span style="color:#939393;margin-left: 0px;" class="comment-ua">
   <?php getOs($comments->agent); ?>
    <?php getBrowser($comments->agent); ?>
 </span>

在function中添加getos 和 getbrowser

// 获取浏览器信息

function getBrowser($agent)
{
    if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) {
        $outputer = '<i class="ua-icon icon-ie" data-toggle="tooltip" data-original-title="IE"></i>&nbsp;&nbsp;IE';
    } else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) {
      $str1 = explode('Firefox/', $regs[0]);
$FireFox_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-firefox" data-toggle="tooltip" data-original-title="firefox"></i>&nbsp;&nbsp;FireFox';
    } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) {
      $str1 = explode('Maxthon/', $agent);
$Maxthon_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-edge" data-toggle="tooltip" data-original-title="Edge"></i>&nbsp;&nbsp;Edge';
    } else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-360" data-toggle="tooltip" data-original-title="360极速浏览器"></i>&nbsp;&nbsp;360极速浏览器';
    } else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) {
        $str1 = explode('Edge/', $regs[0]);
$Edge_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-edge" data-toggle="tooltip" data-original-title="Edge"></i>&nbsp;&nbsp;Edge';
    } else if (preg_match('/UC/i', $agent)) {
              $str1 = explode('rowser/',  $agent);
$UCBrowser_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-uc" data-toggle="tooltip" data-original-title="UC浏览器"></i>&nbsp;&nbsp;UC浏览器';
    }  else if (preg_match('/QQ/i', $agent, $regs)||preg_match('/QQBrowser\/([^\s]+)/i', $agent, $regs)) {
                  $str1 = explode('rowser/',  $agent);
$QQ_vern = explode('.', $str1[1]);
        $outputer = '<i class= "ua-icon icon-qq" data-toggle="tooltip" data-original-title="QQ浏览器"></i>&nbsp;&nbsp;QQ浏览器';
    } else if (preg_match('/UBrowser/i', $agent, $regs)) {
              $str1 = explode('rowser/',  $agent);
$UCBrowser_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-uc" data-toggle="tooltip" data-original-title="UC浏览器"></i>&nbsp;&nbsp;UC浏览器';
    }  else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
        $outputer = '<i class= "ua-icon icon-opera" data-toggle="tooltip" data-original-title="Opera"></i>&nbsp;&nbsp;Opera';
    } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Chrome/', $agent);
$chrome_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-chrome"  data-toggle="tooltip" data-original-title="Chrome"></i>&nbsp;&nbsp;Chrome';
    } else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) {
         $str1 = explode('Version/',  $agent);
$safari_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-safari" data-toggle="tooltip" data-original-title="Safari"></i>&nbsp;&nbsp;Safari';
    } else{
        $outputer = '<i class="ua-icon icon-chrome" data-toggle="tooltip" data-original-title="Chrome"></i>&nbsp;&nbsp;Chrome';
    }
    echo $outputer;
}
// 获取操作系统信息
function getOs($agent)
{
     $os = false;
 
    if (preg_match('/win/i', $agent)) {
        if (preg_match('/nt 6.0/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class= "ua-icon icon-win1"  data-toggle="tooltip" data-original-title="Win Vista"></i>&nbsp;&nbsp;Win Vista&nbsp;/&nbsp;';
        } else if (preg_match('/nt 6.1/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class= "ua-icon icon-win1"  data-toggle="tooltip" data-original-title="Win 7"></i>&nbsp;&nbsp;Win 7&nbsp;/&nbsp;';
        } else if (preg_match('/nt 6.2/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-win2" data-toggle="tooltip" data-original-title="Win 8"></i>&nbsp;&nbsp;Win 8&nbsp;/&nbsp;';
        } else if(preg_match('/nt 6.3/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class= "ua-icon icon-win2" data-toggle="tooltip" data-original-title="Win 8.1"></i>&nbsp;&nbsp;Win 8.1&nbsp;/&nbsp;';
        } else if(preg_match('/nt 5.1/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-win1" data-toggle="tooltip" data-original-title="Win XP"></i>&nbsp;&nbsp;Win XP&nbsp;/&nbsp;';
        } else if (preg_match('/nt 10.0/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-win2" data-toggle="tooltip" data-original-title="Win 10"></i>&nbsp;&nbsp;Win 10&nbsp;/&nbsp;';
        } else if (preg_match('/nt 13.0/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-win2" data-toggle="tooltip" data-original-title="Win 11"></i>&nbsp;&nbsp;Win 11&nbsp;/&nbsp;';
        } else{
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-win2" data-toggle="tooltip" data-original-title="Win x64"></i>&nbsp;&nbsp;Win X64&nbsp;/&nbsp;';
        }
    } else if (preg_match('/android/i', $agent)) {
    if (preg_match('/android 9/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-android"  data-toggle="tooltip" data-original-title="Android"></i>&nbsp;&nbsp;Android Pie&nbsp;/&nbsp;';
        }
    else if (preg_match('/android 8/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-android"  data-toggle="tooltip" data-original-title="Android"></i>&nbsp;&nbsp;Android Oreo&nbsp;/&nbsp;';
        }
    else{
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-android"  data-toggle="tooltip" data-original-title="Android"></i>&nbsp;&nbsp;Android&nbsp;/&nbsp;';
    }
    }
    else if (preg_match('/ubuntu/i', $agent)) {
        $os = '&nbsp;&nbsp;<i class="ua-icon icon-ubuntu"  data-toggle="tooltip" data-original-title="Ubuntu"></i>&nbsp;&nbsp;Ubuntu&nbsp;/&nbsp;';
    } else if (preg_match('/linux/i', $agent)) {
        $os = '&nbsp;&nbsp;<i class= "ua-icon icon-linux" data-toggle="tooltip" data-original-title="Linux"></i>&nbsp;&nbsp;Linux&nbsp;/&nbsp;';
    } else if (preg_match('/iPhone/i', $agent)) {
        $os = '&nbsp;&nbsp;<i class="ua-icon icon-apple" data-toggle="tooltip" data-original-title="iPhone"></i>&nbsp;&nbsp;iPhone&nbsp;/&nbsp;';
    } else if (preg_match('/mac/i', $agent)) {
        $os = '&nbsp;&nbsp;<i class="ua-icon icon-mac" data-toggle="tooltip" data-original-title="MacOS"></i>&nbsp;&nbsp;MacOS&nbsp;/&nbsp;';
    }else if (preg_match('/fusion/i', $agent)) {
        $os = '&nbsp;&nbsp;<i class="ua-icon icon-android" data-toggle="tooltip" data-original-title="Android"></i>&nbsp;&nbsp;Android&nbsp;/&nbsp;';
    } else {
        $os = '&nbsp;&nbsp;<i class="ua-icon icon-linux" data-toggle="tooltip" data-original-title="Linux"></i>&nbsp;&nbsp;Linux&nbsp;/&nbsp;';
    }
    echo $os;
}


修改评论时间及归属地


在comment中取消原本时间显示,添加如下,在typecho文件夹中添加qqwry纯真数据库,可能需要定期更新

<a href="#<?php $comments->theId()?>"><time class="format_time text-muted text-xs block m-t-xs" pubdate="pubdate" datetime="<?php $comments->date('c'); ?>"><?php get_diff_time(date('Y-m-d H:i:s' , $comments->created))//$comments->date('Y-m-d H:i'); ?> · 来自<?php echo get_city(convertips($comments->ip));?></time></a>

在function中添加如下函数

/**
* diff时间
* 
*/
function get_diff_time($created_time) {    
        $date1 = time();
        $date2 =strtotime($created_time);
        $diff=$date1-$date2;    
        $years = floor($diff / (365*24*60*60));
        $months = floor(($diff - $years * 365*60*60*24) / (30*60*60*24));
        $days = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24));
        $hours = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24 - $days*60*60*24)/ (60*60));
        $mins = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24 - $days*60*60*24 - $hours*60*60)/ (60));
        $secends = floor($diff - $years * 365*60*60*24 - $months*30*60*60*24 - $days*60*60*24 - $hours*60*60 - $mins*60);      
        if ($years > 0){
            echo "发布于 ".$years."年前";
        } elseif ($months > 0){
            echo "发布于 ".$months."月前";
        } elseif ($days > 0){
            echo "发布于 ".$days."日前";
        } elseif ($hours > 0){
            echo "发布于 ".$hours."小时前";
        } elseif ($mins > 0){
            echo "发布于 ".$mins."分钟前";
        } elseif ($secends > 0){
            echo "发布于 ".$secends."秒前";
        }else{
            echo "发布于 1秒前";
        }
}
//从省市提取市
function get_city($addres){
    preg_match_all("/\省(.*?)\市/s",$addres,$city_name);
    $city=$city_name[1][0];
    if(!empty($city)){
        return $city;
    }else{
        return "仙女座γ星系";
    }
}
//使用ip-api查询
//https://www.svlik.com/t/ipapi/ip.php?ip=1.83.107.38&type=0
//获取IP的地址
function convertips($ip){  
  $ip1num = 0; 
  $ip2num = 0; 
  $ipAddr1 =""; 
  $ipAddr2 =""; 
  $dat_path = dirname(__FILE__).'/qqwry.dat';         
  if(!preg_match("/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/", $ip)) {  
    return 'IPV6无法获取归宿地';  
  }   
  if(!$fd = @fopen($dat_path, 'rb')){  
    return 'IP 数据库路径不正确';  
  }   
  $ip = explode('.', $ip);  
  $ipNum = $ip[0] * 16777216 + $ip[1] * 65536 + $ip[2] * 256 + $ip[3];   
  $DataBegin = fread($fd, 4);  
  $DataEnd = fread($fd, 4);  
  $ipbegin = implode('', unpack('L', $DataBegin));  
  if($ipbegin < 0) $ipbegin += pow(2, 32);  
    $ipend = implode('', unpack('L', $DataEnd));  
  if($ipend < 0) $ipend += pow(2, 32);  
    $ipAllNum = ($ipend - $ipbegin) / 7 + 1;  
  $BeginNum = 0;  
  $EndNum = $ipAllNum;   
  while($ip1num>$ipNum || $ip2num<$ipNum) {  
    $Middle= intval(($EndNum + $BeginNum) / 2);  
    fseek($fd, $ipbegin + 7 * $Middle);  
    $ipData1 = fread($fd, 4);  
    if(strlen($ipData1) < 4) {  
      fclose($fd);  
      return 'System Error';  
    } 
    $ip1num = implode('', unpack('L', $ipData1));  
    if($ip1num < 0) $ip1num += pow(2, 32);  
   
    if($ip1num > $ipNum) {  
      $EndNum = $Middle;  
      continue;  
    }  
    $DataSeek = fread($fd, 3);  
    if(strlen($DataSeek) < 3) {  
      fclose($fd);  
      return 'System Error';  
    }  
    $DataSeek = implode('', unpack('L', $DataSeek.chr(0)));  
    fseek($fd, $DataSeek);  
    $ipData2 = fread($fd, 4);  
    if(strlen($ipData2) < 4) {  
      fclose($fd);  
      return 'System Error';  
    }  
    $ip2num = implode('', unpack('L', $ipData2));  
    if($ip2num < 0) $ip2num += pow(2, 32);   
      if($ip2num < $ipNum) {  
        if($Middle == $BeginNum) {  
          fclose($fd);  
          return 'Unknown';  
        }  
        $BeginNum = $Middle;  
      }  
    }   
    $ipFlag = fread($fd, 1);  
    if($ipFlag == chr(1)) {  
      $ipSeek = fread($fd, 3);  
      if(strlen($ipSeek) < 3) {  
        fclose($fd);  
        return 'System Error';  
      }  
      $ipSeek = implode('', unpack('L', $ipSeek.chr(0)));  
      fseek($fd, $ipSeek);  
      $ipFlag = fread($fd, 1);  
    }  
    if($ipFlag == chr(2)) {  
      $AddrSeek = fread($fd, 3);  
      if(strlen($AddrSeek) < 3) {  
      fclose($fd);  
      return 'System Error';  
    }  
    $ipFlag = fread($fd, 1);  
    if($ipFlag == chr(2)) {  
      $AddrSeek2 = fread($fd, 3);  
      if(strlen($AddrSeek2) < 3) {  
        fclose($fd);  
        return 'System Error';  
      }  
      $AddrSeek2 = implode('', unpack('L', $AddrSeek2.chr(0)));  
      fseek($fd, $AddrSeek2);  
    } else {  
      fseek($fd, -1, SEEK_CUR);  
    }  
    while(($char = fread($fd, 1)) != chr(0))  
    $ipAddr2 .= $char;  
    $AddrSeek = implode('', unpack('L', $AddrSeek.chr(0)));  
    fseek($fd, $AddrSeek);  
    while(($char = fread($fd, 1)) != chr(0))  
    $ipAddr1 .= $char;  
  } else {  
    fseek($fd, -1, SEEK_CUR);  
    while(($char = fread($fd, 1)) != chr(0))  
    $ipAddr1 .= $char;  
    $ipFlag = fread($fd, 1);  
    if($ipFlag == chr(2)) {  
      $AddrSeek2 = fread($fd, 3);  
      if(strlen($AddrSeek2) < 3) {  
        fclose($fd);  
        return 'System Error';  
      }  
      $AddrSeek2 = implode('', unpack('L', $AddrSeek2.chr(0)));  
      fseek($fd, $AddrSeek2);  
    } else {  
      fseek($fd, -1, SEEK_CUR);  
    }  
    while(($char = fread($fd, 1)) != chr(0)){  
      $ipAddr2 .= $char;  
    }  
  }  
  fclose($fd);   
  if(preg_match('/http/i', $ipAddr2)) {  
    $ipAddr2 = '';  
  }  
  $ipaddr = "$ipAddr1 $ipAddr2";  
  $ipaddr = preg_replace('/CZ88.NET/is', '', $ipaddr);  
  $ipaddr = preg_replace('/^s*/is', '', $ipaddr);  
  $ipaddr = preg_replace('/s*$/is', '', $ipaddr);  
  if(preg_match('/http/i', $ipaddr) || $ipaddr == '') {  
    $ipaddr = '可能来自火星';  
  }
  $ipaddr = iconv('gbk', 'utf-8//IGNORE', $ipaddr); 
  return $ipaddr;  
}


修改鼠标效果

$("body").css("cursor","url('http://tpblogstatic.dsecret.com/normal.cur'), default");$("a").css("cursor","url('http://tpblogstatic.dsecret.com/link.cur'), pointer");


点击出现心心

!function (e,t,a) {function r() {for (var e =0;e < s.length;e++) {s[e].alpha <=0 ?(t.body.removeChild(s[e].el),s.splice(e,1)) :(s[e].y--,s[e].scale +=.004,s[e].alpha -=.013,s[e].el.style.cssText ="left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");}requestAnimationFrame(r)}function n() {var t ="function" ==typeof e.onclick &&e.onclick;e.onclick =function (e) {t &&t(),o(e)}}function o(e) {var a =t.createElement("div");a.className ="heart",s.push({el:a,x:e.clientX - 5,y:e.clientY - 5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(e) {var a =t.createElement("style");a.type ="text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText =e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 *Math.random()) + "," + ~~(255 *Math.random()) + "," + ~~(255 *Math.random()) + ")"}var s =[];e.requestAnimationFrame =e.requestAnimationFrame ||e.webkitRequestAnimationFrame ||e.mozRequestAnimationFrame ||e.oRequestAnimationFrame ||e.msRequestAnimationFrame ||function (e) {setTimeout(e,1e3 / 60)},i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),n(),r()}(window,document);


根据PC添加动态背景

根据PC添加动态背景
在head中判断PC,执行html

    <?php 
        //获取USER AGENT
        $agent = strtolower($_SERVER['HTTP_USER_AGENT']);
        //分析数据
        $is_pc = (strpos($agent, 'windows nt')) ? true : false;    
        if($is_pc){
        echo     "<div id='wavesDIV' style='display: block;'>
                    <svg class='waves' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 24 150 28' preserveAspectRatio='none' shape-rendering='auto'>
                        <defs>
                            <path id='gentle-wave' d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z'></path>
                        </defs>
                        <g class='parallax'>
                            <use xlink:href='#gentle-wave' x='48' y='-2' fill='rgba(125,165,191,0.3)'></use>
                            <use xlink:href='#gentle-wave' x='48' y='3' fill='rgba(125,165,191,0.5)'></use>
                            <use xlink:href='#gentle-wave' x='48' y='5' fill='rgba(125,165,191,0.7)'></use>
                            <use xlink:href='#gentle-wave' x='48' y='12' fill='rgba(125,165,191,1)'></use>
                        </g>
                    </svg>
                </div>";
        echo    "<div id=\"bubble\"></div>
      <script>class BGBubble{constructor(i){this.defaultOpts={id:\"\",num:150,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:\"#f1f3f4\"},\"[object Object]\"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(\${t?i:this.random(0,360)},100%,\${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement(\"canvas\"),this.ctx=this.canvas.getContext(\"2d\"),this.canvas.style.display=\"block\",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position=\"fixed\",this.canvas.style.top=\"0\",this.canvas.style.left=\"0\",this.canvas.style.zIndex=\"-1\",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble(\"bubble\");bubbleDemo.createCanvas(),bubbleDemo.start();</script>";
        }
    ?>

End
最后修改:2023 年 09 月 26 日
如果觉得我的文章对你有用,请随意赞赏