对
Handsome
美化记录
本文内容部分来源于网络,如有侵权请留言删除!
更新时间
2024
年08
月08
日
自定义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
- 进入后台设置激活插件
15 条评论
请问,右侧上方的热门文章和随机文章那栏是怎么关闭显示的,可以教一下吗?- -( ,,´・ω・)ノ"(´っω・`。)
页面元素显示设置
-[热门、随机、评论]栏目不显示
CommentToMail插件测试邮件能发出去,但是评论时不触发怎么办呀(ó﹏ò。)
CommentToMail插件 上了个新版 具体效果不知道什么样
感谢博主的回复,我最后换了另一个插件CommentNotifier
高德天气插件下载链接寄了呀博主
已经更新
非常感谢,已经用上,么么哒OωO
更新频率不错呀
还有好多没写呢
建议在收缩框中加上美化效果图,这能够让读者即时看到此项美化的效果
其实美化效果 和此站一模一样 有缺的 就是我还没写(比较懒)
这个版权怎么设置,需要填写CSS吗?我设置的没有框框
CSS部分更新进去了 CSS给忘记了