就是本人一直使用handsome主题以来的修改记录,就顺便当做是笔记啦,具体请参照本博客~
1.Mac风格代码高亮
Mac风格代码高亮
system out println 'hello world!';
这里我是使用了Xcnte大佬的Typecho代码高亮插件Code Prettify实现的,具体方法就不再复制粘贴了,直接画个传送阵
传送门2.博主介绍的闪字特效
博主介绍的闪字特效
食用方法
- 把下方代码复制粘贴到后台的博主介绍即可,修改的地方在代码中有中文提示,只需修改文字即可
<!--博主介绍的闪字特效-->
<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>
3.头像呼吸光环和鼠标悬停旋转放大
头像呼吸光环和鼠标悬停旋转放大
- 将下方代码复制粘贴到后台的自定义CSS即可
/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.img-full:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
0% {
box-shadow: 0 0 4px #f00;
}
25% {
box-shadow: 0 0 16px #0f0;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #0f0;
}
100% {
box-shadow: 0 0 4px #f00;
}
}
- 如果只需要单色呼吸光环,例如红色,可以将关键帧动画改为:
/*头像呼吸光环和鼠标悬停旋转放大*/
@keyframes light {
from {
box-shadow: 0 0 4px #f00;
}
to {
box-shadow: 0 0 16px #f00;
}
}
4.复制弹框版权提示
复制弹框版权提示
食用方法
- 第一步,先复制下方代码,粘贴至 开发者设置-自定义输出body尾部的HTML代码
<!-- 复制弹框版权提醒 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
- 第二步,再复制下方代码,粘贴至 开发者设置-自定义JavaScript
<!-- 复制弹框版权提醒 -->
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处!',showConfirmButton: false,timer: 2000});};
5.超链接文字颜色和加粗
超链接文字颜色和加粗
食用方法
- 将下方代码复制粘贴到 开发者设置 - 自定义CSS 即可
/*超链接文字颜色和加粗*/
.comment-content-true a, .wrapper-lg .entry-content a {
color: #23b7e5;
border-bottom-color: #7266ba;
border-bottom: 1px solid #23b7e5;
word-wrap: break-word;
word-break: break-all;
font-weight: bold;
}
6.文章内头图和文章图片悬停放大并将超出范围隐藏
文章内头图和文章图片悬停放大并将超出范围隐藏"]
食用方法
- 将下方代码复制粘贴到 开发者设置- 自定义CSS
/*文章内头图和文章图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
3 条评论
大佬,你的代码高亮错乱了。
Emmmm ,最近在测试小程序,所以弄乱了还没改回来,哈哈哈哈哈,太懒了
我偷走了哈,文章目录是怎么改的?