Handsome主题介绍
Handsome，一款typecho主题。在复杂中，保持简洁。如你所见，这是一款花费很长时间才得以完成的主题。在功能强大和体积轻巧中不断权衡，然后呈现在你的面前。为了更好地创作，为了更好记录生活。愿我们不会在岁月流逝中迷失自己，仍然能够在时光的碎片找到过往的痕迹。
Handsome主题美化/魔改
自定义CSS
自定义
CSS丨放入后台-外观设置-开发者设置-自定义CSS
文章页标题调整文字大小
.entry-title { font-size: 26px; }文章页正文调整字间距
p { letter-spacing: 1px; }头像呼吸光环和鼠标悬停旋转放大
/*头像呼吸光环和鼠标悬停旋转放大*/
.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;
}
}页面两侧框架留白间距
/*两侧框架留白间距*/
@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%
}
}右侧设置按钮及返回顶部位置调整
.topButton{top: unset;bottom: 420px;}
.settings{top: unset;bottom: 0px;}
#goToTop {color: #58666e!important;background-color: #FFF!important;}自定义JS
自定义
JS丨放入后台-外观设置-开发者设置-自定义JavaScript
复制出现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"
})
}}
/* 复制成功提示代码结束 */复制附加版权信息
/* 复制版权 */
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;修改主题文件
修改
主题文件丨登陆服务器修改
删除友情链接页面内页链接及推荐链接Tab
找到 usr/themes/handsome/links.php文件里的代码：
<ul class="nav no-padder b-b">
<li class="nav-item active"><a class="nav-link" href data-toggle="tab" data-target="#my-info"><?php
_me("申请友链")
?></a></li>
<li class="nav-item"><a class="nav-link" href data-toggle="tab" data-target="#tab_2"><?php _me("内页链接") ?></a></li>
<li class="nav-item"><a class="nav-link" href data-toggle="tab" data-target="#tab_3"><?php _me("推荐链接") ?></a></li>
<li class="nav-item"><a class="nav-link" href data-toggle="tab" data-target="#tab_4"><?php _me("全站链接") ?></a></li>
</ul>将代码替换为
<ul class="nav no-padder b-b">
<li class="nav-item active"><a class="nav-link" href data-toggle="tab" data-target="#my-info"><?php
_me("申请友链")
?></a></li>
<!-- <li class="nav-item"><a class="nav-link" href data-toggle="tab" data-target="#tab_2"><?php _me("内页链接") ?></a></li>
<li class="nav-item"><a class="nav-link" href data-toggle="tab" data-target="#tab_3"><?php _me("推荐链接") ?></a></li>-->
<li class="nav-item"><a class="nav-link" href data-toggle="tab" data-target="#tab_4"><?php _me("全站链接") ?></a></li>
</ul>去除页脚底部版权信息
找到 usr/themes/handsome/component/footer.php文件里的代码：
Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank" href="https://www.ihewro.com/archives/489/">handsome</a>替换为
<!--Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank"-->
<!-- href="https://www.ihewro.com/archives/489/">handsome</a>-->