MENU

Mirages主题的美化记录

January 23, 2020 • 默认分类阅读设置

点击页面彩色爱心特效

在网站的</body>前引入以下js代码

<script type="text/javascript">
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('!2(e,t,a){2 r(){1j(6 e=0;e<s.1d;e++)s[e].9<=0?(t.P.11(s[e].v),s.1h(e,1)):(s[e].y--,s[e].4+=.12,s[e].9-=.1c,s[e].v.O.N="M:"+s[e].x+"D;C:"+s[e].y+"D;1b:"+s[e].9+";b:4("+s[e].4+","+s[e].4+") 7(8);p:"+s[e].B+";z-1n:1o");u(r)}2 n(){6 t="2"==13 e.l&&e.l;e.l=2(e){t&&t(),o(e)}}2 o(e){6 a=t.A("1e");a.1f="3",s.1i({v:a,x:e.1r-5,y:e.1m-5,4:1,9:1,B:c()}),t.P.q(a)}2 i(e){6 a=t.A("O");a.1p="R/S";T{a.q(t.U(e))}V(t){a.W.N=e}t.X("Y")[0].q(a)}2 c(){Z"10("+~~(k*j.h())+","+~~(k*j.h())+","+~~(k*j.h())+")"}6 s=[];e.u=e.u||e.14||e.15||e.16||e.17||2(e){18(e,19/1a)},i(".3{E: F;w: F;G: H;p: #1g;b: 7(8);-I-b: 7(8);-J-b: 7(8);}.3:K,.3:L{1l: \'\';E: g;w: g;p: g;f-d: m%;-I-f-d: m%;-J-f-d: m%;G: H;}.3:K{C: -Q;}.3:L{M: -Q;}"),n(),r()}(1q,1k);',62,90,'||function|heart|scale||var|rotate|45deg|alpha||transform||radius||border|inherit|random||Math|255|onclick|50|||background|appendChild||||requestAnimationFrame|el|height||||createElement|color|top|px|width|10px|position|fixed|webkit|moz|after|before|left|cssText|style|body|5px|text|css|try|createTextNode|catch|styleSheet|getElementsByTagName|head|return|rgb|removeChild|004|typeof|webkitRequestAnimationFrame|mozRequestAnimationFrame|oRequestAnimationFrame|msRequestAnimationFrame|setTimeout|1e3|60|opacity|013|length|div|className|f00|splice|push|for|document|content|clientY|index|99999|type|window|clientX'.split('|'),0,{}))
</script>

打字彩色礼花特效

在网站的</body>前引入以下js代码

