Menu
Eleventy
1.93s
Next.js
70.65s
插件是 Eleventy 可以从外部仓库导入到项目中的自定义代码。
官方插件列表 Jump to heading
所有官方插件都是用 @11ty
组织名,并且插件名称都包含 @11ty/
前缀。
- Edge: A plugin to run Eleventy in an Edge Function to add dynamic content to your Eleventy sites.
- Serverless: A plugin to run Eleventy in a serverless function for server side rendering (e.g. Previews in your CMS) and/or in very large sites with On-demand Builders.
- Image: A utility to resize and generate images.
- Fetch: A utility to fetch and cache network requests.
- Partial Hydration
<is-land>
: A plugin to smartly and efficiently add client-side components to your web site. - Render: A plugin to add shortcodes to render an Eleventy template string (or file) inside of another template.
- RSS: Generate an Atom feed to allow others to subscribe to your content using a feed reader.
- Internationalization (i18n): Utilities to manage pages and linking between localized content on Eleventy projects.
- Syntax Highlighting: Code syntax highlighting using PrismJS without client-side JavaScript.
- Navigation: A plugin for creating hierarchical navigation in Eleventy projects. Supports breadcrumbs too!
- HTML
<base>
: Emulate the<base>
element by adding a prefix to all URLs in.html
output files. - Directory Output: A plugin to group and sort console output by directory, with file size and benchmarks.
- Inclusive Language: A plugin to check for inclusive language in markdown files.
社区贡献的插件 Jump to heading
在 npm
上查看所有带有 eleventy-plugin
标签的软件包。以下列表是由社区添加到此网站的(没有排列顺序)。 你的插件也可以添加哦!
- eleventy-plugin-metagen will generate metadata for Open Graph, Twitter card, generic meta tags and a canonical link.
tannerdolby
- eleventy-plugin-reader-bar adds a reader bar as you scroll through the page.
thigoap
- eleventy-plugin-postcss Easy to use modern Eleventy plugin for PostCSS prepreprocessor
- eleventy-favicon Generates your favicon files and declarations from a single image source
atomrc
- eleventy-njk-unpkg-inliner Inline npm modules from unpkg in Eleventy Nunjucks templates.
jaredgorski
- eleventy-plugin-i18n-gettext adds i18n support with Gettext string translation and moment.js date and times localization.
sgissinger
- eleventy-plugin-lazyimages will add progressive lazy loading to your images.
- eleventy-plugin-torchlight Plugin to syntax highlight your code blocks with torchlight.dev.
timkley
- @tigersway/eleventy-plugin-ancestry Real hierarchical navigation, following folders and documents.
tigerswaynet
- eleventy-plugin-add-web-component-definitions will add Web Component definitions automatically, by reading custom tags from HTML pages.
jdvivar
- eleventy-plugin-hubspot will generate HubSpot forms or meeting calendars.
reatlat
- eleventy-plugin-embedded-demos A plugin for eleventy that allows you to have embedded demos using HTML, CSS and JavaScript, as well as having the code from those demos displayed in the page.
CodeFoodPixels
- eleventy-plugin-unified Use the unified ecosystem in Eleventy with remark and rehype.
NickColley
- eleventy-plugin-link_to a nunjucks tag to link to another internal content in Eleventy
nhoizey
- eleventy-plugin-toc will generate a table of contents from your headings.
jdsteinbach
- eleventy-plugin-reading-time will generate a tag for the estimated reading time.
johanbrook
- @11tyrocks/eleventy-plugin-emoji-readtime provides a configurable filter to display an estimated read time for Eleventy content, optionally with an emoji visual indicator.
5t3ph
- eleventy-plugin-i18n will add a clever
i18n
universal filter to assist with internationalization and dictionary translations.duncanadam
- @silexlabs/eleventy-plugin-directus Expose Directus collections as global data in 11ty
lexoyo
- eleventy-load brings webpack-like loaders to Eleventy
gregiv_es
- eleventy-plugin-inline-link-favicon Add an inline favicon image to a link.
bmuenzenmeyer
- eleventy-plugin-code-style-hooks Syntax highlighter supporting CSS colour previews in all template languages with no client side JS.
jkc_codes
- eleventy-plugin-gen-favicons From a single svg or image, generate "the ultimate favicon setup" with all six commonly used icons plus a webmanifest using 2022 best practices.
njaldwin
- eleventy-plugin-ghost Access the Ghost Content API in Eleventy 👻
DavidDarnes
- eleventy-plugin-slide-decks 🎵 It makes an itsy-bitsy, teeny-weeny, web-component slide deck prezzy 🎶. 🎚️ Write slide decks with 11ty and share them over the web 🎴.
@bp@bennypowers.dev
- @inframanufaktur/eleventy-plugin-clean-urls Removes those pesky
utm_bla
orfbclid
tracking params from all external links in your HTML._ovlb
- wikity Wikitext as a templating language, with built-in Eleventy support.
Nixinova
- eleventy-xml-plugin adds Liquid filters used for sitemap and RSS/feed file generation.
jeremenichelli
- @sardine/eleventy-plugin-tinysvg An 11ty plugin to minify and optimise SVG
marabyte_
- @shawnsandy/npm_info will provide you with package detail for an npm package or GitHub info.
- eleventy-sass Yet another Sass/SCSS plugin for Eleventy
kentaroi
- @mightyplow/eleventy-plugin-cache-buster will add content hashes to JavaScript and CSS resources.
mightyplow
- eleventy-postcss-extension Add CSS processing with PostCSS to your Eleventy build.
- @quasibit/eleventy-plugin-schema adds a shortcode for generating JSON-LD structured data.
nunof07
- eleventy-plugin-time-to-read A reading time calculator supporting output in hundreds of languages.
jkc_codes
- eleventy-plugin-json-feed adds a Nunjucks shortcode for outputing a JSON feed.
genehack
- eleventy-plugin-dart-sass Build, watch and template tags for Sass stylesheets via Dart Sass. Includes CSS code splitting and source maps.
chronotope
- eleventy-multisite Add multi-site building support for Eleventy
bnoctis
- eleventy-plugin-responsive-images adds a shortcode to take care of the
srcset
attribute for responsive images via Cloudinary and all otherimg
attributes.adamculpepper
- eleventy-plugin-drawio embed diagrams.net (.drawio) diagrams in your pages
kev4ev
- eleventy-plugin-unfurl Unfurl links into rich 'cards', as seen in places like Slack and Twitter
DavidDarnes
- eleventy-plugin-plausible Add the Plausible analytics script tag with a shortcode and remove some of the worry
gingerchew
- @code-blocks/eleventy-plugin Use markdown code blocks to render: charts, graphviz diagrams, MathML, music sheets, HTML tables and highlight code.
idrismaps
- eleventy-plugin-ignore Ignore templates based on their front matter.
TheDocTrier
- eleventy-plugin-recent-changes will generate a collection containing your recent commit history.
defaced
- eleventy-plugin-emoji An accessible emoji shortcode and filter for your Eleventy projects
snmcp
- @grimlink/eleventy-plugin-sass Simple 11ty config wrapper, for running Sass directly as custom template
grimlink
- eleventy-plugin-find A utility filter to find array members that match a set of rules, helpful for hoisting data from one template to another.
ashur
- eleventy-plugin-svg-sprite will compile a directory of SVG files into a single SVG sprite and install shortcodes to embed SVG sprite and SVG content
Patrick153
- @resoc/eleventy-plugin-social-image adds automated social images based on HTML & CSS templates and generated at access time by a Netlify on-demand builder
ph_bernard
- eleventy-plugin-pwa will generate a Service Worker for you.
okitavera
- eleventy-plugin-react-ssr Write your static content using React SSR (JSX) and transform it using Babel
@scinos
- eleventy-plugin-img2picture replaces <img> using <picture> with resized and optimized images.
saneef
- eleventy-plugin-code-demo Add interactive HTML/CSS/JS code demos to an Eleventy site using Markdown code blocks.
hovhaDovah
- eleventy-plugin-babel Compiles JS with gulp-babel.
- @quasibit/eleventy-plugin-sitemap adds a shortcode for generating a sitemap.
nunof07
- eleventy-plugin-typeset will make your typography nicer.
johanbrook
- eleventy-plugin-plantuml allows processing of Plantuml markdown code blocks into beautiful diagrams
awaragi
- @orchidjs/eleventy-plugin-ids Add ids to html headings and other elements
oyejorge
- eleventy-plugin-cloudinary adds a universal shortcode allowing you to add images from your cloudinary account.
juanfernandes
- eleventy-plugin-automatic-noopener Automatically add rel='noopener' attributes to unsafe <a>, <area> and <form> elements.
jkc_codes
- @sardine/eleventy-plugin-tinyhtml An 11ty plugin to optimise HTML
marabyte_
- eleventy-google-fonts A Nunjucks shortcode to optimize Google Fonts. This shortcode download and inline Google Font's CSS.
takanorip
- eleventy-plugin-page-assets Automatically copy images and assets relative to a template to /dist folder and rewrite paths to hashes (Similar to webpack html-loader, or Hexo Post Asset)
- eleventy-plugin-tailwindcss will add Tailwind CSS support for your website.
dafiulh
- toc-extract extracts a table of contents from HTML, with emphasis on separation of concerns and flexibility.
- @grimlink/eleventy-plugin-lucide-icons This Eleventy plugin enables the inclusion of lucide-icons as inline SVG elements
grimlink
- eleventy-plugin-sass will add the ability to use Sass for your stylesheets.
- eleventy-plugin-feathericons Shortcode, allows feather-icons to be embedded as inline svg into templates.
reatlat
- eleventy-hast-jsx use JSX as a template language
jed_fox1
- eleventy-plugin-pwa-v2 generates PWA service worker using Google Workbox v6, compatible with Eleventy 2.0 and up
lwojcik
- @factorial/eleventy-plugin-twig Add Twig templating engine to Eleventy with the help of twig.js
dnnsjrng
- markdown-it-eleventy-img A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that use markdown-it. Fully compatible with Eleventy!
@huot_mathieu
- eleventy-plugin-sharp-respfigure will perform build-time image transformations with Sharp and generate responsive image markup inside <figure> tags.
tannerdolby
- eleventy-img-helper Adds responsive images to any template's output using eleventy-img, configurable with CSS selectors.
AlexDueppen
- eleventy-plugin-helmet will manage your document head.
vseventer
- eleventy-plugin-images-responsiver allows authors to use the simple and standard Markdown syntax for images and yet get responsive images in the generated HTML, with srcset and sizes attributes.
nhoizey
- eleventy-plugin-heroicons Shortcodes to add Heroicons to your Eleventy projects
snmcp
- eleventy-plugin-markdown-shortcode adds a universal shortcode to render markdown.
tylerwilliamsct
- @aaashur/eleventy-plugin-classnames Conditionally join class names using a filter or shortcode, inspired by the 'classnames' package by JedWatson
ashur
- eleventy-plugin-backlinks Collect and display backlinks from your notes.
binyamin
- eleventy-plugin-social-share-card-generator Automagically creates a share card for social media platforms
tpiros
- eleventy-nbsp-filter Filter for Eleventy to replace spaces between words with characters.
jeremenichelli
- eleventy-plugin-target-safe Link tags with the target attribute may need a rel attribute. This plugin does that for you automatically.
gingerchew
- eleventy-plugin-social-img will generate social share images at build-time and return an image URL.
tannerdolby
- eleventy-plugin-git-commit-date to get recent Git commit time of a file, or an Eleventy collection.
saneef
- eleventy-plugin-redirects Automatically generate a Netlify _redirects file, a Vercel vercel.json config file, or pages with client-side redirects from frontmatter aliases.
@type__error
- eleventy-plugin-html-validate Validate your site's HTML on build.
mattatt4ck
- @factorial/eleventy-plugin-fstack Linting, building and watching your assets with as little overhead and configuration as possible by integrating @factorial/stack-core
dnnsjrng
- eleventy-plugin-sharp-respimg will perform build-time image transformations with Sharp and generate responsive image markup using <picture>.
tannerdolby
- eleventy-plugin-mtos A plugin for Eleventy that turns your site into a single page application.
satireven
- eleventy-plugin-shopify Import your Shopify products, pages, and collections into Eleventy as global data.
danleatherman
- @infinity-interactive/eleventy-plugin-injector allows you to run an arbitrary callback at build time or when using
--serve
or--watch
genehack
- eleventy-plugin-asciidoc to add support for AsciiDoc files.
saneef
- @sardine/eleventy-plugin-external-links An 11ty plugin to protect you external links.
marabyte_
- eleventy-critical-css extracts and inlines critical CSS from your HTML templates
gregiv_es
- eleventy-plugin-webmentions A plugin for eleventy to fetch and filter webmentions from Webmention.io.
CodeFoodPixels
- eleventy-filter-npm-package-downloads will show you the number of downloads for the given npm package.
AndreJaenisch
- eleventy-plugin-sharp will add the full power of Sharp's image processing to your templates.
luwes
- eleventy-plugin-edit-on-github An Eleventy shortcode to add an "Edit on Github" link to your pages.
christopherpickering
- eleventy-plugin-broken-links A plugin to check your build for broken external links and redirects
bradleyburgess
- eleventy-plugin-respimg will take care of the
srcset
attribute for responsive images for you.etportis
- eleventy-plugin-purgecss will remove unused CSS using PurgeCSS.
proog
- eleventy-plugin-green-links Checks all links on a website and returns those which are hosted on verified green hosting providers from The Green Web Foundation's Green Web dataset.
fershad
- eleventy-plugin-rollup Allows you to build js bundles directly from your templates using rollup.
Snapstromegon
- @johnwargo/eleventy-plugin-post-stats Adds a post statistics collection to a site you can use to generate a table or graph of posts over time as well as average days between posts.
johnwargo
- @vidhill/fortawesome-brands-11ty-shortcode Shortcode, allows @fortawesome/free-brands-svg-icons to be embedded as inline svg into templates.
- @pcdevil/eleventy-plugin-intl-utils a set of internationalization utils
pcdevil
- eleventy-plugin-pdfembed A shortcode to simplify usage of Adobe's PDF Embed API
raymondcamden
eleventy-plugin-yamldatawill allow you to use a yaml file as local data file.This plugin has been superceded by Eleventy Custom Data Formats.- eleventy-plugin-vidyard generate embeds responsive Vidyard videos from share URLs.
reatlat
- eleventy-plugin-mathjax A plugin for rendering math equations using MathJax.
- @vidhill/fortawesome-free-regular-11ty-shortcode Shortcode, allows @fortawesome/free-regular-svg-icons to be embedded as inline svg into templates.
- @sardine/eleventy-plugin-code-highlighter An 11ty plugin to style your <code> with Prism.js
marabyte_
- eleventy-plugin-nesting-toc will generate a nested table of contents from your site's headings.
- @fec/eleventy-plugin-remark Process Markdown files with Remark and use Remark plugins to add new features to your Markdown.
- @chrisburnell/eleventy-cache-webmentions Cache webmentions using eleventy-cache-assets and make them available to use in collections, templates, pages, etc.
iamchrisburnell
- eleventy-plugin-embed-everything Automatically embed YouTube, Vimeo, Spotify, Twitter, and more, based on just their URLs.
gfscott
- eleventy-plugin-og-image Generate OG images from your templates, data and CSS. Fast and reproducible – no need for a headless browser.
KiwiKilian
- eleventy-plugin-footnotes will help rendering accessible footnotes with Liquid.
KittyGiraudel
- @sardine/eleventy-plugin-tinycss An 11ty plugin to inline and optimise CSS
marabyte_
- Add your own!
安装插件 Jump to heading
利用 npm 安装插件。 Jump to heading
npm install @11ty/eleventy-plugin-rss --save
在配置文件中为 Eleventy 添加插件 Jump to heading
假设你的配置文件名为 .eleventy.js
。
Filename .eleventy.js
const pluginRss = require("@11ty/eleventy-plugin-rss");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pluginRss);
};
插件的配置参数 Jump to heading
为 addPlugin
函数设置第二个参数(可选)来自定义插件的行为。这一参数是特定于插件的。请查阅相应插件的文档 (例如,eleventy-plugin-syntaxhighlight
的 README 文件) 以了解其支持哪些参数。
const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pluginSyntaxHighlight, {
// only install the markdown highlighter
templateFormats: ["md"],
init: function({ Prism }) {
// Add your own custom language to Prism!
}
});
};
为插件添加命名空间 Jump to heading
你可以利用 eleventyConfig.namespace
函数为部分配置分配命名空间。这将为所有过滤器(filters)、标签(tags)、助手(helpers)、快捷方式(shortcodes)、集合(collections)以及转换(transforms)添加前缀。
Filename .eleventy.js
const pluginRss = require("@11ty/eleventy-plugin-rss");
module.exports = function(eleventyConfig) {
eleventyConfig.namespace("myPrefix_", () => {
// the rssLastUpdatedDate filter is now myPrefix_rssLastUpdatedDate
eleventyConfig.addPlugin(pluginRss);
});
};
WARNING:
插件的命名空间是 Eleventy 赋予网站程序的功能,不能用在你自己创建的插件(配置)中。请查看 Issue #256。