介绍Nuemark：直观的Markdown方言，用于丰富的交互内容

介绍Nuemark：直观的Markdown方言，用于丰富的交互内容 #

Nuemark是一种基于Markdown的文本编辑格式，用于丰富的互联网内容。它将内容置于核心，为Web开发带来（或回归）了以内容为先的方法：

内容为先的Web开发方法

内容为先的Web开发方法

所见即所得 #

Nuemark是一个独立的库，可以在Bun、Node和Deno下工作。然而，与Nue及其通用热重载 (opens new window)功能一起使用效果最佳。只需自由编辑内容，即可在浏览器中实时查看页面的形状。 Nue 提供了一个真正以内容为先的所见即所得（WYSIWYG）的体验。

图片来源: UI8 (opens new window)。谢谢！

像黑客一样管理内容（#manage-content-like-a-hacker "管理内容如同黑客"） #

Nuemark 可让您在没有像 WordPress 或 Contentful 这样庞大系统的复杂性的情况下，像黑客一样管理内容。相反，您将从软件开发的角度来处理内容：内容存储在 Git 中，并使用您喜欢的编辑器（如 VS Code 或 Sublime Text）进行管理。

Nuemark 专为内容创作而设计。它是一种简单、简洁的语法，易于学习。它是纯粹的内容，没有 HTML、CSS 或 JavaScript，因此很难出错。

[.stack]
  # 内容为王
  网页设计是100%的内容和95%的排版

  [button "了解更多" href="/docs"]
  ---
  [! typography.png ]

![应用了一些上下文特定样式后的内容] 以下是应用了一些特定上下文样式的内容

使用Nuemark，您从纯内容开始：文本、图像和视频，然后再进行布局和设计。通过以内容为先的思维方式开始，您将确保页面设计能够支持其中的内容。而不是反过来。

内置一组无头UI组件

Nuemark附带了一组内置组件，旨在解决最常见的内容管理用例。包括按钮、图标、响应式图像、视频、表格、选项卡和布局网格。您可以混合组件以形成更复杂的布局。

来自可安装演示的Nuemark内容

来自可安装演示的Nuemark内容

解耦设计

所有这些组件或“标签”都是无头UI组件，它们与具体的外观和样式解耦。 无广告_——意味着没有内联样式、CSS模块或实用类会影响它们的外观。组件的根元素上只有一个语义化的类名，用于给组件命名。否则，组件是无类的，仅由语义化的HTML元素组成。

语义化的方法意味着您可以自定义组件的外观和感觉，使其在给定的上下文中看起来完全符合要求。例如，标签布局在您的首页上可能与在文档区域上的外观完全不同：

相同组件，不同的CSS模块

相同组件，不同的CSS模块

这种以内容为先的方法使得传奇的CSS Zen Garden (opens new window)重新回到了游戏中。当您的组件始终具有相同的结构时，您可以在页面、应用程序、网站和项目中重复使用您的CSS。

由Web组件驱动 一些组件是_isomorphic_，这意味着内容在服务器端呈现，以便搜索引擎使用，并且组件的行为通过客户端JavaScript进行增强。 #

Nuemark使用标准的is属性 (opens new window)来告诉浏览器特定的HTML结构应该使用Web组件进行增强。例如，[tabs]组件的实现如下所示：

// 实现
class Tabs extends HTMLElement {
  constructor() {
    // 当组件被挂载时执行操作
  }
}

// 注册
customElements.define('nuemark-tabs', Tabs, { extends: 'section' })

这是一种现代/标准的实现方式，用于实现渐进增强 (opens new window)，在历史上通常使用jQuery等库来实现。

构建您自己的标签 您可以使用自定义标签扩展Nuemark。任何具有name属性和render()方法的JavaScript对象都是合法的Nuemark组件。以下是一个虚拟的TSX示例：

export function MyAlert(props: { color: string, message: string }) {
  return (
    <p style={{ color: color || 'red' }}>{ props.message }</p>
  );
}

以下是相同的Nue模板语法 (opens new window)示例：

<p @name="my-alert" style="{ color || 'red' }">{ message }</p>

详细信息请参阅Nuemark API文档 (opens new window)。

注意：目前只有Nue组件支持热重载。

为内容创作者开发网站(Permalink for "Develop sites for content creators") #

网站的主要目的是呈现内容。您希望提高对您的想法的认识，生成销售额，或仅仅分享信息。关键是，您的网站应该进行优化。 试试看现在

Bun (opens new window) 是 Nuemark 的推荐引擎：

# 安装 Bun（如果尚未安装）
curl -fsSL https://bun.sh/install | bash

# 安装网站生成器（Nuemark playground）
bun install nuekit --global

# 安装 Nuemark 演示（在此页面上可见）
bun create nue@latest

在最后一步选择“nuemark-demo”即可开始。

附：如果您更喜欢使用 Node，请查看入门文档 (opens new window)。

学习 Nuemark

常见问题 #

这与 MDX 有什么不同？ #

Nuemark 与之前的替代品 MDX 和 Markdoc 在以下方面不同：

  1. Nuemark 针对内容创作者。没有“可怕”的 JavaScript 表达式或导入语句会破坏页面的渲染。只需熟悉 Markdown 和 YAML 前置内容，即可创建丰富、交互式的内容。

  2. Nuemark 提供了丰富的内置组件，可以在标准 Markdown 中使用，也可以混合使用以形成更复杂的布局。任何现代网页都可以用 Nuemark 表达，使您的内容与编辑器清晰分离。 当您在Nue框架中编辑Nuemark时，您会实时在浏览器中看到页面更新，为内容创建者提供真正的所见即所得体验。

请查阅常见问题 (opens new window)以获取有关Nue的更多问题。

语法来自哪里？ #

Nuemark借鉴了WordPress短代码、TOML配置语言、YAML前置信息以及其他Markdown元素，如链接和图片。其目标是使熟悉Markdown的用户能够轻松上手，并引入尽可能少的新习惯用法。

什么是Nue？ #

Nue的终极目标是构建一个比_Vercel_、_Gatsby_和_Netlify_更简单但更强大的替代品。

我们可以在达到下一个里程碑时通知您：