一、为你的博客加一个每日60秒早报
前言
相信大家已经看到本站置顶的其中一篇文章为“每日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
的 <head></head>
里面。
<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>
4、侧边栏添加当前时间
效果展示
教程
将以下代码放置在 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>
5、侧边栏添加小卡片
效果展示
教程
将以下代码放置在 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>
6、侧边栏添加和风天气组件
效果展示
教程
将以下代码放置在 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>
7、侧边栏添加小姐姐组件
效果展示
教程
🚁 将以下代码放置在 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>
8、网站底部添加波浪
效果展示
效果见本博客底部,代码如下,请添加至合适的位置:
<!--底部波浪开始-->
<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>
参考链接
谢谢以下大佬的支持!
请问 这是什么程序源码啊