303 lines
12 KiB
Plaintext
303 lines
12 KiB
Plaintext
---
|
|
import '../styles/site.css';
|
|
import CustomContextMenu from '@/components/CustomContextMenu.astro';
|
|
import HitokotoCard from '@/components/HitokotoCard.astro';
|
|
import { publicSiteConfig, siteConfig } from '../../site.config.mjs';
|
|
|
|
interface Props {
|
|
title?: string;
|
|
description?: string;
|
|
}
|
|
|
|
const siteTitle = siteConfig.site.name;
|
|
const { title = siteTitle, description = siteConfig.site.description } = Astro.props;
|
|
const pageTitle = title === siteTitle ? siteTitle : `${title} | ${siteTitle}`;
|
|
const currentYear = new Date().getFullYear();
|
|
const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c');
|
|
const consoleSites = [
|
|
{
|
|
name: '主站入口',
|
|
href: 'https://biss.click',
|
|
description: '个人主页与常用入口集合',
|
|
icon: 'fa-solid fa-house-chimney',
|
|
},
|
|
{
|
|
name: '说说动态',
|
|
href: 'https://mm.biss.click',
|
|
description: '短句、碎片记录和近况更新',
|
|
icon: 'fa-regular fa-comments',
|
|
},
|
|
{
|
|
name: '评论系统',
|
|
href: siteConfig.comments.envId,
|
|
description: 'Twikoo 评论服务与访客互动',
|
|
icon: 'fa-solid fa-message',
|
|
},
|
|
{
|
|
name: '站点统计',
|
|
href: siteConfig.analytics.umami.script.replace('/script.js', ''),
|
|
description: 'Umami 访问统计与站点数据',
|
|
icon: 'fa-solid fa-chart-line',
|
|
},
|
|
];
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang={siteConfig.site.language}>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content={description} />
|
|
<link rel="icon" href={siteConfig.assets.icon} />
|
|
<script defer src={siteConfig.analytics.umami.script} data-website-id={siteConfig.analytics.umami.websiteId}></script>
|
|
<script is:inline set:html={`window.SITE_CONFIG = ${publicConfigJson};`}></script>
|
|
<script is:inline>
|
|
(() => {
|
|
const storageKey = 'site-theme';
|
|
const savedTheme = localStorage.getItem(storageKey);
|
|
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
document.documentElement.dataset.theme = savedTheme || systemTheme;
|
|
})();
|
|
</script>
|
|
<link rel="stylesheet" href={siteConfig.cdn.instantsearchCss} />
|
|
<link rel="stylesheet" href={siteConfig.cdn.fancyboxCss} />
|
|
<link rel="stylesheet" href={siteConfig.cdn.fontawesomeCss} />
|
|
<title>{pageTitle}</title>
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<nav class="nav">
|
|
<a class="brand" href="/">{siteConfig.site.name}</a>
|
|
<button class="nav-menu-toggle" type="button" aria-label="打开菜单" aria-expanded="false" data-nav-toggle>
|
|
<i class="fa-solid fa-bars nav-menu-open" aria-hidden="true"></i>
|
|
<i class="fa-solid fa-xmark nav-menu-close" aria-hidden="true"></i>
|
|
</button>
|
|
<div class="nav-menu" data-nav-menu>
|
|
<div class="nav-links nav-center">
|
|
{siteConfig.nav.map((item) => (
|
|
<a href={item.href}><i class={`${item.icon} nav-icon`} aria-hidden="true"></i><span>{item.label}</span></a>
|
|
))}
|
|
</div>
|
|
<div class="nav-links nav-actions">
|
|
<button class="nav-random" type="button" onclick="randomPost()" aria-label="前往随机文章" title="前往随机文章">
|
|
<i class="fa-solid fa-shuffle nav-icon" aria-hidden="true"></i>
|
|
<span>随机文章</span>
|
|
</button>
|
|
<button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索">
|
|
<i class="fa-solid fa-magnifying-glass nav-icon" aria-hidden="true"></i>
|
|
<span>搜索</span>
|
|
</button>
|
|
<button class="nav-console" type="button" aria-label="打开中控台" title="中控台" data-console-open>
|
|
<i class="fa-solid fa-gauge-high nav-icon" aria-hidden="true"></i>
|
|
<span>中控台</span>
|
|
</button>
|
|
<button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle>
|
|
<i class="fa-solid fa-sun theme-toggle-sun nav-icon" aria-hidden="true"></i>
|
|
<i class="fa-solid fa-moon theme-toggle-moon nav-icon" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<div class="control-console" data-console-modal aria-hidden="true">
|
|
<div class="control-console-backdrop" data-console-close></div>
|
|
<section class="control-console-panel" role="dialog" aria-modal="true" aria-labelledby="control-console-title" tabindex="-1">
|
|
<header class="control-console-head">
|
|
<div>
|
|
<p>CONTROL CENTER</p>
|
|
<h2 id="control-console-title">中控台</h2>
|
|
</div>
|
|
<button class="control-console-close" type="button" aria-label="关闭中控台" title="关闭" data-console-close>
|
|
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
|
|
</button>
|
|
</header>
|
|
<div class="control-console-grid">
|
|
{consoleSites.map((item) => (
|
|
<a class="control-site-card" href={item.href} target="_blank" rel="noreferrer">
|
|
<i class={item.icon} aria-hidden="true"></i>
|
|
<span>
|
|
<strong>{item.name}</strong>
|
|
<em>{item.description}</em>
|
|
</span>
|
|
<small>{new URL(item.href).hostname}</small>
|
|
</a>
|
|
))}
|
|
</div>
|
|
<div class="control-console-info" aria-label="站点信息">
|
|
<section>
|
|
<span>当前站点</span>
|
|
<strong>{siteConfig.site.domain}</strong>
|
|
</section>
|
|
<section>
|
|
<span>站点作者</span>
|
|
<strong>{siteConfig.author.name}</strong>
|
|
</section>
|
|
<section>
|
|
<span>运行起点</span>
|
|
<strong>{siteConfig.site.startTime.slice(0, 10)}</strong>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<main>
|
|
<slot />
|
|
</main>
|
|
<footer class="site-footer" aria-label="站点页脚">
|
|
<div class="footer-inner">
|
|
<section class="footer-top" aria-label="站点信息">
|
|
<a class="footer-brand" href="/" aria-label={`${siteConfig.site.name} 首页`}>
|
|
<img src={siteConfig.assets.icon} alt="" loading="lazy" />
|
|
<span>{siteConfig.site.name}</span>
|
|
</a>
|
|
<p class="footer-slogan">{siteConfig.site.slogan}</p>
|
|
</section>
|
|
|
|
<section class="footer-contact" aria-label="联系方式">
|
|
<p>{siteConfig.footer.contactLabel}</p>
|
|
<div class="footer-socials">
|
|
{siteConfig.social.map((item) => (
|
|
<a href={item.href} target={item.external ? '_blank' : undefined} rel={item.external ? 'noreferrer' : undefined} aria-label={item.label} title={item.label}>
|
|
<i class={item.icon} aria-hidden="true"></i>
|
|
</a>
|
|
))}
|
|
</div>
|
|
<nav class="footer-contact-links" aria-label="页脚链接">
|
|
{siteConfig.footer.links.map((item, index) => (
|
|
<>
|
|
{index > 0 && <span aria-hidden="true">|</span>}
|
|
<a href={item.href}>{item.label}</a>
|
|
</>
|
|
))}
|
|
</nav>
|
|
</section>
|
|
|
|
<section class="footer-bottom" aria-label="版权信息">
|
|
<div>
|
|
<p>© {siteConfig.site.copyrightStartYear} - {currentYear} {siteConfig.site.name}</p>
|
|
<p>{siteConfig.site.domain} | {siteConfig.site.license}</p>
|
|
</div>
|
|
<div class="footer-meta">
|
|
<p>本站已运行：<span id="site-runtime">计算中...</span></p>
|
|
<p>
|
|
{siteConfig.footer.poweredBy.map((item, index) => (
|
|
<>
|
|
{index > 0 && <span aria-hidden="true">|</span>}
|
|
<a href={item.href} target="_blank" rel="noreferrer">{item.label}</a>
|
|
</>
|
|
))}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</footer>
|
|
<HitokotoCard />
|
|
<CustomContextMenu />
|
|
<script is:inline src={siteConfig.cdn.instantsearchJs}></script>
|
|
<script is:inline src={siteConfig.cdn.typesenseAdapterJs}></script>
|
|
<script is:inline src={siteConfig.cdn.fancyboxJs}></script>
|
|
<script is:inline src="/js/random.js"></script>
|
|
<script is:inline src="/js/search/typesense-search.js"></script>
|
|
<script is:inline src="/js/external-links.js"></script>
|
|
<script is:inline>
|
|
(() => {
|
|
const nav = document.querySelector('.nav');
|
|
const toggle = document.querySelector('[data-nav-toggle]');
|
|
const menu = document.querySelector('[data-nav-menu]');
|
|
if (!nav || !toggle || !menu) return;
|
|
|
|
function setMenu(open) {
|
|
nav.classList.toggle('is-open', open);
|
|
toggle.setAttribute('aria-expanded', String(open));
|
|
toggle.setAttribute('aria-label', open ? '关闭菜单' : '打开菜单');
|
|
}
|
|
|
|
toggle.addEventListener('click', () => {
|
|
setMenu(!nav.classList.contains('is-open'));
|
|
});
|
|
|
|
menu.addEventListener('click', (event) => {
|
|
if (event.target instanceof Element && event.target.closest('a')) setMenu(false);
|
|
});
|
|
|
|
window.addEventListener('resize', () => {
|
|
if (window.innerWidth > 720) setMenu(false);
|
|
});
|
|
})();
|
|
|
|
(() => {
|
|
const modal = document.querySelector('[data-console-modal]');
|
|
const panel = modal?.querySelector('.control-console-panel');
|
|
const openButtons = document.querySelectorAll('[data-console-open]');
|
|
const closeButtons = modal?.querySelectorAll('[data-console-close]') || [];
|
|
if (!modal || !panel || openButtons.length === 0) return;
|
|
|
|
function setConsole(open) {
|
|
modal.classList.toggle('is-open', open);
|
|
modal.setAttribute('aria-hidden', String(!open));
|
|
document.body.classList.toggle('has-control-console', open);
|
|
if (open) panel.focus();
|
|
}
|
|
|
|
openButtons.forEach((button) => {
|
|
button.addEventListener('click', () => setConsole(true));
|
|
});
|
|
|
|
closeButtons.forEach((button) => {
|
|
button.addEventListener('click', () => setConsole(false));
|
|
});
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape' && modal.classList.contains('is-open')) setConsole(false);
|
|
});
|
|
})();
|
|
|
|
(() => {
|
|
const storageKey = 'site-theme';
|
|
const root = document.documentElement;
|
|
const button = document.querySelector('[data-theme-toggle]');
|
|
const media = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const getSystemTheme = () => (media.matches ? 'dark' : 'light');
|
|
const getTheme = () => localStorage.getItem(storageKey) || getSystemTheme();
|
|
|
|
function applyTheme(theme) {
|
|
root.dataset.theme = theme;
|
|
button?.setAttribute('aria-label', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
|
|
button?.setAttribute('title', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
|
|
}
|
|
|
|
applyTheme(getTheme());
|
|
|
|
button?.addEventListener('click', () => {
|
|
const nextTheme = root.dataset.theme === 'dark' ? 'light' : 'dark';
|
|
localStorage.setItem(storageKey, nextTheme);
|
|
applyTheme(nextTheme);
|
|
});
|
|
|
|
media.addEventListener('change', () => {
|
|
if (!localStorage.getItem(storageKey)) applyTheme(getSystemTheme());
|
|
});
|
|
})();
|
|
|
|
(() => {
|
|
const runtime = document.getElementById('site-runtime');
|
|
if (!runtime) return;
|
|
|
|
const start = new Date(window.SITE_CONFIG.site.startTime).getTime();
|
|
const pad = (value) => String(value).padStart(2, '0');
|
|
|
|
function updateRuntime() {
|
|
const diff = Math.max(0, Date.now() - start);
|
|
const days = Math.floor(diff / 86400000);
|
|
const hours = Math.floor((diff / 3600000) % 24);
|
|
const minutes = Math.floor((diff / 60000) % 60);
|
|
const seconds = Math.floor((diff / 1000) % 60);
|
|
runtime.textContent = `${days} 天 ${pad(hours)} 时 ${pad(minutes)} 分 ${pad(seconds)} 秒`;
|
|
}
|
|
|
|
updateRuntime();
|
|
window.setInterval(updateRuntime, 1000);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|