前言
本站所使用的是 Argon 主题,如果想使用或了解具体信息请参阅此文:solstice23 – Blog
或查看此项目:
前言到此为止,接下来就是干货。
配置信息
使用
如果您想使用本文的配置信息,可直接复制配置代码导入,或者按照注释实现复刻效果。
如需查看自己的 Argon 主题设置,请进入侧边栏的:
如何导入配置
在设置页面最后一项,可选择导入设置,直接复制代码后,按下下图按钮,导入即可:
全局
直接使用了默认颜色以及开启了 Material You,以实现沉浸式访问,可自行按照背景修改
配置代码:
{ "argon_theme_color": "#5e72e4", "argon_theme_color_hex_preview": "#5e72e4", "argon_show_customize_theme_color_picker": true, "argon_enable_immersion_color": "true" }
布局
因本站在双栏启用了小工具,因此启用了三栏,在文章数量多了起来之后,可以尝试启用瀑布流设置。
配置代码:
{ "argon_page_layout": "triple", "argon_article_list_waterflow": "1", "argon_article_list_layout": "2" }
顶部 Banner 设置
此处启用 Banner 透明化设置是为了后面实现自定义动态背景的功能而预备,因此渐变背景等均无效。
配置代码:
{ "argon_banner_size": "fullscreen", "argon_page_background_banner_style": "transparent", "argon_show_toolbar_mask": true, "argon_banner_background_url": "", "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 提供的 Highhlight.js 的解决方案
配置代码:
{ "argon_enable_code_highlight": "true", "argon_code_theme": "github-dark-dimmed", "argon_code_highlight_hide_linenumber": "false", "argon_code_highlight_break_line": "true", "argon_code_highlight_transparent_linenumber": "false", }
脚本
因脚本代码较为复杂,故不使用图片展示,这里贴出一份模板代码,可以自行修改
页头脚本
<link rel="stylesheet" href="https://fonts.geekzu.org/css2?family=Comfortaa:[email protected];400;500;600;700&display=swap" /> <script> // 控制台版权归属 !(function () { console.log( "%cCopyright ©%c 2021 GBCLStudio All Rightsreserved.", "color: rgba(255,255,255,1); background: #2196f3; font-size: 15px;border-radius:5px 0 0 5px;padding:10px 0 10px 20px;", "color: rgba(255,255,255,1); background: #2196f3; font-size: 15px;border-radius:0 5px 5px 0;padding:10px 15px 10px 0px;" ); })(); console.log( "%cPowered by%cDinosaur Cloud", "color:#fff; background: #2196f3;font-size: 12px;border-radius:5px 0 0 5px;padding:3px 10px 3px 10px;", "color:#fff; background: #FF9900;font-size: 12px;border-radius:0 5px 5px 0;padding:3px 10px 3px 10px;" ); console.log( "%cContact us:aries#gcxs.fun (# 改为 @)", "font-size: 12px;border-radius:5px;padding:3px 10px 3px 10px;border:1px solid #FF9900;" ); </script> <script> document.addEventListener("visibilitychange", function () { if (document.visibilityState == "hidden") { normal_title = document.title; document.title = "₍ ᐢ.⌄.ᐢ ₎ ꜆˖.♡快回来了啦~别去看其他东西了啦!!"; } else { document.title = normal_title; } }); </script>
此处引入了我的镜像服务所提供的 CDN 加速,如有需要可自行更改
页尾脚本
<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://api.gcxstudio.cn/odometer/odometer-theme-minimal.css" integrity="sha256-d6Op1aPQoptoGl+2LbaE1mBLJYK7W98crsiP+5KFq5Q=" crossorigin="anonymous" />
此处实现了使用动态背景的功能,并替换默认字体
动画
此处直接使用了最高规格,不隐藏动画,会产生微弱的性能影响,根据需要自行修改
配置代码:
{ "argon_enable_smoothscroll_type": "1_pulse", "argon_enable_into_article_animation": "true", }
优化类设置 / 杂项
无特别设置,禁用 Google 字体后,Serif 字体将会自动替代为浏览器默认字体,因而无需特别额外加载。
配置代码:
{ "argon_pjax_disabled": "false", "argon_hide_categories": "", "argon_enable_login_css": "true", "argon_home_show_shuoshuo": "true", "argon_fold_long_shuoshuo": "true", "argon_enable_timezone_fix": "true", "argon_hide_shortcode_in_preview": "true", "argon_trim_words_count": "175", "argon_enable_mobile_scale": "false", "argon_disable_googlefont": "true", "argon_disable_codeblock_style": "false", }
额外内容 / 页脚
页脚样式并非必须,此处仅做参考,如需使用请自行修改:
HTML5 类
<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备2021005460号-1</a > | <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=36010302000349" target="_blank" one-link-mark="yes" >赣公网安备 36010302000349号</a ></span > </div> <div class="github-badge-big"> <span class="badge-subject">Copyright </span ><span class="badge-value bg-red"> 2020-2022 <i class="fa fa-copyright"></i> GBCLStudio</span > </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 > </div> <div class="github-badge-big"> <span class="badge-subject"><i class="fa fa-send"></i> Contact Me</span ><span class="badge-value bg-casein" ><a href="mailto:[email protected]" target="_blank" one-link-mark="yes" >aries#gcxs.fun(# change to @)</a ></span > </div> <div class="github-badge"> <span class="badge-subject"><i class="fa fa-wordpress"></i> Powered</span ><span class="badge-value bg-green" ><a href="https://cn.wordpress.org/" target="_blank" one-link-mark="yes" >WordPress</a ></span > <span class="badge-subject"><i class="fa fa-server"></i> Server</span ><span class="badge-value bg-shallots" ><a href="" target="_blank" one-link-mark="yes"></a ><a href="https://cloud.tencent.com/act/cps/redirect?redirect=1069&cps_key=c5852dc242dcc47316d79da7e2e1b6b2&from=console" target="_blank" one-link-mark="yes" >Tencent</a ></span > <span class="badge-subject"><i class="fa fa-cloud"></i> Domain</span ><span class="badge-value bg-ogling" ><a href="https://cloud.tencent.com/act/cps/redirect?redirect=10010&cps_key=c5852dc242dcc47316d79da7e2e1b6b2" target="_blank" one-link-mark="yes" >DnsPod</a ></span > <span class="badge-subject"><i class="fa fa-flash"></i> CDN</span ><span class="badge-value bg-haze" ><a href="https://cloud.tencent.com" target="_blank" one-link-mark="yes" >QCloud</a ></span > <span class="badge-subject"><i class="fa fa-book"></i> License</span ><span class="badge-value bg-mountain-terrier" ><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" one-link-mark="yes" >BY-NC-SA 4.0 </a></span > </div>
此处启用了备案号和个人推广,如果有需要可以关闭
CSS3 类
<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>
此处为颜色定义,样式名较乱,如有需要或适配 Darkmode 可尝试进行自定义
JavaScript 类(非必须)
<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(2020, 12, 9, 8, 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>
此处用于实现站点运行时间记录,非必要
如有需要可以自行复制修改,代码可无偿使用。
小工具
因代码过长,如需查看 Binft 源码请前往:
或者:Gongcxgithub/binft.html at main · Gongcxgithub/Gongcxgithub
实现一年已过时间的进度条的实例代码:
HTML 5 类
<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>
JavaScirpt 类
<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>
CSS3 类
<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>
将会自动获取当前系统时间,调用 Argon 的自带进度条样式,其他主题无法复现
如需使用请使用:自定义 HTML 添加上述示范代码。
其他
如果想要一次性导入可以复制组合 JSON 内容,可使用此工具辅助编辑:JSON在线解析及格式化验证 - JSON.cn
We are using the following open source licenses: Unlicense.org » Unlicense Yourself: Set Your Code Free
- EOF -