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