css相关
网站背景添加海浪背景
网站背景添加海浪背景
添加至后台
主题设置-开发者设置-自定义CSS
/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; }
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }
添加至后台 主题设置-开发者设置-自定义输出head 头部的HTML代码
<!-- 海浪背景 -->
<div id="wavesDIV" style="display: block;">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
<use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
</g>
</svg>
</div>
底部版权美化
底部版权美化
左侧底部放在
后台-开发者设置-博客底部左侧信息
<!--左侧底部-->
<div class="github-badge">
<span class="badge-subject">Copyright</span>
<a href="https://www.5k5b.com" target="_blank">
<span class="badge-value bg-blue">©2022 5k5b.</span>
</a>
</div> |
<div class="github-badge">
<span class="badge-subject">豫ICP备</span>
<a href="http://beian.miit.gov.cn/" target="_blank">
<span class="badge-value bg-green">2020030958号</span></a>
</div>
<div class="github-badge">
<img src="https: //cdn-qh.oss-cn-guangzhou.aliyuncs.com/bkimg/bei.png" style="float:left;" />
<span class="badge-subject">豫公网安备</span>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41032602000132" target="_blank">
<span class="badge-value bg-green">41032602000132号</span></a>
</div>
右侧底部放在 后台-开发者设置-博客底部右侧信息
<!--右侧底部-->
<div class="github-badge">
<span class="badge-subject">本站由</span>
<a href="https://www.95vps.com/aff/20" target="_blank">
<span class="badge-value bg-blue">桔子数据提供服务</span></a>
</div> |
<div class="github-badge">
<span class="badge-subject">Theme by</span>
<a href="https://www.ihewro.com/" target="_blank">
<span class="badge-value bg-orange">Handsome</span></a>
</div>
css放在 主题设置-自定义css
内
/*底部页脚css*/
.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-green {
background-color: #3bca6e
}
把下面代码放在主题目录 usr/themes/handsome/component/footer.php
内大概在 117
行,覆盖原来的即可
<footer id="footer" class="app-footer" role="footer">
<div class="padder-sm bg-white footer_wrapper box-shadow-wrap-normal b-normal">
<div class="pull-right hidden-xs text-ellipsis">
<?php $this->options->BottomInfo();?>
<!--/////////// 可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解/////////-->
</div>
<span class="text-ellipsis">
<?php $this->options->BottomleftInfo(); ?>
</span>
</div>
</footer>
修改h1,h2标题背景颜色
修改h1,h2标题背景颜色
/*文章页h标签背景颜色修改*/
#post-content h1, #post-content h2 {
background : linear-gradient(to bottom,transparent 60%,rgba(0,191,255,.3) 0) no-repeat
}
右侧列表导航栏图标颜色
右侧列表导航栏图标颜色
这一项是更改右上方三个图标(大拇指,信息,礼物)的颜色,默认是白色。
同样
#
后面的六位数字代表颜色,可以改~/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}
#post-content pre code {
display:block;
overflow-x:auto;
position:relative;
margin:0;
padding-left:50px;
}
pre code {
position:relative;
display:block;
overflow-x:auto;
margin:4.4px 0.px .4px 1px;
padding:0;
max-height:500px;
padding-left:3.5em
}
.img-square {
transition: all 0.3s;
}
.img-square:hover {
transform: rotate(360deg);
}
.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}
JavaScript相关
左侧彩色图标和彩色标签云
左侧彩色图标和彩色标签云
/* 左侧图标颜色and彩色标签云 */
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;
});
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
}
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag => {
tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.color = tagsColor;
});
如果你博客开启了PJAX,还需要在 PJAX回调函数
里面添加以下代码:
// 彩色标签云
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;
});
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
}
}
文件修改
在博客顶部添加心知天气
心知天气
首先去心知天气官网注册账号并申请API
之后在
/usr/themes/handsome/component/headnav.php
文件中的搜索search form下方(大概在142行)添加以下代码注意将API信息改成自己的
<!-- 心知天气-->
<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>
<!-- 心知结束-->
404页面添加自动返回首页功能
404页面添加自动返回首页功能
找到
/usr/themes/handsome
文件夹内的 404.php
文件并打开。在
h1 class="text-shadow text-white">404
这一行(大概在91行)下面加入以下代码:<br>
<small class="text-muted letterspacing"></small>
<b id="sp">5</b>秒后自动返回···<br>
<a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a>
再把下面的代码加入 404.php
文件内最底下的 </body>
前面
<script type="text/javascript">
onload = function(){setInterval(go, 1000);};var x=5;
function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}}
</script>
1 条评论
qwq,测试