Argon主题美化

不忘初心

好看的博客不仅可以使自己心情愉悦，也能提高访客的用户体验。但是不要沉迷于这些外在的东西，不要忘记自己的搭建博客的初衷——记录学习笔记和生活故事。博客美化应该适度，不要让博客变成花架子。好的文章才是博客的核心，是我们立足之本。

Argon设置json

在Argon主题设置底部有一个导入设置，可以直接复制我的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":"system","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":"--hidden--","argon_toolbar_icon":"https://loyeh.top/wp-content/uploads/2024/02/1708914474-logo.png","argon_toolbar_icon_link":" https://loyeh.top/","argon_toolbar_blur":"true","argon_banner_title":"loyehの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://loyeh.top/wp-content/uploads/2024/02/1708913748-1.jpg","argon_page_background_dark_url":"https://loyeh.top/wp-content/uploads/2024/03/pwmpg.jpg","argon_page_background_opacity":"1","argon_sidebar_banner_title":"北冥有鱼","argon_sidebar_banner_subtitle":"--hitokoto--","argon_sidebar_auther_name":"loyeh","argon_sidebar_auther_image":"https://loyeh.top/wp-content/uploads/2024/03/avatar.jpg","argon_sidebar_author_description":"life is fucking game","argon_sidebar_announcement":"","argon_fab_show_settings_button":"true","argon_fab_show_darkmode_button":"true","argon_fab_show_gotocomment_button":"true","argon_seo_description":"loyehのblog","argon_seo_keywords":"blog,c,python","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":"3","argon_article_header_style":"article-header-style-2","argon_outdated_info_time_type":"createdtime","argon_outdated_info_days":"30","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(2024, 2,25, 20, 22, 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":"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":"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":"<!DOCTYPE html>\n<html lang=\"zh\">\n\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Music Player</title>\n  <!-- APlayer CSS -->\n  <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css\">\n  <!-- Meting.js -->\n  <script src=\"https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js\"></script>\n  <!-- Custom styles -->\n  <style>\n    /* Common styles for day and night videos */\n    video.bg-video {\n      position: fixed;\n      z-index: -1;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      width: 100vw;\n      height: 100vh;\n      object-fit: cover;\n      pointer-events: none;\n      playsinline: true; /* Add this to support inline playback on mobile devices */\n      transition: opacity 0.5s ease; /* Add smooth transition for opacity change */\n    }\n\n    /* Day mode styles */\n    html:not(.darkmode) video.bg-video {\n      opacity: 1;\n    }\n\n    /* Night mode styles */\n    html.darkmode video.bg-video {\n      opacity: 0;\n    }\n\n    /* Other styles */\n    #banner,\n    #banner .shape {\n      background: transparent !important;\n    }\n  </style>\n</head>\n\n<body>\n  <!-- Day video -->\n  <video class=\"bg-video\" autoplay loop muted playsinline src=\"https://loyeh.top/wp-content/uploads/2024/03/yaponskaya-krasavica.mp4\"></video>\n\n  <!-- Night video -->\n  <video class=\"bg-video\" autoplay loop muted playsinline src=\"https://loyeh.top/wp-content/uploads/2024/03/Ahri-with-Candles-4K.mp4\"></video>\n\n  <!-- APlayer container -->\n  <div id=\"aplayer\"></div>\n\n  <!-- Live2D Widget -->\n  <script src=\"https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js\"></script>\n\n  <script>\n    // Function to toggle dark mode\n    function toggleDarkMode() {\n      document.documentElement.classList.toggle('darkmode');\n    }\n\n    // Initialize APlayer\n    const ap = new APlayer({\n      container: document.getElementById('aplayer'),\n      audio: [{\n        name: 'Song Name',\n        artist: 'Artist',\n        url: 'music.mp3',\n        cover: 'cover.jpg',\n      }]\n    });\n  </script>\n</body>\n\n</html>","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":"50","argon_enable_mobile_scale":"false","argon_disable_googlefont":"false","argon_disable_codeblock_style":"false","argon_update_source":"github","argon_hide_footer_author":"true"}

快捷设置

在Argon主题设置的页尾脚本中，粘贴以下代码，一键实现音乐播放器、动态视频背景、看板娘的设置

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Music Player</title>
  <!-- APlayer CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
  <!-- Meting.js -->
  <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
  <!-- Custom styles -->
  <style>
    /* Common styles for day and night videos */
    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;
      playsinline: true; /* Add this to support inline playback on mobile devices */
      transition: opacity 0.5s ease; /* Add smooth transition for opacity change */
    }

    /* Day mode styles */
    html:not(.darkmode) video.bg-video {
      opacity: 1;
    }

    /* Night mode styles */
    html.darkmode video.bg-video {
      opacity: 0;
    }

    /* Other styles */
    #banner,
    #banner .shape {
      background: transparent !important;
    }
  </style>
</head>

<body>
  <!-- Day video -->
  <video class="bg-video" autoplay loop muted playsinline src="https://loyeh.top/wp-content/uploads/2024/03/yaponskaya-krasavica.mp4"></video>

  <!-- Night video -->
  <video class="bg-video" autoplay loop muted playsinline src="https://loyeh.top/wp-content/uploads/2024/03/Ahri-with-Candles-4K.mp4"></video>

  <!-- APlayer container -->
  <div id="aplayer"></div>

  <!-- Live2D Widget -->
  <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

  <script>
    // Function to toggle dark mode
    function toggleDarkMode() {
      document.documentElement.classList.toggle('darkmode');
    }

    // Initialize APlayer
    const ap = new APlayer({
      container: document.getElementById('aplayer'),
      audio: [{
        name: 'Song Name',
        artist: 'Artist',
        url: 'music.mp3',
        cover: 'cover.jpg',
      }]
    });
  </script>
</body>

</html>

添加音乐播放器

参数说明：

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>

添加看板娘

以下代码选择一项复制即可，效果不同，自行选择

1. 一键集成

<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

2.自定义选择

可按自己爱好更改，选择别的虚拟人物

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

设置动态背景

背景可以通过更改 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;
  }
</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>

<script>
  // 根据日间和夜间模式切换HTML元素的class，控制背景视频的显示
  function toggleDarkMode() {
    document.documentElement.classList.toggle('darkmode');
  }

  // 假设有一个切换日间和夜间模式的按钮，点击时触发toggleDarkMode函数
  const darkModeToggleButton = document.getElementById('dark-mode-toggle-button');
  darkModeToggleButton.addEventListener('click', toggleDarkMode);
</script>