本人不想改主题代码,就用JS实现了多数我想要的功能。
Highlight.js 日间/夜间切换主题
Argon设置中选择日间需要的主题,CSS引用输出在<head>标签中。在「页尾脚本」中引入夜间需要的主题<link rel="stylesheet" href="/path/to/css" disabled="disabled" id="dark-highlight-link"/>
,必须设置id和disabled属性。
页尾脚本写入以下内容。
function hljsDarkmode() {
let hljsdarktheme = document.getElementById('dark-highlight-link')
if (sessionStorage.getItem("Argon_Enable_Dark_Mode") == "true" || $('html').hasClass('darkmode')) {
hljsdarktheme.removeAttribute('disabled')
} else if (sessionStorage.getItem("Argon_Enable_Dark_Mode") == "false") {
hljsdarktheme.setAttribute("disabled", "disabled")
}
}
hljsDarkmode();
document.getElementById('fabtn_toggle_darkmode').addEventListener('click', hljsDarkmode);
Argon使用Session Storage
存储深色模式信息,感觉不如Local Storage
… 我们只需要获取一下当前是否为深色模式,如果是,就将disabled属性移除,使其生效,如果不是,就添加disabled的属性禁用。由于css是层叠的,link放在页面尾部,加载后会覆盖掉上面的浅色主题。
随后调用一次自定函数hljsDarkmode()
,在页面第一次加载时检测并设置。
fabtn_toggle_darkmode
是工具栏的日夜切换按钮,监听点击事件即可。
站点存活时长
这个很简单,在页脚section
<p>
本站已存活<span id="runningTime">0</span>。</p>
<script>
function runTime() {
var d = new Date();
BirthDay = new Date("2022-09-26"); // 这里修改站点创建时间
today = new Date();
timeold = (today.getTime() - BirthDay.getTime());
sectimeold = timeold / 1000
secondsold = Math.floor(sectimeold);
msPerDay = 24 * 60 * 60 * 1000;
msPerYear = 365 * 24 * 60 * 60 * 1000;
e_daysold = timeold / msPerDay
e_yearsold = timeold / msPerYear
daysold = Math.floor(e_daysold);
yearsold = Math.floor(e_yearsold);
document.getElementById("runningTime").innerHTML = `${yearsold} 年 ${daysold} 天 ${d.getHours()} 时 ${d.getMinutes()} 分 ${d.getSeconds()} 秒 `
}
var s_timer = setInterval(runTime, 1000);
问题是Pjax刷新后,计时器会失效,所以需要重新计时
function resetTimer() {
if (typeof (s_timer) != "undefined"
|| s_timer != null
|| typeof (runTime) != "undefined") {
console.log("in");
clearInterval(s_timer);
setInterval(runTime, 1000);
}
}
window.pjaxLoaded
:
var pjaxLoadedChain = [];
pjaxLoadedChain.push(resetTimer);
// 添加别的...
// 在最后...
window.pjaxLoaded = () => {
pjaxLoadedChain.forEach(x => {
x();
});
}
MathJax自定义加载
创建可重用区块,其中创建html块写入:
<script>
window.MathJax = {
tex: {
inlineMath: [["$", "$"], ["\\\\(", "\\\\)"]],
displayMath: [['$$', '$$']],
processEscapes: true,
packages: { '[+]': ['noerrors'] }
},
options: {
skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process'
},
loader: {
load: ['[tex]/noerrors']
}
};
</script>
<script src="https://cdn.staticfile.org/mathjax/3.2.2/es5/tex-chtml-full.js" id="MathJax-script" async="" <="" script=""></script>
<div id="flag_reload_page"></div>
由于pjax后innerHTML不会执行js,但会更改DOM,所以用一个<div>作为flag,js在pjaxLoaded后获取到了这个flag就自动刷新页面。
function flagDetector() {
if (document.getElementById("flag_reload_page") != null) {
location.reload();
} // else if .....
}
pjaxLoadedChain.push(flagDetector); // 接上文pjaxLoaded
日间/夜间
<style>
body {
font-family: "LXGW WenKai Screen", "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;
}
html.darkmode {
--themecolor: #5e72e4!important;
--themecolor-R: 94;
--themecolor-G: 114;
--themecolor-B: 228;
--themecolor-H: 231;
--themecolor-S: 71;
--themecolor-L: 63;
}
</style>
字体
lxgw-wenkai
<link rel="stylesheet" href="https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/lxgw-wenkai-screen-webfont/1.6.0/style.css" />
<style>
body {
font-family: "LXGW WenKai Screen", "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>
其他
.navbar-nav .nav-link {
font-family: unset!important;
}
哦 妈妈,这页脚这么卷的⌇●﹏●⌇