本文最后更新于74 天前，其中的信息可能已经过时，如有错误请发送邮件到mail@liseezn.top
liseezn博客美化 JSON
注意：可复制一键导入
别忘记在主题设置页面修改头像、背景以及底部信息等设置
建议主题设置全局里 CDN 选择不使用或更换为自己的，否则可能出现 CSS 样式失效
{"argon_theme_color":"#607d8b","argon_theme_color_hex_preview":"#607d8b","argon_show_customize_theme_color_picker":true,"argon_enable_immersion_color":"true","argon_darkmode_autoswitch":"time","argon_enable_amoled_dark":"false","argon_card_radius":"15","argon_card_shadow":"default","argon_page_layout":"double","argon_article_list_waterflow":"2","argon_article_list_layout":"1","argon_font":"serif","argon_assets_path":"default","argon_custom_assets_path":"","argon_wp_path":"/","argon_dateformat":"YMD","argon_enable_headroom":"true","argon_toolbar_title":"LiseeZN","argon_toolbar_icon":"https://liblog.zeabur.app/wp-content/uploads/2025/08/cropped-DM_20250812214124_001.png","argon_toolbar_icon_link":" https://liblog.zeabur.app/","argon_toolbar_blur":"true","argon_banner_title":"Liseezn‘s blog","argon_banner_subtitle":"一个小博客","argon_banner_size":"fullscreen","argon_page_background_banner_style":"transparent","argon_show_toolbar_mask":true,"argon_banner_background_url":"--bing--","argon_banner_background_color_type":"shape-primary","argon_banner_background_hide_shapes":true,"argon_enable_banner_title_typing_effect":"true","argon_banner_typing_effect_interval":"100","argon_page_background_url":"https://wp.upx8.com/api.php?content=风景","argon_page_background_dark_url":"https://wp.upx8.com/api.php?content=风景","argon_page_background_opacity":"0.92","argon_sidebar_banner_title":"Liseezn‘s blog","argon_sidebar_banner_subtitle":"--hitokoto--","argon_sidebar_auther_name":"li","argon_sidebar_auther_image":"https://liblog.zeabur.app/wp-content/uploads/2025/08/cropped-DM_20250812214124_001.png","argon_sidebar_author_description":"","argon_sidebar_announcement":"","argon_fab_show_settings_button":"true","argon_fab_show_darkmode_button":"true","argon_fab_show_gotocomment_button":"true","argon_seo_description":"网站描述 (Description Meta 标签)","argon_seo_keywords":"搜索引擎关键词（Keywords Meta 标签）","argon_article_meta":"time|categories|views|comments","argon_show_readingtime":"true","argon_reading_speed":"580","argon_reading_speed_en":"80","argon_reading_speed_code":"10","argon_show_thumbnail_in_banner_in_content_page":"false","argon_first_image_as_thumbnail_by_default":"true","argon_reference_list_title":"参考","argon_show_sharebtn":"true","argon_show_headindex_number":"false","argon_donate_qrcode_url":"","argon_additional_content_after_post":"","argon_related_post":"category,tag","argon_related_post_sort_orderby":"meta_value_num","argon_related_post_sort_order":"DESC","argon_related_post_limit":"10","argon_article_header_style":"article-header-style-2","argon_outdated_info_time_type":"createdtime","argon_outdated_info_days":"1","argon_outdated_info_tip_type":"inpost","argon_outdated_info_tip_content":"本文最后更新于%modify_date_delta% 天前，其中的信息可能已经过时，如有错误请发送邮件到mail@liseezn.top","argon_archives_timeline_show_month":"true","argon_archives_timeline_url":"https://liblog.zeabur.app/pigeonhole/","argon_footer_html":" <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css\">\n<link rel=\"stylesheet\" href=\"https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css\">\n <style>\n /* 使用非常具体的选择器避免冲突 */\n #liseezn-footer-container {\n --liseezn-bg-dark: #4d4d4d;\n --liseezn-orange: #ec8a64;\n --liseezn-red: #cb7574;\n --liseezn-apricots: #f7c280;\n --liseezn-green: #5cb85c;\n --liseezn-shallots: #97c3c6;\n --liseezn-text: #fff;\n --liseezn-bg-light: #f8f9fa;\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Open Sans\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif;\n }\n \n width: 100%;\n max-width: 700px;\n background: #fff;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n padding: 25px;\n margin: 20px auto;\n }\n \n #liseezn-footer-container .liseezn-footer-badges {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 10px;\n margin-bottom: 20px;\n }\n \n #liseezn-footer-container .liseezn-badge {\n display: inline-flex;\n border-radius: 5px;\n text-shadow: none;\n font-size: 13px;\n color: var(--liseezn-text);\n line-height: 1.4;\n transition: all 0.2s ease;\n overflow: hidden;\n }\n \n #liseezn-footer-container .liseezn-badge:hover {\n transform: translateY(-2px);\n box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);\n }\n \n #liseezn-footer-container .liseezn-badge-subject {\n display: inline-flex;\n align-items: center;\n background-color: var(--liseezn-bg-dark);\n padding: 6px 8px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n }\n \n #liseezn-footer-container .liseezn-badge-value {\n display: inline-flex;\n align-items: center;\n padding: 6px 10px;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n }\n \n #liseezn-footer-container .liseezn-badge-value a {\n color: var(--liseezn-text);\n text-decoration: none;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n }\n \n #liseezn-footer-container .liseezn-badge-value a:hover {\n text-decoration: underline;\n }\n \n #liseezn-footer-container .liseezn-badge-value i {\n margin-right: 5px;\n font-size: 12px;\n }\n \n #liseezn-footer-container .liseezn-bg-orange {\n background-color: var(--liseezn-orange) !important;\n }\n \n #liseezn-footer-container .liseezn-bg-red {\n background-color: var(--liseezn-red) !important;\n }\n \n #liseezn-footer-container .liseezn-bg-apricots {\n background-color: var(--liseezn-apricots) !important;\n }\n \n #liseezn-footer-container .liseezn-bg-green {\n background-color: var(--liseezn-green) !important;\n }\n \n #liseezn-footer-container .liseezn-bg-shallots {\n background-color: var(--liseezn-shallots) !important;\n }\n \n #liseezn-footer-container .liseezn-stats-box {\n background: var(--liseezn-bg-light);\n border-radius: 8px;\n padding: 12px 15px;\n margin-top: 15px;\n text-align: center;\n font-size: 13px;\n }\n \n #liseezn-footer-container #liseezn-momk {\n animation: liseezn-change 10s infinite;\n font-weight: 700;\n }\n \n @keyframes liseezn-change {\n 0% { color: #5cb85c; }\n 25% { color: #556bd8; }\n 50% { color: #e40707; }\n 75% { color: #66e616; }\n 100% { color: #67bd31; }\n }\n \n #liseezn-footer-container .liseezn-compact-info {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 15px;\n margin-top: 20px;\n font-size: 12px;\n color: #666;\n }\n \n #liseezn-footer-container .liseezn-compact-info a {\n color: #4a89dc;\n text-decoration: none;\n }\n \n #liseezn-footer-container .liseezn-compact-info a:hover {\n text-decoration: underline;\n }\n \n @media (max-width: 600px) {\n #liseezn-footer-container {\n padding: 15px;\n }\n \n #liseezn-footer-container .liseezn-footer-badges {\n gap: 8px;\n }\n \n #liseezn-footer-container .liseezn-badge {\n font-size: 12px;\n }\n \n #liseezn-footer-container .liseezn-badge-subject,\n #liseezn-footer-container .liseezn-badge-value {\n padding: 5px 7px;\n }\n }\n </style>\n</head>\n<body>\n\n <div class=\"liseezn-footer-badges\">\n <div class=\"liseezn-badge\">\n <span class=\"liseezn-badge-subject\"><i class=\"fa fa-copyright\"></i>Copyright2025 </span>\n <span class=\"liseezn-badge-value liseezn-bg-red\"> ©2024-2025 <a href=\"https://liblog.zeabur.app/\" target=\"_blank\">@liseezn 版权所有</a></span>\n </div>\n \n <div class=\"liseezn-badge\">\n <span class=\"liseezn-badge-subject\"><i class=\"fa fa-clock-o\"></i> 运行</span>\n <span class=\"liseezn-badge-value liseezn-bg-apricots\">\n <span id=\"liseezn-blog-running-days\"></span>天\n <span id=\"liseezn-blog-running-hours\"></span>时\n <span id=\"liseezn-blog-running-mins\"></span>分\n </span>\n </div>\n \n <div class=\"liseezn-badge\">\n <span class=\"liseezn-badge-subject\"><i class=\"fa fa-id-card\"></i> 备案</span>\n <span class=\"liseezn-badge-value liseezn-bg-orange\">\n <a href=\"https://icp.gov.moe/?keyword=20256266\">吉ICP备000000000000号</a>\n <a href=\"https://">吉ICP备00000000000号</a>\n </span>\n </div>\n \n <div class=\"liseezn-badge\">\n <span class=\"liseezn-badge-subject\"><i class=\"fab fa-wordpress\"></i> Powered</span>\n <span class=\"liseezn-badge-value liseezn-bg-green\">\n <a href=\"https://cn.wordpress.org/\" target=\"_blank\">WordPress</a>\n </span>\n </div>\n\n <script>\n // 运行时间计算\n var blogRunningDays = document.getElementById(\"liseezn-blog-running-days\");\n var blogRunningHours = document.getElementById(\"liseezn-blog-running-hours\");\n var blogRunningMins = document.getElementById(\"liseezn-blog-running-mins\");\n \n function refreshBlogRunningTime() {\n var time = new Date() - new Date(2024, 6, 25, 16, 06, 0);\n var d = parseInt(time / 24 / 60 / 60 / 1000);\n var h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);\n var m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);\n \n blogRunningDays.innerHTML = d;\n blogRunningHours.innerHTML = h;\n blogRunningMins.innerHTML = m;\n }\n \n refreshBlogRunningTime();\n \n if (typeof liseeznBottomTimeIntervalHasSet == \"undefined\") {\n var liseeznBottomTimeIntervalHasSet = true;\n setInterval(function () {\n refreshBlogRunningTime();\n }, 30000); // 每30秒更新一次，减少性能消耗\n }\n \n // 模拟服务器状态数据\n function updateServerStats() {\n document.getElementById('liseezn-load-time').textContent = (0.2 + Math.random() * 0.1).toFixed(3);\n document.getElementById('liseezn-query-count').textContent = Math.floor(10 + Math.random() * 5);\n document.getElementById('liseezn-memory-usage').textContent = (24 + Math.random() * 2).toFixed(2);\n }\n \n setInterval(updateServerStats, 2000);\n updateServerStats();\n </script>\n</body>","argon_enable_code_highlight":"true","argon_code_theme":"vs2015","argon_code_highlight_hide_linenumber":"false","argon_code_highlight_break_line":"true","argon_code_highlight_transparent_linenumber":"true","argon_math_render":"none","argon_mathjax_cdn_url":"//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js","argon_mathjax_v2_cdn_url":"//cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-AMS_HTML","argon_katex_cdn_url":"//cdn.jsdelivr.net/npm/katex@0.11.1/dist/","argon_enable_lazyload":"true","argon_lazyload_threshold":"800","argon_lazyload_effect":"fadeIn","argon_lazyload_loading_style":"1","argon_enable_fancybox":"true","argon_enable_zoomify":"false","argon_zoomify_duration":"200","argon_zoomify_easing":"cubic-bezier(0.4,0,0,1)","argon_zoomify_scale":"0.9","argon_enable_pangu":"article","argon_custom_html_head":"","argon_custom_html_foot":"<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css\">\n<script src=\"https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js\"></script>\n \n<meting-js \n server=\"netease\" \n type=\"playlist\" \n id=\"7373135320\"\n fixed=\"true\" \n mini=\"true\"\n order=\"list\"\n loop=\"all\"\n preload=\"auto\"\n list-folded=\"true\"\n lrc-type=\"0\"\n>\n</meting-js>\n\n\n","argon_enable_smoothscroll_type":"1_pulse","argon_enable_into_article_animation":"true","argon_disable_pjax_animation":"false","argon_comment_pagination_type":"page","argon_comment_emotion_keyboard":"true","argon_hide_name_email_site_input":"false","argon_comment_need_captcha":"true","argon_get_captcha_by_ajax":"true","argon_comment_allow_markdown":"true","argon_comment_allow_editing":"true","argon_comment_allow_privatemode":"true","argon_comment_allow_mailnotice":"true","argon_comment_mailnotice_checkbox_checked":true,"argon_comment_enable_qq_avatar":"true","argon_comment_avatar_vcenter":"false","argon_who_can_visit_comment_edit_history":"commentsender","argon_enable_comment_pinning":"true","argon_enable_comment_upvote":"true","argon_comment_ua":"platform,browser","argon_show_comment_parent_info":"true","argon_fold_long_comments":"true","argon_gravatar_cdn":"gravatar.pho.ink/avatar/","argon_text_gravatar":"true","argon_enable_search_filters":"true","argon_search_filters_type":"*post,*page,shuoshuo","argon_pjax_disabled":"false","argon_hide_categories":"","argon_enable_login_css":"true","argon_home_show_shuoshuo":"false","argon_fold_long_shuoshuo":"true","argon_enable_timezone_fix":"false","argon_hide_shortcode_in_preview":"true","argon_trim_words_count":"0","argon_enable_mobile_scale":"false","argon_disable_googlefont":"false","argon_disable_codeblock_style":"false","argon_update_source":"github","argon_hide_footer_author":"true"}年度倒计时显示 (左侧栏)
在左侧栏里添加工具 —— 简码，复制一下代码粘贴进去
<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>底部音乐播放
下面的调用链接可能会突然失效，如有需要可参考官方文档
server="netease" 指定音乐平台为网易云，
type="song" 指单曲类型，
id="7373135320" 为音乐的 id（这里的 id 为打开音乐歌单，网址显示的 id）
开启吸底模式 fixed="true",
开启迷你模式 mini="true",
随机播放 order="random",
关闭底部歌词 lrc-type="0"
注意：id 需要为自己创建的歌单，不能为我喜欢的音乐；server 可以改自己用的音乐平台，如 netease (网易云)、tencent (QQ 音乐)
具体参数设置点击此链接：https://yy.liveout.cn/article/Learn/front-end/aplayer%E5%8F%82%E6%95%B0.png
Aplayer 播放器官网文档：APlayer HTML5 音乐播放器 | ACE-BLOG (ace520.github.io)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script> <meting-js server="netease" type="playlist" id="7360465359" fixed="true" mini="true" order="random" loop="all" preload="auto" list-folded="false"></meting-js>动态背景
背景通过更改 url 链接设置为自己的动态视频，尽量不要太大，否则别人访问时会刷新许久
注意视频链接已过期，可更换为自己的链接
上传视频到云平台或媒体库，复制资源链接
<videosrc="
https://xxx.com/123.mp4
" /*白天动态视频链接*/
class="bg-video bg-video-day"autoplay=""loop="loop"muted=""></video><videosrc="
" /*夜间动态视频链接*/
class="bg-video bg-video-night"autoplay=""loop="loop"muted=""></video><style>video.bg-video {position: fixed;z-index: -1;left: 0;right: 0;top: 0;bottom: 0;width: 100vw;height: 100vh;object-fit: cover;pointer-events: none;}html.darkmode video.bg-video.bg-video-day {opacity: 0;}html.darkmode video.bg-video.bg-video-night {opacity: 1;}video.bg-video.bg-video-day {opacity: 1;}video.bg-video.bg-video-night {opacity: 0;}#banner,#banner .shape {background: transparent !important;} </style><scriptsrc="https://api.gcxstudio.cn/odometer/odometer.min.js"integrity="sha256-65R1G5irU1VT+k8L4coqgd3saSvO/Wufson/w+v2Idw="crossorigin="anonymous"></script> <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> <div id='aplayer'></div> 虚拟人物 (看板娘)
以下代码选择一项复制即可，效果不同，自行选择
具体文章：stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦) ノ | Live2D widget for web platform (github.com)
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>- 其中 jsonpath: 后面的链接可按自己爱好更改，选择别的虚拟人物
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script><script> L2Dwidget.init({ "model": { //jsonpath控制显示那个小萝莉模型， //(切换模型需要改动)// "https://unpkg.com/(live2d-widget-model-koharu)@1.0.5/assets/(koharu).model.json" jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json", "scale": 1 }, "display": { "position": "right", //看板娘的表现位置 "width": 75, //小萝莉的宽度 "height": 150, //小萝莉的高度 "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 }, "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } });</script> /* 小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json 萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json 白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json 黑猫： https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json 小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json 小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json 初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json 圣职者妹妹：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json 茶杯犬：https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json 绿毛妹妹：https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json 金龟子妹妹：https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json 小阿狸： https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json https://unpkg.com/live2d-widget-model-nietzche@1.0.5/assets/nietzche.model.json https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json 女学生： https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json */网站底部信息
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备1234567890号</a>| <a href="https://www.beian.gov.cn/portal/index?token=00000000" target="_blank" one-link-mark="yes"> 苏公网安备 000000000号</a> </span> </div> <div class="github-badge-big"> <span class="badge-subject"><i class="fa fa-cloud" aria-hidden="true"></i> CDN</span> <span class="badge-value bg-shallots"> <!-- 又拍云链接 --> <a href="https://www.upyun.com/" target="_blank" one-link-mark="yes">Upyun</a> </span> <span class="badge-subject"><i class="fa fa-wordpress"></i> Powered</span> <span class="badge-value bg-green"> <!-- 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</i> <a href="https://example.com/" target="_blank" one-link-mark="yes">@ Echo </span> </script> </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> JavaScript（网站运行时间脚本）
注意：new Date (year, month, date, hrs, min, sec) 按给定的参数创建 日期对象
其中 month 的值域为 0～11，0 代表 1 月，11 表代表 12 月；所以你输入的月份需要为自己真正月份的前一个月
<script no-pjax="">var blog_running_days = document.getElementById("blog_running_days");var blog_running_hours = document.getElementById("blog_running_hours");var blog_running_mins = document.getElementById("blog_running_mins");var blog_running_secs = document.getElementById("blog_running_secs");function refresh_blog_running_time() {var time = new Date() - new Date(2022, 5, 31, 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>字体、鼠标等特效
雪花/樱花/烟花特效
用法也是编辑footer.php文件。还是刚刚那个界面。在末尾</body>上方（这样可以最后加载特效，以免影响其他内容的访问速度），添加以下代码（要用某个特效，记得将代码前面的注释符//去除）：
<!--全页特效开始--><script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mobile-detect.js"></script><script type="text/javascript"> // 设备检测 var md = new MobileDetect(window.navigator.userAgent); // PC生效，手机/平板不生效 // md.mobile(); md.phone(); if(!md.phone()){ if(!md.tablet()){ // 雪花 $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/xiaxue.js"); // 樱花 // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/yinghua.js"); // 小烟花特效 // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mouse-click.js"); // 大烟花特效 $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/mouse-click-02/mouse-canvas.js"); document.write('<style>#mouse-canvas {z-index:217483647; pointer-events: none; box-sizing: border-box !important; display: block !important; position: fixed !important; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100vh;}</style>') // 鼠标移动的仙女棒特效 // $.getScript("https://bensz.onmicrosoft.cn/bloghelper/mouse/halo-dream/fairyDustCursor.min.js"); // 鼠标移动的泡泡特效 // $.getScript("https://bensz.onmicrosoft.cn/bloghelper/mouse/joe/censor10.js"); } }</script><!--全页特效结束-->来源自:Docker 系列 WordPress 系列 特效 – Bensz (hwb0307.com)
博客自定义 CSS 样式
博主的设置
参考上面友情链接，以下为我的额外 CSS，涉及字体、透明等博客样式
在 外观 — 自定义 — 额外CSS 中
ps: 字体链接需要上传到云端调用才能生效（下面字体链接已失效）
/*网站字体*//*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/@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.25rem;}li{ font-size: 1.2rem; } /*评论区字体大小*/p { font-size: 1.2rem } /*评论发送区字体大小*/.form-control{ font-size: 1.2rem} /*评论勾选项目字体大小*/.custom-checkbox .custom-control-input~.custom-control-label{ font-size: 1.2rem}/*评论区代码的强调色*/code { color: rgba(var(--themecolor-rgbstr));} /*说说字体大小和颜色设置*/.shuoshuo-title { font-size: 25px;/* color: rgba(var(--themecolor-rgbstr)); */} /*尾注字体大小*/.additional-content-after-post{ font-size: 1.2rem} /* 公告居中 */.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;} /*========颜色设置===========*/ /*文章或页面的正文颜色*/body{ color:#364863} /*引文属性设置*/blockquote { /*添加弱主题色为背景色*/ background: rgba(var(--themecolor-rgbstr), 0.1) !important; width: 100%} /*引文颜色 建议用主题色*/:root { /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/ --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));} /*左侧菜单栏突出颜色修改*/.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;} /*左侧栏搜索框的颜色*/button#leftbar_search_container { background-color: transparent;} /*========透明设置===========*/ /*白天卡片背景透明*/.card{ background-color:rgba(255, 255, 255, 0.8) !important; /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/ -webkit-backdrop-filter:blur(6px);} /*小工具栏背景完全透明*//*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{ 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);} /*夜间透明*/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;} /*标签背景.post-meta-detail-tag { background:rgba(255, 255, 255, 0.5)!important;}*/ /*========排版设置===========*/ /*左侧栏层级置于上层*/#leftbar_part1 { z-index: 1;} /*分类卡片文本居中*/#content > div.page-information-card-container > div > div{ text-align:center;} /*子菜单对齐及样式调整*/.dropdown-menu .dropdown-item>i{ width: 10px;}.dropdown-menu>a { color:var(--themecolor);}.dropdown-menu{ min-width:max-content;}.dropdown-menu .dropdown-item { padding: .5rem 1.5rem 0.5rem 1rem;}.leftbar-menu-subitem{ min-width:max-content;}.leftbar-menu-subitem .leftbar-menu-item>a{ padding: 0rem 1.5rem 0rem 1rem;} /*左侧栏边距修改*/.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:0;}/*正文图片居中显示*/.fancybox-wrapper { margin: auto;}/*正文表格样式修改*/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;} /*回顶图标放大*/button#fabtn_back_to_top, button#fabtn_go_to_comment, button#fabtn_toggle_blog_settings_popup, button#fabtn_toggle_sides, button#fabtn_open_sidebar{ font-size: 1.2rem;} /*顶栏菜单放大*//*这里也可以设置刚刚我们设置的btfFont字体。试试看！*/ .navbar-nav .nav-link { font-size: 1rem; font-family: 'echo'; }.navbar-brand { font-family: 'echo'; font-size: 1.2rem; margin-right: 1.0 rem; padding-bottom: 0.2 rem; -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;} /*菜单大小*/.nav-link-inner--text { font-size: 1.25em;}.navbar-nav .nav-item { margin-right:0;}.mr-lg-5, .mx-lg-5 { margin-right:1rem !important;}.navbar-toggler-icon { width: 1.8rem; height: 1.8rem;}/*菜单间距*/.navbar-expand-lg .navbar-nav .nav-link { padding-right: 1.4em; padding-left: 1.4em;} /*隐藏wp-SEO插件带来的线条阴影（不一定要装）*/*[style='position: relative; z-index: 99998;'] { display: none;} /* Github卡片样式*/.github-info-card-header a { /*Github卡片抬头颜色*/ color: black !important; font-size: 1.5rem;}.github-info-card { /*Github卡片文字（非链接）*/ font-size: 1rem; color: black !important;}.github-info-card.github-info-card-full.card.shadow-sm { /*Github卡片背景色*/ background-color: rgba(var(--themecolor-rgbstr), 0.1) !important;} /* 左侧栏外观CSS */ /* 头像 */#leftbar_overview_author_image { width: 100px; height: 100px; margin: auto; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(127, 127, 127, 0.1); overflow: hidden; transition: transform 0.3s ease;} /* 头像亮暗 */#leftbar_overview_author_image:hover { transform: scale(1.23); filter: brightness(150%);} /* 名称 */#leftbar_overview_author_name { margin-top: 15px; font-size: 18px;align-content; color:#00FFFF;} /* 简介 */#leftbar_overview_author_description { font-size: 14px; margin-top: -4px; opacity: 0.8; color:#c21f30;} /* 标题，链接等 */a, .btn-neutral { color:#AF7AC5 ; } /* 页脚透明 */#footer { background: var(--themecolor-gradient); color: #fff; width: 100%; float: right; margin-bottom: 25px; text-align: center; padding: 25px 20px; line-height: 1.8; transition: none; opacity: 0.6;}根据主题自动透明
添加到 页尾脚本 里，根据主题色自动透明，透明度可以在 op1、op2、op3….. 那里设置
<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>头像缩放或亮暗
鼠标经过头像时自动缩放、高亮 / 暗
在 外观 — 自定义 — 额外CSS 中
#leftbar_overview_author_image { width: 100px; height: 100px; margin: auto; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(127, 127, 127, 0.1); overflow: hidden; box-shadow: 0 0 5px rgba(116, 8, 204, 0.3); transition: transform 0.3s ease; /*变化速度*/} #leftbar_overview_author_image:hover { transform: scale(1.2); /*缩放大小*/ filter: brightness(150%); /*调节亮度*/}头像 / 姓名跳转相关页
在 外观 — 主题文件编辑器 中，选择 边栏文件(sidebar.php)
点击 头像 跳转大概在第 126 行左右，
添加 <a> 标签，即 <a href="https://example.com/about/">, 其中链接改为想要跳转的地方
<div class="tab-pane fade text-center<?php if ($nowActiveTab == 1) { echo ' active show'; }?>" id="leftbar_tab_overview" role="tabpanel" aria-labelledby="leftbar_tab_overview_btn"><a href="https://example.com/about/"><div id="leftbar_overview_author_image" style="background-image: ........ <a/> 点击 姓名 跳转则是 130 行左右
添加 <a href="https://example.com/about/">.... <a/>
<a href="https://example.com/about/"><h6 id="leftbar_overview_author_name"><?php echo get_option('argon_sidebar_auther_name') == '' ? bloginfo('name') : get_option('argon_sidebar_auther_name'); ?> </h6><a/>评论头像显示
在 外观 — 主题文件编辑器 中的 function 模板函数添加此代码
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 );}来源：网络
插件合集
1 网站访问数据 (左侧栏)
- 进入 WordPress，点击插件，搜索并且下载 Wp Statistics
- 外观 —— 小工具 —— 站点额外内容 —— 旧版小工具 —— 统计
2 评论 IP 地址
以下二选一自己选择适合自己的
WP-UserAgent | kyleabaker.com From 大佬：obaby@mars (h4ck.org.cn)
WordPress 展示评论者地理位置插件 Easy Location | 歲月留聲 (0xo.net)
3 评论管理
Akismet Anti-Spam: Spam Protection
4 邮件发送
WP Mail SMTP
5 文章字数统计
WP Word Count
6 WP 用户个人头像
Simple Local Avatars
相关链接
本文可能涉及的代码出自以下博客文章，感谢下面各位大佬的分享
关于 Argon 主题 更多美化内容文章： Argon 主题的美化设置 – Gong_cx (gcxstudio.cn)
博客透明、鼠标等美化: Docker 系列 WordPress 系列 特效 – Bensz (hwb0307.com)
博客添加音乐插件: https://echeverra.cn/aplayer
Argon 主题 GitHub 地址：solstice23/argon-theme: Argon – 一个轻盈、简洁的 WordPress 主题 (github.com)
Argon 主题作者博客：solstice23 – Blog
Argon 主题使用文档：Argon Theme Docs (solstice23.top)
Argon 主题美化：Argon主题博客美化– Echo小窝
主题作者链接
Argon 主题 GitHub 地址：
solstice23/argon-theme: Argon – 一个轻盈、简洁的 WordPress 主题 (github.com)
Argon 主题使用文档：
123