基于handsome主题的一些美化修改

用了handsome主题有一段时间了,今天对主题进行了一些修改,修改完成后几乎看不出主题被修改了,因为只是添加了一些鼠标悬停样式,感觉白忙活了。

handsome主题介绍:

handsome主题购买地址:

目前只在handsome5.2测试过,其他版本未知

为了减少对源码的修改,本次美化大多数可以直接在后台开发者设置-自定义css中添加代码即可。

1. 头像呼吸光环和鼠标悬停旋转放大

.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;
    }
}

如果只需要单色呼吸光环,例如红色,可以将关键帧动画改为:

@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

    to {
        box-shadow: 0 0 16px #f00;
    }
}

2. 左侧文章图标和评论头像鼠标悬停旋转

.img-circle {
    transition: all 0.3s;
}

.img-circle:hover {
    transform: rotate(360deg);
}

3. 文章内打赏图标跳动

.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

4. 彩色标签云

之前看过一个彩色标签云的插件,这里用js为标签随机添加上预先定义的颜色,每次刷新都会进行换色:

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;
});

如果主题中启用了pjax,还需要将上面代码添加到pjax-pjax回调函数中。

5. 首页文章列表悬停上浮

.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);
}

6. 首页文章列表头图悬停放大并将超出范围隐藏

.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}

7. 文章内头图和文章图片悬停放大并将超出范围隐藏

.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

8. 页面顶部进度条

handsome/component/header.php文件中最下面添加代码:

<div class="progress-top" style="position: fixed; top: 0px; height: 5px; background: rgba(31, 159, 199, 0.79); border-radius: 500px; z-index: 5200;"></div>

然后在后台开发者设置-自定义JavaScript中添加js代码:

let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollAvail = pageHeight - windowHeight;
window.onscroll = function () {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    document.querySelector('.progress-top').style.width = (scrollTop / scrollAvail) * 100 + '%';
}

同样,如果主题开启了pjax,也需要在pjax回调函数填写上面代码。

9. 右侧列表导航栏图标颜色

.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}

10. 点击空白区域隐藏歌曲列表

主题中原来是必须重新点击耳机图标才能将歌曲列表隐藏,感觉有点累,而且此时再点击闲言碎语会将两个元素重叠。设置之后可以点击空白区域将歌曲列表隐藏,由于本文主旨是尽量不修改源码,所以实现的方式较为繁琐。先添加css:

.musicPlayerHiden {
    display: none;
}

然后添加js代码:

document.body.onclick = function () {
    document.querySelector(".skPlayer-list").classList.add("musicPlayerHiden");
}

document.querySelector(".skPlayer-list-switch").onclick = function (e) {
    document.querySelector(".skPlayer-list").classList.remove("musicPlayerHiden");
    document.querySelector(".skPlayer-list").onclick = function (e) {
        if (e && e.stopPropagation) {
            e.stopPropagation();
        } else {
            window.event.cancalBubble = true;
        }
    }

    if (e && e.stopPropagation) {
        e.stopPropagation();
    } else {
        window.event.cancalBubble = true;
    }
}

11. 将回到顶部按钮下移

个人感觉看完文章视线是在屏幕下半区域的,所以将回到顶部按钮往下移动了一些。

.topButton {
    top: 640px;
}

暂时就改了这么些,如果以后还有修改的话会继续在下面添加。

最后修改:2019 年 08 月 22 日 11 : 01 PM
如果觉得我的文章对你有用,请随意赞赏

8 条评论

  1. 666

    66666

  2. pq8o3q

    博主,您好,请问您一下,为什么在点击空白区域隐藏歌曲列表修改的时候,在后台设置里使用您上面显示的代码,还是不可以呢,请问还有其他方法吗?谢谢

    1. BWmelon
      @pq8o3q

      这个功能不大,可以不设置

  3. Peanut

    你好鸭,为什么你的 首页文章列表悬停上浮 在手机上可以显示,我的不可以鸭。

    1. BWmelon
      @Peanut

      清除一下浏览器缓存试试

  4. 云雾

    超级奈斯

  5. tomaito

    不错

    1. BWmelon

发表评论