这篇文章作为对
Handsome 9.2.1 Pro
美化记录,有新增时会实时更新。
本文内容部分来源于网络,如有侵权请留言删除!
更新时间
2024
年 08
月 18
日
说明
文件源码下载 CSS文件
custom.css
和JS文件 custom.js
本站所有美化样式均放在以下文件中
以下CSS文件以及JS文件失效,请下载Comic插件使用或者单独添加CSS以及JS。
部分样式代码是纯粹的CSS或者JS,如果单独放到
配置外观—自定义CSS
或者 自定义JS
中,代码多的话是比较乱的,所以才将这些整理成文件。美化记录
自定义CSS
该修改项位于Handsome主题后台-
外观-设置外观-开发者设置-自定义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;
}
全站页面纯白
全站页面使用白色时,需要在
后台设置-外观设置-主题色调自定义搭配
修改为white-white-white
全站页面纯白
/*白色整体背景*/
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
该修改项位于Handsome主题后台-
外观-设置外观-开发者设置-自定义Javascript
左侧彩色图标&右侧彩色标签云
左侧彩色图标&右侧彩色标签云
需要将以下代码添加到
PJAX->PJAX回调函数中
//左侧图标多彩
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','');
});
其他修改
修改源文件记得备份哦~
博主文字介绍动态化
博主文字介绍动态化
将代码里的
这是我的介绍
文字内容修改成需要展示的文字内容即可,顺便那个❤也是可以改的。 将以下代码放到 主题后台-外观-设置外观-初级设置-博主的介绍
内即可<span class="text-muted text-xs block"><div id="chakhsu"></div>
<script>
var chakhsu = function(r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() + 33)
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(), l.style.color = t(), n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) :
"forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- :
(c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI =
(c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ?
Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
}
/*以下内容自定义修改*/
var l = "❤",
o = ["这是我的介绍"].map(function(r) {
return r + ""
}),
a = 2,
g = 1,
s = 5,
d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)",
"rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)",
"rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)",
"rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"
],
c = {
text: "",
prefixP: -s,
skillI: 0,
skillP: 0,
direction: "forward",
delay: a,
step: g
};
i()
};
chakhsu(document.getElementById('chakhsu'));
</script>
</span>
放之前记得先清空博主的介绍栏内的所有内容
页面-底部页脚美化
底部页脚美化
修改文件
/themes/handsome/component/footer.php
版权代码或者删除<div class="wrapper bg-light">
<span class="pull-right hidden-xs text-ellipsis">
<?php $this->options->BottomInfo();?>
<!--可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解-->
</span>
<span class="text-ellipsis">
<?php $this->options->BottomleftInfo(); ?>
</span>
</div>
以下代码放在
外观设置-开发者设置-自定义css中
/*底部页脚css*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color:#4d4d4d;
text-shadow:0px 0.86px 0.2px #3333336b;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
background-color: #00a1fd;
}
.github-badge .bg-orange {
background-color: #ffa500;
}
.github-badge .bg-green {
background-color: #3bca6e;
}
.github-badge .bg-purple{
background-color:#ab34e9;
}
.github-badge .bg-red{
background-color:#ff1010;
}
以下代码放在
外观设置-开发者设置-博客底部左侧信息中
<!--左侧底部-->
<div class="github-badge">
<span class="badge-subject">Copyright</span>
<a href="https://starsei.com/" target="_blank">
<span class="badge-value bg-orange">©2024 猫不吃鱼</span>
</a>
</div> |
<div class="github-badge">
<span class="badge-subject"><i class="iconfont icon-beian"></i>京ICP备</span>
<a href="https://beian.miit.gov.cn/" target="_blank">
<span class="badge-value bg-green">2022013581号-1</span></a>
</div>
以下代码放在
外观设置-开发者设置-博客底部右侧信息中
<!--右侧底部-->
<div class="github-badge">
<span class="badge-subject"><i class="iconfont icon-tengxunyun"></i>本站由</span>
<a href="https://cloud.tencent.com" target="_blank">
<span class="badge-value bg-blue">腾讯云提供服务</span>
</a>
</div> |
<div class="github-badge">
<span class="badge-subject"><i class="iconfont icon-typecho"></i>Theme by</span>
<a href="https://www.ihewro.com/archives/489/" target="_blank">
<span class="badge-value bg-purple">Handsome</span></a>
</div>
自定义字体
自定义字体
选择字体,然后去字体转换把
将转换成功后的字体上传至网站目录中,默认字体目录是
前往
otf、ttf
转换成 woff
格式。将转换成功后的字体上传至网站目录中,默认字体目录是
/usr/themes/handsome/assets/fonts
文件夹里。前往
外观设置-开发者设置-自定义css中
添加以下代码/*自定义字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(填写字体所在的位置) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium} body {font- family: HarmonyOS!important;}
自定义右键美化
自定义右键美化
以下代码放在
开发者设置➡自定义输出body尾部的HTML代码
中
需要引入JS文件
https://lib.baomitu.com/layer/3.1.1/layer.js
,以下代码已经添加,无需再次引入。<!--右键美化-->
<style type="text/css">
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li><a href="你的网址链接"><i class="fontello fontello-home"></i><span>首页</span></a></li>
<li><a href="javascript:void(0);" onclick="getSelect();"><i class="fontello fontello-pencil"></i><span>复制</span></a></li>
<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fontello fontello-search"></i><span>搜索</span></a></li>
<li><a href="javascript:history.go(1);"><i class="fontello fontello-chevron-right"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);"><i class="fontello fontello-chevron-left"></i><span>后退</span></a></li>
<li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fontello fontello-refresh"></i><span>重载网页</span></a></li>
<li><a href="你的网址链接"><i class="fontello fontello-emo-tongue"></i><span>和我当邻居</span></a></li>
<li><a href="你的网址链接"><i class="fontello fontello-edit"></i><span>给我留言吧</span></a></li>
</ul>
</div>
<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
<script type="text/javascript">
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
a(window).mousemove(function(g) {
d = a(window).width();
c = a(window).height();
h = g.clientX;
k = g.clientY;
e = g.pageX;
f = g.pageY;
h + a(b).width() >= d && (e = e - a(b).width() - 5);
k + a(b).height() >= c && (f = f - a(b).height() - 5);
a("html").on({
contextmenu: function(c) {
3 == c.which && a(b).css({
left: e,
top: f
}).show()
},
click: function() {
a(b).hide()
}
})
})
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);
function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢!") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("啊噢...你没还没选择文字呢!") : window.open("https://www.baidu.com/s?wd=" + a)
}
$(function() {
for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
d = !1;
break
}
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});
</script>
右侧添加人生倒计时(岁月不待人)
右侧添加人生倒计时(岁月不待人)
首先找到网站根目录
/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>
<!-- 时间倒计时代码结束 -->
改好后保存退出,进入网站根目录 /usr/themes/handsome/assets/js/
的文件夹
创建一个名为 timeinfo.js
的文件,并将以下代码放进该文件后,保存并退出
function init_life_time() {
function getAsideLifeTime() {
/* 当前时间戳 */
let nowDate = +new Date();
/* 今天开始时间戳 */
let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
/* 今天已经过去的时间 */
let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
/* 今天已经过去的时间比 */
let todayPassHoursPercent = (todayPassHours / 24) * 100;
$('#dayProgress .title span').html(parseInt(todayPassHours));
$('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
$('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
/* 当前周几 */
let weeks = {
0: 7,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6
};
let weekDay = weeks[new Date().getDay()];
let weekDayPassPercent = (weekDay / 7) * 100;
$('#weekProgress .title span').html(weekDay);
$('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
$('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
let year = new Date().getFullYear();
let date = new Date().getDate();
let month = new Date().getMonth() + 1;
let monthAll = new Date(year, month, 0).getDate();
let monthPassPercent = (date / monthAll) * 100;
$('#monthProgress .title span').html(date);
$('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
$('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
let yearPass = (month / 12) * 100;
$('#yearProgress .title span').html(month);
$('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
$('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
}
getAsideLifeTime();
setInterval(() => {
getAsideLifeTime();
}, 1000);
}
init_life_time()
js文件弄好后,在 设置外观-开发者设置-自定义输出body尾部的HTML代码
处添加以下代码。
注意第一行timeinfo.js前面的域名要改成你自己的域名
<!-- 时间倒计时 -->
<script src="https://你的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>
最后一步,去自定义CSS里面添加以下代码
/* 时间流逝 */
.sidebar-count .content {
padding: 15px
}
.sidebar-count .content .item {
margin-bottom: 15px
}
.sidebar-count .content .item:last-child {
margin-bottom: 0
}
.sidebar-count .content .item .title {
font-size: 12px;
color: var(--minor);
margin-bottom: 5px;
display: flex;
align-items: center
}
.sidebar-count .content .item .title span {
color: var(--theme);
font-weight: 500;
font-size: 14px;
margin: 0 5px
}
.sidebar-count .content .item .progress {
display: flex;
align-items: center
}
.sidebar-count .content .item .progress .progress-bar {
height: 10px;
border-radius: 5px;
overflow: hidden;
background: var(--classC);
width: 0;
min-width: 0;
flex: 1;
margin-right: 5px
}
@keyframes progress {
0% {
background-position: 0 0
}
100% {
background-position: 30px 0
}
}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
width: 0;
height: 100%;
border-radius: 5px;
transition: width 0.35s;
-webkit-animation: progress 750ms linear infinite;
animation: progress 750ms linear infinite
}
.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
background: #bde6ff;
background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}
.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
background: #ffd980;
background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}
.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
background: #ffa9a9;
background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}
.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
background: #67c23a;
background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}
.sidebar-count .content .item .progress .progress-percentage {
color: var(--info)
}
步骤完成以后就可以去查看效果了~
新年灯笼
新年灯笼
以下代码放在
外观设置-开发者设置-自定义css中
@media only screen and (max-width: 760px) {
.deng-box, .deng-box1 {
display:none;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.right {
float: left!important;
}
}
.tc_dl1{
position: relative;
left: -13.625px;
width:70.75px;
}
.tc_dl1 img{width: 95px;/* height: 488px;*/justify-content: center;}
.tc_dl2{position: relative;left:-13.625px;width:70.75px;}
.tc_dl2 img{width: 95px;}
.deng-box {
position: fixed;
top:-3rem;
left: -3rem;
z-index: 9999;
}
.deng-box1 {
position: fixed;
top: -3rem;
right: -3rem;
z-index: 9999;
}
.deng-box1 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
width: 100px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: 12px 8px 8px 10px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-b {
width: 45px;
height: 154px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -4px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.xian {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}
.shui-a {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: #ffa500;
border-radius: 0 0 5px 5px;
}
.shui-b {
position: absolute;
top: 22px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.shui-c {
position: absolute;
top: 28px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.deng:before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: " ";
display: block;
z-index: 999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: " ";
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
font-family: "楷体";
font-size: 26px;
color: #f9b842;
font-weight: bold;
line-height: 37px;
text-align: center;
padding-top:10px;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
background: transparent !important;
}
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg);
}
50% {
-moz-transform: rotate(10deg);
}
100% {
-moz-transform: rotate(-10deg);
}
}
@-webkit-keyframes swing {
0% {
box-shadow: -5px 5px 50px 4px gold;
-webkit-transform: rotate(-10deg);
}
50% {
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
-webkit-transform: rotate(10deg);
}
100% {
box-shadow: -5px 5px 50px 4px gold;
-webkit-transform: rotate(-10deg);
}
}
#envelope{width:35px;margin-bottom:25px;}
以下代码放在
开发者设置➡自定义输出body尾部的HTML代码
中
img标签中的所有src均可更换
<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b">
<div class="deng-t">新春
<img src="https://s11.ax1x.com/2024/01/25/pFmEvb8.png" id="envelope"/>
<div class="tc_dl1">
<img src="https://s11.ax1x.com/2024/01/25/pFmVSUg.jpg"/>
</div>
</div>
</div>
</div>
<div class="shuishui-a">
<div class="shui-c"></div>
<div class="shui-b"></div>
</div>
</div>
</div>
<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b">
<div class="deng-t">快乐
<img src="https://s11.ax1x.com/2024/01/25/pFmEvb8.png" id="envelope"/>
<div class="tc_dl2 ">
<img src="https://s11.ax1x.com/2024/01/25/pFmEzVS.jpg"/>
</div>
</div>
</div>
</div>
<div class="shuishui-a">
<div class="shui-c"></div>
<div class="shui-b"></div>
</div>
</div>
</div>
插件推荐
鼠标美化插件HoerMouse
鼠标美化插件HoerMouse
插件下载:
食用方法:
食用方法:
- 下载插件,解压到
usr/plugins/
目录中 - 修改文件夹名为HoerMouse
- 进入后台设置激活插件
UserAgent插件
UserAgent插件
插件下载:
食用方法:
食用方法:
操作前请做好相应备份工作,此插件只针对于
Handsome
主题
- 下载插件,解压到
usr/plugins
目录中 - 修改文件夹名为UserAgent
- 进入后台设置激活插件
- 修改
Handsome
主题component
目录下comments.php
,代码大概在99~100
行左右。
<span class="star_count"><?php $stars = $comments->stars; echo ($stars) ? $stars : ""; ?></span></a>
添加代码<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
,修改后代码如下:
<span class="star_count"><?php $stars = $comments->stars; echo ($stars) ? $stars : ""; ?></span>
</a><!--UserAgent--><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
原文链接:点击此处跳转
邮箱评论通知插件CommentToMail
邮箱评论通知插件CommentToMail
插件下载:
食用方法:
食用方法:
- 下载插件,解压到
usr/plugins/
目录中 - 修改文件夹名为CommentToMail
- 进入后台设置激活插件
看板娘插件PioModify
看板娘插件PioModify
插件下载:
食用方法:
食用方法:
- 下载插件,解压到
usr/plugins/
目录中 - 修改文件夹名为PioModify
- 进入后台设置激活插件
网站优化
Typecho开启Gzip加速
Typecho开启Gzip加速
找到Typecho安装目录中的
config.inc.php
文件,添加一行代码即可。/* 开启gzip压缩 */
ob_start('ob_gzhandler');
设置gravatar国内源
设置gravatar国内源
找到Typecho安装目录中的
config.inc.php
文件,添加一行代码即可更换为国内源define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');
Handsome
主题可以直接在外观设置-速度优化-Gravatar镜像源地址
中填入https://cdn.v2ex.com/gravatar/
国内镜像源:
V2EX:https://cdn.v2ex.com/gravatar/
极客族:https://sdn.geekzu.org/avatar/
loli:https://gravatar.loli.net/avatar/
226 条评论
《英雄之路》连续剧高清在线免费观看:https://www.jgz518.com/xingkong/158695.html
你好,提示中的js和css啥时候能恢复下载安装?谢谢。
晚点会恢复的
你好,提示中的js和css啥时候能恢复下载安装?谢谢。
晚点会恢复的,假期事情积攒了~
你好,提示中的js和css啥时候能恢复下载安装?谢谢。
你好,提示中的js和css啥时候能恢复下载安装?谢谢。
js和css文件啥时候能下载恢复?谢谢
博主真是太厉害了!!!
作者大大,使用Handsome插件之后,页面就没办法在放大情况下触摸板上双指左右滑动了,怎么办急急急
我在手机上试的话页面放大是可以左右滑动的呀~ 现在你这边提示什么?或者说操作的时候可以发到我邮箱~
我用的是桌面端,我因为用的笔记本,博客显示的很小,就习惯放大网页以后拖动来浏览。
这样左右滑动会无反应,但是上下滑动是正常的。手机端也一切正常。
切换到其他博客主题就正常。其他浏览器和页面都正常。
我试了一下发现,大部分搭载Handsome主题的博客这样操作都会无反应,但唯独主题作者友人C的博客是可以的,过去问了作者也没回复
话说可以申请个友链吗o(*////▽////*)q
名称:阿斯之声
链接:https://owaii.xyz/
图片:https://owaii.xyz/usr/uploads/2024/09/2670338165.png
介绍:We Are Not Human Beings, But Human Doings.
我的站点已添加你的友链~~
好的,我添加一下,作者已经失踪了 哈哈 很久没看到他的消息了
请问在文章页面刷新之后,自定义字体切换到默认字体的问题如何解决
这个问题会在下个版本中修复,我也看了,字体文件太大加载慢~
切换到默认字体文件,应该是字体文件太大,导致没有及时加载过来,建议开启网站全站缓存,如果是宝塔的话请让静态资源缓存。
你好,下载css和js掉了,显示Safari浏览器打不开该页面,因为无法与服务器建立安全的连接。
我看到了,确实掉线了。被我删除了,我回头重新建立一个单独的样式和js
你好,下载掉了,显示Safari浏览器打不开该页面,因为无法与服务器建立安全的连接。
你好,custom.css和 custom.js下载不了,出错了,显示Safari浏览器打不开该页面,因为无法与服务器建立安全的连接。
hello 博主,文章中引用的颜色和文字是怎么实现的?
比如本文中:文件源码下载 CSS文件 custom.css和JS文件 custom.js
这一行的上下文是怎么实现的?
参考下上方代码即可~
[/*把这里这段注释删除掉*/ tabs]
[tab /*把这里这段注释删除掉*/ name="提示" active="true"]
[/*把这里这段注释删除掉*/ button color="success" icon="glyphicon glyphicon-download-alt" url="" type=""]下载Custom.css[/button] [/*把这里这段注释删除掉*/ button color="info" icon="glyphicon glyphicon-download-alt" url="" type=""]下载timeinfo.js[/button]
[/tab /*把这里这段注释删除掉*/ ]
[/tabs/*把这里这段注释删除掉*/]
tab加一个按钮
谢谢博主~~~~
做为啥也不懂的小白,此教程真的太好了,谢谢博主辛苦码字。问问大佬字体包有没有推荐的,自己压缩放服务器网页好慢
有一款好看的字体,我放一个链接
https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/
CommentToMai 插件需要开通25端口,阿里云是禁止开通的,腾讯云可以么?我看您用的是腾讯云。
这个是邮箱端口,在邮箱开通stmp端口就行
您说的邮箱是宝塔邮局,还是支持stmp的独立邮件系统。如果是后者 方便告知下是谁家的邮件系统么?
或者还有一个方法就是自己搭建一个开源的邮箱系统(这个剧需要自己去安装操作了),当然有点繁琐,所以目前我直接就用的163邮箱
目前我用的163网易云邮箱,其他新浪邮箱或者QQ邮箱都可以,只需要开启stmp即可
搞定了,我留个盐,在博主的指导下用的网易邮箱,要在设置里开启STMP服务,然后得到一个授权码。 配置插件的时候
SMTP地址:smtp.163.com
SMTP端口:465
SMTP用户:您的邮箱名 xxx@163.com
SMTP密码:刚才的授权码。
然后 服务器需要验证 ssl加密 两项都勾上 就可以了。
大佬,恕我得寸进尺,您可以出一个针对这个插件的 网易邮箱的配置参数和方法么?
OK啊 可以的回头我看看~ 目前点点忙 哈哈 不好意思哈~
弱弱的问一句,评论审核插件有么?
目前没有 可以通过typecho默认后台审核操作
捧场捧场
Alist你的Key挂了
因为alist加载速度点点慢,所以打算换回之前的Cloudreve 看了好多nextcloud owncloud kodcloud 或者是一些挂载网盘的zfile 等等
但是看访问速度也不慢呀
有点慢,转圈圈就很烦躁
哈哈哈好吧,我看到的只是转一下
也许是我浏览器问题~
是这样,我这里你的盘很快
修复完了·
回头再转移
打算转移到Cloudreve。马上修复
没事来瞅瞅
显示浏览器和IP怎么设置的
插件插件 本篇文章里面有的
[...]});参考https://starsei.com/archives/1/[...]
有不有后台美化的
目前没有,有望去美化。目前已经有很多后台美化的
博主,我的新年灯笼关闭之后,左下角出现快乐两个字,CSS和后台都翻过了,没有发现什么,咋办?
明天我来看看 em...你重新开启再关闭下,刷新下缓冲 把全局css样式关掉
全局CSS关了还是这样
应该是你单独放到 后台设置—>外观设置中了 我看了一下我的 没开启新年灯笼 后台源码是没有 标签样式的
外观设置有这个源码吗?
你是不是在外观设置->自定义HTML代码中填写了 你看看
你的这个代码 是手动去添加到 外观设置里了吗 你看一下
```
乐快````
你是不是自己有修改过样式 看看有没有和你的原本博客样式冲突的类名字
插件关闭重新启动下
搞定啦,谢谢博主
没事
bug反馈:使用插件关闭新年灯笼后,样式出问题
是不是开启了全局样式,关掉就可以了。那个样式我还没调整
[...]我普通的不能再普通的普通人英专但不擅长英语的英专生文科但喜欢数理化的文科生喜欢买书但不喜欢看书的读书人I到骨子里的INFJ立志Academic到退休的学术废佬喜欢做最无聊的事在“贵族学校”放逐的西西弗斯我的技能和兴趣点技能树科技树Microsoft系列Adobe系列Photoshop (PS)Premiere (PR)After Effect (AE) 基础 (指打开和关闭)Illustrator[...]
大佬还不更新呀都小年了
插件已更新,目前部分功能可支持使用。
没看到
大佬咋不都更新了
单独新增了一篇文章
今天晚上挂上去,丢
大佬还没发布呀
哈哈哈,我也用上了,谢谢博主分享教程!
大佬 你网站的灯笼咋龙的
可以参考一下本文的(新年灯笼)美化哦~ 已经更新了
你的Comic插件咋下载不了
还在整理中,年后应该会上线哦~
置顶咋弄来的大佬
后台设置-控制台-插件-Handsome-置顶文章的cid,填写即可
谢谢大佬 我设置了文章居中为啥没有剧中
得需要自己添加CSS样式
可以码
还得再等等
哦哦要不大佬帮我美化一下钱好说
等我插件,我整理好你直接用就行。我的全站样式都是用的它
好吧 加油大佬等着呢
主要是年底稍微有点点忙,不然很快就可以下载了。我会尽快的
知道了 辛苦辛苦
哈哈,没事没事,本来我就打算要放上来的
要不现在发我试试
还有点点问题,我还没整理 哈哈 会很快的
文件放的位置有点散,我整理下就行。这周吧 我会放上来的
有群不 大佬
没有 我自用的
大佬,首页文章标题居中 还是没居中
没有居中吗?你刷新下缓存看看 我插件里面的css有设置我记得
大佬还没发布呀
QQ呢
好的
发出来试试 看看啥问题 一个人解决还不如大家一起
棒
6666
你好 请问handsome主题9.2版本 文章中代码没有高亮怎么弄?
下载一下高亮js文件
[...]}⭐ 来源Handsome主题美化记录 - 猫不吃鱼 (starsei.com)[...]
佬,左侧彩色图标&右侧彩色标签云在9.2.1上,需要点击一下任意跳转页面,才有彩色效果
站点:yzyee.cn
是直接复制的我的代码吗? 有没有放到PJAX回调函数中
是直接复制的,是放在PJAX回调函数内的
本地JS和 PJAX都需要放
oo,好的谢谢
补充:代码为直接复制,无更改
[...]我普通的不能再普通的普通人英专但不擅长英语的英专生文科但喜欢数理化的文科生喜欢买书但不喜欢看书的读书人I到骨子里的INFJ立志Academic到退休的学术废佬喜欢做最无聊的事在“贵族学校”放逐的西西弗斯我的技能和兴趣点技能树科技树Microsoft系列Adobe系列Photoshop (PS)Premiere (PR)After Effect (AE)Illustrator (AI)语料库工具An[...]
[...]此美化教程来自猫不吃鱼-Handsome主题美化记录,如有侵权请留言删除![...]
请问大佬飘动的花瓣和评论跳动的特效能分享下吗
https://cos.starsei.com/handsome/Comic/static/js/sakura.js 这个是樱花的
https://cos.starsei.com/handsome/Comic/static/js/commentTyping.js 这个是评论跳动特效JS,你需要保存一下代码
谢谢大佬,再问下底部页脚美化那个要修改哪些代码
我还没来得及修复
/themes/handsome/component/footer.php 你可以看一下本篇美化文章中的是有当前如何操作的,但是左侧底部暂时只能放一个
谢谢大佬分享嘞
请问怎么把文章作者显示关闭和文章浏览量关闭呢
主题内是没有关闭的,如果需要关闭的话可以设置一下CSS样式或者修改主题源码
li.meta-author{display:none;} /*文章作者*/
li.meta-views{display:none;} /*文章浏览次数*/
.meta-comments/*文章评论数*/
.meta-word/*文章数目*/
.meta-categories/*分类*/
.meta-date/*发布时间*/
感谢大佬,我是个新手不太懂,不过文章内已经没用显示这些了,但是首页文章标题下还会显示文章作者,请问还要添加什么css
.text-muted.post-item-foot-icon.text-ellipsis.list-inline li:first-child{display:none;}
添加这一行就可以了,li后面的first-child也可以换成child(1)
真的是非常感谢您,已经没有显示了,比之前好看多了
大佬,看板娘不能自定义模型吗?
可以自定的,但是需要了解一下原版,这个是移植的
请问大佬页面上面飘落的樱花和评论里面的这个跳动的特效是怎么美化的呀
链接晚一点我发给你OωO
好的,感谢大佬,刚刚看到那个邮件通知配置好怎么测试呀?
smtp端口,邮箱,密码配置好以后, 直接在你的文章下面评论就可以发送的。配置成功以后你的邮箱会有提示的
邮箱后台需要把SMTP服务开启,QQ邮箱、网易等等都是这样的
handsome主题原头像和昵称简介并排显示,如何设置头像在上文字在下?
在外观设置里面->左侧边栏竖排头像样式
评论区浏览器、操作系统、IP,很漂亮,请问有教程嘛?
嗯,就是当前页面有一个 UserAgent插件 就可以咯
感谢分享,你的回复可见能用吗,我的回复了他还是不显示
可以啊
感谢,我一会儿试试,您的网站邮箱提醒回复是用的那个插件?
https://pan.starsei.com/s/2zTk 这个插件CommentToMail
好的,您的博客部署上什么也没改动,评论回复功能就直接能用?,我是最新版但是评论了没反应OωO
部署以后需要改动的,你有没有设置STMP用户,密码
插件设置后你设置smtp或者其他邮件通知方式了吗
我表达错了,我是想说,这个不是有那个评论可见功能么,我的那个评论了以后没反应,不现实评论可见里的内容
你指的是私密评论可见吗?
对,评论可见,我那个评论了,还是看不了
[hide]这里编辑隐藏文本(评论可见)[/hide]
就是这个代码
https://starsei.com/links.html 你看一下,我刚测试了一下,没有问题哦 ,回复以后需要刷新当前页面就可以看到了![hide](回复可见内容)[/hide]
您点击我头像打开我弄个测试的,我刚才试了试还是不行,没有反应,手动刷新了一下也没反应
可以看见的,没有问题哦 (你的内容是:可以看见吗?)
为啥我自己看不见呢,我很蒙,我用的EDGE浏览器说啥也看不见OωO,非常感谢您,我自己在找找问题吧,您方便给我生成一个测试页让我试一下吗,我确定一下,看是不是有BUG,EDGE显示不了,我已经创建友情链接!非常感谢您今天的帮助!
你可以尝试把COOKIE清除一下 再看一下
cookie清除了,不管用,我用隐私模式也试了试也不行?
https://starsei.com/links.html 点开链接看一下 我的友链设置了一个回复可见,你随便评论看一下
我可以看见您的,我的看不见
你的有没有设置评论需要审核呢
我也看了,你的在无痕模式下不可以查看
但是您的倒是可以,我的版本是handsome 9.0.2 Pro
我和你一个把版本OωO
您部署模板的时候有改什么设置吗
下载最新版本只有 修改/usr/themes/下的handsome,我没有覆盖上传,删除handsome文件夹后,放入最新的handsome文件,其他的话也没有改动!
我下载个老版本,添加进去不覆盖我试试,看是不是能修复?
可以,暂时只能这样试试了ヾ(≧∇≦*)ゝ
还有个小问题。我网站的评论头像显示不正常,您用的什么头像源呢
记得刷新缓存和CDN
我记得是在主题设置里面 最后镜像源地址修改一下
镜像源地址在哪儿修改?
其他的镜像源地址有点慢,或者你自己反代一个
好了,我弄了好久,就是忘了弄,镜像源地址了,嘿嘿
好的
还是非常感谢,帮我节省了好多时间解决了我搞了好久都没搞懂的
没事的哦~
我感觉你这个搞得挺好看的,我在按你的教程搞,嘿嘿
“外观设置-速度优化-gravatar镜像源地址”这里 修改我那个就可以
国内源你得改一下 都是gravatar头像,用国内源https://gravatar.cn/avatar
非常感谢您的热心解答?
我看您首页显示的文章标题好像加粗了,而且还没有摘要,这个摘要怎么取消的哇
后台设置-主题设置-外观设置-首页文章不显示摘要
非常感谢,我的问题解决了,我偶然间发现的,填写邮箱后评论就能正常看,不填写邮箱就看不了,我一开始没有强制填写邮箱,现在没事了,还有个小问题问一下您这个相册独立页面怎么做的?
后台单独添加一个相册的页面,选用相册模板就可以了
还真没有,我刚又去看了一遍?
我后台没得相册模板?我再找找
哦对,是新增一个分类
新增完分类添加文章,我显示的和您那个不一样嘿,这样倒也能用
你这个应该是添加的文章,我去看了一下,你应该弄在category下是一个分类诶
我这个添加的分类,然后分类里面也不显示我刚才添加的文章
后台然后管理-分类 新增一个分类,发文章的时候选择这个分类就可以了
左侧导航栏添加的时候选择分类 不要选择文章
弄出来了,但是还有个小问题,您这个文章是怎么在首页把相册隐藏不显示的类
找到了,找到了,插件里面能设计
好的,找到就OKOωO
谢谢大哥耐心指导?
没事没事 互相学习୧(๑•̀⌄•́๑)૭
向你学习嘿嘿?
想跟你换友联
可以的, 给我一下你的友链
亦の小窝
https://www.ibabyo.cn
已经添加了 帮我更新一下头像和描述哦
站点头像:https://secure.gravatar.com/avatar/574b14b16cd790ac8cb26d9f9046f1a5?s=220&r=X&d=mm
站点描述:雾散处,玫瑰花开
你的这个站点头像链接有些问题呀,我这里加载不了,可以给我个直链吗?
好 https://cos.starsei.com/handsome/img/headimg.jpg
我需要的是你的favicon.ico
咳咳 等等 https://cos.starsei.com/handsome/img/favicon.ico
很好我知道原因了,因为你把你的图片都上传到了OSS,权限开的可能也只是私有读写,没开公有读写权限,然后我站点才会识别不出。嗯应该就是这样
现在没有问题了
我添加白名单了OωO
OK
求看板娘插件
晚一点我整理一下
谢谢站长٩(ˊᗜˋ*)و
可以重新去下载一下啦!本篇文章插件推荐中最后一个,修复了一下左侧导航点击部分不出现的情况!
okok
https://pan.starsei.com/s/8XhP 直接下载就可以了哦OωO
感谢分享!(ฅ´ω`ฅ)
邮箱通知测试
感谢分享
欢迎加入 Typecho 大家族