相信大家已经看到本站置顶的其中一篇文章为“每日60S早报”,每日自动更新。下面教大家如何给自己的博客也添加一个
教程
1、前往 ALAPI 注册一个账号并登录
2、在个人管理-个人中心页面复制你的Token,然后替换下方代码的“你的Token”
![60s-for-news](https://v2.alapi.cn/api/zaobao?token=你的Token&format=image)
3、修改好后复制,新建博客文章,粘贴到正文部分,这样60s早报的主体部分就配置好了
在 footer.php 适当位置添加如下内容。
<span id = "runtime_span"></span>
<script type = "text/javascript">
function show_runtime()
{window.setTimeout("show_runtime()",1000);X=new
Date("1/01/2021 00:00:00"); //初始建站时间修改此处
Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);
runtime_span.innerHTML="网站已运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();
</script>
效果展示
配置教程
(1)css文件配置
把下面的代码放到 header.php 的
里面。<link rel="stylesheet" type="text/css" href="https://www.whbblog.cn/css/yiyan.css">
(2)script 配置
将以下代码放置在 post.php 中的合适位置。
<div class="qinian"><div class="text-center main-shadow yiyan-box radius8 them-box"><p id="hitokoto">:D 获取中...</p><script src="https://v1.hitokoto.cn/?c=i&encode=js&select=%23hitokoto" defer></script></div></div>
效果展示
教程
将以下代码放置在 sidebar.php 文件中合适的位置。
<section id="sidebar-current-time" class="bg-white dark:bg-black dark:bg-opacity-20 card card-bordered rounded border border-gray-900/10 relative mb-4">
<div class="mx-4 py-2 my-2 flex items-center border-b border-gray-900/10">
<svg class="w-5 h-5 mr-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8937" width="200" height="200">
<path d="M512 514m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#1afa29" p-id="8938" data-spm-anchor-id="a313x.7781069.0.i0" class="">
</path>
<path d="M512 512m-253.15 0a253.15 253.15 0 1 0 506.3 0 253.15 253.15 0 1 0-506.3 0Z" fill="#FFFFFF" p-id="8939">
</path>
<path d="M512 512m-203.07 0a203.07 203.07 0 1 0 406.14 0 203.07 203.07 0 1 0-406.14 0Z" fill="#1296db" p-id="8940" data-spm-anchor-id="a313x.7781069.0.i3" class="selected">
</path>
<path d="M622.12 497h-91.31a24.09 24.09 0 0 0-11.46-7.92V360.22a6 6 0 0 0-6-6h-2.81a6 6 0 0 0-6 6v128.93a24.06 24.06 0 1 0 26.19 38.08h91.49a6 6 0 0 0 6-6V503a6 6 0 0 0-6.1-6z" fill="#69B452" p-id="8941">
</path>
</svg>
<span>当前时间</span>
</div>
<div class="my-3">
<iframe src="https://www.whbblog.cn/currenttime/index.html" width="100%" height="110" frameborder="no">
</iframe>
</div>
</section>
效果展示
教程
将以下代码放置在 sidebar.php 文件中合适的位置。
<section id="custom_html-2" class="bg-white dark:bg-black dark:bg-opacity-20 rounded border border-gray-900/10 relative mb-4">
<div class="textwidget custom-html-widget">
<aside id="php_text-8" class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
<div class="textwidget widget-text">
<style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center;padding: 10px;background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%);border-radius: var(--main-radius);} #flip-box-1{overflow:hidden;height:50px;border-radius:99px} #flip-box-1 div{height:50px} #flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%} #flip-box-1 div:first-child{animation:show 8s linear infinite} .flip-box-1-1{background-image:linear-gradient(to right,#fa709a 0,#fee140 100%)} .flip-box-1-2{background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);} .flip-box-1-3{background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);} .flip-box-1-4{background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);} .flip-box-1-5{background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);} .flip-box-1-6{background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);} @keyframes show{0%{margin-top:-300px} 5%{margin-top:-250px} 16.666%{margin-top:-250px} 21.666%{margin-top:-200px} 33.332%{margin-top:-200px} 38.332%{margin-top:-150px} 49.998%{margin-top:-150px} 54.998%{margin-top:-100px} 66.664%{margin-top:-100px} 71.664%{margin-top:-50px} 83.33%{margin-top:-50px} 88.33%{margin-top:0} 99.996%{margin-top:0} 100%{margin-top:300px} }</style>
<div id="container-box-1">
<div class="container-box-1-1">坚持每天来逛逛,会让你</div>
<div id="flip-box-1">
<div>
<div class="flip-box-1-1">生活也美好了!</div>
</div>
<div>
<div class="flip-box-1-2">心情也舒畅了!</div>
</div>
<div>
<div class="flip-box-1-3">走路也有劲了!</div>
</div>
<div>
<div class="flip-box-1-4">腿也不痛了!</div>
</div>
<div>
<div class="flip-box-1-5">腰也不酸了!</div>
</div>
<div>
<div class="flip-box-1-6">工作也轻松了!</div>
</div>
</div>
<div class="container-box-1-2">你好我也好,不要忘记哦!</div>
</div>
</div>
<div class="clear">
</div>
</aside>
</div>
</section>
效果展示
教程
将以下代码放置在 sidebar.php 文件中合适的位置。
<section data-id="sidebar-weather" class="bg-white dark:bg-black dark:bg-opacity-20 card card-bordered rounded border border-gray-900/10 relative mb-4">
<div id="he-plugin-standard">
</div>
<script>WIDGET = {
"CONFIG": {
"layout": "2",
"width": "238",
"height": "260",
"background": "1",
"dataColor": "FFFFFF",
"borderRadius": "5",
"key": "3180d3c43e524753ab8bcef69dba023a"
}
}</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0">
</script>
</section>
效果展示
教程
🚁 将以下代码放置在 header.php 文件中末尾的位置。
<script src="https://www.whbblog.cn/js/jquery-latest.js"></script>
🚀 将以下代码放置在 sidebar.php 文件中合适的位置。
<section data-id="sidebar-meimei" class="mb-4">
<style>#player { margin: 10px auto; max-width: 100%; border-radius: 10px; display: block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height: 40px; border: none; background-color: #f95491; color: #fff; margin-top: 10px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: 0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #eeb4bf; } .kzsp { width: 100%; display: flex; justify-content: space-between; } .kzsp>button { border: none; height: 40px; padding: 0 30px; font-size: 16px; background-color: #f95491; border-radius: 10px; color: #fff; transition: 0.3s; cursor: pointer; } .kzsp>button:active { background-color: #e25a00; }</style>
<button type="button" id="ckxjj">点我看小姐姐视频</button>
<div id="xjjsp">
<video id="player" src="" controls alt="小姐姐视频"></video>
<div class="kzsp">
<button id="switch">连续: 开</button>
<button id="next">下一个</button>
</div>
<button type="button" id="gbxjj">关闭视频</button>
</div>
<script type="text/javascript" src="https://www.whbblog.cn/js/video.js">
</script>
</section>
效果展示
效果见本博客底部,代码如下,请添加至合适的位置:
<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none">
<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" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
<use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
<use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>
</g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
后台css添加
/*背景*/
body::before {
z-index: -1;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.1;
position: fixed;
background: center/cover no-repeat;
background-image: url(https://api.ixiaowai.cn/api/api.php);
}
functions.php文件里,添加
//在线人数
function online_users() {
$filename='online.txt'; //数据文件
$cookiename='Nanlon_OnLineCount'; //Cookie名称
$onlinetime=30; //在线有效时间
$online=file($filename);
$nowtime=$_SERVER['REQUEST_TIME'];
$nowonline=array();
foreach($online as $line){
$row=explode('|',$line);
$sesstime=trim($row[1]);
if(($nowtime - $sesstime)<=$onlinetime){
$nowonline[$row[0]]=$sesstime;
}
}
if(isset($_COOKIE[$cookiename])){
$uid=$_COOKIE[$cookiename];
}else{
$vid=0;
do{
$vid++;
$uid='U'.$vid;
}while(array_key_exists($uid,$nowonline));
setcookie($cookiename,$uid);
}
$nowonline[$uid]=$nowtime;
$total_online=count($nowonline);
if($fp=@fopen($filename,'w')){
if(flock($fp,LOCK_EX)){
rewind($fp);
foreach($nowonline as $fuid=>$ftime){
$fline=$fuid.'|'.$ftime."\n";
@fputs($fp,$fline);
}
flock($fp,LOCK_UN);
fclose($fp);
}
}
echo "$total_online";
}
在要引入的地方,添加
<?php echo online_users() ?>
自定义头部或页脚添加
<!-- 顶部跑马灯特效 -->
<style>
#top-grrk{
background:url(https://external-30160.picsz.qpic.cn/e94ff0137dfb6cc51925d4ccf61d2541);
height:2px;
position:fixed;
width:100%;
Z-index:10000;
}
</style>
<div id="top-grrk"></div>
<!-- 顶部跑马灯特效 -->
打开后台-外观-设置外观-自定义设置-底部自定义内容
<!--动态标题-->
<script>
//崩溃欺骗
var OriginTitle = document.title;
var titleTime;
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
document.title = "╭(°A°)╮ 页面崩溃啦 ~";
clearTimeout(titleTime);
} else {
document.title = "(ฅ>ω<*ฅ) 噫又好了~" + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>
打开后台-外观-设置外观-自定义设置-底部自定义内容
<!--下雪特效-->
<canvas id="Snow" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;background: rgba(125,137,95,0.1);pointer-events: none;"></canvas>
<script>
if(true){
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
window.requestAnimationFrame = requestAnimationFrame;
})();
(function() {
var flakes = [],
canvas = document.getElementById("Snow"),
ctx = canvas.getContext("2d"),
flakeCount = 200,
mX = -100,
mY = -100;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function snow() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < flakeCount; i++) {
var flake = flakes[i],
x = mX,
y = mY,
minDist = 150,
x2 = flake.x,
y2 = flake.y;
var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
dx = x2 - x,
dy = y2 - y;
if (dist < minDist) {
var force = minDist / (dist * dist),
xcomp = (x - x2) / dist,
ycomp = (y - y2) / dist,
deltaV = force / 2;
flake.velX -= deltaV * xcomp;
flake.velY -= deltaV * ycomp;
} else {
flake.velX *= .98;
if (flake.velY <= flake.speed) {
flake.velY = flake.speed }
flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
}
ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
flake.y += flake.velY;
flake.x += flake.velX;
if (flake.y >= canvas.height || flake.y <= 0) {
reset(flake);
}
if (flake.x >= canvas.width || flake.x <= 0) {
reset(flake);
}
ctx.beginPath();
ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(snow);
};
function reset(flake) {
flake.x = Math.floor(Math.random() * canvas.width);
flake.y = 0;
flake.size = (Math.random() * 3) + 2;
flake.speed = (Math.random() * 1) + 0.5;
flake.velY = flake.speed;
flake.velX = 0;
flake.opacity = (Math.random() * 0.5) + 0.3;
}
function init() {
for (var i = 0; i < flakeCount; i++) {
var x = Math.floor(Math.random() * canvas.width),
y = Math.floor(Math.random() * canvas.height),
size = (Math.random() * 3) + 2,
speed = (Math.random() * 1) + 0.5,
opacity = (Math.random() * 0.5) + 0.3;
flakes.push({
speed: speed,
velY: speed,
velX: 0,
x: x,
y: y,
size: size,
stepSize: (Math.random()) / 30 * 1,
step: 0,
angle: 180,
opacity: opacity });
}
snow();
};
document.addEventListener("mousemove", function(e) {
mX = e.clientX,
mY = e.clientY });
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
init();
})();
}
</script>
cuteen主题在sidebar.php里面
这个位置加入下方代码就行,例如:
<span>最新回复</span>
在下面放该代码
<span class="ios"></span>
下方代码放后台-自定义CSS
/*PC端侧栏仿ios小点点*/
.ios {
content: " ";
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fc625d !important;
width: 10px;
height: 10px;
z-index:999;
-webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
box-shadow: 19px 0 #fdbc40, 40px 0 #35cd4b;
float: right;
right: 58px;
top: 22px;
z-index:100;
}
引入CSS
.sjxs{display: none;}
@media (max-width: 768px){.sjxs{display: block !important;}
.pcxs{display: block;}
@media (max-width: 768px){.pcxs{display: none;}
在下方位置加入代码
1、路径/Cuteen/include/footer.php中
</main>
<footer id="footer" class="bg-white p-4 text-center mt-4">
2、把footer标签里面的原有内容删了,直接覆盖下方代码即可
<!-- WAP --><span class="sjxs">
<p class="small" style="position: relative;bottom: 1.5px; font-size:15px; font-family="Verdana,Geneva,DejaVu Sans,sans-serif">
© 2022 - <?php echo date('Y'); ?> 🌸 Lsenyu - blog</p>
<span style="font-size: 15px">
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">💘<?php $this->options->ICP() ?></a>
<a href="https://blog.zwying.com/" target="_blank">💖</a>
</span></span>
<!-- PC -->
<span class="pcxs">
<p class="small" style="font-size:15px; font-family="Verdana,Geneva,DejaVu Sans,sans-serif">© 2022 - <?php echo date('Y'); ?> <a target="_blank" class="d-md-inline-flex nav-link" href="/index.php/Copyright.html" title="本站申明">🌸</a> Lsenyu - blog</p>
<span style="position: relative;bottom: 3px;"><span style="font-size: 15px" id="timeDate">载入天数...</span><span style="font-size: 15px" id="times">载入时分秒...</span></span>
<script language="javascript">
var now = new Date();
function createtime(){
var grt= new Date("9/06/2022 00:00:00");/*---这里是网站的启用时间--*/
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;}
minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已稳定运行:"+dnum +" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒🏄";
}
setInterval("createtime()",250);
</script>
<br><a target="_blank" class="d-md-inline-flex nav-link" href="https://typecho.org" title="博客驱动为 Typecho"><img src="https://img.shields.io/badge/Powered-Typecho-d42328?style=flat&logo=Analogue"></a>
 <a target="_blank" class="d-md-inline-flex nav-link" href="https://blog.zwying.com" title="主题采用 Cuteen"><img src="https://img.shields.io/badge/Theme-Cuteen-9561cd?style=flat&logo=Pinterest"></a>
 <a target="_blank" class="d-md-inline-flex nav-link" href="https://beian.miit.gov.cn/#/Integrated/index" title="琼ICP备2021009639号-3"><img src="https://img.shields.io/badge/琼ICP备-2021009639号-4bc51d?style=flat&logo=Octane Render"></a>
 <a target="_blank" class="d-md-inline-flex nav-link" href="https://www.rainyun.com/?ref=MjQyNTc=" title="由 腾讯云 提供云计算服务"><img src="https://img.shields.io/badge/TxCloud-腾讯云-f42187?style=flat&logo=Git Extensions"></a>
 <a target="_blank" class="d-md-inline-flex nav-link" href="https://cloud.tencent.com/" title="由 腾讯云 提供CDN加速服务"><img src="https://img.shields.io/badge/CDN-TxCloud-148EFF?style=flat&logo=ONLYOFFICE"></a>
</span>
你的文章充满了欢乐,让人忍不住一笑。 http://www.55baobei.com/qESoUwfcfg.html
你的文章内容非常用心,让人感动。 http://www.55baobei.com/oNdNdguC6q.html
你的文章让我感受到了不一样的风景,谢谢分享。 https://www.yonboz.com/video/3435.html
[...]网站添加随机一言 - 秋月の阁 (function () { window.TypechoComment = { dom : function (id) { return document.getElementById(id); }, create : function (tag, attr) { var el = document.createElement(tag); for (v[...]
文章的确不错啊https://www.cscnn.com/
兄弟写的非常好 https://www.cscnn.com/
想想你的文章写的特别好www.jiwenlaw.com
你的才华让人惊叹,请继续保持。http://www.led-hot.com
叼茂SEO.bfbikes.com
想想你的文章写的特别好https://www.jiwenlaw.com/
叼茂SEO.bfbikes.com
泥好大佬~请问你的猫猫鼠标怎么整
123
你好怎么联系你
QQ1035761010
诶嘿!建议搞一下伪静态,可能会让 URL 变得更好看一些(说白了就是 URL 重写)
好耶,调整好了٩(๑òωó๑)۶
好耶!