Wordpress(Argon)主题博客美化 |
您所在的位置：网站首页 › wordpress怎么添加视频 › Wordpress(Argon)主题博客美化 |
Wordpress(Argon)主题博客美化
|
前言
常言道：工欲善其事必先利其器，在发表文章前，美化博客，使其利于自己的观看与管理极其重要，所以我四处搜寻，得到了以下美化代码。 但是，有时候我们走得太远，会忘了为什么出发。希望阅览本文章的人不要忘记初心，想想一开始为什么搭建博客。我相信大部分朋友都是为了记录自己学习笔记，生活故事。 所以，有时候博客美化过度会适得其反，望各位仔细斟酌，莫要使自己的博客变成了花架子，好的文章才是博客之本，立足之根。 主题资源链接：https://pan.baidu.com/s/1hamo74DR40Kx4JmhbSyk_w 提取码：1111 我的博客美化 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":"韶华不为少年留 恨悠悠 几时休","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":"欢迎在小E 的茶馆休憩。相逢何必曾相识，但喜欢闲聊的可以加群：688329809","argon_sidebar_auther_name":"Echo","argon_sidebar_auther_image":"https://yy.liveout.cn/photo/photo1.png","argon_sidebar_author_description":"一个IoT专业混吃等死的小废物","argon_sidebar_announcement":"","argon_fab_show_settings_button":"false","argon_fab_show_darkmode_button":"true","argon_fab_show_gotocomment_button":"false","argon_seo_description":"一个纪录生活以及学习笔记的个人博客","argon_seo_keywords":"博客,Java,Linux,C语言,IoT,物联网","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% 天前，其中的信息可能已经过时，如有错误请发送邮件到[email protected]","argon_archives_timeline_show_month":"true","argon_archives_timeline_url":"https://www.liveout.cn/pigeonhole/","argon_footer_html":"\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\n \n\n 备案号 \n苏ICP备2022020194号\n|\n苏公网安备 32072202010255号\n\n\n \n\n![](\"https://www.liveout.cn/wp-content/uploads/2022/10/又拍云_logo4.png\"){kind=logo} CDNUpyun\n PoweredWordPress\n\n\nCopyright \n2022-2022\n Echo\n\n\n\n Running Time\ndays\n H\n M\n\nS\n \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(2022, 3, 27, 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\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/[email protected]/MathJax.js?config=TeX-AMS_HTML","argon_katex_cdn_url":"//cdn.jsdelivr.net/npm/[email protected]/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":"\n\n\n \n\n\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"}
年度倒计时显示(左侧栏)
在左侧栏里添加工具——简码，复制一下代码粘贴进去 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); } #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); } 音乐播放功能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) 动态背景背景可以通过更改 url 链接设置为自己的动态视频，尽量不要太大，否则别人访问时会刷新许久 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; } 虚拟人物(看板娘)以下代码选择一项复制即可，效果不同，自行选择 具体文章：stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform (github.com) 其中 jsonpath: 后面的链接可按自己爱好更改，选择别的虚拟人物 L2Dwidget.init({ "model": { //jsonpath控制显示那个小萝莉模型， //(切换模型需要改动) // "https://unpkg.com/(live2d-widget-model-koharu)@1.0.5/assets/(koharu).model.json" jsonPath: "https://unpkg.com/[email protected]/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 } }); /* 小帅哥： https://unpkg.com/[email protected]/assets/chitose.model.json 萌娘：https://unpkg.com/[email protected]/assets/shizuku.model.json 白猫：https://unpkg.com/[email protected]/assets/tororo.model.json 黑猫： https://unpkg.com/[email protected]/assets/hijiki.model.json 小可爱（女）：https://unpkg.com/[email protected]/assets/koharu.model.json 小可爱（男）：https://unpkg.com/[email protected]/assets/haruto.model.json 初音：https://unpkg.com/[email protected]/assets/miku.model.json 圣职者妹妹：https://unpkg.com/[email protected]/assets/z16.model.json 茶杯犬：https://cdn.jsdelivr.net/npm/[email protected]/assets/wanko.model.json 绿毛妹妹：https://unpkg.com/[email protected]/assets/tsumiki.model.json 金龟子妹妹：https://unpkg.com/[email protected]/assets/unitychan.model.json https://unpkg.com/[email protected]/assets/nito.model.json https://unpkg.com/[email protected]/assets/ni-j.model.json 小阿狸： https://unpkg.com/[email protected]/assets/nico.model.json https://unpkg.com/[email protected]/assets/nietzche.model.json https://unpkg.com/[email protected]/assets/nipsilon.model.json 女学生： https://unpkg.com/[email protected]/assets/hibiki.model.json */ 网站访问数据(左侧栏) 进入Wordpress，点击插件，搜索并且下载 Wp Statistics外观——小工具——站点额外内容——旧版小工具——统计
网站底部信息
CSS(样式表)
/* 核心样式 */
.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;
}
HTML(底部信息)
备案号
苏ICP备2022020194号
|
苏公网安备 32072202010255号
Copyright
2022-2022
Echo
PoweredWordPress
Running Time
days
H
M
S
JavaScript（网站运行时间脚本）
注意：new Date( year, month, date, hrs, min, sec) 按给定的参数创建 日期对象 其中month的值域为0～11，0代表1月，11表代表12月；所以你输入的月份需要为自己真正月份的前一个月 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); } 相关链接本文所涉及的代码出自以下博客文章，十分感谢下面各位大佬的分享 个人博客：Echo’s blog 关于 Argon 主题 更多美化内容文章： Argon 主题的美化设置 - Gong_cx (gcxstudio.cn) 关于博客中添加音乐插件: https://echeverra.cn/aplayer Argon主题 GitHub地址：solstice23/argon-theme: 📖 Argon - 一个轻盈、简洁的 WordPress 主题 (github.com) Argon主题制作人博客：solstice23 – Blog Argon主题使用文档：首页 - Argon Theme Docs (solstice23.top) |
【本文地址】
今日新闻 |
推荐新闻 |