Handsome 美化记录
🌶 过期警告: 本页面距今已有 1800 天未更新,年久失修,内容可能有所偏颇,还请仔细甄别!
Handsome 美化记录
前言
Handsome是一款精美的 Typecho 主题,后 台功能强大,这里记录一下自己从网上找到的对主题的一些美化。
底部版权信息美化
底部左侧信息
在主题后台设置 - 开发者设置 - 博客底部左侧信息添加如下代码:
<div class="github-badge"><a href="./" title="©2021 XXX"><span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2021 XXX</span></a></div> |<div class="github-badge"><a href="http://www.beian.gov.cn/" target="_blank" title="XICP备 XXXXXXXXXX号"), pointer;"><span class="badge-subject">晋ICP备</span><span class="badge-value bg-green">XXXXXXXXXX号</span></a></div>删除对应代码
# 在 `handsome\component\footer.php` 文件中删除如下代码 128 行左右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>
© <?php echo date("Y");?> Copyright 底部右侧信息
在主题后台设置 - 开发者设置 - 博客底部右侧信息添加如下代码:
<div class="github-badge"><a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动"><span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span></a></div> |<div class="github-badge"><a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C"><span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span></a></div>首页头像自动旋转
在设置外观 - 开发者设置 - 自定义 CSS中添加如下代码:
/*首页头像自动旋转*/.thumb-lg { width: 130px;}
.avatar { -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out;}
.avatar:hover { transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg);13 collapsed lines
-moz-transform: rotateZ(360deg);}
#aside-user span.avatar { animation-timing-function: cubic-bezier(0, 0, 0.07, 1) !important; border: 0 solid;}
#aside-user span.avatar:hover { transform: rotate(360deg) scale(1.2); border-width: 5px; animation: avatar 0.5s;}首页文章版式圆角化
在设置外观 - 开发者设置 - 自定义 CSS中添加如下代码:
/*首页文章版式圆角化*/.panel { border: none; border-radius: 10px;}
.panel-small { border: none; border-radius: 10px;}
.item-thumb { border-radius: 10px;}首页文章列表悬浮上停
在设置外观 - 开发者设置 - 自定义 CSS 中添加如下代码:
/*首页文章列表悬停上浮*/.blog-post .panel:not(article) { transition: all 0.3s;}
.blog-post .panel:not(article):hover { transform: translateY(-10px); box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);}首页文章图片获取焦点放大
在设置外观 - 开发者设置 - 自定义 CSS 中添加如下代码:
/*首页文章图片获取焦点放大*/.item-thumb { cursor: pointer; transition: all 0.6s;}
.item-thumb:hover { transform: scale(1.05);}
.item-thumb-small { cursor: pointer; transition: all 0.6s;}
19 collapsed lines
.item-thumb-small:hover { transform: scale(1.05);}#post-content pre code { display: block; overflow-x: auto; position: relative; margin: 0; padding-left: 50px;}pre code { position: relative; display: block; overflow-x: auto; margin: 4.4px 0px 0.4px 1px; padding: 0; max-height: 500px; padding-left: 3.5em;}右侧列表导航栏图标颜色
在设置外观 - 开发者设置 - 自定义 CSS 中添加如下代码:
/* 右侧列表导航栏图标颜色 */.sidebar-icon svg.feather.feather-thumbs-up { color: #ff0000;}.sidebar-icon svg.feather.feather-message-square { color: #495dc3;}.sidebar-icon svg.feather.feather-gift { color: #52de97;}博客信息配套颜色
在设置外观 - 开发者设置 - 自定义 CSS 中添加如下代码:
/* 博客信息配套颜色 */
#blog_info > ul > li:nth-child(1) > span.badge { background-color: #009688;}#blog_info > ul > li:nth-child(2) > span.badge { background-color: #009688;}#blog_info > ul > li:nth-child(3) > span.badge { background-color: #009688;}#blog_info > ul > li:nth-child(4) > span.badge { background-color: #009688;}#blog_info > ul > li:nth-child(5) > span.badge {8 collapsed lines
background-color: #009688;}#blog_info > ul > li:nth-child(6) > span.badge { background-color: #009688;}#blog_info > ul > li:nth-child(7) > span.badge { background-color: #009688;}底部页脚
在设置外观 - 开发者设置 - 自定义 CSS 中添加如下代码:
/*底部页脚*/.github-badge { display: inline-block; border-radius: 4px; text-shadow: none; font-size: 12px; color: #fff; line-height: 15px; background-color: #abbac3; margin-bottom: 5px;}
.github-badge .badge-subject { display: inline-block; background-color: #4d4d4d;36 collapsed lines
padding: 4px 4px 4px 6px; border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.github-badge .badge-value { display: inline-block; padding: 4px 6px 4px 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
.github-badge .bg-blue { background-color: #007ec6;}
.github-badge .bg-orange { background-color: #ffa500;}
.github-badge .bg-red { background-color: #f00;}
.github-badge .bg-green { background-color: #3bca6e;}
.github-badge .bg-purple { background-color: #ab34e9;}
/*这是优化底部栏的css,应该不会影响没开启炫酷透明功能时候的主题,如果有问题就删除下面这行即可*/.wrapper { padding: 11px;}彩色云标签
在设置外观 - 开发者设置 - 自定义 JavaScript 中添加如下代码:
<!--彩色标签云-->let tags = document.querySelectorAll("#tag_cloud-2 a");let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor;});鼠标点击特效
将下列代码写入 handsome/component/footer.php 文件 </body> 之前
<script type="text/javascript">/* 鼠标特效 */var a_idx = 0;jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute",15 collapsed lines
"font-weight": "bold", "color": "#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); });});</script> 赞赏博主
