📱 手机端点击此公告即可联系土豆
🔔 LOVAU的迷你地小程序已上线，点开任意文章最后即可查看
🫗 为提高页面性能，导航栏毛玻璃效果已关闭
本站更换cdn服务商，如遇图片加载不出请清理缓存
百度一下:CNLOVAU,点击直达

关于Argon的美化

1,161次阅读
没有评论

共计 7461 个字符，预计需要花费 19 分钟才能阅读完成。

提醒：本文最后更新于 2023-01-23 12:03，文中所关联的信息可能已发生改变，请知悉！

此内容为本人的其他主题博客文章，若看站点效果，请前往 LOVAU 的概念站，若想查看原文，请前往 关于 Argon 的美化 – 🥚 LOVAU (ulove.tk)

1. 在后台的“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">ICP 备 </a></span>
<span class="badge-subject"><i class="fa fa-clock-o"></i> Running Time</span>
<span class="badge-value bg-apricots">
<span id="blog_running_days" class="odometer odometer-auto-theme"></span> days
<span id="blog_running_hours" class="odometer odometer-auto-theme"></span> H
<span id="blog_running_mins" class="odometer odometer-auto-theme"></span> M
<span id="blog_running_secs" class="odometer odometer-auto-theme"></span>S</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(2022, 10, 13, 13, 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>

2. 在后台的“外观 – 小工具 – 左侧栏小工具”添加下面内容实现年度百分进度条化

<div class="progress-wrapper" style="padding: 0">
<div class="progress-info">
<div class="progress-label">
<span id="yearprogress_yearname"></span>
</div>
<div id="yearprogress_text_container" class="progress-percentage">
<span id="yearprogress_progresstext"></span>
<span id="yearprogress_progresstext_full"></span>
</div>
</div>
<div class="progress">
<div id="yearprogress_progressbar" class="progress-bar bg-primary"></div>
</div>
</div>
<script no-pjax="">
function yearprogress_refresh() {let year = new Date().getFullYear();
$("#yearprogress_yearname").text(year);
let from = new Date(year, 0, 1, 0, 0, 0);
let to = new Date(year, 11, 31, 23, 59, 59);
let now = new Date();
let progress = (((now - from) / (to - from + 1)) * 100).toFixed(7);
let progressshort = (((now - from) / (to - from + 1)) * 100).toFixed(2);
$("#yearprogress_progresstext").text(progressshort + "%");
$("#yearprogress_progresstext_full").text(progress + "%");
$("#yearprogress_progressbar").css("width", progress + "%");
}
yearprogress_refresh();
if (typeof yearProgressIntervalHasSet == "undefined") {
var yearProgressIntervalHasSet = true;
setInterval(function () {yearprogress_refresh();
}, 500);
}
</script>
<style>
#yearprogress_text_container {
width: 100%;
height: 22px;
overflow: hidden;
user-select: none;
}
#yearprogress_text_container > span {
transition: all 0.3s ease;
display: block;
}
#yearprogress_text_container:hover > span {transform: translateY(-20px);
}
</style>

3. 在后台的“外观 – 主题文件编辑器 – index.php”的最后一个 <?php 标签前面添加下面内容实现歌曲播放

server="tencent" 指定音乐平台为 QQ 音乐，type="playlist" 指播放音乐来源类型，id="2732740880" 为歌单的 id（这里的 id 为打开音乐歌单，网址显示的 id）

开启吸底模式 fixed="true", 开启迷你模式 mini="true", 随机播放 order="random", 关闭底部歌词 lrc-type="0"

注意：id 需要为自己创建的歌单，不能为我喜欢的音乐；server 可以改自己用的音乐平台，如 netease (网易云)、tencent (QQ 音乐)

Aplayer 播放器官网文档：APlayer HTML5 音乐播放器 | ACE-BLOG (ace520.github.io)

<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.0.1/dist/Meting.min.js"></script><meting-js server="tencent" type="playlist" id="2732740880" autoplay="true" fixed="true" mini="true" order="random" loop="all" preload="auto" volume="0.6" mutex="true" list-folded="false">
</meting-js>

