NuxtVue博客启动器

blogs — Nuxt 博客模板

作者 team-croffle

基于 Directus GraphQL 与 Nuxt 的团队博客 monorepo，包含可发布的 core 包、Nuxt Layer 与 create-croffle-blog 脚手架 CLI。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-13查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

monorepo 分为 apps（croffle-blog、template-blog）与 packages（directus-blog-core、nuxt-directus-blog、create-croffle-blog）

directus-blog-core 提供 GraphQL query、mapper 与 types；nuxt-directus-blog 是包含 API 与 composables 的 Nuxt Layer

提供 create-croffle-blog CLI，可用 pnpm create croffle-blog 或 npx create-croffle-blog 生成新博客

技术栈包含 pnpm workspaces、Changesets、oxlint/oxfmt、husky + lint-staged、Directus（GraphQL）与 Nuxt 4

GitHub Actions 覆盖 CI、Release（Changesets 或 OIDC npm publish）、TruffleHog 密钥扫描与基于路径的 PR 自动打标

模板详细介绍

该仓库是 Croffle Directus 博客的 monorepo，目标是用同一套 CMS schema 快速搭建团队博客，因此把核心包与模板应用分开。仓库结构分为 apps 与 packages：apps 下有运营博客 croffle-blog（private，部署到 Cloudflare Workers）和供团队成员使用的 Nuxt 脚手架 template-blog（private，CLI 模板来源）；packages 下有 directus-blog-core（GraphQL query、mapper、types，发布）、nuxt-directus-blog（Nuxt Layer，API 与 composables，发布）和 create-croffle-blog（脚手架 CLI，发布）。技术栈方面 README 列出 pnpm workspaces、Changesets、oxlint/oxfmt（OXC）、husky + lint-staged、Directus（GraphQL）与 Nuxt 4。

使用方式上，README 给出本地启动步骤：启用 corepack、pnpm install、复制 apps/template-blog/.env.example 为 .env 后执行 pnpm dev；也可通过 pnpm create croffle-blog my-blog 或 npx create-croffle-blog my-blog 生成新博客。常用脚本包括 lint、format、typecheck、changeset、version-packages 与 release。

仓库还定义了 CI、Release、Secret Scan、Labeler 四个 GitHub Actions 工作流，并说明首次发布需在本地完成后再于 npm 包设置中把 Trusted Publisher 关联到 release.yml。环境变量清单覆盖 BLOG_URL、BLOG_SLUG、DIRECTUS_URL、EMAIL_ADDRESS、HOMEPAGE_URL、BLOG_TITLE、BLOG_DESCRIPTION、BLOG_AUTHOR、PROFILE_IMAGE_URL、GITHUB_URL。README 未提供页面功能、主题定制范围、性能或生产就绪程度的说明。

NuxtVue博客启动器

适合你的项目吗？

适用场景

团队希望基于同一 Directus schema 快速搭建工程博客
需要把博客的数据查询与类型逻辑抽成可发布的独立包复用
希望通过 Nuxt Layer 共享 Nitro API 与 composables
使用脚手架 CLI 初始化新的博客项目并接入既有 CI 流程

适合人群

使用 Directus 作为 CMS 并采用 Nuxt 的团队
需要 monorepo 与 Changesets 版本发布流程的项目
希望复用 core 包与 Nuxt Layer 的多博客维护者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
执行 corepack enable 与 pnpm install 安装依赖
2
复制 apps/template-blog/.env.example 为 apps/template-blog/.env 并填写环境变量
3
运行 pnpm dev 启动开发；可用 pnpm create croffle-blog my-blog 或 npx create-croffle-blog my-blog 创建新博客
4
首次 npm publish 需在本地完成后，在 npm 包设置中将 Trusted Publisher 关联到 release.yml
5
密钥不要写入代码或提交，应通过 .env 或 runtimeConfig 注入，Secret Scan 会扫描 PR 与每周全量历史

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
运营博客 croffle-blog 为 private，不随仓库公开；可用的公开模板是 template-blog 脚手架。
template-blog 为 private，仅作为 CLI 模板来源，并非可直接独立部署的公开应用。
项目依赖 Directus（GraphQL）作为 CMS，需要自行部署或接入 Directus 服务。
应用框架为 Nuxt 4，使用前需确认与自身工具链兼容。
启动前需复制 apps/template-blog/.env.example 为 .env 并填写环境变量。
首次 npm publish 需先在本地完成，并在 npm 包设置中把 Trusted Publisher 关联到 release.yml。
必须配置 DIRECTUS_URL 指向自己的 Directus 实例。
密钥不得写入代码或提交，需通过 .env 或 runtimeConfig 注入。
Secret Scan 工作流会扫描 PR 并每周全量扫描提交历史。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

croffle-blog/ # 운영 블로그 (private, Cloudflare Workers 배포)
README 原文

template-blog/ # 팀원용 Nuxt 스캐폴드 (private, CLI 템플릿 원본)
README 原文

| CMS | Directus (GraphQL) |
README 原文

| 앱 프레임워크 | Nuxt 4 |
README 原文

