自定义CSS篇
代码语言：javascript复制.emotion-bilibili{
width: 25px;
}
::-webkit-scrollbar {
width: 8px;
height: 6px
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
background-color: white;
}
/*定义滑块 内阴影 圆角*/
::-webkit-scrollbar-thumb {
background-color: #80d6ff;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,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
}
/*首页文章图片获取焦点放大*/
.entry-thumbnail{overflow:hidden;}
.item-thumb{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb:hover{
transform: scale(1.05);
}
.item-thumb-small{
cursor: pointer;
transition: all 0.6s;
}
/*头图放大*/
.panel {
cursor:pointer;
transition:all 0.6s;
}
.panel-small {
cursor:pointer;
transition:all 0.6s;
}
.item-thumb-small {
cursor:pointer;
transition:all 0.6s;
}
.item-thumb-small:hover {
transform:scale(1.05);
}
.index-post-img{overflow:hidden;}
/*手机不显示*/
@media (max-width:767px) {
#tabs-4,#tag_cloud-2,#blog_info,.gn_box {
display: none;
}
}
/*全局字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap;
src:url(https://blogimgbed.oss-cn-beijing.aliyuncs.com/web/HarmonyOS_Sans_SC_Medium.subset.woff2) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium}
body {font-family: HarmonyOS!important;}
/*页脚美化*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px
}
.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: #007ec6
}
.github-badge .bg-orange {
background-color: #ffa500
}
.github-badge .bg-red {
background-color: #f00
}
.github-badge .bg-green {
background-color: #3bca6e
}
.github-badge .bg-purple {
background-color: #ab34e9
}右侧导航栏倒计时
在网站模板文件中找到handsome/component/aside.php
在第七行代码div id="sidebar"后面添加如下代码
代码语言：javascript复制CSS HTML部分
<style>
.gn_box {
border: none;
border-radius: 10px;
}
.gn_box {
padding: 8px 10px;
margin: 8px;
margin-bottom: 15px;
text-align: center;
background-color: ;
}
#t_d {
color: grey;
font-size: 18px;
}
#t_h {
color: grey;
font-size: 18px;
}
#t_m {
color: grey;
font-size: 18px;
}
#t_s {
color: grey;
font-size: 18px;
}
</style>
<div class="gn_box">
<h3>距2024年还有</h3>
<center>
<div id="CountMsg" class="HotDate"><span id="t_d"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span
id="t_s"> 秒</span></div>
</center>
<script
type="text/javascript"> function getRTime() { var EndTime = new Date('2024/01/01 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); var day = document.getElementById("t_d"); if (day != null) { day.innerHTML = d " 天"; } var hour = document.getElementById("t_h"); if (hour != null) { hour.innerHTML = h " 时"; } var min = document.getElementById("t_m"); if (min != null) { min.innerHTML = m " 分"; } var sec = document.getElementById("t_s"); if (sec != null) { sec.innerHTML = s " 秒"; } } setInterval(getRTime, 1000); </script>
</div></img>> JS部分，最后以外部样式引入
代码语言：javascript复制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()
