前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >个人博客美化教程

个人博客美化教程

作者头像
Blank.
发布2023-04-13 08:43:57
1K0
发布2023-04-13 08:43:57
举报
文章被收录于专栏:BlankBlank

教程持续更新

1.添加访客问候语

图片[1]-个人博客美化教程-我的美文分享
图片[1]-个人博客美化教程-我的美文分享

(放在页面任意位置,建议body底部)

代码语言:javascript
复制
<script>
    var myImage = document.getElementById("my-image1");
    if (myImage) {
      $(function() {
        var time = (new Date).getHours();
        var minute = (new Date).getMinutes();
        var msg = '';
        if (time === 0 && minute >= 0 && minute <= 59) { // 0:00-0:59
          msg = "你是夜猫子呀?这么晚还不睡觉,明天起的来嘛?";
        } else if (time === 1 && minute >= 0 && minute <= 59) { // 1:00-1:59
          msg = "午夜时分,您还没休息吗?";
        } else if (time >= 2 && time <= 4) { // 2:00-4:59
          msg = "深夜时分,注意保持身体健康哦~";
        } else if (time >= 5 && time <= 6) { // 5:00-6:59
          msg = "清晨好,早起的鸟儿有虫吃,新的一天开始啦~";
        } else if (time >= 7 && time <= 8) { // 7:00-8:59
          msg = "早上好!一日之计在于晨,美好的一天就要开始了!";
        } else if (time >= 9 && time <= 11) { // 9:00-11:59
          msg = "上午好!工作顺利嘛,不要久坐,多起来走动走动哦!";
        } else if (time >= 12 && time <= 12 && minute >= 0 && minute <= 59) { // 12:00-12:59
          msg = "午餐时间到啦!记得吃点营养的食物哦~";
        } else if (time >= 13 && time <= 13 && minute >= 0 && minute <= 59) { // 13:00-13:59
          msg = "午后的日子也很容易犯困呢~";
        } else if (time >= 14 && time <= 16) { // 14:00-16:59
          msg = "下午茶时间到了,喝杯茶放松一下吧!";
        } else if (time >= 17 && time <= 18) { // 17:00-18:59
          msg = "傍晚了!窗外夕阳的景色很美丽呢,最美不过夕阳红~";
        } else if (time >= 19 && time <= 20) { // 19:00-20:59
          msg = "晚餐时间到啦!吃好晚饭,愉快度过美好夜晚~";
        } else if (time >= 21 && time <= 22) { // 21:00-22:00
          msg = "晚上好!今天过得怎么样呢?";
        }else if (time >= 23 && time <= 23) { // 22:00-23:59
          msg = "已经这么晚了呀,早点休息吧,晚安~";
        }
        Qmsg.success(msg);
      });
    }
</script>

2.给网站的评论加个打字特效

(放在页面任意位置,建议body底部)

代码语言:javascript
复制
<script>
    (function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
    POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);
</script>

3.强制对网址进行301重定向,可用于http强制转https等

代码语言:javascript
复制
    <!--重定向-->
    <script>
            location.replace(`https:${location.href.substring(location.protocol.length)}`);
    </script>

4.禁用网址右键和F12

注意如果不是joe主题的使用时需要把Qmsq改为其它弹窗提示

代码语言:javascript
复制
<script>
    	document.addEventListener("contextmenu", function(e) {
    		e.preventDefault();
    		Qmsg.success("你干嘛哎呦~")
    	});
    	document.addEventListener("keydown", function(e) {
    	if (e.key === "F12") {
    			e.preventDefault();
    			Qmsg.success("你干嘛哎呦~")
    		}
    	});
    </script>

5.添加一个加载特效

图片[2]-个人博客美化教程-我的美文分享
图片[2]-个人博客美化教程-我的美文分享

建议放在需要引入的head中

代码语言:javascript
复制
<style>#Loadanimation{background-color:var(--background);height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px;}#Loadanimation-center{width:100%;height:100%;position:relative;}#Loadanimation-center-absolute{position:absolute;left:50%;top:50%;height:200px;width:200px;margin-top:-100px;margin-left:-100px;}.xccx_object{-moz-border-radius:50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%;border-radius:50% 50% 50% 50%;position:absolute;border-left:5px solid #87CEFA;border-right:5px solid #FFC0CB;border-top:5px solid transparent;border-bottom:5px solid transparent;-webkit-animation:animate 2.5s infinite;animation:animate 2.5s infinite;}#xccx_one{left:75px;top:75px;width:50px;height:50px;}#xccx_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}#xccx_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}#xccx_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}@-webkit-keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}@keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}</style><div id="Loadanimation" style="z-index:99999999999999999999999999999999999999999999999"><div id="Loadanimation-center"><div id="Loadanimation-center-absolute"><div class="xccx_object" id="xccx_four"></div><div class="xccx_object" id="xccx_three"></div><div class="xccx_object" id="xccx_two"></div><div class="xccx_object" id="xccx_one"></div></div></div></div><script>document.body.style.overflow="hidden",document.onreadystatechange=(()=>{"interactive"===document.readyState&&setTimeout(()=>{document.body.style.overflow="visible",$("#Loadanimation").fadeOut(540)},500)});</script>

