前言

本站所使用的是 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&amp;cps_key=c5852dc242dcc47316d79da7e2e1b6b2&amp;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&amp;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

- EOF -