Handsome主题介绍
Handsome,一款typecho主题。在复杂中,保持简洁。如你所见,这是一款花费很长时间才得以完成的主题。在功能强大和体积轻巧中不断权衡,然后呈现在你的面前。为了更好地创作,为了更好记录生活。愿我们不会在岁月流逝中迷失自己,仍然能够在时光的碎片找到过往的痕迹。
本博客就是使用的Handsome主题,外观很好看,功能也是十分的强大,值得推荐!
Handsome主题美化/魔改
自定义CSS
1、文章页标题调整文字大小
.entry-title {
font-size: 26px;
}
2、文章页正文调整字间距
p {
letter-spacing: 1px;
}
3、头像呼吸光环和鼠标悬停旋转放大
/*头像呼吸光环和鼠标悬停旋转放大*/
.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;
}
}
4、页面两侧框架留白间距
/*两侧框架留白间距*/
@media (min-width:1700px) {
.app.container {
width: 95%
}
.app.container .app-aside,
.app.container .app-header {
max-width: 95%
}
}
@media (min-width:2048px) {
.app.container {
width: 93%
}
.app.container .app-aside,
.app.container .app-header {
max-width: 93%
}
}
@media (min-width:1200px) {
.app.container {
width: 90%
}
.app.container .app-aside,
.app.container .app-header {
max-width: 90%
}
.app.container .app-footer-fixed {
max-width: 970px
}
.app.container.app-aside-folded .app-footer-fixed {
max-width: 1110px
}
.app.container.app-aside-dock .app-footer-fixed {
max-width: 90%
}
}
自定义JS
1、复制出现Handsome主题原生弹窗提示
/* 复制成功提示代码开始 */
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: "复制成功,转载请注明出处!<br> 原文链接:<br> "+sitesurl,
title: "已复制",
type: "success",
autoHide: !1,
time: "3000"
})
}}
/* 复制成功提示代码结束 */
2、复制附加版权信息
/* 复制版权 */
function addLink() {
var selection = window.getSelection();
pagelink = "来自迟博勋博客";
copytext = selection + pagelink;
newdiv = document.createElement('div');
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
document.body.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function () {
document.body.removeChild(newdiv);
}, 100);
}
document.oncopy = addLink;
未完待续