678 lines
28 KiB
HTML
678 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>我的导航</title>
|
|
<link rel="icon" href="./favicon.ico" type="image/x-icon">
|
|
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Quicksand:wght@500&family=Noto Sans SC:wght@400&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--font-title: Poppins;
|
|
--font-weight-title: 600;
|
|
--font-subtitle: Quicksand;
|
|
--font-weight-subtitle: 500;
|
|
--font-body: Noto Sans SC;
|
|
--font-weight-body: 400;
|
|
}
|
|
</style>
|
|
<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="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>导航站</h1>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
|
|
<a href="#" class="nav-item active" data-page="home">
|
|
<div class="icon-container">
|
|
<i class="fas fa-home"></i>
|
|
</div>
|
|
<span class="nav-text">首页</span>
|
|
</a>
|
|
|
|
<a href="#" class="nav-item" data-page="projects">
|
|
<div class="icon-container">
|
|
<i class="fas fa-project-diagram"></i>
|
|
</div>
|
|
<span class="nav-text">项目</span>
|
|
</a>
|
|
|
|
<a href="#" class="nav-item" data-page="articles">
|
|
<div class="icon-container">
|
|
<i class="fas fa-book"></i>
|
|
</div>
|
|
<span class="nav-text">文章</span>
|
|
</a>
|
|
|
|
<a href="#" class="nav-item" data-page="friends">
|
|
<div class="icon-container">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<span class="nav-text">朋友</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="section-title">
|
|
<i class="fas fa-link"></i>
|
|
</div>
|
|
|
|
<a href="https://github.com" class="nav-item" target="_blank">
|
|
<div class="icon-container">
|
|
<i class="fab fa-github"></i>
|
|
</div>
|
|
<span class="nav-text">GitHub</span>
|
|
<i class="fas fa-external-link-alt external-icon"></i>
|
|
</a>
|
|
|
|
<a href="https://t.me" class="nav-item" target="_blank">
|
|
<div class="icon-container">
|
|
<i class="fab fa-telegram"></i>
|
|
</div>
|
|
<span class="nav-text">Telegram</span>
|
|
<i class="fas fa-external-link-alt external-icon"></i>
|
|
</a>
|
|
|
|
<a href="https://twitter.com" class="nav-item" target="_blank">
|
|
<div class="icon-container">
|
|
<i class="fab fa-twitter"></i>
|
|
</div>
|
|
<span class="nav-text">Twitter</span>
|
|
<i class="fas fa-external-link-alt external-icon"></i>
|
|
</a>
|
|
|
|
<a href="https://steam.com" class="nav-item" target="_blank">
|
|
<div class="icon-container">
|
|
<i class="fab fa-steam"></i>
|
|
</div>
|
|
<span class="nav-text">Steam</span>
|
|
<i class="fas fa-external-link-alt external-icon"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 导入/导出功能 -->
|
|
<div class="nav-section">
|
|
<div class="section-title">
|
|
<i class="fas fa-cog"></i>
|
|
</div>
|
|
<div class="nav-item import-export-btn" id="exportDataBtn">
|
|
<div class="icon-container">
|
|
<i class="fas fa-download"></i>
|
|
</div>
|
|
<span class="nav-text">导出数据</span>
|
|
</div>
|
|
<div class="nav-item import-export-btn" id="importDataBtn">
|
|
<div class="icon-container">
|
|
<i class="fas fa-upload"></i>
|
|
</div>
|
|
<span class="nav-text">导入数据</span>
|
|
</div>
|
|
<!-- 隐藏的文件上传输入 -->
|
|
<input type="file" id="importFileInput" style="display: none;" accept=".json,.yml,.yaml">
|
|
</div>
|
|
|
|
<div class="copyright">
|
|
<p>© 2025 <a href="https://github.com/rbetree/menav" target="_blank">MeNav</a></p>
|
|
<p>by <a href="https://github.com/rbetree" target="_blank">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>
|
|
|
|
<!-- 首页 -->
|
|
<div class="page active" id="home">
|
|
<div class="welcome-section">
|
|
<h2>Hello,</h2>
|
|
<h3>Welcome to My Navigation</h3>
|
|
<p class="subtitle">导航菜单</p>
|
|
</div>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-star"></i> 常用网站</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="https://www.google.com" class="site-card">
|
|
<i class="fab fa-google"></i>
|
|
<h3>Google</h3>
|
|
<p>全球最大的搜索引擎</p>
|
|
</a>
|
|
|
|
<a href="https://www.github.com" class="site-card">
|
|
<i class="fab fa-github"></i>
|
|
<h3>GitHub</h3>
|
|
<p>代码托管平台</p>
|
|
</a>
|
|
|
|
<a href="https://stackoverflow.com" class="site-card">
|
|
<i class="fab fa-stack-overflow"></i>
|
|
<h3>Stack Overflow</h3>
|
|
<p>程序员问答社区</p>
|
|
</a>
|
|
|
|
<a href="https://chat.openai.com" class="site-card">
|
|
<i class="fas fa-robot"></i>
|
|
<h3>ChatGPT</h3>
|
|
<p>AI智能助手</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-graduation-cap"></i> 学习资源</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="https://www.bilibili.com" class="site-card">
|
|
<i class="fas fa-play-circle"></i>
|
|
<h3>哔哩哔哩</h3>
|
|
<p>视频学习平台</p>
|
|
</a>
|
|
|
|
<a href="https://www.zhihu.com" class="site-card">
|
|
<i class="fas fa-question-circle"></i>
|
|
<h3>知乎</h3>
|
|
<p>问答社区</p>
|
|
</a>
|
|
|
|
<a href="https://juejin.cn" class="site-card">
|
|
<i class="fas fa-book"></i>
|
|
<h3>掘金</h3>
|
|
<p>高质量技术社区</p>
|
|
</a>
|
|
|
|
<a href="https://leetcode.cn" class="site-card">
|
|
<i class="fas fa-code"></i>
|
|
<h3>LeetCode</h3>
|
|
<p>算法刷题平台</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-tools"></i> 开发工具</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="https://code.visualstudio.com" class="site-card">
|
|
<i class="fas fa-code"></i>
|
|
<h3>VS Code</h3>
|
|
<p>强大的代码编辑器</p>
|
|
</a>
|
|
|
|
<a href="https://www.postman.com" class="site-card">
|
|
<i class="fas fa-paper-plane"></i>
|
|
<h3>Postman</h3>
|
|
<p>API调试工具</p>
|
|
</a>
|
|
|
|
<a href="https://git-scm.com" class="site-card">
|
|
<i class="fab fa-git-alt"></i>
|
|
<h3>Git</h3>
|
|
<p>版本控制工具</p>
|
|
</a>
|
|
|
|
<a href="https://www.docker.com" class="site-card">
|
|
<i class="fab fa-docker"></i>
|
|
<h3>Docker</h3>
|
|
<p>容器化平台</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-palette"></i> 设计资源</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="https://www.figma.com" class="site-card">
|
|
<i class="fab fa-figma"></i>
|
|
<h3>Figma</h3>
|
|
<p>在线设计工具</p>
|
|
</a>
|
|
|
|
<a href="https://dribbble.com" class="site-card">
|
|
<i class="fab fa-dribbble"></i>
|
|
<h3>Dribbble</h3>
|
|
<p>设计师社区</p>
|
|
</a>
|
|
|
|
<a href="https://www.behance.net" class="site-card">
|
|
<i class="fab fa-behance"></i>
|
|
<h3>Behance</h3>
|
|
<p>创意设计平台</p>
|
|
</a>
|
|
|
|
<a href="https://www.iconfont.cn" class="site-card">
|
|
<i class="fas fa-icons"></i>
|
|
<h3>IconFont</h3>
|
|
<p>图标资源库</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-wrench"></i> 在线工具</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="https://jsoneditoronline.org" class="site-card">
|
|
<i class="fas fa-code-branch"></i>
|
|
<h3>JSON Editor</h3>
|
|
<p>JSON在线编辑器</p>
|
|
</a>
|
|
|
|
<a href="https://caniuse.com" class="site-card">
|
|
<i class="fas fa-browser"></i>
|
|
<h3>Can I Use</h3>
|
|
<p>浏览器兼容性查询</p>
|
|
</a>
|
|
|
|
<a href="https://tinypng.com" class="site-card">
|
|
<i class="fas fa-compress"></i>
|
|
<h3>TinyPNG</h3>
|
|
<p>图片压缩工具</p>
|
|
</a>
|
|
|
|
<a href="https://carbon.now.sh" class="site-card">
|
|
<i class="fas fa-code"></i>
|
|
<h3>Carbon</h3>
|
|
<p>代码图片生成器</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- 项目页 -->
|
|
<div class="page" id="projects">
|
|
|
|
<div class="welcome-section">
|
|
<h2>我的项目</h2>
|
|
<p class="subtitle">这里展示了我的一些个人项目和开源贡献</p>
|
|
</div>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-code"></i> 个人项目</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fas fa-compass"></i>
|
|
<h3>个人导航站</h3>
|
|
<p>一个简洁美观的个人导航页面</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fas fa-tasks"></i>
|
|
<h3>Todo List</h3>
|
|
<p>基于Vue3的待办事项管理器</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fas fa-blog"></i>
|
|
<h3>个人博客</h3>
|
|
<p>使用Hexo搭建的技术博客</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-code-branch"></i> 开源贡献</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fab fa-github"></i>
|
|
<h3>Project A</h3>
|
|
<p>开源项目贡献</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fab fa-github"></i>
|
|
<h3>Project B</h3>
|
|
<p>开源项目贡献</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- 文章页 -->
|
|
<div class="page" id="articles">
|
|
|
|
<div class="welcome-section">
|
|
<h2>技术文章</h2>
|
|
<p class="subtitle">分享我的技术文章和学习笔记</p>
|
|
</div>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-pen"></i> 最新文章</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fab fa-vuejs"></i>
|
|
<h3>Vue3最佳实践</h3>
|
|
<p>Vue3组合式API的使用技巧</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fab fa-js"></i>
|
|
<h3>JavaScript进阶</h3>
|
|
<p>JavaScript高级特性解析</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fab fa-git-alt"></i>
|
|
<h3>Git使用技巧</h3>
|
|
<p>Git常用命令和工作流</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fab fa-docker"></i>
|
|
<h3>Docker入门</h3>
|
|
<p>Docker基础知识和实践</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-book"></i> 学习笔记</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fab fa-react"></i>
|
|
<h3>React Hooks</h3>
|
|
<p>React Hooks最佳实践</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fab fa-node-js"></i>
|
|
<h3>Node.js实战</h3>
|
|
<p>Node.js服务端开发笔记</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fab fa-css3"></i>
|
|
<h3>CSS技巧</h3>
|
|
<p>CSS常用技巧总结</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fas fa-database"></i>
|
|
<h3>数据库设计</h3>
|
|
<p>数据库架构和优化笔记</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-code"></i> 源码解析</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fab fa-vuejs"></i>
|
|
<h3>Vue源码解析</h3>
|
|
<p>Vue.js核心原理解析</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fab fa-react"></i>
|
|
<h3>React原理</h3>
|
|
<p>React核心机制解析</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- 朋友页 -->
|
|
<div class="page" id="friends">
|
|
|
|
<div class="welcome-section">
|
|
<h2>友情链接</h2>
|
|
<p class="subtitle">优秀的博主和朋友们</p>
|
|
</div>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-user-friends"></i> 技术博主</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fas fa-code"></i>
|
|
<h3>小明的博客</h3>
|
|
<p>全栈开发工程师，分享技术心得</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fas fa-paint-brush"></i>
|
|
<h3>小红的前端</h3>
|
|
<p>专注前端开发与设计</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fas fa-server"></i>
|
|
<h3>小张的后端</h3>
|
|
<p>分享后端开发经验</p>
|
|
</a>
|
|
|
|
<a href="#" class="site-card">
|
|
<i class="fas fa-mobile-alt"></i>
|
|
<h3>小李的移动端</h3>
|
|
<p>移动应用开发专家</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-laptop-code"></i> 技术社区</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="https://github.com" class="site-card">
|
|
<i class="fab fa-github"></i>
|
|
<h3>GitHub</h3>
|
|
<p>开源代码托管平台</p>
|
|
</a>
|
|
|
|
<a href="https://stackoverflow.com" class="site-card">
|
|
<i class="fab fa-stack-overflow"></i>
|
|
<h3>Stack Overflow</h3>
|
|
<p>程序员问答社区</p>
|
|
</a>
|
|
|
|
<a href="https://juejin.cn" class="site-card">
|
|
<i class="fas fa-book"></i>
|
|
<h3>掘金</h3>
|
|
<p>高质量技术社区</p>
|
|
</a>
|
|
|
|
<a href="https://v2ex.com" class="site-card">
|
|
<i class="fas fa-comments"></i>
|
|
<h3>V2EX</h3>
|
|
<p>创意工作者社区</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="category">
|
|
<h2><i class="fas fa-coffee"></i> 休闲娱乐</h2>
|
|
<div class="sites-grid">
|
|
|
|
<a href="https://www.bilibili.com" class="site-card">
|
|
<i class="fas fa-play-circle"></i>
|
|
<h3>哔哩哔哩</h3>
|
|
<p>视频弹幕网站</p>
|
|
</a>
|
|
|
|
<a href="https://www.zhihu.com" class="site-card">
|
|
<i class="fas fa-question-circle"></i>
|
|
<h3>知乎</h3>
|
|
<p>问答社区</p>
|
|
</a>
|
|
|
|
<a href="https://www.douban.com" class="site-card">
|
|
<i class="fas fa-film"></i>
|
|
<h3>豆瓣</h3>
|
|
<p>文艺生活社区</p>
|
|
</a>
|
|
|
|
<a href="https://music.163.com" class="site-card">
|
|
<i class="fas fa-music"></i>
|
|
<h3>网易云音乐</h3>
|
|
<p>音乐平台</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- 搜索结果页 -->
|
|
<div class="page" id="search-results">
|
|
<div class="welcome-section">
|
|
<h2>搜索结果</h2>
|
|
<p class="subtitle">在所有页面中找到的匹配项</p>
|
|
</div>
|
|
|
|
<section class="category search-section" data-section="home" style="display: none;">
|
|
<h2><i class="fas fa-home"></i> 首页匹配项</h2>
|
|
<div class="sites-grid"></div>
|
|
</section>
|
|
|
|
<section class="category search-section" data-section="projects" style="display: none;">
|
|
<h2><i class="fas fa-project-diagram"></i> 项目匹配项</h2>
|
|
<div class="sites-grid"></div>
|
|
</section>
|
|
|
|
<section class="category search-section" data-section="articles" style="display: none;">
|
|
<h2><i class="fas fa-book"></i> 文章匹配项</h2>
|
|
<div class="sites-grid"></div>
|
|
</section>
|
|
|
|
<section class="category search-section" data-section="friends" style="display: none;">
|
|
<h2><i class="fas fa-users"></i> 朋友匹配项</h2>
|
|
<div class="sites-grid"></div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="script.js"></script>
|
|
|
|
<script>
|
|
// 从localStorage加载用户数据
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
try {
|
|
const userData = localStorage.getItem('menav_user_data');
|
|
if (userData) {
|
|
const data = JSON.parse(userData);
|
|
console.log('Loading user data from localStorage');
|
|
|
|
// 应用用户配置
|
|
applyUserData(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading user data:', error);
|
|
}
|
|
|
|
// 应用用户数据到页面
|
|
function applyUserData(data) {
|
|
try {
|
|
// 应用分类和网站
|
|
if (data.categories && data.categories.length > 0) {
|
|
const homePage = document.getElementById('home');
|
|
if (homePage) {
|
|
// 保留欢迎区域
|
|
const welcomeSection = homePage.querySelector('.welcome-section');
|
|
|
|
// 清除当前分类
|
|
const oldCategories = homePage.querySelectorAll('.category');
|
|
oldCategories.forEach(cat => {
|
|
if (!cat.classList.contains('welcome-section')) {
|
|
cat.remove();
|
|
}
|
|
});
|
|
|
|
// 添加新分类
|
|
data.categories.forEach(category => {
|
|
const categoryElem = document.createElement('section');
|
|
categoryElem.className = 'category';
|
|
categoryElem.innerHTML = `
|
|
<h2><i class="${category.icon}"></i> ${category.name}</h2>
|
|
<div class="sites-grid"></div>
|
|
`;
|
|
|
|
const sitesGrid = categoryElem.querySelector('.sites-grid');
|
|
|
|
// 添加站点
|
|
category.sites.forEach(site => {
|
|
const siteCard = document.createElement('a');
|
|
siteCard.className = 'site-card';
|
|
siteCard.href = site.url;
|
|
siteCard.innerHTML = `
|
|
<i class="${site.icon}"></i>
|
|
<h3>${site.name}</h3>
|
|
<p>${site.description}</p>
|
|
`;
|
|
sitesGrid.appendChild(siteCard);
|
|
});
|
|
|
|
homePage.appendChild(categoryElem);
|
|
});
|
|
}
|
|
}
|
|
|
|
// 应用社交链接
|
|
if (data.social && data.social.length > 0) {
|
|
const socialSection = document.querySelector('.nav-section:has(.section-title i.fa-link)');
|
|
if (socialSection) {
|
|
// 清除当前社交链接
|
|
const oldLinks = socialSection.querySelectorAll('.nav-item');
|
|
oldLinks.forEach(link => link.remove());
|
|
|
|
// 添加新社交链接
|
|
data.social.forEach(link => {
|
|
const linkElem = document.createElement('a');
|
|
linkElem.className = 'nav-item';
|
|
linkElem.href = link.url;
|
|
linkElem.target = '_blank';
|
|
linkElem.innerHTML = `
|
|
<div class="icon-container">
|
|
<i class="${link.icon}"></i>
|
|
</div>
|
|
<span class="nav-text">${link.name}</span>
|
|
<i class="fas fa-external-link-alt external-icon"></i>
|
|
`;
|
|
socialSection.appendChild(linkElem);
|
|
});
|
|
}
|
|
}
|
|
|
|
// 重新初始化搜索索引
|
|
if (window.initSearchIndex) {
|
|
window.initSearchIndex();
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error applying user data:', error);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |