Argon主题博客美化记录
|
1,296
|
0
|
建站系列

1507 字
|
52 分钟
本文最后更新于 80 天前，其中的信息可能已经有所发展或是发生改变。

整体代码

页脚内容

 <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"/>@ Xiaoyang
     </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>
         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>
 ​
 <!--以下内容每次跳转新页面都执行，pjax额外处理-->
 <script>
 window.pjaxLoaded = function(){
     //说说标题替换为脑电波
     if($("#content > div.page-information-card-container > div > div").length > 0){
         var temp_str=document.querySelector("#content > div.page-information-card-container > div > div").innerHTML.replace(/说说/g,"脑电波");
         document.querySelector("#content > div.page-information-card-container > div > div").innerHTML=temp_str;
         $("#content > div.page-information-card-container > div > div > p > i").removeClass("fa fa-quote-left");
         $("#content > div.page-information-card-container > div > div > p > i").addClass("fa fa-lightbulb-o");
     }
 }
 window.pjaxLoaded();
 </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://jsd.onmicrosoft.cn/gh/Albert-PZY/blue-earth/typora/turn.png), 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.1rem;
     }
     /*隐藏左移按钮*/
     #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 HTML5音乐播放器 | ACE-BLOG (ace520.github.io)

// 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>

参考资料

Argon 主题修改记录 – 鸦鸦的巢穴 (crowya.com)

Argon主题博客美化 – Echo小窝 (liveout.cn)

主题评论区展示用户归属地 | 并非正文 (bfzw.top)

建站
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																					

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