Argon美化日志
关于 Argon 主题的美化进度文档~
日志
2025-7-7
重新优化博客夜间模式，变的更好看了，缺点是使用毛玻璃变得比较卡顿，用户设备不好的话会有点卡，不想花太多时间折腾博客外观了，写博文才是正道...
2025-7-5
优化博客透明效果，在主题选项-脚本中添加透明设置，具体使用复制主题设置+额外css设置
2025-7-3
博主回归了，去除掉顶栏部分生活板块中的厨艺，以及音乐一栏，专注于项目，技术类相关的文章撰写
2024-12-22
主题颜色变更，原本为湖蓝色R:65，G:167，B:251，修改为Argon默认配色，白天背景图片，修改为白天背景图2。新增音乐播放器样式boder圆润效果，已经更新在额外css中。
2024-9-28
顶部导航栏新增生活板块，其包含一个子类：厨艺。用于记录个人做饭心得，私人使用。
2024-1-28
新增嘉立创的传送链接
2024-1-27
整理了目前的美化进度，更新了文档内容
2023-7-6
添加插件WP Mail SMTP用于评论区自动发送邮件,esay-location插件用于显示评论区IP地址,国内精确到省级,国外精确到国家。github直接搜索此项目
前言
此文用于更新blog美化进度，以及方便搬迁使用
用了那么多主题，还是argon更适合自己，符合我的审美
关于使用，我将特效文件存放在了Argon博客的根目录下，并新建目录命名为：special_effects，我在这里统一保管自己的博客特效和脚本功能，我比较喜欢在第三方编辑软件管理。你可以在博客后台找到Argon主题选项——脚本——页尾脚本自行添加。
如果你想和博主一样的管理方式，需要在argon主题文件中的footer.php文件中找到</body>，并在其上方添加路径，如下图：
主要配置
点击展开主要配置的内容
额外CSS
更新时间：2025/7/7
设置方式：外观——自定义——额外css
/*===========模式============*/
/*悼念模式*/
/* html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
*/
/*====字体样式修改为LXGW文楷====*/
@font-face{
font-family:btfFont;
src: url(https://xxxx.woff2) format('woff2')
}
body,.custom-font{
font-family:"btfFont" !important
}
/*=========字大小设置=========*/
/*顶部菜单栏文字大小*/
.custom-font {
font-size: 1.17em;
}
/*博客大横幅标题大小*/
.banner-title {
font-size: 2.5em;
}
/*博客小横幅标题大小*/
.banner-subtitle {
font-size: 25px;
}
/*正文字体大小,不包含代码,默认为1*/
.post-content p {
font-size: 1rem;
}
/*=========评论区设置=========*/
/*去除隐藏花！表情包下的描述*/
.emotion-group-description {
display: none !important;
}
/* 评论区下横线变黑 */
.comment-item-inner {
border-bottom: 1px solid #0003 !important;
}
/* 夜间模式下评论区地址信息变白 */
html.darkmode .comment--location svg,
html.darkmode .comment--location {
color: #fff !important;
fill: white !important;
stroke: white !important;
}
/* 夜间模式下评论区下发横线变白 */
html.darkmode .comment-item-inner {
border-bottom: 1px solid #fff !important;
}
/*表情包防止置底被遮挡*/
/*白天夜晚都生效*/
/*ios不生效不知道原因*/
#footer.site-footer.card.shadow-sm.border-0,
.related-posts.card.shadow-sm,
.post-navigation.card.shadow-sm {
z-index: 0 !important;
position: fixed !important;
}
/*======日间模式的颜色设置======*/
/*分类，用户字色改为白色*/
header.post-header.text-center.post-header-with-thumbnail .post-header-text-container div.post-meta a{
color:white;
}
/*卡片标题字色改为白色*/
header.post-header.text-center div.post-meta a,
a.post-title,
.post-content-container div.post-meta a{
color:#364863;
}
/*标签边框*/
.tag.badge{
border-color: #364863;
}
/*======夜间模式的颜色设置=======*/
html.darkmode a.post-title,
html.darkmode div.post-meta a{
color: white;
}
/*夜间模式标签边框*/
html.darkmode .tag.badge{
border-color: #fff;
}
/*=========背景透明设置=========*/
/*白天卡片背景透明*/
.card {
background-color: rgba(255, 255, 255, 0.8) !important;
-webkit-backdrop-filter: blur(6px);
}
/*左侧栏日历等工具背景透明*/
.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;
}
/*夜间全局透明毛玻璃特效修改*/
html.darkmode #footer,
html.darkmode .card,
html.darkmode .leftbar-banner {
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(15px) saturate(170%);
z-index:1;
}
/*表情包区域透明度*/
html.darkmode .emotion-keyboard-content{
background: rgba(255, 255, 255, 0.58) !important;
}
/*表情包选择区域透明度*/
html.darkmode .emotion-keyboard-bar{
background: rgba(80, 80, 80, 0.8) !important;
}
/*右下角选项夜间模式设置*/
html.darkmode
#fabtn_blog_settings_popup {
background: rgba(66, 66, 66, 0.95) !important;
}
/*图片卡片对比度调整,防止文字遮挡*/
/* 只有包含 .post-thumbnail 图片的 .post-header 才会变灰 */
/*应用在卡片布局1才生效*/
.post-header:has(.post-thumbnail) {
position: relative;
}
.post-header:has(.post-thumbnail)::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1); /* 30% 透明度的黑色 */
z-index: 1;
}
.post-header-text-container {
position: relative;
z-index: 2; /* 确保文字在遮罩层之上 */
color: white;
}
/*=========左侧栏设置=========*/
/*公告栏目，一言居中*/
.leftbar-announcement-content,
.leftbar-announcement-title,
.leftbar-banner.card-body{
text-align: center;
}
/*夜间颜色左侧栏目录，站点概览功能*/
/*分类标签，功能区变白*/
html.darkmode th,
html.darkmode .progress-info *,
html.darkmode .site-state *,
html.darkmode .post-outdated-info,
html.darkmode div#leftbar_part2_inner.card-body a,
html.darkmode header.post-header.text-center a {
color: #fff;
}
/*日间颜色左侧栏目录，站点概览功能*/
.post-outdated-info, div#leftbar_part2_inner.card-body a,
header.post-header.text-center a {
color: #000;
}
/* 左侧栏竖线变黑 */
.site-state-item {
border-left: 1px solid #000 !important;
}
/* 左侧栏竖线为白色 */
html.darkmode .site-state-item:nth-child(2),
html.darkmode .site-state-item:nth-child(3) {
border-left: 1px solid #fff !important;
}
/*=========文章设置==========*/
/*分类栏目的文本居中*/
#content>div.page-information-card-container>div>div {
text-align: center;
}
/*表格样式调整*/
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;
}
/*=========顶栏菜单设置========*/
/*字体大小*/
.navbar-brand {
font-family: 'btfFont';
font-size: 1.3rem;
-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;
}
/*间距大小*/
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 2em;
}
/*==========推荐文章==========*/
/*推荐无图片文章夜间模式颜色修正*/
html.darkmode div.related-post-title.clamp{
color:#fff;
}
/*==========其他修改==========*/
/*隐藏左移按钮*/
#fabtn_toggle_sides{display:none;}
/*折叠说说颜色修改*/
.shuoshuo-content.shuoshuo-folded:after {
border-radius: 10px;
background: linear-gradient(180deg, transparent 0%, var(--mycolor) 100%);
}
:root {--mycolor: #e6ddd3;}
html.darkmode {--mycolor: #606060;}
/*左侧栏头像自动缩放*/
#leftbar_overview_author_image:hover{
transform: scale(1.2);
filter: brightness(150%);
}
/*滚动条修改*/
::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track{
background-color:#272010;
}
::-webkit-scrollbar-thumb{
background-color:#6f6558;
border:none;
}
html.darkmode ::-webkit-scrollbar-track{
background-color:#282828;
}
/* 顶栏阴影效果 */
#navbar-main {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
/* 左侧一言栏去除太厚的玻璃效果 */
.leftbar-banner.card-body {
backdrop-filter: none !important;
}
/* 黑夜模式下鼠标响应特效 */
html.darkmode a:hover {
background-color: #e0f0ff !important;
color: #000 !important;
border-radius: 5px !important;
transition: all 0.2s ease-in-out;
text-decoration: none !important;
}
html.darkmode a:hover .site-state-item-name {
color: #000 !important;
}
主题选项配置
更新时间：2025/7/5
注意：不包含脚本设置，已转移到special_effects下
导入方式：Agon主题选项——到底部——导入设置
{"argon_theme_color":"#41a7fb","argon_theme_color_hex_preview":"#41a7fb","argon_show_customize_theme_color_picker":true,"argon_enable_immersion_color":"true","argon_darkmode_autoswitch":"time","argon_enable_amoled_dark":"false","argon_card_radius":"6","argon_card_shadow":"big","argon_page_layout":"double-reverse","argon_article_list_waterflow":"3","argon_article_list_layout":"1","argon_font":"serif","argon_assets_path":"jsdelivr_fastly","argon_custom_assets_path":"","argon_wp_path":"/","argon_dateformat":"YMD","argon_enable_headroom":"true","argon_toolbar_title":"Clif's Blog","argon_toolbar_icon":"","argon_toolbar_icon_link":" ","argon_toolbar_blur":"true","argon_banner_title":"Clif's Blog","argon_banner_subtitle":"The more you know, The less you know","argon_banner_size":"fullscreen","argon_page_background_banner_style":"transparent","argon_show_toolbar_mask":true,"argon_banner_background_url":"","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":"80","argon_page_background_url":"https://img.new-epoch-meta.com/global/background/background_day.jpg","argon_page_background_dark_url":"https://img.new-epoch-meta.com/global/background/background_night.jpg","argon_page_background_opacity":"1","argon_sidebar_banner_title":"一言","argon_sidebar_banner_subtitle":"--hitokoto--","argon_sidebar_auther_name":"Clif","argon_sidebar_auther_image":"https://img.new-epoch-meta.com/global/head/header.jpg","argon_sidebar_author_description":"擅长拔网线，物理攻击选手","argon_sidebar_announcement":"若出现卡片堆叠，按F5刷新~","argon_fab_show_settings_button":"false","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":"author|categories|time|views","argon_show_readingtime":"true","argon_reading_speed":"200","argon_reading_speed_en":"80","argon_reading_speed_code":"10","argon_show_thumbnail_in_banner_in_content_page":"true","argon_first_image_as_thumbnail_by_default":"true","argon_reference_list_title":"ref","argon_show_sharebtn":"domestic","argon_show_headindex_number":"false","argon_donate_qrcode_url":"https://img.new-epoch-meta.com/global/%E6%89%93%E8%B5%8F/%E6%89%93%E8%B5%8F.jpg","argon_additional_content_after_post":"如果您觉得本博客内容有所帮助，可以打赏一下吗~，此打赏将会用于博客维护运营，十分感谢！\n作者：<a href='https://www.clif.top/' target=\"_blank\">Clif</a>\n版权声明: 本博客所有文章除未特别声明外，均采用<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' target=\"_blank\">CC BY-NC-SA 4.0</a>协议。转载请注明文章地址及作者！","argon_related_post":"category,tag","argon_related_post_sort_orderby":"date","argon_related_post_sort_order":"DESC","argon_related_post_limit":"4","argon_article_header_style":"article-header-style-2","argon_outdated_info_time_type":"modifiedtime","argon_outdated_info_days":"3","argon_outdated_info_tip_type":"inpost","argon_outdated_info_tip_content":"本文最后更新于%modify_date_delta% 天前，如有错误请在评论区中留言。","argon_archives_timeline_show_month":"true","argon_archives_timeline_url":"https://www.clif.top/归档/","argon_footer_html":"<!--////////////////////////////////////核心样式////////////////////////////////////-->\n<style>\n .github-badge {\n display: inline-block;\n border-radius: 4px;\n text-shadow: none;\n font-size: 13.1px;\n color: #fff;\n line-height: 15px;\n margin-bottom: 5px;\n font-family: \"Open Sans\", sans-serif;\n }\n \n .github-badge .badge-subject {\n display: inline-block;\n background-color: #4d4d4d;\n padding: 4px 4px 4px 6px;\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n font-family: \"Open Sans\", sans-serif;\n }\n \n .github-badge .badge-value {\n display: inline-block;\n padding: 4px 6px 4px 4px;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n font-family: \"Open Sans\", sans-serif;\n }\n \n .github-badge-big {\n display: inline-block;\n border-radius: 6px;\n text-shadow: none;\n font-size: 14.1px;\n color: #fff;\n line-height: 18px;\n margin-bottom: 7px;\n }\n\n .github-badge-big .badge-subject {\n display: inline-block;\n background-color: #4d4d4d;\n padding: 4px 4px 4px 6px;\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n }\n\n .github-badge-big .badge-value {\n display: inline-block;\n padding: 4px 6px 4px 4px;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n }\n \n .bg-orange {\n background-color: #ec8a64 !important;\n }\n \n .bg-red {\n background-color: #cb7574 !important;\n }\n \n .bg-apricots {\n background-color: #f7c280 !important;\n }\n \n .bg-casein {\n background-color: #dfe291 !important;\n }\n \n .bg-shallots {\n background-color: #97c3c6 !important;\n }\n \n .bg-ogling {\n background-color: #95c7e0 !important;\n }\n \n .bg-haze {\n background-color: #9aaec7 !important;\n }\n \n .bg-mountain-terrier {\n background-color: #99a5cd !important;\n }\n</style>\n<!--////////////////////////////////////底部信息////////////////////////////////////-->\n<!-- 备案信息 -->\n<div class=\"github-badge-big\">\n <span class=\"badge-subject\"><i class=\"fa fa-id-card\"></i> 备案号 </span>\n <span class=\"badge-value bg-orange\">\n <a href=\"https://beian.miit.gov.cn/\" target=\"_blank\" one-link-mark=\"yes\">蜀ICP备2023005984号</a>\n<!--|\n <a href=\"https://www.beian.gov.cn/portal/index?token=e547b70c-fbe1-4c80-a4a2-857b17389a71\" target=\"_blank\" one-link-mark=\"yes\">公网安备 1234567890号</a>\n -->\n </span>\n</div>\n \n<!-- CDN/wordpress -->\n<div class=\"github-badge-big\">\n <span class=\"badge-subject\"><i class=\"fa fa-cloud\" aria-hidden=\"true\"></i></img> CDN</span>\n <span class=\"badge-value bg-shallots\"><a href=\"https://console.cloud.tencent.com/cdn\" target=\"_blank\" one-link-mark=\"yes\">腾讯云</a></span>\n <span class=\"badge-subject\"><i class=\"fa fa-wordpress\"></i> Powered</span>\n <span class=\"badge-value bg-green\"><a href=\"https://cn.wordpress.org/\" target=\"_blank\" one-link-mark=\"yes\"> WordPress</a></span>\n</div>\n \n<!-- 网站所属 -->\n<div class=\"github-badge-big\">\n <span class=\"badge-subject\"><i class=\"fa fa-copyright\" aria-hidden=\"true\"></i> Copyright </span>\n <span class=\"badge-value bg-red\">2022-2025<a href=\"https://www.clif.top/\" one-link-mark=\"yes\"> @Clif</a></span>\n</div>\n \n<!-- 运行时间 -->\n<div class=\"github-badge-big\">\n <span class=\"badge-subject\"><i class=\"fa fa-clock-o\"></i> Running Time</span>\n <span class=\"badge-value bg-apricots\">\n <span id=\"blog_running_days\" class=\"odometer odometer-auto-theme\"></span> days\n <span id=\"blog_running_hours\" class=\"odometer odometer-auto-theme\"></span> H\n <span id=\"blog_running_mins\" class=\"odometer odometer-auto-theme\"></span> M\n <span id=\"blog_running_secs\" class=\"odometer odometer-auto-theme\"></span> S\n </span>\n</div>\n<!--////////////////////////////////网站运行时间脚本////////////////////////////////////-->\n \n<script no-pjax=\"\">\n var blog_running_days = document.getElementById(\"blog_running_days\");\n var blog_running_hours = document.getElementById(\"blog_running_hours\");\n var blog_running_mins = document.getElementById(\"blog_running_mins\");\n var blog_running_secs = document.getElementById(\"blog_running_secs\");\n function refresh_blog_running_time() {\n var time = new Date() - new Date(2023, 2, 27, 0, 0, 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 var s = parseInt((time % (60 * 1000)) / 1000);\n blog_running_days.innerHTML = d;\n blog_running_hours.innerHTML = h;\n blog_running_mins.innerHTML = m;\n blog_running_secs.innerHTML = s;\n }\n refresh_blog_running_time();\n if (typeof bottomTimeIntervalHasSet == \"undefined\") {\n var bottomTimeIntervalHasSet = true;\n setInterval(function () {\n refresh_blog_running_time();\n }, 500);\n }\n</script>","argon_enable_code_highlight":"true","argon_code_theme":"vs2015","argon_code_highlight_hide_linenumber":"false","argon_code_highlight_break_line":"false","argon_code_highlight_transparent_linenumber":"true","argon_math_render":"mathjax3","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":"false","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|shuoshuo|comment","argon_custom_html_head":"","argon_custom_html_foot":"<!--////////////////音乐播放器mini（配合额外css修改夜晚字过浅bug）///////////////////////////-->\n\n<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 lrc-type=\"0\"\n id=\"12622227324\"\n fixed=\"true\" \n mini=\"true\"\n order=\"random\"\n loop=\"all\"\n preload=\"auto\"\n list-folded=\"false\">\n</meting-js>\n\n<script>\n \n<!--////////////////博客全局透明度设置（配合额外css修改夜间白天透明效果）///////////////////////////-->\nfunction hexToRgb(hex,op){\nlet str = hex.slice(1);\nlet arr;\nif (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));\nelse arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];\nreturn rgb(${arr.join(', ')}, ${op});\n};\n \nlet themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim();\nlet op1 = 0.6\nlet themeColorRgb = hexToRgb(themeColorHex,op1);\nlet themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient')\n \ndocument.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb)\nlet op2 = 0.8\nlet colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim();\ncolorTint92 += ', '+op2;\ndocument.documentElement.style.setProperty('--color-tint-92',colorTint92)\n \nlet op3 = 0.65\nlet colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim();\ncolorShade90 += ', ' + op3;\ndocument.documentElement.style.setProperty('--color-shade-90',colorShade90)\n \nlet op4 = 0.8\nlet colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim();\ncolorShade86 += ', ' + op4;\ndocument.documentElement.style.setProperty('--color-shade-86',colorShade86)\n \n</script>","argon_enable_smoothscroll_type":"1_pulse","argon_enable_into_article_animation":"true","argon_disable_pjax_animation":"false","argon_comment_pagination_type":"feed","argon_comment_emotion_keyboard":"true","argon_hide_name_email_site_input":"false","argon_comment_need_captcha":"true","argon_get_captcha_by_ajax":"false","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":"admin","argon_enable_comment_pinning":"true","argon_enable_comment_upvote":"true","argon_comment_ua":"platform,browser,version","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":"false","argon_home_show_shuoshuo":"false","argon_fold_long_shuoshuo":"true","argon_enable_timezone_fix":"true","argon_hide_shortcode_in_preview":"true","argon_trim_words_count":"100","argon_enable_mobile_scale":"false","argon_disable_googlefont":"false","argon_disable_codeblock_style":"false","argon_update_source":"github","argon_hide_footer_author":"true"}
左侧栏小工具
更新时间：2024/1/27
效果如下：
设置方式：外观——小工具——左侧栏处，添加[/]简码，将如下代码复制到[/]简码中，简码下方添加日历
<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(-44px);
}
</style>
站点概览额外内容
更新时间：2024/1/27
效果如图：
设置方式：外观——小工具——站点概览额外内容，添加统计，勾选累计访问，总浏览量
字体设置
更新时间：2023/7/5
修改字体格式为霞鹜文楷，免费商用
@font-face{
font-family:btfFont;
src: url(https://yourdomain/xxx.woff2) format('woff2')
}
body{
font-family:"btfFont" !important
}