4. 不是那种鼠标后面跟随一大堆零零碎碎的，仅一个圆圈跟随鼠标指针，当遇到超链接圆圈会变成半透明的背景，将下面代码添加到当前主题函数模板 functions.php 最后：

function zm_mouse_cursor() { ?>
<!-- 必须的 DIV -->
<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>
<!-- JS 脚本 -->
<script>
jQuery(document).ready(function($){var myCursor = jQuery('.mouse-cursor');
if (myCursor.length) {if ($('body')) {const e = document.querySelector('.cursor-inner'),
t = document.querySelector('.cursor-outer');
let n,
i = 0,
o = !1;
window.onmousemove = function(s) {o || (t.style.transform = "translate(" + s.clientX + "px," + s.clientY + "px)"),
e.style.transform = "translate(" + s.clientX + "px," + s.clientY + "px)",
n = s.clientY,
i = s.clientX
},
$('body').on("mouseenter", "a, .cursor-pointer",
function() {e.classList.add('cursor-hover'),
t.classList.add('cursor-hover')
}),
$('body').on("mouseleave", "a, .cursor-pointer",
function() {$(this).is("a") && $(this).closest(".cursor-pointer").length || (e.classList.remove('cursor-hover'), t.classList.remove('cursor-hover'))
}),
e.style.visibility = "visible",
t.style.visibility = "visible"
}
}
})
</script>
<!-- 样式 -->
<style>
.mouse-cursor {
position: fixed;
left: 0;
top: 0;
pointer-events: none;
border-radius: 50%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
visibility: hidden
}

.cursor-inner {
margin-left: -3px;
margin-top: -3px;
width: 6px;
height: 6px;
z-index: 10000001;
background: #ffa9a4;
-webkit-transition: width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;
transition: width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out
}

.cursor-inner.cursor-hover {
margin-left: -18px;
margin-top: -18px;
width: 36px;
height: 36px;
background: #ffa9a4;
opacity: .3
}

.cursor-outer {
margin-left: -15px;
margin-top: -15px;
width: 30px;
height: 30px;
border: 2px solid #ffa9a4;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 10000000;
opacity: .5;
-webkit-transition: all .08s ease-out;
transition: all .08s ease-out
}

.cursor-outer.cursor-hover {opacity: 0}

.main-wrapper[data-magic-cursor=hide] .mouse-cursor {
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
z-index: -1111
}
</style>
<?php }
add_action('wp_footer', 'zm_mouse_cursor');

5. 在 functions.php 里添加了如下，页面 html 后缀

// 页面链接添加 html 后缀
add_action('init', 'html_page_permalink', -1);
function html_page_permalink() {
global $wp_rewrite;
if (!strpos($wp_rewrite->get_page_permastruct(), '.html')){$wp_rewrite->page_structure = $wp_rewrite->page_structure . '.html';}
}

然后在“设置 – 固定链接 – 自定义”将

/index.php/%year%/%monthnum%/%day%/%postname%/

改成

/%postname%.html

关于 Argon 的美化

正文完
CNLOVAU的微信订阅号
post-qrcode
Argon主题 美化
发表至： 主题美化类
2023-01-03
 3
本站所有内容皆在小程序同步更新
LAO WU
版权声明：本站原创文章，由 LAO WU 于2023-01-03发表，共计7461字。
转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处！
🫶
如果本文对您有帮助的话，请不要忘了留下点赞和评论哟~
Puock主题区块变圆角
CSS自定义浏览器滚动条样式
关于Argon的美化
旅行者与咱的运行时间
⚠️ 评论规则
一旦您发表评论，即代表您同意本站的评论规则，本站有权利对您的评论进行“批准、驳回、移至回收站”等操作
点击查看评论规则
评论（没有评论）

CNLOVAU

回车键去找寻
CNLOVAU
CNLOVAU
纯正CNLOVAU
文章数
26
评论数
162
阅读量
38970
好多大类
主题美化类
从零开始搭网站系列
加油打气类
吴小山专题栏目
奇思妙想类
技术大佬类
随机文章
标签云
Argon主题Azurecssc语言Github学生包Meting-APIPuock主题主题修改介绍冒泡排序博客小说微软打赏技术播放器教程服务器短代码系列网站网站地图美化订阅号随笔