Handsome美化记录

本文内容部分来源于网络,如有侵权请留言删除!

更新时间20240808

自定义CSS

文章顶部内容居中

文章顶部内容居中

header.bg-light.lter.wrapper-md {
  text-align: center;
}

首页文章标题居中

首页文章标题居中

.post_title_wrapper
{
    justify-content: center;
}

首页文章日期居中

首页文章日期居中

.text-muted.post-item-foot-icon.text-ellipsis.list-inline {
    text-align: center;
    background-color: #fff;
}

标签字体颜色

标签字体颜色

.badge,.padder-v-ssm{
    color:#fff;
}

赞赏按钮跳动

赞赏按钮跳动

/*赞赏按钮跳动*/
.btn-pay {
  animation: star 0.5s ease-in-out infinite alternate; 
} 
@keyframes star { 
  from { transform: scale(1); } 
  to { transform: scale(1.1); } 
}

标题悬停颜色

标题悬停颜色

.index-post-title a:hover {
  color: #2ebaae;
}

全站页面纯白

全站页面纯白

/*白色整体背景*/
div#alllayout {
    background-color: #fff;
}
.night div#alllayout {
    background-color: #1d1f20;
}
/*左侧-顶部-底部*/
.bg-white{
    background-color: #fff;
}
/*页面底部*/
.bg-light {
    background-color: #fff;
}
/*首页标题背景变白*/
.bg-light .lter, .bg-light.lter {
    background-color: #fff;
}
/* 右侧背景 */
.bg-white-only{
    background-color:#fff;
}
/*文章页面变白*/
#post-panel {
    background: white;
}
/*登录后前台头像下变白*/
li.wrapper.b-b.m-b-sm.bg-light.m-t-n-xs {
    background-color: #fff;
}

局部阴影

局部阴影

/*博客信息-搜索框-幻灯片 阴影*/
.box-shadow-wrap-normal {
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.16);
}
/*盒子四周阴影*/
.app.container {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.16)!important;
}
/*文章圆角-阴影*/
.panel {
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
  border-radius: 6px!important;
}
/*文章标题阴影*/
.bg-white-pure {
  background: white;
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
}

获取焦点放大

获取焦点放大

/*首页文章图片获取焦点放大*/
.item-thumb {
    cursor: pointer;
    transition: all .6s;
}
.item-thumb:hover {
    transform: scale(1.05);
}

文章悬浮效果

文章悬浮效果

/* 文章悬浮效果 */
.blog-post .panel:not(article){transition:all .3s}
.blog-post .panel:not(article):hover{transform:translateY(-10px)}

滚动条效果

滚动条效果

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width:9px;
    height:8px;
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color:white;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #ff676c;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    cursor: pointer;
}

自定义JavaScript

左侧彩色图标&右侧彩色标签云

左侧彩色图标&右侧彩色标签云

需要将以下代码添加到后台-PJAX->PJAX回调函数中后台-外观设置-开发者设置-自定义 JavaScript

//左侧图标多彩
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#ff3300","#ff3399","#54d100","#9900cc","#0033ff","#FF6699","#FF33FF","#ff8100","#33CC00","#FF1493","#8A2BE2","#8B3E2F","#00CC33"];
leftHeader.forEach(
      tag=>{
        tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];
        tag.style.color=tagsColor
    }
);    
// 右侧彩色标签云
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#0089ff", "#00c919", "#ff4747", "#c052ff", "#ff8939","#ff1200","#ff3399","#ffde00","#6000ff"];
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;
});
function addNumber(a) {
     var length = document.getElementById("comment").value.length;
     if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
     }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
     }
}
$(function(){
    $("#PageLoading").fadeOut(400);
    $("#body").css('overflow','');
});

进度条加载显示

进度条加载显示

以下代码放在 后台-外观设置-开发者设置-自定义 JavaScript

//进度条加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");

以下代码放在 后台-外观设置-开发者设置-自定义输出head 头部的HTML代码

<div id="percentageCounter"></div>

后台-外观设置-开发者设置-自定义CSS填写以下代码


/*进度条加载显示*/
#percentageCounter{
  position:fixed; left:0; top:0; height:3px;
  z-index:99999; 
  background-image: linear-gradient(to right, #339933,#FF6666);
  border-radius:5px;
  }

提示框

提示框

以下代码放在 后台-外观设置-开发者设置-自定义 JavaScript

进入网站右上角提示

function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问!";
}else{
return "";
}}
$.message({
    message: "欢迎来的我的小破站<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"
})

复制提升框复制提示框会监听键盘Ctrl+C

