@11tyrocks/eleventy-plugin-open-in-codepen 中文文档教程

Question

Eleventy Plugin: "Open in Codepen"

为代码演示添加“在 CodePen 中打开”功能的 Eleventy 简码。

Usage

首先，安装包：

npm install @11tyrocks/eleventy-plugin-open-in-codepen

然后，将其包含在您的 .eleventy.js 配置文件中：

const openInCodepen = require("@11tyrocks/eleventy-plugin-open-in-codepen");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(openInCodepen);
};

要使用短代码，请传递包含 title、的预期属性slug、css 和 html。

在模板的上下文中，slug 等同于 Eleventy 提供的 page.url 变量。

您可以使用模板语言功能为 css 和 html 设置变量。 例如，Nunjucks 的 {% set css %}[CSS code]{% endset %}。

{% postToCodepen "Pen Title", page.url, css, html %}

有关包含如何设置所需演示数据的扩展示例，请查看此 11ty Rocks 教程。

Config Options

Option	Type	Default
siteUrl	string	https://codesampledomain.dev
siteTitle	string	Example Site
siteTag	string	codesampledomain
buttonText	string	Open in CodePen
buttonClass	string	open-in-codepen-button
buttonIconClass	string	open-in-codepen-icon
preDemoCSS	string	see below

默认的 preDemoCSS 是 Andy Bell 的Modern CSS reset 的缩减示例：

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: system-ui, sans-serif;
}

/* Make images easier to work with */
img {
  display: block;
  max-width: 100%;
}

Config Example

这里是添加带有配置选项集的插件的示例：

eleventyConfig.addPlugin(openInCodepen, {
  siteUrl: "YourSite.dev",
  siteTitle: "Your Site",
  siteTag: "yoursite",
  buttonClass: "your-button-class",
  buttonIconClass: "your-button-icon-class",
});