CodePen 项目的“能做”

我们最近推出了 项目，这是 CodePen 上最新的重大功能。它与 Pen 编辑器有很大不同，所以让我们来看看它可以做些什么！

完整的文件系统和完整的 HTML 文件

使用 CodePen 项目，您将获得一个文件侧边栏，您可以将任何喜欢的文件放到其中。

这与 CodePen 上的 Pen 编辑器不同，Pen 编辑器只提供 HTML、CSS 和 JavaScript 编辑器供您使用。虽然这对许多类型的演示非常方便，但它也可能有限制。如果您需要多个 HTML 文件相互链接怎么办？如果您需要部分内容根据需要包含怎么办？如果您需要上传其他文件仅用于此演示怎么办？

使用项目，您可以完全控制整个文件结构。根据需要创建文件和文件夹。HTML 文件是完整的文档，因此您不会像在 Pen 编辑器中那样受限于我们的样板 HTML 结构。

拖放上传

如果您在本地机器上有一个想要上传到 CodePen 并使用它的文件，那就再简单不过了。项目的侧边栏支持拖放操作！

例如，这使得导出仓库并将其移至 CodePen 进行操作变得非常容易。这些文件可以是 HTML、CSS、JavaScript、我们支持的任何预处理器类型、图像、字体以及许多其他类型的资产。它确实限制了某些文件类型的上传（例如，PHP 等后端语言），以明确 CodePen 项目支持和不支持的内容。

使用部分处理 Sass（或许多其他预处理器）

您是否喜欢将变量声明保存在单独的文件中？也许您也会将布局 CSS 分离到自己的文件中。使用部分是任何 CSS 预处理器的超级有用部分！

这是一个我喜欢的使用方法示例

您可以通过在侧边栏中打开“processed”文件来查看编译版本。但是，它会阻止您编辑已处理的文件，因为下次预处理器编译时，您将丢失更改。

使用 HTML 包含构建多页网站

CodePen 项目提供了两种可以进行 HTML 包含的预处理语言：Pug 和 Nunjucks。

在 Pug 中，您使用 include file.pug（其中 file.pug 是任何其他 Pug 文件的文件路径），它会获取该文件并将其包含在内。

这使得将文件的一部分拼凑成完整的 HTML 文档变得容易，从而使多页网站更容易构建。您还可以使用 block 语法将 HTML 结合在一起，这使您能够制作一个模板，其中任何“扩展”它的文件都可以传入将替换这些区域的内容块。

在 Nunjucks 中，语法类似于 {% include "components/mini-header.njk" %}，并且工作方式完全相同。它会获取该文件并将其放置在调用它的文件中。Nunjucks 也不像 Pug 那样依赖于空格，它只是普通 HTML 的扩展。

使用 Nunjucks 创建模式库

这可能需要一整篇文章（很快！），但说到 Nunjucks，Nunjucks 有“宏”的概念，它有点像包含，只不过您可以向它传递参数。它是一个非常简单的语法

现在假设您想加载该宏并在其他地方使用它。

{% import "pattern/_colors.njk" as macroColors %}

假设我们正在为模式库构建颜色色板。我们可以将颜色（带注释）定义为数组，然后循环遍历它，使用数据调用宏。

这是强大的功能！调用此 HTML，传递这些参数，并根据需要将这些参数散布到 HTML 中。这对各种情况都很有用。想象一下一个模态对话框，您需要在其中传入标题和内容，以及用于定义样式的类，或用于确定是否应显示某些按钮的值。

使用 Webpack 的 ES6 包含

假设我有一个小助手函数，您向它传递一段 HTML 字符串，它会返回一个真正的 DOM 节点。在 ES6 中，我们可以导出这样的函数，以便其他 JavaScript 文件可以将其导入为依赖项

export function getNodes(str) { 
  return new DOMParser().parseFromString(str, 'text/html').body.childNodes;
}

然后在任何想要使用它的文件中

import { getNodes } from "./helpers";

