Copy local page assets to permalink folder
Available on npm
npm install eleventy-plugin-page-assets --save-devOpen up your Eleventy config file (probably .eleventy.js) and use addPlugin:
FILENAME .eleventy.js
const pageAssetsPlugin = require('eleventy-plugin-page-assets');
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pageAssetsPlugin, {
mode: "parse",
postsMatching: "src/posts/*/*.md",
});
};This folder structure
📁 src/posts/
📁 some-title/
📄 index.md <-- when a template file is processed
🖼 cover.png assets relative to it are automatically
🖼 image.jpg copied to the permalink folder
📁 good-title/
📄 index.md
🖼 cover.png
📁 bar-title/
📄 index.md
📁 icons/
🖼 icon.png
📄 my-post.md
🖼 img.png
Will generate this output
📁 dist/
📁 perma-some-title/
📄 index.html
🖼 89509eae15a24c2276d54d4b7b28194a1391ee48.png
🖼 63d8ddb9ffadd92e3d9a95f0e49ae76e7201a672.jpg
📁 perma-good-title/
📄 index.html
🖼 d0017352f4da463a61a83a1bc8baf539a4c921c1.png
📁 perma-bar-title/
📄 index.md
🖼 faa22a543b2dcb21fdd9b7795095e364ef00d540.png
📁 perma-my-post/
📄 index.md
🖼 faa22a543b2dcb21fdd9b7795095e364ef00d540.png
On directory mode the template is not parsed, assets on the same level as template are copied to the permalink folder, even if not used.
Note: Paths are not rewritten and folder structure is kept inside the perma folder.
This mode is cheaper as it does not parses the html or transforms it.
| Option | Required | Type | Default | Description |
|---|---|---|---|---|
| mode | false | string | parse | Parse mode will resolve assets referenced inside the template. Directory mode blindly copies files on the folder as the template. |
| postsMatching | false | string | "*.md" | Pattern (glob) filtering which templates to process |
| assetsMatching | false | string | ".png|.jpg|*.gif" | Specify a pattern (glob) that matches which assets are going to be resolved |
| recursive | false | boolean | false | Recursively scan assets under subdirectories (example src/posts/foo/bar/baz/img.jpg) (directory mode only) |
| hashAssets | false | boolean | true | Rewrite filenames to hashes. This will flatten the paths to always be next to the post .html file. (parse mode only) |
| hashingAlg | false | string | sha1 | Hashing algorithm sha1|md5|sha256|sha512 https://nodejs.org/api/crypto.html#crypto_crypto_createhash_algorithm_optionsetc (parse mode only) |
| hashingDigest | false | string | hex | Digest of the hash hex|base64 (parse mode only) |
| addIntegrityAttribute | false | boolean | false | Add a integrity attribute to the tag (parse mode only) |
- Parse the rendered html files looking for assets, and only used imported assets (similat to how what webpack loaders work)
- Rewrite paths on the output files, possibly renaming files to md5 hashes, so images also have permalinks.
- Write tests
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent