1
0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00

Normalized attribute name in HTML

Add prefix `data-` for following attributes:
- `topbar-visible`
- `mode`
- `label-text`
- `title-succeed`
This commit is contained in:
Cotes Chung
2022-01-13 00:23:08 +08:00
parent 96e7cd79af
commit f8f4dd889e
14 changed files with 43 additions and 40 deletions

View File

@@ -14,8 +14,8 @@
const darkTheme = "github-dark";
let initTheme = lightTheme;
if ($("html[mode=dark]").length > 0
|| ($("html[mode]").length == 0
if ($("html[data-mode=dark]").length > 0
|| ($("html[data-mode]").length == 0
&& window.matchMedia("(prefers-color-scheme: dark)").matches)) {
initTheme = darkTheme;
}

View File

@@ -33,8 +33,8 @@
let initTheme = "default";
if ($("html[mode=dark]").length > 0
|| ($("html[mode]").length == 0
if ($("html[data-mode=dark]").length > 0
|| ($("html[data-mode]").length == 0
&& window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
initTheme = "dark";
}

View File

@@ -5,6 +5,7 @@
<script type="text/javascript">
class ModeToggle {
static get MODE_KEY() { return "mode"; }
static get MODE_ATTR() { return "data-mode"; }
static get DARK_MODE() { return "dark"; }
static get LIGHT_MODE() { return "light"; }
static get ID() { return "mode-toggle"; }
@@ -70,17 +71,17 @@
}
setDark() {
$('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
$('html').attr(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
}
setLight() {
$('html').attr(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
$('html').attr(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
}
clearMode() {
$('html').removeAttr(ModeToggle.MODE_KEY);
$('html').removeAttr(ModeToggle.MODE_ATTR);
sessionStorage.removeItem(ModeToggle.MODE_KEY);
}

View File

@@ -165,13 +165,13 @@
{% endif %}
{% capture _label %}
<span label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
<span data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
{% endcapture %}
{% assign _new_content = _new_content | append: _snippet
| append: '<div class="code-header">'
| append: _label
| append: '<button aria-label="copy" title-succeed="'
| append: '<button aria-label="copy" data-title-succeed="'
| append: site.data.locales[lang].post.button.copy_code.succeed
| append: '"><i class="far fa-clipboard"></i></button></div>'
| append: '<div class="highlight"><code>'