这 刚刚开始 在浏览器中原生实现，但大多数情况下，这种事情是由 Webpack 处理的，它将所有内容捆绑在一起。而且这通常与 Babel 配合使用，因此您可以全面使用 ES6 语法。

您可以在 CodePen 项目中自由地使用任何一种方式。如果您希望浏览器原生执行操作，则保持不变；或者切换开关并打开 Webpack 和 Babel 处理。

您也可以使用 Typescript。我们已经看到了一些使用 花式操作 的示例，这些示例使用 SystemJS 与 Typescript 结合使用，并最终直接从 npm 导入依赖项。

自动格式化的 Markdown

您的项目有 README 吗？也许还有自己的待办事项清单？您不仅可以在 CodePen 项目中使用 Markdown 编写，而且预览窗口还会对其应用一些样式，以便您以与 CodePen 上任何其他博客文章类似的格式查看它。

您也可以打开文件的已处理版本以查看已处理的 HTML，而没有任何其他影响。

拥有项目的开发版本和部署版本

随时，您可以单击部署并打开此对话框，该对话框允许您将项目部署到一个特殊的 URL

这是一个您可以与任何人共享的公共 URL。它没有任何 CodePen UI 或影响。它只是您文件的直接副本，托管在世界范围内供所有人查看。您可以将其用于测试、向客户展示或您喜欢的任何用途。

这里很重要的一点是，它就像现实世界中的部署一样。您可以继续处理您的项目，保存它并根据自己的喜好进行更改，这不会影响已部署的版本。它实际上成为您的开发版本。然后，您可以在任何时候再次进行部署。

您进行部署的次数没有限制，只有已部署项目的数量限制。

为您的项目使用自定义域名

您可能已经注意到已部署网站的 URL 有点奇怪。我们希望将来能允许您自定义它，但现在可以做到的是（而且实际上更好），可以使用您拥有的自定义域名指向您已部署的项目。

这需要更改 DNS “A 记录”（文档）以指向我们为此目的设置的几个特殊 IP 地址。

在传播之后，并且我已经部署了项目，它就可以通过我的自定义域名访问了！

请注意，该示例使用 HTTPS。这不是自动提供的，但在这种情况下，我设置了 CloudFlare，将我的域名名称服务器指向 CloudFlare，然后将 CloudFlare 中的 A 记录指向 CodePen 的 IP。免费的 HTTPS！这意味着我可以使用需要 HTTPS 的现代 JavaScript 功能，例如 `getUserMedia` 或注册服务工作者。

使用 Vim 键绑定

当然可以。这是 CodePen 中一个用户设置，它会跟随您进入所有不同的编辑器。如果您喜欢 Sublime Text，您也可以选择模仿 Sublime Text 的键绑定。

我之所以指出这一点，是因为这只是使用 CodePen 工作的众多微不足道的小功能之一。还有很多其他功能，例如

• 自动完成
• Emmet
• 语法高亮主题选择
• 制表符/空格选择以及深度
• 字体和大小选择
• 换行（或不换行）
• 行号（或没有行号）
• 匹配括号（或没有匹配括号）
• 等等！您可以根据自己的喜好设置代码编辑器的各种选项。

从模板开始

当您启动一个全新的项目时，我们已在侧边栏中预先填充了许多选择

您当然不必从该列表中选择模板，但如果您要构建的内容使用了这些技术，它可能有助于您了解事情或加快速度。我们希望最终能提供大量模板供您开始使用。如果您构建了一个有趣的模板，请告诉我们！

您也可以轻松地构建自己的模板。在任何项目中，在设置中打开模板切换

现在，无论何时启动新项目，该模板都可用

当然，您也可以分叉您在 CodePen 上找到的任何公开项目！

… 以及（敬请期待）更多内容

以下是一些我没有机会告诉您的内容的不完整列表：搜索外部资产、整理代码、分析代码、导出、共享（喘不过气来）、全局资产、键盘快捷键或所有不同的视图！

最后，我鼓励您查看我们的项目着陆页并查看文档。