6.添加网站logo扫光

图片[3]-个人博客美化教程-我的美文分享
图片[3]-个人博客美化教程-我的美文分享

(注意这个是joe主题的示例,如果是其它博客的需要将.joe_header__above-logo替换为自己主题logo的组件名词)

代码语言:javascript
复制
    <style>
{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.joe_header__above-logo:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
     </style>

7.添加网站点击特效

图片[4]-个人博客美化教程-我的美文分享
图片[4]-个人博客美化教程-我的美文分享

(将下方代码放在.js文件中,然后通过)下方示例引入到您的页面就好了

引用示例

代码语言:javascript
复制
<script src="你的.js文件路径"></script>

.js文件

代码语言:javascript
复制
"use strict";$(function(){function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}var i=Object.assign||function(t){for(var i=1;i<arguments.length;i++){var n=arguments[i];for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&(t[e]=n[e])}return t},n=function(){function t(t,i){for(var n=0;n<i.length;n++){var e=i[n];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(t,e.key,e)}}return function(i,n,e){return n&&t(i.prototype,n),e&&t(i,e),i}}(),e=function(){function e(n){var o=n.origin,r=n.speed,s=n.color,a=n.angle,h=n.context;t(this,e),this.origin=o,this.position=i({},this.origin),this.color=s,this.speed=r,this.angle=a,this.context=h,this.renderCount=0}return n(e,[{key:"draw",value:function(){this.context.fillStyle=this.color,this.context.beginPath(),this.context.arc(this.position.x,this.position.y,2,0,2*Math.PI),this.context.fill()}},{key:"move",value:function(){this.position.x=Math.sin(this.angle)*this.speed+this.position.x,this.position.y=Math.cos(this.angle)*this.speed+this.position.y+.3*this.renderCount,this.renderCount++}}]),e}(),o=function(){function i(n){var e=n.origin,o=n.context,r=n.circleCount,s=void 0===r?10:r,a=n.area;t(this,i),this.origin=e,this.context=o,this.circleCount=s,this.area=a,this.stop=!1,this.circles=[]}return n(i,[{key:"randomArray",value:function(t){var i=t.length;return t[Math.floor(i*Math.random())]}},{key:"randomColor",value:function(){var t=["8","9","A","B","C","D","E","F"];return"#"+this.randomArray(t)+this.randomArray(t)+this.randomArray(t)+this.randomArray(t)+this.randomArray(t)+this.randomArray(t)}},{key:"randomRange",value:function(t,i){return(i-t)*Math.random()+t}},{key:"init",value:function(){for(var t=0;t<this.circleCount;t++){var i=new e({context:this.context,origin:this.origin,color:this.randomColor(),angle:this.randomRange(Math.PI-1,Math.PI+1),speed:this.randomRange(1,6)});this.circles.push(i)}}},{key:"move",value:function(){var t=this;this.circles.forEach(function(i,n){if(i.position.x>t.area.width||i.position.y>t.area.height)return t.circles.splice(n,1);i.move()}),0==this.circles.length&&(this.stop=!0)}},{key:"draw",value:function(){this.circles.forEach(function(t){return t.draw()})}}]),i}();(new(function(){function i(){t(this,i),this.computerCanvas=document.createElement("canvas"),this.renderCanvas=document.createElement("canvas"),this.computerContext=this.computerCanvas.getContext("2d"),this.renderContext=this.renderCanvas.getContext("2d"),this.globalWidth=window.innerWidth,this.globalHeight=window.innerHeight,this.booms=[],this.running=!1}return n(i,[{key:"handleMouseDown",value:function(t){var i=new o({origin:{x:t.clientX,y:t.clientY},context:this.computerContext,area:{width:this.globalWidth,height:this.globalHeight}});i.init(),this.booms.push(i),this.running||this.run()}},{key:"handlePageHide",value:function(){this.booms=[],this.running=!1}},{key:"init",value:function(){var t=this.renderCanvas.style;t.position="fixed",t.top=t.left=0,t.zIndex="999999999999999999999999999999999999999999",t.pointerEvents="none",t.width=this.renderCanvas.width=this.computerCanvas.width=this.globalWidth,t.height=this.renderCanvas.height=this.computerCanvas.height=this.globalHeight,document.body.append(this.renderCanvas),window.addEventListener("mousedown",this.handleMouseDown.bind(this)),window.addEventListener("pagehide",this.handlePageHide.bind(this))}},{key:"run",value:function(){var t=this;if(this.running=!0,0==this.booms.length)return this.running=!1;requestAnimationFrame(this.run.bind(this)),this.computerContext.clearRect(0,0,this.globalWidth,this.globalHeight),this.renderContext.clearRect(0,0,this.globalWidth,this.globalHeight),this.booms.forEach(function(i,n){if(i.stop)return t.booms.splice(n,1);i.move(),i.draw()}),this.renderContext.drawImage(this.computerCanvas,0,0,this.globalWidth,this.globalHeight)}}]),i}())).init()});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档