aygb_copy();function kaygb_copy()
{
    $(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer()
    {
$.message(
    {
    message: "尊重原创,转载请注明出处",
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "5000"
    })
}
}

其他修改

岁月不待人

岁月不待人

首先找到网站根目录 /usr/themes/handsome/component/sidebar.php文件,找到<--广告位置-->这一行内容。 在该内容向上两行找到 <?php endif; ?> ,在该行紧接着下面添加如下代码:

<section id="blog_info" class="widget widget_categories wrapper-md clear">
     <h5 class="widget-title m-t-none text-md"><?php _me("岁月不待人") ?></h5>
<div class="sidebar sidebar-count">
    <div class="content">
        <div class="item" id="dayProgress">
            <div class="title">今日已经过去<span></span>小时</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-1"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
        <div class="item" id="weekProgress">
            <div class="title">这周已经过去<span></span>天</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-2"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
        <div class="item" id="monthProgress">
            <div class="title">本月已经过去<span></span>天</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-3"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
        <div class="item" id="yearProgress">
            <div class="title">今年已经过去<span></span>个月</div>
            <div class="progress">
                <div class="progress-bar">
                    <div class="progress-inner progress-inner-4"></div>
                </div>
                <div class="progress-percentage"></div>
            </div>
        </div>
    </div>
</div>
     </section>
<!-- 时间倒计时代码结束 -->

文章尾部end

文章尾部end

在主题文件post.php中,大概在90行左右

             <!--文章页脚的广告位-->
        <?php $this->options->adContentPost(); ?>
             <?php endif; ?>

在↑↑↑↑↑内容下面添加代码

    <!--内容结束分割线-->
<div class="tt-fenge-end"> <span>End</span> </div>
    <!--/ 内容结束分割线-->

后台-外观设置-开发者设置-自定义CSS 填写以下代码

/*文章正文下的结束End分割线样式*/
.tt-fenge-end{
  border-top: 2px dotted #eee;
  height: 0px;
  margin: 35px 0px;
  text-align: center;
  width: 100%;
  line-height: 1.6em;
  }
.tt-fenge-end span{
  background-color: #23b7e5;
  color: #fff;
  padding: 2px 8px;
  position: relative;
  top: -14px;
  border-radius: 12px;
  font-size: 12px;
  }
/*深色模式下文章正文下的结束End分割线颜色*/
html.theme-dark .tt-fenge-end{
  border-top: 2px dotted #4f4f4f;
  }

文章尾部版权

文章尾部版权

在主题文件post.php中,大概在90行左右

 <!--文章页脚的广告位-->
 <?php $this->options->adContentPost(); ?>
 <?php endif; ?>

在↑↑↑内容下面添加代码

    <!--知识共享许可协议-->
<div class="tt-license">
    <p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题:<?php $this->title() ?></p>
    <p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接:<?php $this->permalink() ?></p>
    <p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明,本作品遵循<a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">CC 4.0 BY-SA 版权协议</a>。</p>
    <p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明:转载请注明文章来源。</p>
</div>
    <!-- / 知识共享许可协议-->

后台-外观设置-开发者设置-自定义CSS 填写以下代码

/*文章正文下的知识共享许可协议*/
.tt-license {
  font-size: 12px;
  font-weight: 600;
  padding: 1rem;
  background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);
  background-color: #f3f5f7;
  border-left: 3px solid #dde6e9;
  margin-bottom: 20px;
  }
.tt-license-icon {
  align-items: center;
  position: relative;
  float: left;
  margin: -10px -10px -10px 0;
  margin-right: 10px;
  overflow: hidden;
  text-align: center;
  display: flex;
  height: 40px;
  color: #ff5722;
  }
.tt-license a {
  color: #337ab7;
  text-decoration: underline;
  margin: 0 5px;
  }
 /*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {
  background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);
  border-left: 3px solid #494949;
  }
.tt-license p {
  line-height: 1.5em;
  margin: 5px 0!important;
  }

插件

评论邮件提醒插件

评论邮件提醒插件

二选一下载就可以

食用方法:

  • 下载插件,解压到usr/plugins/目录中
  • 修改文件夹名为CommentToMail
  • 进入后台设置激活插件

评论邮件提醒插件(原生Typecho)

评论邮件提醒插件

二选一下载就可以 不保证能在handsome 主题中使用

食用方法:

  • 下载插件,解压到usr/plugins/目录中
  • 修改文件夹名为CommentToMail
  • 进入后台设置激活插件

炫彩鼠标

炫彩鼠标

二选一下载就可以

食用方法:

  • 下载插件,解压到usr/plugins/目录中
  • 修改文件夹名为HoerMouse
  • 进入后台设置激活插件

显示评论人使用的操作系统和浏览器信息

显示评论人使用的操作系统和浏览器信息

二选一下载就可以

食用方法:

  • 下载插件,解压到usr/plugins/目录中
  • 修改文件夹名为UserAgent
  • 进入后台设置激活插件

高德天气插件

高德天气插件

二选一下载就可以

食用方法:

  • 下载插件,解压到usr/plugins/目录中
  • 修改文件夹名为Wiather
  • 进入后台设置激活插件

………………未完待续………………

End

本文标题:handsome 主题美化记录

本文链接:https://atxrom.com/archives/11/

除非另有说明,本作品遵循CC 4.0 BY-NC-SA 4.0

声明:转载请注明文章来源。

如果觉得我的文章对你有用,请随意赞赏