说明:博客用Handsome主题一段时间了,体验还不错,特别适合做个人博客,而博主基于原主题做了下小小的修改,使其更加好看点,鉴于经常有人问博主修改方法,这里就在博客里说一下,顺便也说一下博客没有使用的修改方案,给同样使用Handsome主题的做下参考。

一、网页标签获得/失去焦点时更改标题内容

后台设置外观-->开发者设置-->自定义JavaScript 加入

//网页标签获得/失去焦点时更改标题内容
var OriginTitile=document.title;var titleTime;document.addEventListener("visibilitychange",function(){if(document.hidden){OriginTitile=document.title;document.title="(●—●)喔哟,崩溃啦!";clearTimeout(titleTime)}else{document.title="(/≧▽≦/)咦!又好了!老猫博客";titleTime=setTimeout(function(){document.title=OriginTitile},2000)}});

二、首页文章版式圆角化

本项修改的是首页文章版式,包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS

#圆角大小可修改15px数值(别复制该行)
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}

三、首页文章图片获取焦点放大

本项修改的是首页文章图片,将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置 自定义CSS

#放大的时间和大小自行修改以下数值(别复制该行)
/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

四、首页头像转动并放大

本项修改的是首页头像,将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置 CSS

#转动快慢和头像大小自行修改数值(别复制该行)
/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

五、Typecho代码高亮插件Code Prettify

参照Typecho代码高亮插件Code Prettify

六、文章标题居中

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

七、首页文章版式阴影化

#阴影颜色修改rgba后面的值(别复制该行)
/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

#如果也想使盒子四周也有阴影,加上以下代码
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

八、爱国鼠标点击特效

将以下代码放在主题的handsome/component/footer.php中的</body>之前即可。

#字体自行修改
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

九、评论表情修改

详见 Handsome主题添加 “贴吧” 表情

十、心形点击特效

将以下代码添加至后台主题设置 自定义js

!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);

十一、下雪特效

将以下代码放在主题的handsome/component/footer.php中的</body>之前即可。

<script type="text/javascript" src="路径/snow.js" ></script>

以下为snow.js的所有内容,,请自行生成:

