code laptop

INFO的使用

Developer
Demo Developer
1 分钟阅读
教程
信息
这是一个信息提示框，用于展示一般性的提示信息。
信息
这是一个信息提示框，用于展示一般性的提示信息。
信息
这是一个信息提示框，用于展示一般性的提示信息。
信息
这是一个信息提示框，用于展示一般性的提示信息。
信息
这是一个信息提示框，用于展示一般性的提示信息。
信息
这是一个信息提示框，用于展示一般性的提示信息。
警告
这是一个警告提示框，用于提醒用户注意可能的问题。
技巧
这是一个技巧提示框，用于分享实用的技巧和建议。
危险
这是一个危险提示框，用于警告用户可能造成严重后果的操作。
备注
这是一个备注提示框，用于补充说明相关信息。

示框，用于补充说明相关信息。

代码块复制

代码块右上角提供一键复制按钮，方便读者复制代码。

标签系统

为文章添加标签，方便按主题浏览相关内容。

搜索功能

支持全文搜索，快速找到感兴趣的文章。

相关文章推荐

在文章底部展示同分类的其他文章，增加内容发现机会。

归档页面

按年月时间线展示所有文章，方便浏览历史内容。

图片灯箱

点击图片可以放大查看，提供更好的阅读体验。

开始使用

安装依赖

npm install

开发模式

npm run dev

构建项目

npm run build

配置说明

站点配置位于 content/settings.json，包括：

  • 站点基本信息
  • 导航菜单
  • 作者信息
  • 页脚设置
  • SEO 配置

文章管理

文章数据存储在 content/sitedoc.json，文章内容存储在 content/posts/ 目录下。

添加新文章

  1. 在 content/posts/ 目录下创建 Markdown 文件
  2. 在 content/sitedoc.json 中添加文章元数据
  3. 重新构建项目

技术栈

  • 框架: Next.js 15
  • 语言: TypeScript
  • 样式: Tailwind CSS
  • 组件: shadcn/ui
  • 图标: Lucide React

总结

QuillStack 是一个功能丰富、易于使用的博客系统，适合个人博客和技术文档站点。

如有问题，欢迎提交 Issue 或 PR！