Leo's Wiki

Handsome 主题美化

#博客 #Typecho

Handsome 主题是一个很不错的主题，本人结合网络教程对其进行了一定的修改，这里作为存档使用。

彩色标签云

使用方法：将以下代码复制粘贴至后台的 外观设定-自定义 JavaScript 处

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});

给typecho加上心知天气

使用方法： 1：知心天气官网 www.seniverse.com 注册申请免费API 密钥 2：将以下代码放入/usr/themes/handsome/component/headnav.php第55行<!-- / search form -->之后并更换你的公钥秘钥即可

<!-- 知心天气-->
    <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#C6C6C6",
    "uid": "公钥",
    "hash": "密钥"
});
tpwidget("show");</script>
<!-- 知心结束-->

代码高亮

Typecho 代码高亮插件 Code Prettify: https://www.xcnte.com/archives/523/

打字特效

这是一个插件 ActivatePowerMode，评论、文章与页面编辑界面都可以使用。 https://github.com/AlanDecode/Typecho-Plugin-ActivatePowerMode

手机中不显示标签云与热门信息

方法：将以下代码添加至后台-开发者设置-自定义 CSS 。

@media (max-width:767px) {
    #tabs-4,#tag_cloud-2,#blog_info {
        display: none;
    }
}

文章标题美化

方法：将以下代码添加至后台-开发者设置-自定义CSS。

/*
 * 文章一二三四级标题美化
 */
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}

首页文章列表悬停上浮

方法：将以下代码添加至后台-开发者设置-自定义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。

/*
 *  文章内头图和文章图片悬停放大并将超出范围隐藏
 */
.entry-thumbnail {
    overflow: hidden;
}

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

#post-content img:hover {
    transform: scale(1.05);
}
Copyright © 2022 Leo