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>
参考资料
本文作者:-Xiaoyang-
本文链接:https://www.cnblogs.com/pzy-Albert/p/18379015
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步