Handsome 美化记录

Posted 2021-02-23. Updated 2024-07-07. 398 words. 2 min read. 0 views. 0 messages.

random image

🌶 过期警告： 本页面距今已有 1230 天未更新，年久失修，内容可能有所偏颇，还请仔细甄别！

前言

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` 文件中删除如下代码 128 行左右
2
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>
3

4
&copy;&nbsp;<?php echo date("Y");?> Copyright&nbsp;

底部右侧信息

在主题后台设置 - 开发者设置 - 博客底部右侧信息添加如下代码：

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);
13 collapsed lines
16
  -moz-transform: rotateZ(360deg);
17
}
18

19
#aside-user span.avatar {
20
  animation-timing-function: cubic-bezier(0, 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 0.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

19 collapsed lines
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
}
26
pre code {
27
  position: relative;
28
  display: block;
29
  overflow-x: auto;
30
  margin: 4.4px 0px 0.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 {
3
  color: #ff0000;
4
}
5
.sidebar-icon svg.feather.feather-message-square {
6
  color: #495dc3;
7
}
8
.sidebar-icon svg.feather.feather-gift {
9
  color: #52de97;
10
}

博客信息配套颜色

在设置外观 - 开发者设置 - 自定义 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 {
8 collapsed lines
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;
36 collapsed lines
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
<!--彩色标签云-->
2
let tags = document.querySelectorAll("#tag_cloud-2 a");
3
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
4
tags.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
/* 鼠标特效 */
3
var a_idx = 0;
4
jQuery(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",
15 collapsed lines
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>

◀ 宝塔面板一键部署佰阅发卡 Typora直传图片文件方案 ▶

赞赏博主

Author

Spencer Woo

阿巴阿巴 o((>ω< ))o

/