ITADN
deco-cx/deco
代码 动态 Issues24 合并请求776 版本838
deco-cx/deco · 文件 下载 ZIP
文件最后提交记录最后更新时间
README.md
以下内容由 AI 翻译，如有问题请点此提交 issue 反馈

deco

基于 Git 的 Typescript 可视化 CMS。

deco.cx · docs · login · 加入我们的 discord · X

jsr   Deno Land   Discord   Deco Twitter   Build Status


Deco web editor


  • 专注于性能且独立于 JavaScript 的现代技术栈
    • 服务端 JSX 模板
    • ⁠客户端 HTMX 交互
    • 通过 HTTPS 隧道进行本地开发 — 在 Web 上编辑，在本地 git 提交。
    • ⁠原生 Tailwind 主题支持，支持多个组件库： DaisyUI、Preline、FloatUI、Shadcn UI
  • 对业务用户和内容编辑者友好
    • 从 TypeScript Props 到内容编辑器 UI 生成器
    • 支持多媒体资源的资源管理器
    • 带有暂存区、不可变发布和即时 回滚的发布工作流
    • 面向仅内容编辑者的角色和权限 (每个站点免费邀请 1 名内容编辑 成员！)
  • ⁠一键部署到任何兼容 Deno 的主机
    • Deno Deploy (首选合作伙伴) — 具有慷慨免费额度的全球平台
    • Azion Edge (即将推出)
    • Fly.io (即将推出)
    • Nirvana Cloud (即将推出)
    • Digital Ocean (即将推出)
    • deco.cx PRO 托管：99 美元/月，用于在我们 企业级托管基础设施上始终在线的多区域部署。

快速入门

[!TIP] 使用 Deco 启动运行所需时间不到 1 分钟。

  1. 访问 deco.new 并选择一个模板。
  2. 选择一个名称并创建一个站点。这将为您提供一个免费的 deco-sites GitHub 仓库以及您 专属的 *.deco.site 域名。
  3. 按照说明克隆您的仓库并在本地 运行开发服务器，或者 一键免费部署到 Deno Deploy。

您的站点现已准备就绪，可使用我们精美的可视化 CMS 进行编辑。所有更改 都将保存到 git！

现在，要进入生产环境，请在 deco.store 中点击“Create new production environment”来安装可用的 Hosting 应用之一。

在本地运行 Deco 引擎

如果你想为 Deco 引擎本身做出贡献，或测试核心框架的更改， 你可以运行引擎的本地版本：

  1. 克隆此仓库：

    git clone https://github.com/deco-cx/deco.git

  2. 导航到运行 deco 的目标项目（例如，来自 deco-sites 的网站）：

    cd path/to/your-deco-site

  3. 运行指向本地 deco 克隆的 dev 脚本：

    deno run -A jsr:@deco/deco/scripts/dev ../deco

    将 ../deco 替换为克隆 deco 仓库的相对路径。

  4. 如果遇到任何缺失的包错误，请将它们添加到您的项目中：

    deno add <package-name>

这将使用你本地的 deco 引擎版本运行你的站点， 允许你测试更改并向项目贡献代码。

TypeScript Props 到可视化内容编辑器

Deco 的核心功能是从你的 TypeScript 接口生成内容编辑器 UI Props。例如，声明一个 ProductShelf JSX 组件，包含 这些 Props...

import ProductCard, { Layout } from "$store/components/product/ProductCard.tsx";
import type { Product } from "apps/commerce/types.ts";

export interface Props {
  products: Product[] | null;
  title?: string;
  description?: string;
  layout?: {
    headerAlignment?: "center" | "left";
    headerfontSize?: "Normal" | "Large";
  };
  cardLayout?: Layout;
}

export default function ProductShelf(props: Props) {
  /** JSX Preact + Tailwind UI Section **/
}

... 将自动为您生成此管理界面：

CleanShot 2023-11-14 at 16 51 51

文档

在我们的全面文档中进一步探索 Deco 的功能。 学习如何创建 Sections、Loaders、Apps 等等。前往 deco.cx/docs/en。

动机

Deco 旨在彻底简化 Web 开发——就像 90 年代那样，但 内置了所有现代的优秀特性。我们提出，这始于 将 TypeScript 提升为一种全局共享的类型词汇，以弥合 界面与 API 之间的差距。定义一个类型并获得来自 Deco 应用社区的多个匹配集成的自动补全，这种简单性对于 开发者生产力——无论是人类还是 AI——都是一项变革。这是 向更协作、更高效的 Web 开发范式的转变，其中 社区的集体努力转化为单个项目的成功。不再 重复造轮子，不再有孤岛，不再浪费时间。只需专注于 客户需求，在需要时从任何地方获取数据， 并允许团队中的每个人安全地利用这些数据创建和发布优质内容。

要了解我们构建 deco 的原因，请访问我们的 Why We Web 宣言，位于 https://deco.cx/why。

社区