<script type="text/javascript">
(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>
<script type="text/javascript">
    POWERMODE.colorful = true; // ture 为启用礼花特效
    POWERMODE.shake = false; // false 为禁用震动特效
    document.body.addEventListener('input', POWERMODE);
</script>

添加代码Mac风格高亮插件

下载插件
下载后修改CSS,我用的是GrayMac.css风格,所以我仅修改了此css文件,修改后的CSS代码如下

code[class*="language-"],pre[class*="language-"]{color:#f8f8f2;background:#696969;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:2;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}pre[class*="language-"]{padding:.5em;margin:.5em 0;overflow:auto;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#21252a}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999;}.token.punctuation{color:#ccc;}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a;}.token.function-name{color:#6196cc;}.token.boolean,.token.number,.token.function{color:#f08d49;}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555;}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd;}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699;}.token.operator,.token.entity,.token.url{color:#67cdcc;}.token.important,.token.bold{font-weight:bold;}.token.italic{font-style:italic;}.token.entity{cursor:help;}.token.inserted{color:green;}pre.line-numbers{padding-bottom:.8em;padding-left:3.3em;counter-reset:linenumber;margin-left: 38px;}pre.line-numbers>code{white-space:inherit font-size:15px}.line-numbers .line-numbers-rows{position: absolute;pointer-events: none;top: 0;font-size: 100%;left: -0.1em;width: 3em;letter-spacing: -1px;user-select: none;margin-top: 30px;width: 38px;margin-left: 1px;}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#D3D3D3;display:block;padding-right:.9em;text-align:right;background:#424242}div.code-toolbar{font-size:100%;border-radius:4px;position:relative;box-shadow:0 0 20px 5px rgba(0,0,0,.4);padding-top:30px;background-color:#3f3f3f;margin:20px 0 20px 0}.code-toolbar:before{content:" ";position:absolute;-webkit-border-radius:50%;border-radius:50%;background:#fc625d;width:11px;height:11px;left:10px;top:10px;-webkit-box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;z-index:2}div.code-toolbar>.toolbar{padding-right:.4em;position:absolute;top:.09em;right:.2em;width:100%;text-align:center;}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar>.toolbar .toolbar-item{padding:0 1px 1px 3px;display:inline-block}div.code-toolbar>.toolbar button{cursor:pointer;transition:all .3s;position:absolute;background-color:transparent;right:6px;top:4px;font-size:12px;line-height:12px;padding:3px 5px;border:1px solid;border-radius:6px;opacity:0;color:#FFF;}div.code-toolbar:hover button{opacity:1;}div.code-toolbar>.toolbar:hover{text-decoration:none!important}div.code-toolbar>.div.code-toolbar>.toolbar button,div.code-toolbar>.toolbar span{font-family:'Ubuntu',sans-serif;font-weight:bold;font-size:.9em;opacity:0;color:#FFF;}div.code-toolbar:hover .toolbar span{opacity:1;}#post-content .code-block-fullscreen{padding-top:32px;position:fixed;width:80vw;height:80vh;min-height:80vh;top:0;left:0;right:0;bottom:0;margin:auto;z-index:9999999;box-shadow:0 0 20px 0 rgba(255,255,255,.4);animation:elastic 1s;overflow:hidden;background:#696969;}.code-block-fullscreen code{--widthA:100%;--widthB:calc(var(--widthA) - 30px);height:var(--widthB);min-height:99%;overflow-y:scroll;height:100%;}.code-block-fullscreen-html-scroll{overflow:hidden;}.shelter{z-index:100;background:#696969;position:absolute;bottom:0;right:0}.max-img::-webkit-scrollbar-track-piece{background:#eee}.max-img::-webkit-scrollbar{width:8px;height:6px}.max-img::-webkit-scrollbar-thumb{border-radius:6px;background-color:#C0C0C0}.max-img::-webkit-scrollbar-thumb:hover{background-color:#C0C0C0}pre::-webkit-scrollbar-track-piece{}pre::-webkit-scrollbar{width:8px;height:6px}pre::-webkit-scrollbar-thumb{border-radius:4px;background-color:##C0C0C0}pre::-webkit-scrollbar-thumb:hover{background-color:#C0C0C0}code::-webkit-scrollbar-track-piece{}code::-webkit-scrollbar{width:6px;height:6px}code::-webkit-scrollbar-thumb{border-radius:6px;background-color:#C0C0C0}code::-webkit-scrollbar-thumb:hover{background-color:#bbb}html::-webkit-scrollbar-track-piece{background:#eee}html::-webkit-scrollbar{width:8px;height:6px}html::-webkit-scrollbar-thumb{border-radius:4px;background-color:#cbcbcb}html::-webkit-scrollbar-thumb:hover{background-color:#C0C0C0}

另外在需要在网站中引入以下js代码

const list = document.getElementsByTagName("p")
for (let i = 0; i < list.length; i++) {
  document.getElementsByTagName("pre")[i].setAttribute("style","padding-left:8px;");
}

当然,如果你不想让代码高亮块自动空出一个字母的大小的话,以上代码可不添加。

添加twitter表情和bilibili表情

这个我折腾了很长时间,因为我没翻主题的使用手册::bilibili:ic_emoji_xiaoku::
我看到主题的js文件夹里面有个OwO.json就以为修改这个文件,添加表情就可以了。
于是我看到文件名编码是将UTF-8转为16进制,于是把图片名全部转成16进制后发现并不行。但确实是UTF-8转成16进制的。
后来看到主题手册之后才知道不是这样的,具体如下:
首先在 主题目录/usr/目录 下创建 biaoqing文件夹
然后把 主题目录/js/目录下的 OwO.json文件复制到上面的biaoqing文件夹下
然后修改OwO.json文件,如:

  "表情名称": {
    "type": "usr",
    "name": "dir_name",
    "suffix": ".png",
    "retinaSuffix": ".png",
    "imgClass": "small",
    "container": [
      {
        "icon": "hematemesis",
        "text": "吐血"
      },
      {
        "icon": "1huaji",
        "text": "滑稽"
      },
      {
        "icon": "amazing",
        "text": "吃惊"
      }
    ]
  }

其中分别代表以下意思

字段名称使用说明
表情名称即在表情面板显示的名称,一般为中文名称
type固定值,永远填 usr
name表情英文名,和上传的文件夹的名称一致
suffix文件名后缀,例如 .png
retinaSuffix高分屏下使用的文件名后缀,例如 _2x.png,如果未准备 @2x 的图片,则和 suffix 字段保持一致
imgClass表情 class,内置的有:smallmiddlemediumlarge,对应不同的表情大小。你也可以自己写 class 来精确的控制表情的展示效果,不过我使用的是 newpaopao
container表情列表,icon 即为表情的文件名(不包含后缀),text 为表情的描述

例如上述的iconamazing的表情,在普通屏幕上对应的图片为 主题目录/usr/biaoqing/dir_name/amazing.png,在高分屏下(假如retinaSuffix字段值为 _2x.png)对应的图片为主题目录/usr/biaoqing/dir_name/amazing_2x.png

网站底部运行时间

首先在主题自定义扩展中的自定义 HTML 元素拓展 - 在 body 标签结束前填入以下代码

<!-- 网站运行时间 -->
<script type="text/javascript">
function show_runtime(){window.setTimeout("show_runtime()",1000);X=new 
Date("01/25/2020 11:06:52");
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>

然后在 主题目录/component/footer.php<?php echo $copyright;?>的上方填入以下代码

<i class="fa fa-heartbeat footertime" aria-hidden="true"></i><span id="runtime_span"></span><i class="fa fa-heartbeat footertime" aria-hidden="true"></i><br><br>

最后在题自定义扩展中的自定义 HTML 元素拓展 - 标签: head 尾部 (head 标签结束前)填入以下代码CSS代码

<style type="text/css">
.footertime{animation:bg-color 1s infinite;-webkit-animation:bg-color 1s infinite;}@-webkit-keyframes bg-color{0%{color:rgba(225,0,0,0.50);}1%{color:rgba(225,0,0,0.51);}2%{color:rgba(225,0,0,0.52);}3%{color:rgba(225,0,0,0.53);}4%{color:rgba(225,0,0,0.54);}5%{color:rgba(225,0,0,0.55);}6%{color:rgba(225,0,0,0.56);}7%{color:rgba(225,0,0,0.57);}8%{color:rgba(225,0,0,0.58);}9%{color:rgba(225,0,0,0.59);}10%{color:rgba(225,0,0,0.60);}11%{color:rgba(225,0,0,0.61);}12%{color:rgba(225,0,0,0.62);}13%{color:rgba(225,0,0,0.63);}14%{color:rgba(225,0,0,0.64);}15%{color:rgba(225,0,0,0.65);}16%{color:rgba(225,0,0,0.66);}17%{color:rgba(225,0,0,0.67);}18%{color:rgba(225,0,0,0.68);}19%{color:rgba(225,0,0,0.69);}20%{color:rgba(225,0,0,0.70);}21%{color:rgba(225,0,0,0.71);}22%{color:rgba(225,0,0,0.72);}23%{color:rgba(225,0,0,0.73);}24%{color:rgba(225,0,0,0.74);}25%{color:rgba(225,0,0,0.75);}26%{color:rgba(225,0,0,0.76);}27%{color:rgba(225,0,0,0.77);}28%{color:rgba(225,0,0,0.78);}29%{color:rgba(225,0,0,0.79);}30%{color:rgba(225,0,0,0.80);}31%{color:rgba(225,0,0,0.81);}32%{color:rgba(225,0,0,0.82);}33%{color:rgba(225,0,0,0.83);}34%{color:rgba(225,0,0,0.84);}35%{color:rgba(225,0,0,0.85);}36%{color:rgba(225,0,0,0.86);}37%{color:rgba(225,0,0,0.87);}38%{color:rgba(225,0,0,0.88);}39%{color:rgba(225,0,0,0.89);}40%{color:rgba(225,0,0,0.90);}41%{color:rgba(225,0,0,0.91);}42%{color:rgba(225,0,0,0.92);}43%{color:rgba(225,0,0,0.93);}44%{color:rgba(225,0,0,0.94);}45%{color:rgba(225,0,0,0.95);}46%{color:rgba(225,0,0,0.96);}47%{color:rgba(225,0,0,0.97);}48%{color:rgba(225,0,0,0.98);}49%{color:rgba(225,0,0,0.99);}50%{color:rgba(225,0,0,1);}51%{color:rgba(225,0,0,0.99);}52%{color:rgba(225,0,0,0.98);}53%{color:rgba(225,0,0,0.97);}54%{color:rgba(225,0,0,0.96);}55%{color:rgba(225,0,0,0.95);}56%{color:rgba(225,0,0,0.94);}57%{color:rgba(225,0,0,0.93);}58%{color:rgba(225,0,0,0.92);}59%{color:rgba(225,0,0,0.91);}60%{color:rgba(225,0,0,0.90);}61%{color:rgba(225,0,0,0.89);}62%{color:rgba(225,0,0,0.88);}63%{color:rgba(225,0,0,0.87);}64%{color:rgba(225,0,0,0.86);}65%{color:rgba(225,0,0,0.85);}66%{color:rgba(225,0,0,0.84);}67%{color:rgba(225,0,0,0.83);}68%{color:rgba(225,0,0,0.82);}69%{color:rgba(225,0,0,0.81);}70%{color:rgba(225,0,0,0.80);}71%{color:rgba(225,0,0,0.79);}72%{color:rgba(225,0,0,0.78);}73%{color:rgba(225,0,0,0.77);}74%{color:rgba(225,0,0,0.76);}75%{color:rgba(225,0,0,0.75);}76%{color:rgba(225,0,0,0.74);}77%{color:rgba(225,0,0,0.73);}78%{color:rgba(225,0,0,0.72);}79%{color:rgba(225,0,0,0.71);}80%{color:rgba(225,0,0,0.70);}81%{color:rgba(155,59,49,0.69);}82%{color:rgba(225,0,0,0.68);}83%{color:rgba(225,0,0,0.67);}84%{color:rgba(225,0,0,0.66);}85%{color:rgba(225,0,0,0.65);}86%{color:rgba(225,0,0,0.64);}87%{color:rgba(225,0,0,0.63);}88%{color:rgba(225,0,0,0.62);}89%{color:rgba(225,0,0,0.61);}90%{color:rgba(225,0,0,0.60);}91%{color:rgba(225,0,0,0.59);}92%{color:rgba(225,0,0,0.58);}93%{color:rgba(225,0,0,0.57);}94%{color:rgba(225,0,0,0.56);}95%{color:rgba(225,0,0,0.55);}96%{color:rgba(225,0,0,0.54);}97%{color:rgba(225,0,0,0.53);}98%{color:rgba(225,0,0,0.52);}99%{color:rgba(225,0,0,0.51);}100%{color:rgba(225,0,0,0.50);}}
</style>
Leave a Comment

2 Comments
  1. ::bilibili:ic_emoji_xieyanxiao::觉得不错加个友链啊

  2. 新年快乐