zhou
简单的博客导航页面
zoe.X Lv2
  2025-06-12 17:27:18   2025-08-17 15:42:38    

博客导航网站

一个美观、现代化的博客导航网站，支持Deno和Cloudflare部署。

在线预览

GitHub 仓库

✨ 特性

  • 🎨 现代化设计: 采用渐变背景、卡片式布局和流畅动画
  • 📱 响应式布局: 完美适配桌面端和移动端
  • 🚀 高性能: 优化的CSS和JavaScript，快速加载
  • 🌐 多平台部署: 支持Deno和Cloudflare Workers部署
  • ♿ 无障碍访问: 支持键盘导航和屏幕阅读器
  • 🎯 用户友好: 直观的界面和流畅的交互体验

🛠️ 技术栈

  • 前端: HTML5 + CSS3 + JavaScript (ES6+)
  • 字体: Inter 字体系列
  • 图标: Font Awesome 6
  • 服务器: Deno (TypeScript)
  • 部署: Cloudflare Workers

🚀 快速开始

本地开发

使用 Deno

  1. 确保已安装 Deno

  2. 启动开发服务器：

    1
    deno task dev

  3. 或者直接运行：

    1
    deno run --allow-net --allow-read --watch server.ts

  4. 访问 http://localhost:8000

直接打开文件

也可以直接在浏览器中打开 index.html 文件进行预览。

部署

方式一：本地直接部署（推荐）

Deno Deploy CLI 部署

1
2
3
4
5
6
7
8
# 安装 Deno Deploy CLI
deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts

# 登录（首次使用）
deployctl login

# 直接部署
deployctl deploy --project=your-project-name server.ts

Cloudflare Wrangler 部署

1
2
3
4
5
6
7
8
9
# 安装 Wrangler
npm install -g wrangler

# 登录（首次使用）
wrangler login

# 创建 Pages 项目并部署
wrangler pages create blog-navigator
wrangler pages deploy . --project-name=blog-navigator

方式二：GitHub 连接部署

Deno Deploy

  1. 将代码推送到 GitHub 仓库
  2. 在 Deno Deploy 创建新项目
  3. 连接 GitHub 仓库并选择 server.ts 作为入口文件
  4. 部署完成

Cloudflare Pages

  1. 将代码推送到 GitHub 仓库
  2. 登录 Cloudflare Pages
  3. 点击"创建项目" → “连接到Git”
  4. 选择您的GitHub仓库
  5. 构建设置：
    • 构建命令：留空
    • 构建输出目录：/
  6. 点击"保存并部署"

📁 项目结构

1
2
3
4
5
6
7
8
9
10
blog-navigator/
├── index.html          # 主页面
├── style.css           # 样式文件
├── script.js           # 交互脚本
├── config.js           # 配置文件（修改URL就在这里！）
├── server.ts           # Deno 服务器
├── deno.json           # Deno 配置
├── _headers            # Cloudflare Pages 配置
├── _redirects          # Cloudflare Pages 重定向
└── README.md           # 项目说明

🎨 自定义

修改博客链接（超简单！）

只需要编辑 config.js 文件中的URL：

1
2
3
4
5
6
7
8
9
// 只需要修改这些URL即可
    {
      id: "tech-blog",
      title: "正常人的博客",
      description: "某种意义上来说相当平庸的一个博客",
      url: "https://zoeoe.de",  // 👈 修改这里的URL（示例：https://your-blog.com）
      icon: "fas fa-rocket",
      tags: ["学习", "折腾", "AI"]
    }

自定义样式

修改 style.css 文件中的 CSS 变量：

1
2
3
4
5
6
:root {
    --primary-color: #667eea;    /* 主色调 */
    --secondary-color: #764ba2;  /* 次要色调 */
    --accent-color: #f093fb;     /* 强调色 */
    /* ... 其他变量 */
}

🔧 开发命令

1
2
3
4
5
# 启动开发服务器（带热重载）
deno task dev

# 启动生产服务器
deno task start

📱 浏览器支持

  • Chrome/Edge 88+
  • Firefox 85+
  • Safari 14+
  • 移动端浏览器

🤝 贡献

欢迎提交 Issue 和 Pull Request！

🙏 致谢

 评论
评论插件加载失败
正在加载评论插件
  1. 博客导航网站
    1. 在线预览
    2. GitHub 仓库
    3. ✨ 特性
    4. 🛠️ 技术栈
    5. 🚀 快速开始
      1. 本地开发
        1. 使用 Deno
        2. 直接打开文件
      2. 部署
        1. 方式一：本地直接部署（推荐）
        2. 方式二：GitHub 连接部署
    6. 📁 项目结构
    7. 🎨 自定义
      1. 修改博客链接（超简单！）
      2. 自定义样式
    8. 🔧 开发命令
    9. 📱 浏览器支持
    10. 🤝 贡献
    11. 🙏 致谢
© 2025    zoe.X
由 Hexo 驱动 & 主题 Keep
访客数 访问量
  1. 博客导航网站
    1. 在线预览
    2. GitHub 仓库
    3. ✨ 特性
    4. 🛠️ 技术栈
    5. 🚀 快速开始
      1. 本地开发
        1. 使用 Deno
        2. 直接打开文件
      2. 部署
        1. 方式一：本地直接部署（推荐）
        2. 方式二：GitHub 连接部署
    6. 📁 项目结构
    7. 🎨 自定义
      1. 修改博客链接（超简单！）
      2. 自定义样式
    8. 🔧 开发命令
    9. 📱 浏览器支持
    10. 🤝 贡献
    11. 🙏 致谢