cp apps/template-blog/.env.example apps/template-blog/.env
README 原文

- 최초 publish는 로컬에서 한 뒤, npm 패키지 설정에서 Trusted Publisher에 workflow `release.yml`을 연결하세요.
README 原文

DIRECTUS_URL=https://your-directus.example
README 原文

> 비밀값은 코드나 커밋에 넣지 말고 `.env` / `runtimeConfig`로 주입하세요.
README 原文

> `Secret Scan` 워크플로가 PR과 매주 전체 히스토리를 훑습니다.
README 原文

https://github.com/team-croffle/blogs/blob/master/LICENSE https://github.com/team-croffle/blogs/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-13。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 85 / 100
技术栈: Nuxt · Vue
网站类型: 博客 · 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-08-28
截图检查日期: 2026-10-13

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Nuxt。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261015 · 2026-10-15

查看当时使用的来源资料

SHA-256: 1fc92de42a0fede8035adf5e047a6cb79eea09f5d492e8fb5aed54dfc7937358

2026-10-13T13:45:28.843Z

来源文件 / 仓库

# @croffledev/blogs

Croffle Directus 블로그 모노레포입니다. 같은 CMS 스키마로 팀 블로그를 빠르게 만들 수 있도록, 코어 패키지와 템플릿 앱을 분리합니다.

## 구조

```
apps/
  croffle-blog/               # 운영 블로그 (private, Cloudflare Workers 배포)
  template-blog/              # 팀원용 Nuxt 스캐폴드 (private, CLI 템플릿 원본)
packages/
  directus-blog-core/         # GraphQL query · mapper · types (publish)
  nuxt-directus-blog/         # Nuxt Layer — API + composables (publish)
  create-croffle-blog/        # 스캐폴딩 CLI (publish)
```

## 스택

| 구분          | 기술                 |
| ------------- | -------------------- |
| 패키지 매니저 | pnpm workspaces      |
| 버전 관리     | Changesets           |
| 린트 / 포맷   | oxlint · oxfmt (OXC) |
| Git hooks     | husky + lint-staged  |
| CMS           | Directus (GraphQL)   |
| 앱 프레임워크 | Nuxt 4               |

## 시작

```bash
corepack enable
pnpm install
cp apps/template-blog/.env.example apps/template-blog/.env
pnpm dev
```

## CLI로 새 블로그 만들기

```bash
pnpm create croffle-blog my-blog
# 또는
npx create-croffle-blog my-blog
```

```bash
pnpm lint
pnpm format
pnpm typecheck
pnpm changeset          # 패키지 변경 기록
pnpm version-packages   # 버전 bump
pnpm release            # build + npm publish
```

## GitHub Actions

| 워크플로      | 트리거                         | 하는 일                                       |
| ------------- | ------------------------------ | --------------------------------------------- |
| `CI`          | PR · push                      | lint · core build · typecheck · build         |
| `Release`     | master push                    | Changesets Version PR 또는 npm publish (OIDC) |
| `Secret Scan` | PR · push · 매주 월요일 · 수동 | TruffleHog 시크릿 스캔 (주간은 전체 히스토리) |
| `Labeler`     | PR                             | 변경 경로 기반 자동 라벨링                    |

- 최초 publish는 로컬에서 한 뒤, npm 패키지 설정에서 Trusted Publisher에 workflow `release.yml`을 연결하세요.
- 라벨 규칙은 [.github/labeler.yml](.github/labeler.yml), 리뷰어 자동 지정은 [.github/CODEOWNERS](.github/CODEOWNERS)에 있습니다.
  저장소에 없는 라벨은 `Labeler` 워크플로가 자동으로 만듭니다 (색·설명은 기본값이니 나중에 손보세요).

## 환경 변수 (앱)

```env
BLOG_URL=https://blog.example.com
BLOG_SLUG=your-slug
DIRECTUS_URL=https://your-directus.example
[email protected]
HOMEPAGE_URL=https://www.example.com
BLOG_TITLE=Example Blog
BLOG_DESCRIPTION=Team engineering notes
BLOG_AUTHOR=Example
PROFILE_IMAGE_URL=
GITHUB_URL=
```

> 비밀값은 코드나 커밋에 넣지 말고 `.env` / `runtimeConfig`로 주입하세요.
> `Secret Scan` 워크플로가 PR과 매주 전체 히스토리를 훑습니다.

## 로드맵

1. ~~`my-blog`의 `server/features` · `shared/types`를 `directus-blog-core`로 이전~~
2. ~~Nitro API · composable을 `nuxt-directus-blog` Layer로 이전~~
3. ~~`template-blog` Nuxt 앱 + `create-croffle-blog` CLI~~
4. Changesets로 코어 패키지 버전 배포

## 기여

작업 절차와 검증 순서는 [CONTRIBUTING.md](CONTRIBUTING.md), 코드 스타일·네이밍·린트 규약은 [AGENTS.md](AGENTS.md)에 있습니다.

## 라이선스

[MIT](LICENSE) © team-croffle

反馈内容错误