找到
1
篇与
Argon 主题
相关的结果
-
Argon 博客主题美化 AI摘要：本文介绍了如何美化Argon博客主题，包括设置JSON配置、添加左侧栏年度倒计时和底部音乐播放功能，并提供了相关代码示例。前言 {cat_tips_info color=""}首先还是祝明一下，这篇文章主要是借鉴Echi小窝的文章 {/cat_tips_info} 刚开始使用这个[Argon 主题]的时候就是从这个Echo小窝博主的文章看到的美化教程让我完成了我的博客美化😊，所以在这里还是得谢谢这位博主，嘻嘻😁 希望下面的文章可以帮助到你！ 001图片 1.博客美化 JSON {cat_tips_info color=""}注意：可复制一键导入{/cat_tips_info} 别忘记在主题设置页面修改头像、背景以及底部信息等设置哦（博客背景 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> <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" {cat_tips_warning color=""}注意：id 需要为自己创建的歌单，不能为我喜欢的音乐；server 可以改自己用的音乐平台，如 netease (网易云)、tencent (QQ 音乐){/cat_tips_warning} 具体参数如下图⬇️ aplayer参数图片 <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>主题源码 {cat_download name="Argon 主题--源码下载" url="https://www.123684.com/s/YWw7Vv-Qa38" password=""} 但是你想使用这个主题得先部署WordPress 博客系统😎
