┏ (゜ω゜)=☞
主题
本期博客美化采用的主题为Argon
添加背景音乐
在“Argon主题设置”中的“脚本”任意一栏中添加下面代码，代码内有部分注释，可自行更改定义内容。
<!--音乐播放器-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js
server="netease" /*音乐平台*/
type="playlist"
id="8659142201" /*歌单、歌曲id*/
fixed="true"
autoplay="true" /*自动播放*/
loop="all"
order="random"
preload="auto"
list-folded="true"
mini="true"
mutex="true">
</meting-js>鼠标悬停3D效果
在“Argon主题设置”中的“脚本”任意一栏中添加下面代码，代码内有部分注释，可自行更改定义内容。
<!--鼠标悬停3D效果start-->
<!--1.定义对象属性（似乎没生效）-->
<div class="article.post:not(.post-full)" data-tilt></div>
<div class=".shuoshuo-preview-container" data-tilt></div>
<!--2.JS脚本-->
<!--script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mobile-detect.js"></script--> <!--如果你没有引用过mobile-detect.js，请去除这里的注释以使其生效-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/vanilla3D/vanilla-tilt.js"></script>
<!--3.动作-->
<script type="text/javascript">
// 设备检测。依赖前述mobile-detect项目。
var md = new MobileDetect(window.navigator.userAgent);
// PC生效，手机/平板不生效
// md.mobile(); md.phone();
if(!md.phone() && !md.tablet()){
window.pjaxLoaded = function(){
// 正文卡片
VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full)"),{
reverse:false, // 是否反转倾斜方向
max:2, // 最大的倾斜角度(度)
startX:0, // X轴上的起始倾斜，单位为度。
startY:0, // Y轴上的起始倾斜，单位为度。
perspective:1000, // 转换角度，越低倾斜越极端
scale:1.02, // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
speed:300, // 进入/退出 过渡的速度
transition:true, // 是否在进入/退出的时候设置过渡效果
axis:"y", // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
reset:true, // 设置在退出时清除倾斜效果
easing:"cubic-bezier(.03,.98,.52,.99)", // 设置进入退出时过渡的贝塞尔曲线
glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
"max-glare":0.7, // 设置最大的透明效果,1=100%,0.5=50%
"glare-prerender":false, // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
"mouse-event-element":null, // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
"full-page-listening":false, // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
gyroscope:false, // 是否开启陀螺仪的方向检测
gyroscopeMinAngleX: 0, //陀螺仪最小角度X
gyroscopeMaxAngleX: 0, //陀螺仪最大角度X
gyroscopeMinAngleY: 0, //陀螺仪最小角度
gyroscopeMaxAngleY: 0, //陀螺仪最大角度
gyroscopeSamples: 10 //陀螺仪样品
})
// 说说卡片
VanillaTilt.init(document.querySelectorAll(".shuoshuo-preview-container"),{
reverse:false, // 是否反转倾斜方向
max:2, // 最大的倾斜角度(度)
startX:0, // X轴上的起始倾斜，单位为度。
startY:0, // Y轴上的起始倾斜，单位为度。
perspective:1000, // 转换角度，越低倾斜越极端
scale:1.02, // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
speed:300, // 进入/退出 过渡的速度
transition:true, // 是否在进入/退出的时候设置过渡效果
axis:"y", // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
reset:true, // 设置在退出时清除倾斜效果
easing:"cubic-bezier(.03,.98,.52,.99)", // 设置进入退出时过渡的贝塞尔曲线
glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
"max-glare":0.7, // 设置最大的透明效果,1=100%,0.5=50%
"glare-prerender":false, // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
"mouse-event-element":null, // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
"full-page-listening":false, // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
gyroscope:false, // 是否开启陀螺仪的方向检测
gyroscopeMinAngleX: 0, //陀螺仪最小角度X
gyroscopeMaxAngleX: 0, //陀螺仪最大角度X
gyroscopeMinAngleY: 0, //陀螺仪最小角度
gyroscopeMaxAngleY: 0, //陀螺仪最大角度
gyroscopeSamples: 10 //陀螺仪样品
})
}
$(window.pjaxLoaded);
$(document).on('pjax:end', window.pjaxLoaded);
}
</script>
<!--鼠标悬停3D效果end-->
弹窗公告
本弹窗公告为倒计时自动关闭，且不可手动点击关闭，如有其他需要，需自行更改。
在“Argon主题设置”中的“脚本”任意一栏中添加下面代码，代码内有部分注释，可自行更改定义内容。
<?php if ( is_user_logged_in() ) : ?>
<style>
#notification {
display: none; /* 隐藏通知框，直到JavaScript将其显示出来 */
position: fixed; /* 固定定位，使通知框相对于浏览器窗口定位 */
top: 25%; /* 通知框的顶部距离窗口顶部n% */
left: 50%; /* 通知框的左侧距离窗口左侧n% */
transform: translate(-50%, -50%); /* 使通知框的中心点与窗口的中心点对齐 */
background-color: #f8d7da; /* 背景颜色 */
color: #721c24; /* 文字颜色 */
padding: 15px; /* 内边距，使内容与边框之间有一定的空间 */
border-radius: 5px; /* 边框圆角 */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果，使通知框看起来更有立体感 */
opacity: 1; /* 设置透明度0-1 */
z-index: 9999; /* 设置z以确保通知框显示在最顶层 */
text-align: center; /*使内容居中对齐 */
}
</style>
<!--公告内容-->
<div id="notification">
(*^▽^*) 欢迎小伙伴来到#等风来# (〃'▽'〃)<br>
❤ 喜欢的留个评论再走叭 ❤<br>
( <span id="countdown">5</span>秒后自动关闭。)
</div>
<script type="text/javascript">
// 显示通知并开始倒计时
function showNotification() {
var notification = document.getElementById('notification');
var countdownElement = document.getElementById('countdown');
var secondsLeft = 5; /*自定义倒计时时间，记得把上面的时间也改一下*/
// 更新倒计时
function updateCountdown() {
countdownElement.textContent = secondsLeft;
secondsLeft--;
if (secondsLeft < 0) {
notification.style.display = 'none';
clearInterval(countdownInterval);
}
}
// 显示通知
notification.style.display = 'block';
// 每秒更新一次倒计时
var countdownInterval = setInterval(updateCountdown, 1000);
// 开始倒计时
updateCountdown();
}
// 当文档加载完毕时显示通知
document.addEventListener("DOMContentLoaded", showNotification);
</script>
<?php endif; ?>
自定义页脚
页脚就是每页最下面显示备案号、运行时间的那个框。
在“Argon主题设置”中的“页脚内容”一栏中添加下面代码，可自行更改定义内容。
<style>
/* 核心样式 */
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 13.1px;
color: #fff;
line-height: 15px;
margin-bottom: 5px;
font-family: "Open Sans", sans-serif;
}
.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;
font-family: "Open Sans", sans-serif;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
font-family: "Open Sans", sans-serif;
}
.github-badge-big {
display: inline-block;
border-radius: 6px;
text-shadow: none;
font-size: 14.1px;
color: #fff;
line-height: 18px;
margin-bottom: 7px;
}
.github-badge-big .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-big .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.bg-orange {
background-color: #ec8a64 !important;
}
.bg-red {
background-color: #cb7574 !important;
}
.bg-apricots {
background-color: #f7c280 !important;
}
.bg-casein {
background-color: #dfe291 !important;
}
.bg-shallots {
background-color: #97c3c6 !important;
}
.bg-ogling {
background-color: #95c7e0 !important;
}
.bg-haze {
background-color: #9aaec7 !important;
}
.bg-mountain-terrier {
background-color: #99a5cd !important;
}
</style>
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span
><span class="badge-value bg-orange">
<a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes"
>豫ICP备0000000001号</a
>
|
<a
href="http://www.beian.gov.cn"
target="_blank"
one-link-mark="yes"
>豫公网安备 00000000000001号</a
></span
>
</div>
<div class="github-badge">
<span class="badge-subject"><img src="https://www.upyun.com/favicon.ico" height="15" width="15"/>
</i> CDN</span
><span class="badge-value bg-shallots"
><a href="" target="_blank" one-link-mark="yes"></a
><a
href="https://www.upyun.com/"
target="_blank"
one-link-mark="yes"
>Upyun</a
></span
>
<span class="badge-subject"><i class="fa fa-wordpress">
</i> Powered</span
><span class="badge-value bg-green"
><a href="https://hl.luoltu.com/" target="_blank" one-link-mark="yes"
>© 小兔互联</a
></span
>
</div>
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-clock-o"></i> 本站已安全运行 ：</span
><span class="badge-value bg-apricots"
><span id="blog_running_days" class="odometer odometer-auto-theme"></span>
天
<span id="blog_running_hours" class="odometer odometer-auto-theme"></span> 小时
<span id="blog_running_mins" class="odometer odometer-auto-theme"></span> 分
<span id="blog_running_secs" class="odometer odometer-auto-theme"></span>
秒</span
>
<script no-pjax="">
var blog_running_days = document.getElementById("blog_running_days");
var blog_running_hours = document.getElementById("blog_running_hours");
var blog_running_mins = document.getElementById("blog_running_mins");
var blog_running_secs = document.getElementById("blog_running_secs");
function refresh_blog_running_time() {
var time = new Date() - new Date(2024, 7,4, 12, 0, 0);
var d = parseInt(time / 24 / 60 / 60 / 1000);
var h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);
var m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);
var s = parseInt((time % (60 * 1000)) / 1000);
blog_running_days.innerHTML = d;
blog_running_hours.innerHTML = h;
blog_running_mins.innerHTML = m;
blog_running_secs.innerHTML = s;
}
refresh_blog_running_time();
if (typeof bottomTimeIntervalHasSet == "undefined") {
var bottomTimeIntervalHasSet = true;
setInterval(function () {
refresh_blog_running_time();
}, 500);
}
</script>
<div class=""><span class="my-face">Copyright ©2024-2024 从不摸鱼的Bnz
୧(๑•̀⌄•́๑)૭</span></div>
待补充……
