eleventy-plugin-output-path v1.2.1
eleventy-plugin-output-path
An Eleventy plugin that adds an outputPath
filter to get outputPath
from inputPath
.
Installation
npm install eleventy-plugin-output-path
Add it to Eleventy config file (usually .eleventy.js
)
const outputPath = require("eleventy-plugin-output-path");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(outputPath);
};
Usage
This simple plugin adds a filter, outputPath
, that converts an inputPath
to an outputPath
.
The return value of outputPath
filter is not a file path, but the path part of a URL. (You must know
Eleventy's page
variable.
The return value of outputPath
filter is like the url
property of the
page
variable instead of the
outputPath
property of that.)
Suppose you have the following project (input
directory is src
and output
directory is dist
):
.
├── .eleventy.js
├── dist
│ ├── css
│ │ └── style-42df228b.css
│ └── index.html
│ └── some
│ └── nested
│ └── dir
│ └── file
│ └── index.html
└── src
├── index.md
├── scss
│ └── style.scss
└── some
└── nested
└── dir
└── file.md
The link tag to your CSS file will be the following:
<link rel="stylesheet" href="/css/style-42df228b.css" />
By using outputPath
filter, you can write the above link tag as follows:
<link rel="stylesheet" href="{{ "/scss/style.scss" | outputPath }}" />
You can also use relative paths. From src/index.md
:
<link rel="stylesheet" href="{{ "scss/style.scss" | outputPath }}" />
From src/some/nested/dir/file.md
:
<link rel="stylesheet" href="{{ "../../../scss/style.scss" | outputPath }}" />