本文最后更新于 6 天前，其中的信息可能已经有所发展或是发生改变。
前言
很开心这篇美化文章能够帮助到大家，如果转载请标注原文地址哦，十分感谢！
感谢博主的无私分享, 原文地址: https://www.liveout.cn/argon_beauty/
我在原博主的基础之上, 增加了留言板 鼠标点击特性 鼠标美化功能, 用简单的方式实现
主题资源
链接：https://pan.baidu.com/s/1yyA-m_h_wku7n3qzK-eYEQ?pwd=echo 提取码：echo
1. 我的博客美化 JSON
注意：可复制一键导入
别忘记在主题设置页面修改头像、背景以及底部信息等设置哦（博客背景 url 已失效，需自己填写）
建议主题设置全局里 CDN 选择不使用或更换为自己的，否则可能出现 CSS 样式失效
{
"argon_theme_color":"#5e72e4",
"argon_theme_color_hex_preview":
"#5e72e4","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":"jsdelivr_fastly",
"argon_custom_assets_path":"",
"argon_wp_path":"/",
"argon_dateformat":"YMD",
"argon_enable_headroom":"true",
"argon_toolbar_title":"Echo",
"argon_toolbar_icon":"",
"argon_toolbar_icon_link":" ",
"argon_toolbar_blur":"true",
"argon_banner_title":"Echo‘s blog",
"argon_banner_subtitle":"Banner 副标题",
"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://yy.liveout.cn/background/wallhaven-yxjm57_1920x1080.png",
"argon_page_background_dark_url":"https://yy.liveout.cn/background/wallhaven-6dqjdl_1920x1080.png",
"argon_page_background_opacity":"1",
"argon_sidebar_banner_title":"左侧栏标题",
"argon_sidebar_banner_subtitle":"左侧栏子标题（格言）",
"argon_sidebar_auther_name":"Echo",
"argon_sidebar_auther_image":"https://yy.liveout.cn/photo/photo1.png",
"argon_sidebar_author_description":"左侧栏作者简介",
"argon_sidebar_announcement":"",
"argon_fab_show_settings_button":"false",
"argon_fab_show_darkmode_button":"true",
"argon_fab_show_gotocomment_button":"false",
"argon_seo_description":"网站描述 (Description Meta 标签)",
"argon_seo_keywords":"搜索引擎关键词（Keywords Meta 标签）",
"argon_article_meta":"time|categories|views",
"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":"https://www.liveout.cn/wp-content/uploads/2022/10/wechat1.jpg",
"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% 天前，其中的信息可能已经过时，如有错误请发送邮件到big_fw@foxmail.com","argon_archives_timeline_show_month":"true",
"argon_archives_timeline_url":"https://www.liveout.cn/pigeonhole/",
"argon_footer_html":"
<style>\n
/* 核心样式 */\n
.github-badge {
\ndisplay: inline-block;\nborder-radius: 4px;\ntext-shadow: none;\nfont-size: 13.1px;\ncolor: #fff;\nline-height: 15px;\nmargin-bottom: 5px;\nfont-family: \"Open Sans\", sans-serif;\n
}\n
.github-badge .badge-subject {
\ndisplay: inline-block;\nbackground-color: #4d4d4d;\npadding: 4px 4px 4px 6px;\nborder-top-left-radius: 4px;\nborder-bottom-left-radius: 4px;\nfont-family: \"Open Sans\", sans-serif;\n
}\n
.github-badge .badge-value {
\ndisplay: inline-block;\npadding: 4px 6px 4px 4px;\nborder-top-right-radius: 4px;\nborder-bottom-right-radius: 4px;\nfont-family: \"Open Sans\", sans-serif;\n
}\n
.github-badge-big {
\ndisplay: inline-block;\nborder-radius: 6px;\ntext-shadow: none;\nfont-size: 14.1px;\ncolor: #fff;\nline-height: 18px;\nmargin-bottom: 7px;\n
}\n
.github-badge-big .badge-subject {
\ndisplay: inline-block;\nbackground-color: #4d4d4d;\npadding: 4px 4px 4px 6px;\nborder-top-left-radius: 4px;\nborder-bottom-left-radius: 4px;\n
}\n
.github-badge-big .badge-value {
\ndisplay: inline-block;\npadding: 4px 6px 4px 4px;\nborder-top-right-radius: 4px;\nborder-bottom-right-radius: 4px;\n}\n.bg-orange {\nbackground-color: #ec8a64 !important;\n
}\n
.bg-red {
\nbackground-color: #cb7574 !important;\n
}\n
.bg-apricots {
\nbackground-color: #f7c280 !important;\n
}\n
.bg-casein {
\nbackground-color: #dfe291 !important;\n
}\n
.bg-shallots {
\nbackground-color: #97c3c6 !important;\n
}\n
.bg-ogling {
\nbackground-color: #95c7e0 !important;\n
}\n
.bg-haze {
\nbackground-color: #9aaec7 !important;\n
}\n
.bg-mountain-terrier {
\nbackground-color: #99a5cd !important;\n
}\n
</style>\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\"\n>苏ICP备0000000000号</a\n>\n|\n
<a\nhref=\"http://www.beian.gov.cn/portal/registerSystemInfo?recordcode= 32072202010255\"\ntarget=\"_blank\"\none-link-mark=\"yes\"\n>苏公网安备 00000000000000号</a\n>
</span\n>\n
</div>\n\n \n<div class=\"github-badge\">\n
<span class=\"badge-subject\">
<img src=\"https://www.liveout.cn/wp-content/uploads/2022/10/又拍云_logo4.png\" height=\"20\" width=\"20\"/></i> CDN</span\n>
<span class=\"badge-value bg-shallots\"\n>
<a href=\"\" target=\"_blank\" one-link-mark=\"yes\"></a\n>
<a\nhref=\"https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral\"\ntarget=\"_blank\"\none-link-mark=\"yes\"\n>Upyun</a\n></span\n>\n
<span class=\"badge-subject\"><i class=\"fa fa-wordpress\"></i> Powered</span\n>
<span class=\"badge-value bg-green\"\n><a href=\"https://cn.wordpress.org/\" target=\"_blank\" one-link-mark=\"yes\"\n>WordPress</a\n></span\n>\n</div>\n
<div class=\"github-badge-big\">\n<span class=\"badge-subject\">Copyright </span\n>
<span class=\"badge-value bg-red\">\n2022-2022\n<i class=\"fa fa-copyright\"></i> Echo</span\n>\n
</script>\n
</div>\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>\ndays\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>\nS</span\n>\n <script no-pjax=\"\">\nvar blog_running_days = document.getElementById(\"blog_running_days\");\nvar blog_running_hours = document.getElementById(\"blog_running_hours\");\nvar blog_running_mins = document.getElementById(\"blog_running_mins\");\nvar blog_running_secs = document.getElementById(\"blog_running_secs\");\nfunction refresh_blog_running_time() {\nvar time = new Date() - new Date(2020, 0,0, 0, 0, 0);\nvar d = parseInt(time / 24 / 60 / 60 / 1000);\nvar h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);\nvar m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);\nvar s = parseInt((time % (60 * 1000)) / 1000);\nblog_running_days.innerHTML = d;\nblog_running_hours.innerHTML = h;\nblog_running_mins.innerHTML = m;\nblog_running_secs.innerHTML = s;\n}\nrefresh_blog_running_time();\nif (typeof bottomTimeIntervalHasSet == \"undefined\") {\nvar bottomTimeIntervalHasSet = true;\nsetInterval(function () {\nrefresh_blog_running_time();\n}, 500);\n}
\n</script>\n",
"argon_enable_code_highlight":"true",
"argon_code_theme":"vs2015",
"argon_code_highlight_hide_linenumber":"true",
"argon_code_highlight_break_line":"false",
"argon_code_highlight_transparent_linenumber":"false",
"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":"false",
"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":"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"
}
2. 年度倒计时显示 (左侧栏)
在左侧栏里添加工具 —— 简码，复制一下代码粘贴进去
<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>3. 底部音乐播放
下面的调用链接可能会突然失效，如有需要可参考官方文档
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>4. 动态背景 (视频资源失效)
背景可以通过更改 url 链接设置为自己的动态视频，尽量不要太大，否则别人访问时会刷新许久
注意视频链接已过期，可更换为自己的链接
上传视频到云平台或媒体库，复制资源链接
<video src="https://new.gcxstudio.cn/wp-content/uploads/2022/03/daymode.mp4" /*白天动态视频链接*/
class="bg-video bg-video-day"autoplay=""loop="loop"muted=""></video>
<video src="https://new.gcxstudio.cn/wp-content/uploads/2022/03/darkmode.webm" /*夜间动态视频链接*/
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> 5. 虚拟人物 (看板娘)
以下代码选择一项复制即可，效果不同，自行选择
具体文章：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 */6. 网站底部信息
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=e547b70c-fbe1-4c80-a4a2-857b17389a71" target="_blank" one-link-mark="yes"> 苏公网安备 32072212344321号</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://www.liveout.cn/" 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>7. 字体、鼠标等特效
Docker 系列 WordPress 系列 特效 – Bensz (hwb0307.com)
8. 博客自定义 CSS 样式
8.1 博主的设置
参考上面友情链接，以下为我的额外 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;
}8.2 根据主题自动透明
添加到 页尾脚本 里，根据主题色自动透明，透明度可以在 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>来源自友链朋友：北冥红烧鱼 (hongshaoyv.com)
9. 头像缩放或亮暗
鼠标经过头像时自动缩放、高亮 / 暗
在 外观 — 自定义 — 额外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%); /*调节亮度*/}10. 头像 / 姓名跳转相关页
在 外观 — 主题文件编辑器 中，选择 边栏文件(sidebar.php)
点击 头像 跳转大概在第 126 行左右，
添加 <a> 标签，即 <a href="https://www.liveout.cn/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://www.liveout.cn/about/">
<div id="leftbar_overview_author_image" style="background-image: ........
<a/>
点击 姓名 跳转则是 130 行左右
添加
<a href="https://www.liveout.cn/about/">.... <a/>
<a href="https://www.liveout.cn/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/>11. 评论头像显示
在 外观 — 主题文件编辑器 中的 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
);
}来源：网络
12. 插件合集
12.1 网站访问数据 (左侧栏)
- 进入 WordPress，点击插件，搜索并且下载 Wp Statistics
- 外观 —— 小工具 —— 站点额外内容 —— 旧版小工具 —— 统计
12.2 评论 IP 地址
以下根据体验自己选择
WP-UserAgent | kyleabaker.com From 友链大佬：obaby@mars (h4ck.org.cn)
WordPress 展示评论者地理位置插件 Easy Location | 歲月留聲 (0xo.net)
12.3 评论管理
Akismet Anti-Spam: Spam Protection
12.4 邮件发送
WP Mail SMTP
12.5 文章字数统计
WP Word Count
12.6 WP 用户个人头像
Simple Local Avatars
13.留言板
WordPress后台 —> 左边新建页面 —> 左边模板里面选择留言板 —> 保存OK, (没有显示的输入框点击 + 号添加评论保存OK)
14.鼠标点击特效
鼠标点击特效 —> 循环词语特效和随机数字特效 —> 二选一就行
服务器上找到 —> WordPress 站点根目录 —> /www/wwwroot/[站点文件名]你的主题目录
在这个目录找到 wp-content/themes/[WordPress使用的主题名称]/你的主题目录header.php
在 <head> 和 </head> 之中添加以下代码
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>主题目录下找到 wp-content/themes/[WordPress使用的主题名称]你的主题目录/footer.php
在 </body> 之前添加这些代码
循环文字词语点击特效
<!--mouse effects show start-->
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善");//替换你自己喜欢的词语
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 99999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"//颜色随机
//"#2299DD" //固定颜色
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<!--mouse effects show end-->随机二进制数字点击特效
<!--mouse effects show start-->
<script>
jQuery(document).ready(function($) {
var _click_count=0;
$("body").bind("click",function(e){
var n=Math.round(Math.random()*100)+1;//生成100以内的随机数
if(n == 0) res= '0';
var res = '';
while(n != 0) {
res = n % 2 + res
n = parseInt(n / 2)
}//将n转化为二进制数res
var $i=$("<b>").text("+"+(res));
var x=e.pageX,y=e.pageY;//鼠标点击的坐标
$i.css({
"z-index":99999,
"top":y-15,
"left":x,
"position":"absolute",
"color":"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"//颜色随机
//"#2299DD" //固定颜色
});
$("body").append($i);
$i.animate({
"top":y-180,
"opacity":0
},
1500,
function(){$i.remove();}
);
e.stopPropagation();
});
});
</script>
<!--mouse effects show end-->15.鼠标样式美化
第一步: 打开官网 —> https://custom-cursor.com/
下载鼠标图片样式 —> 选中你喜欢的样式 —> 点击视图
第二步: 按F12打开开发者工具 —>点击网路 —>刷新一下
选中图片右键在新标签页打开 —> 另存为 —>将下载好的图片上传到WordPress媒体库中 —> 复制图片链接到第四步(url)中 —> 保存即可
第三步：进入后台→主题→自定义→额外css
第四步：在输入框输入如下代码
/** 鼠标样式 开始**/
/** 普通指针样式**/
body {
cursor: url(https://blog.songtianlun.cn/wp-content/themes/hestia/mouseclink/normal.cur你的媒体库鼠标图片), default;
}
/** 链接指针样式**/
a:hover{cursor:url(https://blog.songtianlun.cn/wp-content/themes/hestia/mouseclink/link.cur你的媒体库鼠标图片), pointer;}
/** 鼠标样式 结束**/教程视频
个人博客网站 (WordPress) 基本使用哔哩哔哩 bilibili
推荐文章
- 个人博客网站搭建 – Echo (liveout.cn)
- 个人博客主题分享 (WordPress) – Echo (liveout.cn)
- 博客图片托管到又拍云教程 – Echo (liveout.cn)
- WordPress/Typecho 博客搬迁教程 – Echo (liveout.cn)
相关链接
本文可能涉及的代码出自以下博客文章，十分感谢下面各位大佬的分享
关于 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)
FAQ
如果遇到问题无法解决，请参考以下途径
- B 站视频：博客搭建常见问题汇总哔哩哔哩 bilibili
- 翻翻评论区，已经有许多问题提出和解决了，大部分都一样
- 查看官方文档
如果问题还未解决，请评论区留言
一些话
很开心这篇美化文章能够帮助到大家，如果转载请标注原文地址哦，十分感谢！赞赏
您好，这是一条评论。若需要审核、编辑或删除评论，请访问仪表盘的评论界面。评论者头像来自 Gravatar。
你好