Handsome 修改记录

@> 主题Handsome 非常棒，修改都在后台设置添加，记录个人博客配置。

[collapse status="false" title="1、文章内打赏图标跳动"]
主题设置 - 开发者设置 - 自定义CSS添加以下代码

.blog-post .panel:not(article) {
transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

[/collapse]
[collapse status="false" title="2、文章标题居中"]
主题设置 - 开发者设置 - 自定义CSS添加以下代码

.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

[/collapse]
[collapse status="false" title="3、复制提醒"]
主题设置 - 开发者设置 - 自定义JavaScript

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

[/collapse]
[collapse status="false" title="4、打字特效"]
主题设置 - 开发者设置 - 自定义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);

[/collapse]
[collapse status="false" title="5、博主介绍动态字体"]
主题设置 - 设置外观 - 初级设置 - 博主的介绍

<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> </span>

[/collapse]
[collapse status="false" title="6、时光机页发送图片、音频和视频"]
Typecho后台设置 - 评论 - 允许使用的HTML标签和属性

<img src="">
<audio class="" src="" preload>
<video src=""></video>

[/collapse]
[collapse status="false" title="7、纪念日黑白"]
主题设置 - 开发者设置 - 自定义 CSS

body{
filter: grayscale(1);
}

[/collapse]
[collapse status="false" title="8、首页站点名称居中"]
主题设置 - 开发者设置 - 自定义 CSS

/* 首页站点名称居中 */
header.bg-light.lter.wrapper-md {
text-align: center;
}

[/collapse]
[collapse status="false" title="9、底部页脚"]
1、主题设置 - 开发者设置 - 自定义 CSS

/* 底部页脚 */
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}

2、主题设置 - 开发者设置 - 博客底部左侧信息
x> 博客底部左侧信息，信息修改成自己的

<div class="github-badge">
<a href="./" title="©2020 点儿博客">
<span class="badge-subject">©Copyright</span><span class="badge-value bg-blue">2020 点儿博客</span>
</a>
</div>
<a href="http://beian.miit.gov.cn">&nbsp&nbsp&nbsp&nbsp&nbsp<img src="/img/beian.png">豫ICP备XXXXXXX号<a/>

3、主题设置 - 开发者设置 - 博客底部右侧信息
x> 博客底部右侧信息，可根据自己需求改动

<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
 |  
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

!> 添加完成后，记得去handsome / component / footer.php删除原有声明代码
[/collapse]
[collapse status="false" title="10、删除站点名称"]
后台控制台 - 外观 - 编辑当前外观 - 编辑文件 index.php
删除以下代码：
<h1 class="m-n font-thin text-black l-h"><?php $this->options->title(); ?></h1>
[/collapse]
[collapse status="false" title="11、抖动字体"]
主题设置 - 开发者设置 - 自定义输出head 头部的HTML代码

<!--抖动CSS-->
<link rel="stylesheet" type="text/css" href="https://www.yuuyl.com/img/qh.css">

使用方法:
<div class="shaky">这里是你需要抖动的文字！</div>
演示如下：

[/collapse]
[collapse status="false" title="12、地图+足记备份"]
备份文件：阿里云盘/同步文件/点儿备份/地图+足记.zip
[button color="info" icon="" url="https://dianrblog.oss-cn-hangzhou.aliyuncs.com/blog/blog/2022/09/10/足记+地图.jpg" type=""]地图+足记[/button]
（下载修改后缀.ZIP）
[/collapse]
@> 以上配置代码来自网络各位主题Handsome使用者