Files
menav/templates/layouts/default.hbs

224 lines
15 KiB
Handlebars

<!DOCTYPE html>
<html lang="zh-CN" data-theme-mode="{{#if site.theme.mode}}{{site.theme.mode}}{{else}}dark{{/if}}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="menav-version" content="{{_meta.version}}">
<title data-editable="site-title">{{site.title}}</title>
<meta name="description" content="{{site.description}}" data-editable="site-description">
<meta name="author" content="{{site.author}}" data-editable="site-author">
<link rel="icon" href="./{{site.favicon}}" type="image/x-icon">
<link rel="shortcut icon" href="./{{site.favicon}}" type="image/x-icon">
{{{fontLinks}}}
<style>
{{{fontCss}}}
</style>
<!-- 预设主题和侧边栏状态,避免闪烁 -->
<script>
(function() {
// 读取并应用主题设置
var savedTheme = localStorage.getItem('theme');
var defaultThemeMode = document.documentElement.getAttribute('data-theme-mode') || 'dark';
defaultThemeMode = String(defaultThemeMode).trim().toLowerCase();
var shouldUseLight = false;
if (savedTheme === 'light') {
shouldUseLight = true;
} else if (savedTheme === 'dark') {
shouldUseLight = false;
} else if (defaultThemeMode === 'light') {
shouldUseLight = true;
} else if (defaultThemeMode === 'system') {
try {
shouldUseLight =
window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
} catch (e) {
shouldUseLight = false;
}
}
if (shouldUseLight) {
document.documentElement.classList.add('theme-preload');
}
// 读取并应用侧边栏状态
var sidebarCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
var isMobile = window.innerWidth <= 768;
if (sidebarCollapsed && !isMobile) {
document.documentElement.classList.add('sidebar-collapsed-preload');
}
// 添加这个类用于控制初始渲染
document.documentElement.classList.add('preload');
})();
</script>
<link rel="stylesheet" href="style.css">
{{!-- github-calendar 已迁移为构建期抓取并注入(避免 runtime 依赖 unpkg + 代理服务) --}}
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"></noscript>
</head>
<body class="loading">
<div class="layout">
<!-- 移动端按钮 -->
<div class="mobile-buttons">
<button class="menu-toggle" aria-label="切换菜单">
<i class="fas fa-bars"></i>
</button>
<button class="search-toggle" aria-label="切换搜索">
<i class="fas fa-search"></i>
</button>
</div>
<!-- 遮罩层 -->
<div class="overlay"></div>
<!-- 左侧导航 -->
<nav class="sidebar">
<div class="logo">
<div class="logo-brand">
{{#if site.favicon}}
<img class="logo-image" src="./{{site.favicon}}" alt="{{site.title}} logo" width="26" height="26">
{{/if}}
<h1 data-editable="logo-text">{{site.logo_text}}</h1>
</div>
<button class="sidebar-toggle" aria-label="收起/展开侧边栏">
<i class="fas fa-chevron-left toggle-icon"></i>
</button>
</div>
<div class="sidebar-content">
<div class="nav-section">
{{#if navigationData}}
{{> navigation navigationData}}
{{else}}
{{{navigation}}}
{{/if}}
</div>
<div class="sidebar-submenu-panel" aria-label="页面分类" data-container="sidebar-submenu"></div>
</div>
<div class="sidebar-social" data-container="social-links">
{{#if social}}
{{> social-links social}}
{{else}}
{{{socialLinks}}}
{{/if}}
</div>
<div class="sidebar-footer">
<div class="copyright">
<p>© {{currentYear}} <a href="https://github.com/rbetree/menav" target="_blank" rel="noopener">MeNav</a></p>
<p>by <a href="https://github.com/rbetree" target="_blank" rel="noopener">rbetree</a></p>
</div>
</div>
</nav>
<!-- 右侧内容区 -->
<main class="content">
<!-- 搜索框容器 -->
<div class="search-container">
<div class="search-box">
<button class="search-engine-button search-engine-toggle"
type="button"
title="选择搜索引擎"
aria-label="选择搜索引擎"
aria-haspopup="menu"
aria-controls="search-engine-dropdown"
aria-expanded="false">
<i class="search-engine-icon search-engine-icon-svg" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" focusable="false">
<path fill="#616161" d="M29.171,32.001L32,29.172l12.001,12l-2.828,2.828L29.171,32.001z"></path>
<path fill="#616161" d="M36,20c0,8.837-7.163,16-16,16S4,28.837,4,20S11.163,4,20,4S36,11.163,36,20"></path>
<path fill="#37474f" d="M32.476,35.307l2.828-2.828l8.693,8.693L41.17,44L32.476,35.307z"></path>
<path fill="#64b5f6" d="M7,20c0-7.18,5.82-13,13-13s13,5.82,13,13s-5.82,13-13,13S7,27.18,7,20"></path>
</svg>
</i>
<span class="search-engine-label">本地</span>
</button>
<input type="text" id="search" placeholder="Search" aria-label="搜索" aria-keyshortcuts="Control+K Meta+K">
<span class="search-shortcut-hint" aria-hidden="true">Ctrl+K</span>
<div class="search-engine-dropdown" id="search-engine-dropdown" role="menu" aria-label="搜索引擎列表">
<button class="search-engine-option" type="button" role="menuitem" data-engine="local" title="本地搜索">
<i class="search-engine-option-svg" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" focusable="false">
<path fill="#616161" d="M29.171,32.001L32,29.172l12.001,12l-2.828,2.828L29.171,32.001z"></path>
<path fill="#616161" d="M36,20c0,8.837-7.163,16-16,16S4,28.837,4,20S11.163,4,20,4S36,11.163,36,20"></path>
<path fill="#37474f" d="M32.476,35.307l2.828-2.828l8.693,8.693L41.17,44L32.476,35.307z"></path>
<path fill="#64b5f6" d="M7,20c0-7.18,5.82-13,13-13s13,5.82,13,13s-5.82,13-13,13S7,27.18,7,20"></path>
</svg>
</i>
<span class="search-engine-option-label">本地搜索</span>
</button>
<button class="search-engine-option" type="button" role="menuitem" data-engine="google" title="Google搜索">
<i class="search-engine-option-svg" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" focusable="false">
<path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path>
<path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path>
<path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path>
<path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path>
</svg>
</i>
<span class="search-engine-option-label">Google</span>
</button>
<button class="search-engine-option" type="button" role="menuitem" data-engine="bing" title="Bing搜索">
<i class="search-engine-option-svg" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" focusable="false">
<g fill="#2877fb" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<g transform="scale(5.12,5.12)">
<path d="M45,26.10156v-5.10156c0,-0.89844 -0.60156,-1.69922 -1.39844,-1.89844l-4.60156,-1.40234c-5.30078,-1.59766 -10.30078,-3 -15.60156,-4.69922h-0.09766c-0.80078,-0.19922 -1.60156,0.69922 -1.19922,1.5c1.89844,3.89844 3.89844,9.5 3.89844,9.5l6.69922,2.60156c-0.30078,0 -21.69922,11.39844 -21.69922,11.39844l9,-8v-23c0,-0.89844 -0.60156,-1.80078 -1.39844,-2c0,0 -4.90234,-1.89844 -8,-2.89844c-0.20312,-0.10156 -0.40234,-0.10156 -0.60156,-0.10156c-0.39844,0 -0.80078,0.10156 -1.19922,0.39844c-0.5,0.40234 -0.80078,1 -0.80078,1.60156v34.69922c0,0.69922 0.30078,1.30078 0.89844,1.60156c2.10156,1.5 4.30078,3 6.40234,4.5l3,2.09766c0.30078,0.20313 0.69922,0.40234 1.09766,0.40234c0.40234,0 0.70313,-0.10156 1,-0.30078c4.30078,-2.60156 8.70313,-5.19922 13,-7.80078l10.60156,-6.30078c0.60156,-0.39844 1,-1 1,-1.69922z"></path>
</g>
</g>
</svg>
</i>
<span class="search-engine-option-label">Bing</span>
</button>
<button class="search-engine-option" type="button" role="menuitem" data-engine="duckduckgo" title="DuckDuckGo搜索">
<i class="search-engine-option-svg" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 4 40 40" focusable="false">
<path fill="#ff3d00" d="M44,24c0,11-9,20-20,20S4,35,4,24S13,4,24,4S44,13,44,24z"></path>
<path fill="#fff" d="M26,16.2c-0.6-0.6-1.5-0.9-2.5-1.1c-0.4-0.5-1-1-1.9-1.5c-1.6-0.8-3.5-1.2-5.3-0.9h-0.4 c-0.1,0-0.2,0.1-0.4,0.1c0.2,0,1,0.4,1.6,0.6c-0.3,0.2-0.8,0.2-1.1,0.4c0,0,0,0-0.1,0L15.7,14c-0.1,0.2-0.2,0.4-0.2,0.5 c1.3-0.1,3.2,0,4.6,0.4C19,15,18,15.3,17.3,15.7c-0.5,0.3-1,0.6-1.3,1.1c-1.2,1.3-1.7,3.5-1.3,5.9c0.5,2.7,2.4,11.4,3.4,16.3 l0.3,1.6c0,0,3.5,0.4,5.6,0.4c1.2,0,3.2,0.3,3.7-0.2c-0.1,0-0.6-0.6-0.8-1.1c-0.5-1-1-1.9-1.4-2.6c-1.2-2.5-2.5-5.9-1.9-8.1 c0.1-0.4,0.1-2.1,0.4-2.3c2.6-1.7,2.4-0.1,3.5-0.8c0.5-0.4,1-0.9,1.2-1.5C29.4,22.1,27.8,18,26,16.2z"></path>
<path fill="#fff" d="M24,42c-9.9,0-18-8.1-18-18c0-9.9,8.1-18,18-18c9.9,0,18,8.1,18,18C42,33.9,33.9,42,24,42z M24,8 C15.2,8,8,15.2,8,24s7.2,16,16,16s16-7.2,16-16S32.8,8,24,8z"></path>
<path fill="#0277bd" d="M19,21.1c-0.6,0-1.2,0.5-1.2,1.2c0,0.6,0.5,1.2,1.2,1.2c0.6,0,1.2-0.5,1.2-1.2 C20.1,21.7,19.6,21.1,19,21.1z M19.5,22.2c-0.2,0-0.3-0.1-0.3-0.3c0-0.2,0.1-0.3,0.3-0.3s0.3,0.1,0.3,0.3 C19.8,22.1,19.6,22.2,19.5,22.2z M26.8,20.6c-0.6,0-1,0.5-1,1c0,0.6,0.5,1,1,1c0.6,0,1-0.5,1-1S27.3,20.6,26.8,20.6z M27.2,21.5 c-0.1,0-0.3-0.1-0.3-0.3c0-0.1,0.1-0.3,0.3-0.3c0.1,0,0.3,0.1,0.3,0.3S27.4,21.5,27.2,21.5z M19.3,18.9c0,0-0.9-0.4-1.7,0.1 c-0.9,0.5-0.8,1.1-0.8,1.1s-0.5-1,0.8-1.5C18.7,18.1,19.3,18.9,19.3,18.9 M27.4,18.8c0,0-0.6-0.4-1.1-0.4c-1,0-1.3,0.5-1.3,0.5 s0.2-1.1,1.5-0.9C27.1,18.2,27.4,18.8,27.4,18.8"></path>
<path fill="#8bc34a" d="M23.3,35.7c0,0-4.3-2.3-4.4-1.4c-0.1,0.9,0,4.7,0.5,5s4.1-1.9,4.1-1.9L23.3,35.7z M25,35.6 c0,0,2.9-2.2,3.6-2.1c0.6,0.1,0.8,4.7,0.2,4.9c-0.6,0.2-3.9-1.2-3.9-1.2L25,35.6z"></path>
<path fill="#689f38" d="M22.5,35.7c0,1.5-0.2,2.1,0.4,2.3c0.6,0.1,1.9,0,2.3-0.3c0.4-0.3,0.1-2.2-0.1-2.6 C25,34.8,22.5,35.1,22.5,35.7"></path>
<path fill="#ffca28" d="M22.3,26.8c0.1-0.7,2-2.1,3.3-2.2c1.3-0.1,1.7-0.1,2.8-0.3c1.1-0.3,3.9-1,4.7-1.3 c0.8-0.4,4.1,0.2,1.8,1.5c-1,0.6-3.7,1.6-5.7,2.2c-1.9,0.6-3.1-0.6-3.8,0.4c-0.5,0.8-0.1,1.8,2.2,2c3.1,0.3,6.2-1.4,6.5-0.5 c0.3,0.9-2.7,2-4.6,2.1c-1.8,0-5.6-1.2-6.1-1.6C22.9,28.7,22.2,27.8,22.3,26.8"></path>
</svg>
</i>
<span class="search-engine-option-label">DuckDuckGo</span>
</button>
</div>
</div>
</div>
<!-- 页面容器 -->
{{#each pages}}
<div class="page {{@key}}{{#if @first}} active{{/if}}" id="{{@key}}">
{{{this}}}
</div>
{{/each}}
</main>
<!-- 分类切换按钮 -->
<button class="category-toggle" id="category-toggle" aria-label="展开/收起分类">
<i class="fas fa-angle-double-down"></i>
</button>
<!-- 主题切换按钮 -->
<button class="theme-toggle" aria-label="切换主题">
<i class="fas fa-moon"></i>
</button>
</div>
<!-- 配置元信息(版本/配置URL/少量运行时参数)- 用于浏览器扩展按需加载 -->
<script id="menav-config-data" type="application/json" style="display: none;">
{{{configJSON}}}
</script>
<script src="pinyin-match.js"></script>
{{!-- github-calendar 已迁移为构建期抓取并注入(避免 runtime 依赖 unpkg + 代理服务) --}}
<script src="script.js"></script>
</body>
</html>