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

2023-04-18 05:12| 来源: 网络整理| 查看: 265

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: "复制成功，转载请注明出处！原文链接： "+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;

未完待续

【本文地址】

公司简介

联系我们