chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

refactor: 完成Handlebars模板系统基础集成

Browse Source
This commit is contained in:
Zuoling Rong
2025-05-07 14:58:38 +08:00
parent 7e378c229c
commit 6474fa3635
6 changed files with 487 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
templates/layouts/default.hbs Normal file
View File

@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{site.title}}</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
{{{googleFontsLink}}}
<style>
{{{fontVariables}}}
</style>
<!-- 预设主题和侧边栏状态，避免闪烁 -->
<script>
(function() {
// 读取并应用主题设置
var savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light') {
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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="loading">
<!-- 滚动进度指示条 -->
<div class="scroll-progress"></div>
<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">
<h1>{{site.logo_text}}</h1>
<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="nav-section">
<div class="section-title">
<i class="fas fa-link"></i>
</div>
{{{socialLinks}}}
</div>
</div>
<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>
</nav>
<!-- 右侧内容区 -->
<main class="content">
<!-- 搜索框容器 -->
<div class="search-container">
<div class="search-box">
<input type="text" id="search" placeholder="搜索...">
<i class="fas fa-search"></i>
</div>
</div>
{{{body}}}
<!-- 搜索结果页 -->
<div class="page" id="search-results">
<div class="welcome-section">
<h2>搜索结果</h2>
<p class="subtitle">在所有页面中找到的匹配项</p>
</div>
{{#each navigation}}
<section class="category search-section" data-section="{{id}}" style="display: none;">
<h2><i class="{{icon}}"></i> {{name}}匹配项</h2>
<div class="sites-grid"></div>
</section>
{{/each}}
</div>
</main>
<!-- 主题切换按钮 -->
<button class="theme-toggle" aria-label="切换主题">
<i class="fas fa-moon"></i>
</button>
</div>
<script src="script.js"></script>
</body>
</html>