可视化 Front-Matter 编辑
现在您无需编写 YAML
语法即可编辑 markdown front-matter。Nuxt Studio 会自动生成用户友好的表单,简化元数据编辑。
什么是 Front-matter?
Front-matter 是基于 Markdown 的 CMS 中用于为页面提供元数据(如描述、标题等)的约定。在 Nuxt Content 中,front-matter 使用的是 YAML 语法。
我们非技术编辑器的最后一环
Nuxt Studio 从发布编辑器起就以非技术用户为设计核心。我们的目标是让每个人都能轻松编辑 markdown 和内容。
自动生成 front-matter 表单是下一步的合理进展。通过摆脱 YAML 语法的复杂性,简化了非开发者的编辑流程,提供动态输入选项,如图片选择器、日期选择器、布尔切换等。此增强使我们实现了完全可视化且用户友好的内容管理体验。
扩展至所有 YAML 和 JSON 文件
不久之后,表单生成功能将扩展至您在 Nuxt Studio 中编辑的所有 YAML
和 JSON
文件,让结构化数据的操作更为轻松便捷。
展望 Nuxt Content v3
我们正积极开发下一重大版本 Nuxt Content,这将带来显著的性能提升和新功能,进一步提升内容管理体验。
性能优化
Nuxt Content v2 的一大挑战是需要较大的包体积来存储所有内容文件,这在向边缘平台(如 NuxtHub)部署时造成了问题。
为解决此问题,Nuxt Content v3 在生产环境中不再使用基于文件的存储方式,而是采用 SQL 数据库系统。此变更对用户透明。我们为开发模式、静态生成、服务器渲染及通过 NuxtHub 的边缘部署提供零配置支持。
引入 Collections(集合)
Collections 是 Nuxt Content 项目中相关内容项的分组,帮助更高效地组织和管理大型数据集。
定义 Collections
您可以在 content.config.ts
文件中定义 collections,Nuxt Content 将用它配置数据库结构、类型工具及用于查找、解析和查询内容的方法。
Collections 方案(Schema)
方案可确保 collections 内部的一致性,并改善 TypeScript 类型定义,增强与 Nuxt Content 工具的集成。
import { defineCollection, z } from '@nuxt/content'
// 导出 collections
export const collections = {
// 使用 `defineCollection` 工具定义 collection
posts: defineCollection({
// 指定该 collection 中内容的类型
type: 'page',
// 加载匹配此模式的所有文件
source: 'blog/**/*.md',
// 为该 collection 定义自定义 schema
schema: z.object({
date: z.date(),
image: z.object({
src: z.string(),
alt: z.string()
}),
badge: z.object({
label: z.string(),
color: z.string()
})
})
}),
}
针对 Nuxt Studio 精心打造
Nuxt Studio 最初与 Nuxt Content v2 同步开发,但在 v3 中,我们以 Nuxt Studio 体验为目标重构模块。我们的宗旨是打造最佳内容编辑 CMS 平台,同时提供极佳的开发者体验。
例如,collection schema 将助力我们进一步增强 Studio 中的表单生成。您甚至可以直接在 schema 中设置字段的编辑器类型。
image: z.object({
src: z.string().editor({ type: 'media' }),
alt: z.string()
}),
icon: z.string().editor({ type: 'icon' })