提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

【持续更新】Handsome主题介绍+美化修改/魔改教程

教程 介绍 修改 更新 持续 主题 美化 Handsome
2023-06-13 09:18:10 时间

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;

未完待续

相关文章