mirror of
https://gitee.com/SuperManito/LinuxMirrors
synced 2025-12-09 09:40:31 +08:00
更新文档
This commit is contained in:
Super Manito
44
docs/theme/partials/palette.html
vendored
44
docs/theme/partials/palette.html
vendored
@@ -23,8 +23,9 @@
|
||||
if (typeof document.startViewTransition !== 'function') {
|
||||
return // 不支持 View Transitions API 的浏览器直接返回
|
||||
}
|
||||
// 获取所有主题切换按钮
|
||||
const themeToggles = document.querySelectorAll('.md-header__button.md-icon')
|
||||
// 获取所有主题切换按钮 - 更精确的选择器
|
||||
// 只选择form[data-md-component="palette"]内部的按钮，而不是所有md-header__button
|
||||
const themeToggles = document.querySelectorAll('form[data-md-component="palette"] .md-header__button.md-icon')
|
||||
themeToggles.forEach((toggle) => {
|
||||
toggle.addEventListener(
|
||||
'click',
|
||||
@@ -36,28 +37,12 @@
|
||||
const targetId = this.getAttribute('for')
|
||||
const targetInput = document.getElementById(targetId)
|
||||
if (!targetInput) return
|
||||
// 获取当前存储的主题信息和即将切换到的主题信息
|
||||
const currentPalette = __md_get('__palette')
|
||||
const currentScheme = currentPalette?.color?.scheme || ''
|
||||
const currentMedia = currentPalette?.color?.media || ''
|
||||
// 获取新主题信息
|
||||
const newScheme = targetInput.getAttribute('data-md-color-scheme')
|
||||
const newMedia = targetInput.getAttribute('data-md-color-media')
|
||||
// 判断当前浏览器/系统主题
|
||||
const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
// 判断是否切换到暗色主题
|
||||
const isDark = newScheme != 'default'
|
||||
// 确定当前主题的实际暗色状态
|
||||
let isCurrentDark = currentScheme.includes('slate')
|
||||
if (currentMedia === '(prefers-color-scheme)') {
|
||||
isCurrentDark = isSystemDark
|
||||
}
|
||||
// 确定新主题的实际暗色状态
|
||||
let isNewDark = newScheme.includes('slate')
|
||||
if (newMedia === '(prefers-color-scheme)') {
|
||||
isNewDark = isSystemDark
|
||||
}
|
||||
// 如果当前主题和目标主题相同，则不需要动画
|
||||
// 获取当前主题状态
|
||||
const currentScheme = document.body.getAttribute('data-md-color-scheme')
|
||||
const isCurrentDark = currentScheme.includes('slate')
|
||||
// 点击后会切换到相反的主题
|
||||
const isNewDark = !isCurrentDark
|
||||
// 当前主题和目标主题相同则不触发动画
|
||||
if (isCurrentDark === isNewDark) {
|
||||
targetInput.click()
|
||||
return
|
||||
@@ -74,8 +59,8 @@
|
||||
// 切换主题
|
||||
targetInput.click()
|
||||
// 添加暗/亮模式类，用于动画控制
|
||||
document.documentElement.classList.remove(isDark ? 'light' : 'dark')
|
||||
document.documentElement.classList.add(isDark ? 'dark' : 'light')
|
||||
document.documentElement.classList.remove(isNewDark ? 'light' : 'dark')
|
||||
document.documentElement.classList.add(isNewDark ? 'dark' : 'light')
|
||||
// 等待主题变化完成
|
||||
await new Promise((resolve) => setTimeout(resolve, 100))
|
||||
})
|
||||
@@ -83,12 +68,12 @@
|
||||
// 视图过渡准备就绪，开始动画
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: isDark ? [...clipPath].reverse() : clipPath,
|
||||
clipPath: isNewDark ? [...clipPath].reverse() : clipPath,
|
||||
},
|
||||
{
|
||||
duration: 500,
|
||||
easing: 'ease-in',
|
||||
pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)',
|
||||
pseudoElement: isNewDark ? '::view-transition-old(root)' : '::view-transition-new(root)',
|
||||
}
|
||||
)
|
||||
})
|
||||
@@ -97,8 +82,7 @@
|
||||
)
|
||||
})
|
||||
// 初始化主题状态类
|
||||
const currentPalette = __md_get('__palette')
|
||||
const currentScheme = currentPalette?.color?.scheme || ''
|
||||
const currentScheme = document.body.getAttribute('data-md-color-scheme')
|
||||
const isDark = currentScheme.includes('slate')
|
||||
document.documentElement.classList.add(isDark ? 'dark' : 'light')
|
||||
})
|
||||
|
||||
10
docs/theme/partials/toc.html
vendored
10
docs/theme/partials/toc.html
vendored
@@ -9,19 +9,23 @@
|
||||
</ul>
|
||||
|
||||
<div class="md-content" data-md-component="content">
|
||||
<div class="md-nav__sponsor-bottom">
|
||||
<div class="sponsor sponsor-toc">
|
||||
<div class="sponsor-label">
|
||||
<strong>赞助商</strong>
|
||||
</div>
|
||||
<div class="sponsor-wrapper">
|
||||
<a class="sponsor-item" target="_blank" href="https://1panel.cn" title="1Panel · 新一代的 Linux 服务器运维管理面板">
|
||||
<a class="sponsor-item" target="_blank" href="https://1panel.cn" title="新一代的 Linux 服务器运维管理面板">
|
||||
<img src="/assets/images/sponsor/1panel.png" alt="1Panel" style="width: 60%" />
|
||||
</a>
|
||||
<a class="sponsor-item" target="_blank" href="https://www.dkdun.cn/aff/VAWGETUL" title="林枫云 · 专注独立IP高频VPS｜R9/i9系列定制">
|
||||
<img src="/assets/images/sponsor/linfengyun-light.png#only-light" alt="林枫云" style="width: 60%" />
|
||||
<img src="/assets/images/sponsor/linfengyun-dark.png#only-dark" alt="林枫云" style="width: 60%" />
|
||||
</a>
|
||||
<a class="sponsor-item" target="_blank" href="https://arcadia.cool" title="Arcadia 一站式代码运维平台">
|
||||
<a class="sponsor-item" target="_blank" href="https://www.qiaoxh.com/?from=linuxmirrors.cn" title="乔星欢 · 香港4核4G服务器28元起_香港500Mbps大带宽">
|
||||
<img src="/assets/images/sponsor/qiaoxh-light.svg#only-light" alt="乔星欢" style="width: 66%; margin-bottom: 6px" />
|
||||
<img src="/assets/images/sponsor/qiaoxh-dark.svg#only-dark" alt="乔星欢" style="width: 66%; margin-bottom: 6px" />
|
||||
</a>
|
||||
<a class="sponsor-item" target="_blank" href="https://arcadia.cool" title="一站式代码运维平台">
|
||||
<img src="/assets/images/sponsor/arcadia-light.png#only-light" alt="Arcadia" style="width: 60%" />
|
||||
<img src="/assets/images/sponsor/arcadia-dark.png#only-dark" alt="Arcadia" style="width: 60%" />
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user