本站对Argon主题的功能修改/扩展

本人不想改主题代码,就用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;
}
Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

评论

  1. hzc0911
    Android Chrome
    5月前
    2023-1-13 21:06:50

    哦 妈妈,这页脚这么卷的⌇●﹏●⌇

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