同步现在的代码
This commit is contained in:
linghutianhao
@@ -0,0 +1,250 @@
|
||||
---
|
||||
title: cms构建说明
|
||||
sidebar_position: 10
|
||||
---
|
||||
|
||||
## cms
|
||||
|
||||
### sveltia-cms
|
||||
|
||||
```
|
||||
1.文件
|
||||
新增 static/admin/index.html sveltia CMS入口页，CDN方式
|
||||
新增 static/admin/config.yml sveltia全部配置
|
||||
|
||||
2.访问
|
||||
http://localhost:3000/admin/
|
||||
```
|
||||
|
||||
|
||||
|
||||
### decap-cms(仅本地)
|
||||
|
||||
https://decapcms.org/docs/basic-steps/
|
||||
|
||||
```
|
||||
1.文件
|
||||
新增 static/admin/index.html Decap CMS入口页，CDN方式
|
||||
新增 static/admin/config.yml Decap全部配置
|
||||
修改 package.json 增加"cms": "npx decap-server"
|
||||
|
||||
2.内容
|
||||
docs的文件要增加 title
|
||||
|
||||
3.启动
|
||||
npx decap-server 或 npm run cms
|
||||
|
||||
4.访问
|
||||
http://localhost:3000/admin/
|
||||
```
|
||||
|
||||
#### 已创建的文件
|
||||
|
||||
| 文件 | 说明 |
|
||||
| ------------------------------------------------------------ | -------------------------------------- |
|
||||
| [static/admin/index.html](vscode-webview://0ckeaenbrnfu1mc0gmsrksqv66drn38jfo32mrkm9h7l6l40fp43/static/admin/index.html) | Decap CMS 入口，从 CDN 加载 |
|
||||
| [static/admin/config.yml](vscode-webview://0ckeaenbrnfu1mc0gmsrksqv66drn38jfo32mrkm9h7l6l40fp43/static/admin/config.yml) | 核心配置：backend、集合、媒体文件路径 |
|
||||
| [server.js](vscode-webview://0ckeaenbrnfu1mc0gmsrksqv66drn38jfo32mrkm9h7l6l40fp43/server.js) | Gitee OAuth 认证代理服务（生产环境用） |
|
||||
| [.env.example](vscode-webview://0ckeaenbrnfu1mc0gmsrksqv66drn38jfo32mrkm9h7l6l40fp43/.env.example) | 环境变量模板 |
|
||||
|
||||
#### Git 仓库
|
||||
|
||||
已本地提交并推送到 `git@gitee.com:lhth/testdecap.git`
|
||||
|
||||
有一个新的更改（导航栏链接改到 Gitee）在本地但被拦截了，你需要手动推一下：
|
||||
|
||||
```bash
|
||||
cd "d:/projects/test/my-websitetest"
|
||||
git push origin master
|
||||
```
|
||||
|
||||
#### 架构说明
|
||||
|
||||
**当前配置（开发/测试）：proxy backend**
|
||||
|
||||
```
|
||||
浏览器 → Decap CMS → proxy:8081 → 本地 git repo → SSH → Gitee
|
||||
```
|
||||
|
||||
运行方式：
|
||||
|
||||
```bash
|
||||
# 终端 1：启动 Docusaurus
|
||||
npm start
|
||||
|
||||
# 终端 2：启动 Decap 代理（在项目根目录）
|
||||
npx decap-server
|
||||
|
||||
# 访问 http://localhost:3000/admin/ 即可使用 CMS
|
||||
```
|
||||
|
||||
> **注意**：Docusaurus 开发服务器的 SPA 路由会拦截 `/admin/` 路径。有两个解决办法：
|
||||
>
|
||||
> 1. 访问 `http://localhost:3000/admin/index.html` （可能仍会被拦截）
|
||||
> 2. 用生产模式：`npm run build && npm run serve`，然后访问 `http://localhost:3000/admin/` ✅（已验证可行）
|
||||
|
||||
#### 生产环境部署（Gitee OAuth）
|
||||
|
||||
当你要部署到远程服务器时，需要：
|
||||
|
||||
**1. 在 Gitee 创建 OAuth App**
|
||||
|
||||
- 打开 https://gitee.com/oauth/applications
|
||||
- 应用名称：`My Decap CMS`
|
||||
- 回调地址：`https://你的域名.com/api/auth`
|
||||
- 获取 `Client ID` 和 `Client Secret`
|
||||
|
||||
**2. 部署认证服务**
|
||||
|
||||
```bash
|
||||
# 服务器上运行
|
||||
GITEE_CLIENT_ID=xxx GITEE_CLIENT_SECRET=xxx node server.js
|
||||
```
|
||||
|
||||
或者部署到 Vercel/Cloudflare Workers 等 Serverless 平台。
|
||||
|
||||
**3. 修改 config.yml** 取消注释文末的生产环境配置，注释掉 proxy backend 部分（文件中已有注释说明）。
|
||||
|
||||
#### 内容集合
|
||||
|
||||
已配置两个集合：
|
||||
|
||||
- **博客文章** (`blog/`) — Docusaurus 标准 `YYYY-MM-DD-title.md` 格式
|
||||
- **文档** (`docs/`) — Docusaurus 文档格式
|
||||
|
||||
你可以随时在 [static/admin/config.yml](vscode-webview://0ckeaenbrnfu1mc0gmsrksqv66drn38jfo32mrkm9h7l6l40fp43/static/admin/config.yml) 中增删字段或集合。
|
||||
|
||||
```
|
||||
浏览器 本地机器 Gitee
|
||||
┌─────────┐ ┌──────────────┐ ┌──────────┐
|
||||
│ Decap │──proxy──→ │ decap-server │──git──→ │ gitee.com│
|
||||
│ CMS UI │ HTTP:8081 │ (本地Node进程) │ SSH │ (你的仓库)│
|
||||
│ admin/ │ │ 读写本地git │ │ │
|
||||
└────┬────┘ └──────────────┘ └──────────┘
|
||||
│
|
||||
└── unpkg.com CDN (加载 decap-cms.js)
|
||||
```
|
||||
|
||||
|
||||
|
||||
### tina-cms(卡)
|
||||
|
||||
https://tina.io/docs/reference/config
|
||||
|
||||
```
|
||||
1.npm install tinacms @tinacms/cli
|
||||
2.tina/config.js
|
||||
3.package.json
|
||||
// scripts 里加
|
||||
"tina": "tinacms dev -c \"docusaurus start\"",
|
||||
4.npm run tina
|
||||
自动生成tina/__generated__/
|
||||
├── _graphql.json
|
||||
├── _lookup.json
|
||||
├── _schema.json
|
||||
├── client.ts
|
||||
├── config.prebuild.jsx
|
||||
├── frags.gql
|
||||
├── queries.gql
|
||||
├── schema.gql
|
||||
├── static-media.json
|
||||
├── types.js
|
||||
└── types.ts
|
||||
5.npm run tina
|
||||
```
|
||||
|
||||
|
||||
|
||||
```
|
||||
# 官方提供标准版
|
||||
const branch =
|
||||
process.env.NEXT_PUBLIC_TINA_BRANCH ||
|
||||
process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF ||
|
||||
process.env.HEAD ||
|
||||
'main';
|
||||
|
||||
export default defineConfig({
|
||||
branch,
|
||||
// generated by TinaCloud
|
||||
token: '<Your Read Only Token>',
|
||||
// generated by TinaCloud
|
||||
clientId: '<Your Client ID>',
|
||||
build: {
|
||||
publicFolder: 'public',
|
||||
outputFolder: 'admin',
|
||||
},
|
||||
schema: {
|
||||
//Content model definition here...
|
||||
},
|
||||
ui: {
|
||||
previewUrl: (context) => {
|
||||
// Use Vercel preview deployments based on branch names
|
||||
return { url: `https://my-app-git-${context.branch}.vercel.app` };
|
||||
},
|
||||
},
|
||||
media: {
|
||||
tina: {
|
||||
publicFolder: 'public',
|
||||
mediaRoot: 'uploads',
|
||||
},
|
||||
},
|
||||
search: {
|
||||
tina: {
|
||||
indexerToken: process.env.TINA_SEARCH_TOKEN,
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
```ts
|
||||
import { defineConfig } from "tinacms";
|
||||
|
||||
export default defineConfig({
|
||||
branch: process.env.TINA_BRANCH || "master",
|
||||
clientId: process.env.TINA_CLIENT_ID || "",
|
||||
token: process.env.TINA_TOKEN || "",
|
||||
build: {
|
||||
publicFolder: "static",
|
||||
outputFolder: "admin",
|
||||
},
|
||||
media: {
|
||||
tina: {
|
||||
mediaRoot: "img",
|
||||
publicFolder: "static",
|
||||
static: true,
|
||||
},
|
||||
},
|
||||
schema: {
|
||||
collections: [
|
||||
{
|
||||
name: "blog",
|
||||
label: "博客",
|
||||
path: "blog",
|
||||
format: "md",
|
||||
fields: [
|
||||
{ type: "string", name: "title", label: "标题", isTitle: true, required: true },
|
||||
{ type: "datetime", name: "date", label: "发布日期", ui: { dateFormat: "YYYY-MM-DD", timeFormat: false } },
|
||||
{ type: "string", name: "tags", label: "标签", list: true, ui: { component: "tags" } },
|
||||
{ type: "string", name: "description", label: "描述/摘要" },
|
||||
{ type: "rich-text", name: "body", label: "正文", isBody: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "docs",
|
||||
label: "文档",
|
||||
path: "docs",
|
||||
format: "md",
|
||||
fields: [
|
||||
{ type: "string", name: "title", label: "标题", isTitle: true, required: true },
|
||||
{ type: "number", name: "sidebar_position", label: "侧边栏位置" },
|
||||
{ type: "string", name: "tags", label: "标签", list: true, ui: { component: "tags" } },
|
||||
{ type: "rich-text", name: "body", label: "正文", isBody: true },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user