var snowStorm=(function(window,document){this.autoStart=true;this.excludeMobile=true;this.flakesMax=128;this.flakesMaxActive=64;this.animationInterval=50;this.useGPU=true;this.className=null;this.excludeMobile=true;this.flakeBottom=null;this.followMouse=false;this.snowColor='#fff';this.snowCharacter='&bull;';this.snowStick=true;this.targetElement=null;this.useMeltEffect=true;this.useTwinkleEffect=false;this.usePositionFixed=false;this.usePixelPosition=false;this.freezeOnBlur=true;this.flakeLeftOffset=0;this.flakeRightOffset=0;this.flakeWidth=8;this.flakeHeight=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var storm=this,features,isIE=navigator.userAgent.match(/msie/i),isIE6=navigator.userAgent.match(/msie 6/i),isMobile=navigator.userAgent.match(/mobile|opera m(ob|in)/i),isBackCompatIE=(isIE&&document.compatMode==='BackCompat'),noFixed=(isBackCompatIE||isIE6),screenX=null,screenX2=null,screenY=null,scrollY=null,docHeight=null,vRndX=null,vRndY=null,windOffset=1,windMultiplier=2,flakeTypes=6,fixedForEverything=false,targetElementIsRelative=false,opacitySupported=(function(){try{document.createElement('div').style.opacity='0.5';}catch(e){return false;}
return true;}()),didInit=false,docFrag=document.createDocumentFragment();features=(function(){var getAnimationFrame;function timeoutShim(callback){window.setTimeout(callback,1000/(storm.animationInterval||20));}
var _animationFrame=(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||timeoutShim);getAnimationFrame=_animationFrame?function(){return _animationFrame.apply(window,arguments);}:null;var testDiv;testDiv=document.createElement('div');function has(prop){var result=testDiv.style[prop];return(result!==undefined?prop:null);}
var localFeatures={transform:{ie:has('-ms-transform'),moz:has('MozTransform'),opera:has('OTransform'),webkit:has('webkitTransform'),w3:has('transform'),prop:null},getAnimationFrame:getAnimationFrame};localFeatures.transform.prop=(localFeatures.transform.w3||localFeatures.transform.moz||localFeatures.transform.webkit||localFeatures.transform.ie||localFeatures.transform.opera);testDiv=null;return localFeatures;}());this.timer=null;this.flakes=[];this.disabled=false;this.active=false;this.meltFrameCount=20;this.meltFrames=[];this.setXY=function(o,x,y){if(!o){return false;}
if(storm.usePixelPosition||targetElementIsRelative){o.style.left=(x-storm.flakeWidth)+'px';o.style.top=(y-storm.flakeHeight)+'px';}else if(noFixed){o.style.right=(100-(x/screenX*100))+'%';o.style.top=(Math.min(y,docHeight-storm.flakeHeight))+'px';}else{if(!storm.flakeBottom){o.style.right=(100-(x/screenX*100))+'%';o.style.bottom=(100-(y/screenY*100))+'%';}else{o.style.right=(100-(x/screenX*100))+'%';o.style.top=(Math.min(y,docHeight-storm.flakeHeight))+'px';}}};this.events=(function(){var old=(!window.addEventListener&&window.attachEvent),slice=Array.prototype.slice,evt={add:(old?'attachEvent':'addEventListener'),remove:(old?'detachEvent':'removeEventListener')};function getArgs(oArgs){var args=slice.call(oArgs),len=args.length;if(old){args[1]='on'+args[1];if(len>3){args.pop();}}else if(len===3){args.push(false);}
return args;}
function apply(args,sType){var element=args.shift(),method=[evt[sType]];if(old){element[method](args[0],args[1]);}else{element[method].apply(element,args);}}
function addEvent(){apply(getArgs(arguments),'add');}
function removeEvent(){apply(getArgs(arguments),'remove');}
return{add:addEvent,remove:removeEvent};}());function rnd(n,min){if(isNaN(min)){min=0;}
return(Math.random()*n)+min;}
function plusMinus(n){return(parseInt(rnd(2),10)===1?n*-1:n);}
this.randomizeWind=function(){var i;vRndX=plusMinus(rnd(storm.vMaxX,0.2));vRndY=rnd(storm.vMaxY,0.2);if(this.flakes){for(i=0;i<this.flakes.length;i++){if(this.flakes[i].active){this.flakes[i].setVelocities();}}}};this.scrollHandler=function(){var i;scrollY=(storm.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||(noFixed?document.body.scrollTop:0),10));if(isNaN(scrollY)){scrollY=0;}
if(!fixedForEverything&&!storm.flakeBottom&&storm.flakes){for(i=0;i<storm.flakes.length;i++){if(storm.flakes[i].active===0){storm.flakes[i].stick();}}}};this.resizeHandler=function(){if(window.innerWidth||window.innerHeight){screenX=window.innerWidth-16-storm.flakeRightOffset;screenY=(storm.flakeBottom||window.innerHeight);}else{screenX=(document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-storm.flakeRightOffset;screenY=storm.flakeBottom||document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight;}
docHeight=document.body.offsetHeight;screenX2=parseInt(screenX/2,10);};this.resizeHandlerAlt=function(){screenX=storm.targetElement.offsetWidth-storm.flakeRightOffset;screenY=storm.flakeBottom||storm.targetElement.offsetHeight;screenX2=parseInt(screenX/2,10);docHeight=document.body.offsetHeight;};this.freeze=function(){if(!storm.disabled){storm.disabled=1;}else{return false;}
storm.timer=null;};this.resume=function(){if(storm.disabled){storm.disabled=0;}else{return false;}
storm.timerInit();};this.toggleSnow=function(){if(!storm.flakes.length){storm.start();}else{storm.active=!storm.active;if(storm.active){storm.show();storm.resume();}else{storm.stop();storm.freeze();}}};this.stop=function(){var i;this.freeze();for(i=0;i<this.flakes.length;i++){this.flakes[i].o.style.display='none';}
storm.events.remove(window,'scroll',storm.scrollHandler);storm.events.remove(window,'resize',storm.resizeHandler);if(storm.freezeOnBlur){if(isIE){storm.events.remove(document,'focusout',storm.freeze);storm.events.remove(document,'focusin',storm.resume);}else{storm.events.remove(window,'blur',storm.freeze);storm.events.remove(window,'focus',storm.resume);}}};this.show=function(){var i;for(i=0;i<this.flakes.length;i++){this.flakes[i].o.style.display='block';}};this.SnowFlake=function(type,x,y){var s=this;this.type=type;this.x=x||parseInt(rnd(screenX-20),10);this.y=(!isNaN(y)?y:-rnd(screenY)-12);this.vX=null;this.vY=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type]||1;this.melting=false;this.meltFrameCount=storm.meltFrameCount;this.meltFrames=storm.meltFrames;this.meltFrame=0;this.twinkleFrame=0;this.active=1;this.fontSize=(10+(this.type/5)*10);this.o=document.createElement('div');this.o.innerHTML=storm.snowCharacter;if(storm.className){this.o.setAttribute('class',storm.className);}
this.o.style.color=storm.snowColor;this.o.style.position=(fixedForEverything?'fixed':'absolute');if(storm.useGPU&&features.transform.prop){this.o.style[features.transform.prop]='translate3d(0px, 0px, 0px)';}
this.o.style.width=storm.flakeWidth+'px';this.o.style.height=storm.flakeHeight+'px';this.o.style.fontFamily='arial,verdana';this.o.style.cursor='default';this.o.style.overflow='hidden';this.o.style.fontWeight='normal';this.o.style.zIndex=storm.zIndex;docFrag.appendChild(this.o);this.refresh=function(){if(isNaN(s.x)||isNaN(s.y)){return false;}
storm.setXY(s.o,s.x,s.y);};this.stick=function(){if(noFixed||(storm.targetElement!==document.documentElement&&storm.targetElement!==document.body)){s.o.style.top=(screenY+scrollY-storm.flakeHeight)+'px';}else if(storm.flakeBottom){s.o.style.top=storm.flakeBottom+'px';}else{s.o.style.display='none';s.o.style.bottom='0%';s.o.style.position='fixed';s.o.style.display='block';}};this.vCheck=function(){if(s.vX>=0&&s.vX<0.2){s.vX=0.2;}else if(s.vX<0&&s.vX>-0.2){s.vX=-0.2;}
if(s.vY>=0&&s.vY<0.2){s.vY=0.2;}};this.move=function(){var vX=s.vX*windOffset,yDiff;s.x+=vX;s.y+=(s.vY*s.vAmp);if(s.x>=screenX||screenX-s.x<storm.flakeWidth){s.x=0;}else if(vX<0&&s.x-storm.flakeLeftOffset<-storm.flakeWidth){s.x=screenX-storm.flakeWidth-1;}
s.refresh();yDiff=screenY+scrollY-s.y+storm.flakeHeight;if(yDiff<storm.flakeHeight){s.active=0;if(storm.snowStick){s.stick();}else{s.recycle();}}else{if(storm.useMeltEffect&&s.active&&s.type<3&&!s.melting&&Math.random()>0.998){s.melting=true;s.melt();}
if(storm.useTwinkleEffect){if(s.twinkleFrame<0){if(Math.random()>0.97){s.twinkleFrame=parseInt(Math.random()*8,10);}}else{s.twinkleFrame--;if(!opacitySupported){s.o.style.visibility=(s.twinkleFrame&&s.twinkleFrame%2===0?'hidden':'visible');}else{s.o.style.opacity=(s.twinkleFrame&&s.twinkleFrame%2===0?0:1);}}}}};this.animate=function(){s.move();};this.setVelocities=function(){s.vX=vRndX+rnd(storm.vMaxX*0.12,0.1);s.vY=vRndY+rnd(storm.vMaxY*0.12,0.1);};this.setOpacity=function(o,opacity){if(!opacitySupported){return false;}
o.style.opacity=opacity;};this.melt=function(){if(!storm.useMeltEffect||!s.melting){s.recycle();}else{if(s.meltFrame<s.meltFrameCount){s.setOpacity(s.o,s.meltFrames[s.meltFrame]);s.o.style.fontSize=s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';s.o.style.lineHeight=storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';s.meltFrame++;}else{s.recycle();}}};this.recycle=function(){s.o.style.display='none';s.o.style.position=(fixedForEverything?'fixed':'absolute');s.o.style.bottom='auto';s.setVelocities();s.vCheck();s.meltFrame=0;s.melting=false;s.setOpacity(s.o,1);s.o.style.padding='0px';s.o.style.margin='0px';s.o.style.fontSize=s.fontSize+'px';s.o.style.lineHeight=(storm.flakeHeight+2)+'px';s.o.style.textAlign='center';s.o.style.verticalAlign='baseline';s.x=parseInt(rnd(screenX-storm.flakeWidth-20),10);s.y=parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;s.refresh();s.o.style.display='block';s.active=1;};this.recycle();this.refresh();};this.snow=function(){var active=0,flake=null,i,j;for(i=0,j=storm.flakes.length;i<j;i++){if(storm.flakes[i].active===1){storm.flakes[i].move();active++;}
if(storm.flakes[i].melting){storm.flakes[i].melt();}}
if(active<storm.flakesMaxActive){flake=storm.flakes[parseInt(rnd(storm.flakes.length),10)];if(flake.active===0){flake.melting=true;}}
if(storm.timer){features.getAnimationFrame(storm.snow);}};this.mouseMove=function(e){if(!storm.followMouse){return true;}
var x=parseInt(e.clientX,10);if(x<screenX2){windOffset=-windMultiplier+(x/screenX2*windMultiplier);}else{x-=screenX2;windOffset=(x/screenX2)*windMultiplier;}};this.createSnow=function(limit,allowInactive){var i;for(i=0;i<limit;i++){storm.flakes[storm.flakes.length]=new storm.SnowFlake(parseInt(rnd(flakeTypes),10));if(allowInactive||i>storm.flakesMaxActive){storm.flakes[storm.flakes.length-1].active=-1;}}
storm.targetElement.appendChild(docFrag);};this.timerInit=function(){storm.timer=true;storm.snow();};this.init=function(){var i;for(i=0;i<storm.meltFrameCount;i++){storm.meltFrames.push(1-(i/storm.meltFrameCount));}
storm.randomizeWind();storm.createSnow(storm.flakesMax);storm.events.add(window,'resize',storm.resizeHandler);storm.events.add(window,'scroll',storm.scrollHandler);if(storm.freezeOnBlur){if(isIE){storm.events.add(document,'focusout',storm.freeze);storm.events.add(document,'focusin',storm.resume);}else{storm.events.add(window,'blur',storm.freeze);storm.events.add(window,'focus',storm.resume);}}
storm.resizeHandler();storm.scrollHandler();if(storm.followMouse){storm.events.add(isIE?document:window,'mousemove',storm.mouseMove);}
storm.animationInterval=Math.max(20,storm.animationInterval);storm.timerInit();};this.start=function(bFromOnLoad){if(!didInit){didInit=true;}else if(bFromOnLoad){return true;}
if(typeof storm.targetElement==='string'){var targetID=storm.targetElement;storm.targetElement=document.getElementById(targetID);if(!storm.targetElement){throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');}}
if(!storm.targetElement){storm.targetElement=(document.body||document.documentElement);}
if(storm.targetElement!==document.documentElement&&storm.targetElement!==document.body){storm.resizeHandler=storm.resizeHandlerAlt;storm.usePixelPosition=true;}
storm.resizeHandler();storm.usePositionFixed=(storm.usePositionFixed&&!noFixed&&!storm.flakeBottom);if(window.getComputedStyle){try{targetElementIsRelative=(window.getComputedStyle(storm.targetElement,null).getPropertyValue('position')==='relative');}catch(e){targetElementIsRelative=false;}}
fixedForEverything=storm.usePositionFixed;if(screenX&&screenY&&!storm.disabled){storm.init();storm.active=true;}};function doDelayedStart(){window.setTimeout(function(){storm.start(true);},20);storm.events.remove(isIE?document:window,'mousemove',doDelayedStart);}
function doStart(){if(!storm.excludeMobile||!isMobile){doDelayedStart();}
storm.events.remove(window,'load',doStart);}
if(storm.autoStart){storm.events.add(window,'load',doStart,false);}
return this;}(window,document));

十二、关于网易云音乐无法解析丨解决办法

这几天,打开博客发现网易云音乐总是播放失败并且提示“当前音乐地址无效”错误,这是Cookie引起的问题,这里提供一下解决策略

由于网易云音乐多次封禁 Meting 所使用的 Cookie,因此 Meting 将不再做 Cookie 的更新工作。

请用户、开发者自行采集 Cookie,使用 $api->cookie('string') 函数进行替换。

下面给出一点提示,自由发挥
第一种:

os=pc; osver=Microsoft-Windows-10-Professional-build-10586-64bit; appver=2.0.3.131777; channel=netease; __remember_me=true

第二种:

MUSIC_U=*****; buildver=1506310743; resolution=1920x1080; mobilename=MI5; osver=7.0.1; channel=coolapk; os=android; appver=4.2.0

第三种:

osver=%E7%89%88%E6%9C%AC%2010.13.3%EF%BC%88%E7%89%88%E5%8F%B7%2017D47%EF%BC%89; os=osx; appver=1.5.9; MUSIC_U=*****; channel=netease; 

Handsome主题默认采用的是第三种形式,改为第一种即可

打开/usr/themes/handsome/libs/Get.php 文件,将 $netease_cookie 变量的值改为

os=pc; osver=Microsoft-Windows-10-Professional-build-10586-64bit; appver=2.0.3.131777; channel=netease; __remember_me=true

感谢Xcnte大佬提供的解决办法

Last modification:May 14th, 2019 at 01:49 am
如果觉得我的文章对你有用,请随意赞赏