WordPress => 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备2024282816号-1</a>
</span>
</div>
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-cloud" aria-hidden="true"></i>云存储</span>
<span class="badge-value bg-shallots">
<!-- GitHub链接 -->
<a href="https://github.com/" target="_blank" one-link-mark="yes">GitHub</a>
</span>
<span class="badge-subject"><i class="fa fa-wordpress"></i> Powered</span>
<span class="badge-value bg-green">
<!-- wordpress链接 -->
<a href="https://cn.wordpress.org/" target="_blank" one-link-mark="yes">
WordPress
</a>
</span>
</div>
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-copyright" aria-hidden="true"></i>Copyright </span>
<span class="badge-value bg-red">
2022-2023
<a href="http://blog.albert-go.top:9999/" target="_blank" one-link-mark="yes"/>@ Albert
</span>
</div>
<!-- 运行时间 -->
<div class="github-badge-big">
<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>
</div>
<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, 6, 25, 0, 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>
页尾脚本
// Aplayer 底部音乐播放器
<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="netease"
type="playlist"
theme="#b7daff"
id="2627667701"
fixed="true"
mini="true"
order="list"
loop="all"
preload="auto"
list-folded="false"
volume="1"
lrc-type="0">
</meting-js>
// 根据主题自动透明
<script>
function hexToRgb(hex,op){
let str = hex.slice(1);
let arr;
if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));
else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];
return `rgb(${arr.join(', ')}, ${op})`;
};
let themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim();
let op1 = 0.6
let themeColorRgb = hexToRgb(themeColorHex,op1);
let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient')*
document.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb)
let op2 = 0.8
// 方法一：
let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim();
colorTint92 += ', '+op2;
document.documentElement.style.setProperty('--color-tint-92',colorTint92)
// 方法二：（无效）
// let colorForegroundHex = getComputedStyle(document.documentElement).getPropertyValue('--color-foreground').trim();
// let colorForeground = hexToRgb(colorForegroundHex,op2)
// 无效的原因是博客里的--color-fpreground是局部变量，不是:root里的全局变量，所以最好的办法是修改--color-tint-92，这个是全局的
// document.documentElement.style.setPrope。rty('--color-fpreground',colorForeground)
// 不要用下面这种cssText这种写法，会导致上面--themecolor-gradient的样式修改失效！
// document.documentElement.style.cssText = '--color-tint-92:'+colorTint92
let op3 = 0.65
let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim();
colorShade90 += ', ' + op3;
document.documentElement.style.setProperty('--color-shade-90',colorShade90)
let op4 = 0.8
let colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim();
colorShade86 += ', ' + op4;
document.documentElement.style.setProperty('--color-shade-86',colorShade86)
</script>
<!--回顶图标修改-->
<script>
$("#fabtn_back_to_top > span > i").removeClass("fa fa-angle-up");
$("#fabtn_back_to_top > span > i").addClass("fa fa-arrow-up");
</script>
<!--卡片3D效果脚本--><script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper/vanilla3D/vanilla-tilt.min.js"></script>
<!--判断是否为Safari浏览器--><script>var isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);</script>
<!--以下内容每次跳转新页面都执行，pjax额外处理-->
<script>
window.pjaxLoaded = function () {
//站点概览点击头像或作者名跳转到关于页, 暂时是主页
$("#leftbar_overview_author_image").wrapAll('<a href="/" /a>');
$("#leftbar_overview_author_name").wrapAll('<a href="/" /a>');
//卡片3D效果
if (screen.width >= 768 && !isSafari) {
VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full), .shuoshuo-preview-container"), {
reverse: true, // reverse the tilt direction
max: 8, // max tilt rotation (degrees)
startX: 0, // the starting tilt on the X axis, in degrees.
startY: 0, // the starting tilt on the Y axis, in degrees.
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1.02, // 2 = 200%, 1.5 = 150%, etc..
speed: 600, // Speed of the enter/exit transition
transition: false, // Set a transition on enter/exit.
axis: "y", // What axis should be banned. Can be "x", "y", or null
reset: true, // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
glare: false, // if it should have a "glare" effect
"max-glare": 0.8, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
"glare-prerender": false, // false = VanillaTilt creates the glare elements for you, otherwise
// you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
"mouse-event-element": null, // css-selector or link to HTML-element what will be listen mouse events
gyroscope: true, // Boolean to enable/disable device orientation detection,
gyroscopeMinAngleX: -45, // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element;
gyroscopeMaxAngleX: 45, // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;
gyroscopeMinAngleY: -45, // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;
gyroscopeMaxAngleY: 45, // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;
})
}
}
window.pjaxLoaded();
</script>
<!--根据滚动高度改变顶栏透明度-->
<script>
!function () {
let toolbar = document.getElementById("navbar-main");
let $bannerContainer = $("#banner_container");
let $content = $("#content");
let startTransitionHeight;
let endTransitionHeight;
let maxOpacity = 0.65;
startTransitionHeight = $bannerContainer.offset().top - 75;
endTransitionHeight = $content.offset().top - 75;
$(window).resize(function () {
startTransitionHeight = $bannerContainer.offset().top - 75;
endTransitionHeight = $content.offset().top - 75;
});
function changeToolbarTransparency() {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop < startTransitionHeight) {
toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0)', 'important');
toolbar.style.setProperty('box-shadow', 'none');
toolbar.style.setProperty('-webkit-box-shadow', 'none');
if (argonConfig.toolbar_blur) {
toolbar.style.setProperty('backdrop-filter', 'blur(0px)');
toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(0px)');
}
toolbar.classList.add("navbar-ontop");
return;
}
if (scrollTop > endTransitionHeight) {
toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + maxOpacity + ')', 'important');
toolbar.style.setProperty('box-shadow', '');
toolbar.style.setProperty('-webkit-box-shadow', '');
if (argonConfig.toolbar_blur) {
toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
}
toolbar.classList.remove("navbar-ontop");
return;
}
let transparency = (scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) * maxOpacity;
toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + transparency, 'important');
toolbar.style.setProperty('box-shadow', '');
if (argonConfig.toolbar_blur) {
toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
}
toolbar.classList.remove("navbar-ontop");
}
changeToolbarTransparency();
document.addEventListener("scroll", changeToolbarTransparency, { passive: true });
}();
</script>
外观 - 左侧栏小工具 - 年度倒计时（ 简码 ）
<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(-45px);
}
</style>
外观 - 左侧栏小工具 - 统计
需安装插件 - WP Statistics
外观 - 额外CSS
<style>
/*白天卡片背景透明*/
.card {
background-color: rgba(255, 255, 255, 0.8) !important;
/*backdrop-filter:blur(6px);*/ /*毛玻璃效果主要属性*/
-webkit-backdrop-filter: blur(6px);
}
/*夜间透明*/
html.darkmode .bg-white,
html.darkmode .card,
html.darkmode #footer {
background: rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup {
background: rgba(66, 66, 66, 0.95) !important;
}
/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,
.darkmode .card .widget,
#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title,
#custom_html-2 {
background-color: #ffffff00 !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.emotion-keyboard,
#fabtn_blog_settings_popup {
background-color: rgba(255, 255, 255, 0.95) !important;
}
/*分类卡片透明*/
.bg-gradient-secondary {
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/*分类卡片文本居中*/
#content > div.page-information-card-container > div > div {
text-align: center;
}
/*提示条背景透明*/
.admonition, .collapse-block {
background-color: transparent !important;
backdrop-filter: contrast(130%);
}
/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item > a:hover,
.leftbar-menu-item.current > a {
background-color: #f9f9f980;
}
/*站点概览分隔线颜色修改*/
.site-state-item {
border-left: 1px solid #aaa;
}
.site-friend-links-title {
border-top: 1px dotted #aaa;
}
#leftbar_tab_tools ul li {
padding-top: 3px;
padding-bottom: 3px;
border-bottom: none;
}
html.darkmode #leftbar_tab_tools ul li {
border-bottom: none;
}
/*左侧栏边距修改*/
.tab-content {
padding: 10px 0px 0px 0px !important;
}
.site-author-links {
padding: 0px 0px 0px 10px;
}
/*目录位置偏移修改*/
#leftbar_catalog {
margin-left: 0px;
}
/*目录条目边距修改*/
#leftbar_catalog .index-link {
padding: 4px 4px 4px 4px;
}
/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools {
font-size: 14px;
}
/*正文图片边距修改*/
article figure {
margin-top: 0;
margin-bottom: 1rem;
}
.wp-block-columns {
margin-bottom: 0;
}
/*正文表格样式修改*/
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th {
padding: 8px 10px;
border: 1px solid;
}
/*表格居中样式*/
.wp-block-table.aligncenter {
margin: 10px auto;
}
/*特色图片文章标题*/
.post-header.post-header-with-thumbnail .post-header-text-container .post-title {
font-weight: bold;
color: #ffffff !important;
text-shadow: 0px 0px 5px #000000 !important;
}
/*鼠标样式修改*/
/*body {
cursor: url(https://img.crowya.com/wp-content/uploads/2023/05/mouse32.ico), auto;
}*/
/*首页说说左上角图标修改*/
.shuoshuo-preview-container:before {
background-size: 50%;
background-position: 50% 45%;
background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjg0MjM2MjAwNjA0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1MjMiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNzYxLjY2ODMzMiAzMjMuNDM3NzEycTEwLjMxMzE0MyAxMS40MTAyODYgNC4wMjI4NTcgMjUuMTYxMTQzbC0zMDguNTg5NzEyIDY2MS4xMzgyODFxLTcuNDYwNTcxIDE0LjI2Mjg1Ny0yMy45OTA4NTcgMTQuMjYyODU3LTIuMjY3NDI5IDAtNy45NzI1NzEtMS4xNzAyODYtOS43MjgtMi44NTI1NzEtMTQuNTU1NDI4LTEwLjgyNTE0M3QtMi41Ni0xNy4xMTU0MjhsMTEyLjU2Njg1Ni00NjEuNjc3NzExLTIzMi4wMDkxNDEgNTcuNzA5NzE0cS0yLjI2NzQyOSAwLjU4NTE0My02Ljg3NTQyOSAwLjU4NTE0My0xMC4zMTMxNDMgMC0xNy43MDA1NzEtNi4yOTAyODYtMTAuMzEzMTQzLTguNTU3NzE0LTcuNDYwNTcxLTIyLjMwODU3MWwxMTQuODM0Mjg1LTQ3MS40MDU3MTFxMi4yNjc0MjktNy45NzI1NzEgOS4xNDI4NTctMTMuMTY1NzE0dDE2LjAxODI4Ni01LjEybDE4Ny40NjUxNDIgMHExMC44MjUxNDMgMCAxOC4yODU3MTQgNy4xNjh0Ny40NjA1NzEgMTYuODIyODU3cTAgNC41MzQ4NTctMi44NTI1NzEgMTAuMzEzMTQzbC05Ny43MTg4NTYgMjY0LjU1NzcxMiAyMjYuMzAzOTk4LTU2LjAyNzQyOHE0LjUzNDg1Ny0xLjE3MDI4NiA2Ljg3NTQyOS0xLjE3MDI4NiAxMC44MjUxNDMgMCAxOS40NTYgOC41NTc3MTR6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSIyNTI0Ij48L3BhdGg+PC9zdmc+);
}
.shuoshuo-preview-container:hover:before {
background-position: 50% 50%;
background-size: 60%;
}
/*回顶图标放大*/
#fabtn_back_to_top,
#fabtn_go_to_comment,
#fabtn_toggle_blog_settings_popup,
#fabtn_toggle_sides,
#fabtn_open_sidebar,
#fabtn_toggle_darkmode {
font-size: 1.2rem;
}
/*隐藏左移按钮*/
#fabtn_toggle_sides {
display: none;
}
/*顶栏菜单放大*/
.navbar-nav .nav-link {
font-size: 1.2rem;
}
.navbar-nav .nav-item {
margin-right: 0;
}
.mr-lg-5,
.mx-lg-5 {
margin-right: 1rem !important;
}
.navbar-toggler-icon {
width: 1.5rem;
height: 1.5rem;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.9rem;
padding-left: 1rem;
}
/*网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/
@font-face {
font-family: echo;
src: url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
}
body {
font-family: 'echo', Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif
}
/*横幅字体大小*/
.banner-title {
font-size: 2.5em;
}
.banner-subtitle {
font-size: 28px;
-webkit-text-fill-color: transparent;
background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%);
-webkit-background-clip: text;
}
/*文章标题字体大小*/
.post-title {
font-size: 25px
}
/*正文字体大小（不包含代码）*/
.post-content p {
font-size: 1.15rem;
}
li {
font-size: 1.1rem;
}
/*评论区字体大小*/
p {
font-size: 1.1rem
}
/*评论发送区字体大小*/
.form-control {
font-size: 1.1rem
}
/*评论勾选项目字体大小*/
.custom-checkbox .custom-control-input ~ .custom-control-label {
font-size: 1.1rem
}
/*评论区代码的强调色*/
code {
color: rgba(var(--themecolor-rgbstr));
}
/*说说字体大小和颜色设置*/
.shuoshuo-title {
font-size: 25px;
/* color: rgba(var(--themecolor-rgbstr)); */
}
/*尾注字体大小*/
.additional-content-after-post {
font-size: 1.1rem
}
/* 公告居中 */
.leftbar-announcement-title {
font-size: 20px;
/* text-align: center; */
color: #00FFFF
}
.leftbar-announcement-content {
font-size: 15px;
line-height: 1.8;
padding-top: 8px;
opacity: 0.8;
/* text-align: center; */
color: #00FFFF;
}
/* 一言居中 */
.leftbar-banner-title {
font-size: 20px;
display: block;
text-align: center;
opacity: 0.8;
}
/* 个性签名居中 */
.leftbar-banner-subtitle {
margin-top: 15px;
margin-bottom: 8px;
font-size: 13px;
opacity: 0.8;
display: block;
text-align: center;
}
.navbar-brand {
font-size: 1.25rem;
font-weight: 100;
margin-right: 2rem;
padding-bottom: .1rem;
}
/*左侧栏头像自动缩放*/
#leftbar_overview_author_image:hover {
transform: scale(1.2);
filter: brightness(115%);
}
/*隐藏左侧栏搜索框*/
.leftbar-menu {
display: none;
}
.leftbar-search-button {
display: none;
}
#leftbar_part2_inner:before {
display: none;
}
@media screen and (min-width: 900px) {
.leftbar-banner {
border-radius: var(--card-radius);
}
}
/*折叠说说颜色修改*/
.shuoshuo-content.shuoshuo-folded:after {
border-radius: 10px;
background: linear-gradient(180deg, transparent 0%, var(--mycolor) 100%);
}
:root {
--mycolor: #e6ddd3;
}
html.darkmode {
--mycolor: #424242;
}
/*滚动条修改*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: #272010;
}
::-webkit-scrollbar-thumb {
background-color: #6f6558;
border: none;
}
html.darkmode ::-webkit-scrollbar-track {
background-color: #282828;
}
</style>
局部细节
评论头像显示
在 外观 - 主题文件编辑器 - functions.php 中添加如下代码
if ( ! function_exists( 'get_cravatar_url' ) ) {
/**
* 把Gravatar头像服务替换为Cravatar
* @param string $url
* @return string
*/
function get_cravatar_url( $url ) {
$sources = array(
'www.gravatar.com',
'0.gravatar.com',
'1.gravatar.com',
'2.gravatar.com',
'secure.gravatar.com',
'cn.gravatar.com'
);
return str_replace( $sources, 'cravatar.cn', $url );
}
add_filter( 'um_user_avatar_url_filter', 'get_cravatar_url', 1 );
add_filter( 'bp_gravatar_url', 'get_cravatar_url', 1 );
add_filter( 'get_avatar_url', 'get_cravatar_url', 1 );
}
评论 IP 归属地显示
来源：博主 -
首先在 functions.php 文件中添加以下代码
/* 根据百度IP查询接口获取IP所在地 */
function getCity($ip) {
//百度api的接口
$url = "https://opendata.baidu.com/api.php?query=".$ip."&co=&resource_id=6006&format=json&oe=utf8";
$ip=json_decode(file_get_contents($url),true);
$out = "<div class='comment-useragent'>";
if($ip['status']=='0'){
$out .= "<i class='fa fa-globe'; style='color:blue';></i>" ." ".$ip['data'][0]['location'];
/* 如果想使用自定义图标库，可以把上面的“$out .=”后面的内容替换成以下代码，在按自定义图标部分的内容进行操作
$out .= $GLOBALS['UA_ICON']['City2'] ." ".$ip['data'][0]['location'];
*/
}else{
return false;
}
$out .= "</div>";
return apply_filters("argon_comment_ua_icon", $out);
}在 functions.php 中定位到以下代码位置
echo parse_ua_and_icon($comment -> comment_agent);在这段代码后面添加如下内容，以调用上面定义的功能块
<?php
echo getCity(get_comment_author_ip());
?>自定义图标（可选）：找到 useragent-parser.php 文件，在最后添加以下代码，用于在归属地前添加图标
$GLOBALS['UA_ICON']['City2'] = '<svg >……</svg>';上述代码里的 <svg>......</svg> 替换成自己下载的 svg 代码，格式可参照 useragent-parser.php 文件的原有内容
博主的自定义图标：
$GLOBALS['UA_ICON']['City2'] = '<svg t="1722076095941" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20328" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#50BEE8" p-id="20329"></path><path d="M813.632 98.368A509.552 509.552 0 0 1 912 400c0 282.768-229.232 512-512 512a509.552 509.552 0 0 1-301.632-98.368C191.488 941.12 342.032 1024 512 1024c282.768 0 512-229.232 512-512 0-169.968-82.88-320.512-210.368-413.632z" fill="#00A0C5" p-id="20330"></path><path d="M720.752 128.432s7.968-29.312 10.736-50.176c9.616-4.544 48.384 22.304 81.216 56.704-22.176 82.128-73.888 77.232-73.888 77.232s-42.688-0.88-37.744-32.864l19.68-50.896zM605.792 178.528c4.944-9.856 17.248-14.8 29.552-19.728 12.32-4.928 0 22.176-2.448 36.944-2.464 14.8-4.944 22.176 12.304 39.44 17.248 17.232-32.016 4.928-44.336-4.944-12.304-9.84 4.928-51.712 4.928-51.712zM382.736 658.816c-2.464 12.288-25.68 41.84-35.52 61.536-9.856 19.68-14.784 27.072-27.104 36.944-12.32 9.84-19.696 27.104-19.696 27.104l3.152 41.856s12.304 27.072 19.712 39.408c7.376 12.32-14.784 78.816-14.784 78.816-21.328-4.096-41.744-9.824-49.152-29.568-7.376-19.696-18.048-19.696-15.584-41.872 2.464-22.144-34.48-49.264-41.856-61.584-7.392-12.304-17.248-29.568-17.248-41.84 0-12.336-27.104-29.584-27.104-29.584s-49.248-22.16-56.64-32.016c-7.408-9.856-14.784-51.696-17.264-68.928-2.448-17.264 7.392-61.616 7.392-61.616s19.696-14.784 7.376-27.072c-12.304-12.32-14.784-44.32-14.784-44.32l-22.16-24.608s-17.232-24.672-19.712-36.96c-2.448-12.288 0-19.728 2.48-32.032 2.448-12.32-4.928-34.464-4.928-46.8C131.296 140.08 285.632 87.392 285.632 87.392l12.32 51.712s-27.088 7.392-41.872 2.448c-14.784-4.912-22.176-4.912-22.176-4.912l-19.696 27.088s-7.392 17.232-9.856 27.088c-2.448 9.856 4.928 24.608 4.928 24.608s34.48 2.464 34.48-7.392c0-9.84-4.928-14.768-4.928-14.768l-4.928-17.248s22.16-12.304 81.296-7.36c59.104 4.896 36.928 46.768 61.552 56.624 24.624 9.872-19.696 44.304-29.536 64.032-9.856 19.712-24.64-24.608-24.64-24.608s14.784-17.264-9.856-22.16c-24.624-4.96-29.536 27.04-17.232 24.608 12.304-2.448 14.784 14.768 12.304 27.104-2.448 12.304-2.448 27.056-14.784 54.176-12.304 27.072-59.104 27.072-59.104 27.072s7.392 12.352 14.784 27.088c7.376 14.784-2.464 49.264-2.464 59.12 0 9.84-29.552-17.232-34.464-41.872-4.944-24.64-19.712-15.6-29.568-13.136-9.856 2.48-41.872 9.84-46.8-2.448-4.928-12.32-49.248 22.976-61.584 30.352-12.304 7.392-7.376 27.104 12.336 17.248 19.696-9.856 36.944-2.448 32.016 17.232-4.928 19.728-24.64 7.424-22.16 19.728 2.448 12.304 22.16 24.656 27.072 41.888 4.928 17.232 51.728-7.376 66.512-14.768 14.768-7.408 56.64-14.816 61.552 4.912 4.928 19.68 60.16 36.96 77.424 41.856 17.248 4.96 51.696 7.392 71.408 27.104 19.712 19.696-14.752 56.624-17.232 69.008z" fill="#B7D777" p-id="20331"></path><path d="M308.496 944.464s6.384-19.184 11.152-38.848a507.648 507.648 0 0 1-75.008-17.888c2.704 9.056 9.488 13.232 14.704 27.168 7.408 19.744 27.808 25.472 49.152 29.568z" fill="#84BD5A" p-id="20332"></path><path d="M485.12 82.448c-2.448 24.672-45.136 61.584-40.208 71.424 4.912 9.856 3.264 86.224-31.216 49.264-34.48-36.976-68.96-88.672-66.496-113.296 0.496-4.944 1.056-12.72 1.648-21.296 52.272-48.512 170.272-38.592 176.496-27.136-14.784 24.64-37.744 16.432-40.224 41.04zM541.76 227.76c-7.376-12.336 17.232-19.728 17.232-19.728 34.496 7.392 21.36 32.048 18.88 41.872-2.448 9.872-28.704-9.808-36.112-22.144zM930.912 521.664s18.96 27.968 45.984 26.288c-17.76 205.952-189.648 338.224-189.648 338.224-26.288-26.224-13.136-49.216-13.136-49.216l15.84-39.424 4.096-66.48s-8.448-68.976-74.144-36.144c-70.592 18.08-41.024 26.496-112.432 31.472-71.44 4.88-44.368-139.008-44.368-139.008-4.096-59.12 6.56-44.336 6.56-90.32 0-45.952 151.088-19.696 151.088-19.696 98.512 65.68 111.648-14.8 111.648-14.8l72.224-26.272 6.576-32.848-39.408-45.936-59.104-26.304s-27.104 17.248 0 59.12c0 0-9.04 47.616-31.2 35.28l-60.736-74.704s-20.528 35.312-53.376 55.008c-32.816 19.696-88.672-0.832-88.672-0.832s-18.032-55.792 16.448-73.056l50.896-0.816s-10.688-28.736-4.112-55.008c6.56-26.288 21.344-3.264 47.616-22.976 26.288-19.712 44.336 38.56 83.744 32.016 39.408-6.576 19.696-13.136 45.984-26.288 26.272-13.136 45.968 26.288 45.968 26.288l52.56 6.544s-33.68-89.856-45.6-101.936a5.968 5.968 0 0 0-3.664 0.16c0.64-2.096 1.92-1.936 3.664-0.16 30.56 5.664 136.064 186.48 104.944 294.768-10.88-4.848-19.936-8.928-19.936-8.928H891.52l39.392 45.984z" fill="#B7D777" p-id="20333"></path><path d="M930.912 521.664l-26.992-31.472a509.968 509.968 0 0 1-110.48 237.408c0.432 2.112 0.608 3.44 0.608 3.44l-4.096 66.48-15.84 39.424s-13.152 23.008 13.136 49.216c0 0 171.872-132.272 189.648-338.224-27.04 1.696-45.984-26.272-45.984-26.272zM868.512 190.016a6.24 6.24 0 0 1 3.664-0.16c-1.76-1.776-3.04-1.936-3.664 0.16zM912 400c0 25.728-1.952 50.992-5.616 75.696h50.8s9.04 4.08 19.936 8.928c31.12-108.288-74.384-289.088-104.944-294.768 11.92 12.08 45.6 101.936 45.6 101.936l-18.096-2.256c7.84 35.616 12.32 72.496 12.32 110.464z" fill="#84BD5A" p-id="20334"></path></svg>';
回到顶部图标修改
页尾脚本添加以下内容
<!--回顶图标修改-->
<script>
$("#fabtn_back_to_top > span > i").removeClass("fa fa-angle-up");
$("#fabtn_back_to_top > span > i").addClass("fa fa-arrow-up");
</script>
点击头像或作者名跳转到关于页
页尾脚本添加以下内容
$("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
$("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');
底部音乐播放器
server="netease" 指定音乐平台为网易云
type = "song" 指单曲类型
id = 2627667701 为音乐的id（打开音乐歌单后，网址显示的id）
开启吸底模式 fixed = "true"
开启迷你模式 "mini = true"
随机播放 order = "random"
关闭底部歌词 lrc-type="0"
server 可改音乐平台，如netease（网易云）、tencent（QQ音乐）
Aplayer 播放器官方文档：
// Aplayer 底部音乐播放器
<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="netease"
type="playlist"
theme="#b7daff"
id="2627667701"
fixed="true"
mini="true"
order="list"
loop="all"
preload="auto"
list-folded="false"
volume="1"
lrc-type="0">
</meting-js>
网站底部信息
CSS 样式表
<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>
HTML 底部信息
<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备2024282816号-1</a>
</span>
</div>
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-cloud" aria-hidden="true"></i>云存储</span>
<span class="badge-value bg-shallots">
<!-- GitHub链接 -->
<a href="https://github.com/" target="_blank" one-link-mark="yes">GitHub</a>
</span>
<span class="badge-subject"><i class="fa fa-wordpress"></i> Powered</span>
<span class="badge-value bg-green">
<!-- wordpress链接 -->
<a href="https://cn.wordpress.org/" target="_blank" one-link-mark="yes">
WordPress
</a>
</span>
</div>
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-copyright" aria-hidden="true"></i>Copyright </span>
<span class="badge-value bg-red">
2022-2023
<a href="http://blog.albert-go.top:9999/" target="_blank" one-link-mark="yes"/>@ Albert
</span>
</div>
<!-- 运行时间 -->
<div class="github-badge-big">
<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>
</div>
JavaScript 网站运行时间脚本
new Date (year, month, date, hrs, min, sec)
其中 month 值域为 0~11
<!-- 运行时间 -->
<div class="github-badge-big">
<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>
</div>
<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, 6, 25, 0, 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>
参考资料