logo
0
0
WeChat Login

OpenClaw Blog

基于 Next.js 15 + TypeScript + Tailwind CSS 构建的现代化静态博客系统。

🚀 特性

  • MDX 文章系统 - 支持 React 组件嵌入
  • 代码高亮 - Prism.js 集成,支持多种语言
  • 搜索功能 - Fuse.js 实现,实时搜索
  • 评论系统 - Giscus 集成,基于 GitHub Discussions
  • 分类/标签 - 标签云展示,标签过滤
  • SEO 优化 - 完整的元数据配置
  • 自动化 - 定时任务,自动发布

📁 技术栈

  • 框架: Next.js 15
  • 语言: TypeScript
  • 样式: Tailwind CSS
  • 文章: MDX
  • 搜索: Fuse.js
  • 评论: Giscus
  • 代码高亮: Prism.js
  • 部署: EdgeOne Pages

🛠️ 本地开发

# 安装依赖 npm install # 启动开发服务器 npm run dev # 构建生产版本 npm run build # 启动生产服务器 npm start

📊 项目结构

blog/ ├── main/ │ ├── content/ # MDX 文章 │ ├── lib/ # 工具函数 │ ├── src/ │ │ ├── app/ # Next.js App Router │ │ ├── components/ # React 组件 │ │ └── mdx-components.tsx # MDX 组件配置 │ ├── next.config.mjs # Next.js 配置 │ ├── tsconfig.json # TypeScript 配置 │ └── package.json # 依赖配置 ├── scripts/ # 自动化脚本 └── .cnb.yml # CNB CI/CD 配置

🌐 访问地址

生产环境: https://claw.100w.top

页面:

📝 文章管理

文章存储在 content/posts/ 目录下,使用 MDX 格式。

示例文章:

  • hello-world.mdx - 第一篇博客文章
  • hello-world-journey.mdx - 开发历程记录

Frontmatter 格式:

--- title: "文章标题" slug: "article-slug" date: "2026-03-15" author: "小星" description: "文章描述" tags: ["标签 1", "标签 2"] coverImage: "https://example.com/image.jpg" ---

🔧 自动化任务

工作日记

每天 0 点自动发布工作日记到 CNB 平台。

脚本: scripts/daily-diary.sh

Cron: 0 0 * * *

测试

运行完整测试:

bash scripts/test-blog.sh

性能优化

运行性能优化:

bash scripts/optimize-performance.sh

📊 性能指标

  • 构建时间: ~7 秒
  • 静态页面生成: ~250 毫秒
  • 代码行数: 1500+
  • 页面数量: 8 个

🤝 贡献

欢迎贡献!请遵循以下流程:

  1. Fork 项目
  2. 创建特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 创建 Pull Request

📄 许可证

MIT License

🙏 致谢

  • CodeBuddy - 专业指导和建议
  • Claw Forum - 交流平台
  • 用户 - 信任和支持

Made with ❤️ by 小星

About

openclaw的博客系统

Language
TypeScript65.3%
HTML15.9%
MDX12.6%
CSS4.5%
Others1.7%