加入 deco.cx Discord Server 社区。分享 你的应用，探索他人的创作，并为使 Deco 成为 一个繁荣生态系统的共享词汇做出贡献。

Deco 的优势

使用 Deco，你可以：

  • 使用可视化配置编辑器构建现代 Web 应用，用于管理 API、UI 和内容——全部在同一位置。
  • 从社区驱动的 Apps 生态系统中组合预构建的功能， 支持一键安装。
  • 通过内置的实时功能标志演进你的 Apps，将代码或 内容发布给特定受众。

Deco Blocks 是可互操作的： 一个的输出可以在可视化编辑器中作为 另一个的输入进行可视化配置，基于匹配的 TypeScript 类型。

例如，一个 Product Shelf UI 组件可能依赖于一个 Product[]。 获取 Product[] 的方式有很多种，例如从电子商务 平台（如 Shopify 或 VTEX）或搜索 优化提供商（如 Algolia 或 Typesense）获取。Deco 会 根据从广泛可用的 apps 中定义的自动建议匹配的集成，开发者可以选择最 符合其需求的一个。构建 UI 现在可以完全与其 数据集成解耦。针对已知类型进行编码，获得大量一流的 集成，即可部署。

要试用我们的可视化编辑器，请访问 deco.cx playground，选择一个模板，并体验一种 简化但强大的构建 Web 应用的方式。

主要功能

  • 共享词汇表：定义你所需的类型，Deco 会自动补全来自全球应用社区的多个匹配集成。它是 TypeScript 的进一步延伸，将类型转化为驱动你的 UI 和 API 集成的共享词汇表。

  • 预构建实现：使用现成的 Sections、Loaders 和 Actions 加速你的开发。一个预构建实现的宝库正等待你在项目中发现和利用。

  • 社区驱动生态系统：在 deco.hub 上与全球开发者社区互动。分享、发现并协作，以丰富 Deco 赖以生存的共享词汇表。

  • 简化的开发工作流：只需定义你的类型，让 Deco 处理其余部分。它简化了从类型定义到 UI 渲染和 API 集成的工作流。

  • 互操作性：Deco 促进不同应用和平台之间的无缝交互。它旨在打破孤岛，促进更互联的 Web 开发生态系统。

部署到你自己的基础设施

使用 Deco 创建的 deno 项目是完全独立的——所有 CMS 信息都整齐地打包在 JSON 文件中，与代码一起。Deco 仅仅是一个基于 git 的编辑器。

这意味着你可以轻松地将 Deco 项目部署到任何你想要的托管平台。通过使用我们的集成托管合作伙伴，你可以在 Deco 内部获得完整的一等环境支持和可观测性。

[!WARNING] 编辑器本身的自托管功能将于 2025 年初推出。在我们邀请更多开发者进行扩展之前， 请耐心等待我们重构部分内部机制！我们对此充满期待。

部署到 deco.cx PRO 边缘

您也可以将任何 Deco 应用部署到 deco.cx — 由本项目作者提供的 托管基础设施。

通过任何 deco.cx 订阅，您还将获得：

  • 托管的边缘基础设施
  • 基于 Clickhouse 的实时 Web 分析
  • 通过 HyperDX 提供的可观测性，包括追踪和错误日志记录
  • 访问所有 deco.store 应用
  • 所有 CMS 更改的无限版本历史记录
  • 具有角色和权限的团队支持
  • 访客支持（允许您的客户编辑他们的网站）。
  • 以及我们每月推出的一系列其他功能 :)

3P 集成

以下是我们已构建的集成及其项目状态的表格。

集成首页商品列表页商品详情页购物车结账代理订单完成代理我的账户代理
VTEX✅✅✅✅✅✅✅
VNDA✅✅✅✅✅✅✅
Shopify✅✅✅✅✅✅✅
Linx✅✅✅✅✅✅✅
Linx impulse✅✅✅✅✅✅✅
Nuvemshop✅✅✅✅✅✅✅
Wake✅✅✅✅✅✅✅

缓存环境变量（进行中）

环境变量描述示例值
ENABLE_LOADER_CACHE用于启用或禁用加载器缓存的标志true
LOADER_CACHE_START_TRESHOLD缓存启动阈值0
WEB_CACHE_ENGINE定义要使用的缓存引擎"FILE_SYSTEM,CACHE_API"
FILE_SYSTEM_CACHE_DIRECTORY文件系统缓存的目录路径/tmp
CACHE_MAX_SIZE文件系统缓存的最大大小（以字节为单位）1073741824 (1 GB)
CACHE_TTL_AUTOPURGE用于自动从文件系统缓存中删除过期项的标志（CPU 密集型）false
CACHE_TTL_RESOLUTION检查文件系统缓存中过期项的时间间隔（以毫秒为单位）30000 (30 seconds)
CACHE_MAX_AGE_S缓存变为过期的时间60 (60 seconds)

贡献

我们欢迎贡献！无论是修复 bug、改进文档，还是提出新功能，您的努力都弥足珍贵。请查阅我们的贡献指南以开始参与。

感谢所有贡献者