本文最后更新于356 天前，其中的信息可能已经过时，如有错误请发送邮件到takumijie@qq.com

整合了一些大佬对Argon的美化代码和美化的方法

如果未安装argon请访问项目主页查看文档

Argon主题项目主页：https://github.com/solstice23/argon-theme

前言

常言道：工欲善其事必先利其器，在发表文章前，美化博客，使其利于自己的观看与管理极其重要，所以我四处搜寻，得到了以下美化代码。

但是，有时候我们走得太远，会忘了为什么出发。希望阅览本文章的人不要忘记初心，想想一开始为什么搭建博客。我相信大部分朋友都是为了记录自己学习笔记，生活故事。

所以，有时候博客美化过度会适得其反，望各位仔细斟酌，莫要使自己的博客变成了花架子，好的文章才是博客之本，立足之根。

我使用的博客美化json

可一键复制导入

{
    "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": "sourcegcdn",
    "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"
}

左侧栏年度倒计时

复制到footer.php(下面的美化代码用法一样)

<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(-20px);
}
</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>

视频背景

稍微影响加载速度

文件不要太大不要超过50mb

<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;
}
* {
font-family: "Comfortaa", "Open Sans", -apple-system, system-ui,
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial,
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
}
</style>
<script
src="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>

字体，鼠标特效

参考该链接：

https://blognas.hwb0307.com/linux/docker/744#comment-918

前言

我使用的博客美化json

左侧栏年度倒计时

音乐播放器

视频背景

字体，鼠标特效

评论

发送评论编辑评论

2023 年 3 月
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

前言

我使用的博客美化json

左侧栏年度倒计时

音乐播放器

视频背景

字体，鼠标特效

评论

发送评论 编辑评论

推荐文章

发送评论编辑评论