In Eleventy v0.8.3, the slug
filter don't remove reserved characters for URL and HTML ids. This plugin aims at fixing that, replacing the standard slug
filter by a new one.
Uses the enhanced slug
filter to convert a string into a URL slug. Can be used in pagination or permalinks.
Removed characters: .~\:,;/?=#[]{}()@!'*+
Examples:
John's car
=>johns-car
10 O'Clock Live
=>10-oclock-live
E!
=>e
Me, Myself & I
=>me-myself-and-i
Add the plugin to your project with:
npm add @borisschapira/eleventy-plugin-better-slug --save
Then, in you .eleventy.js
file:
// At the begining of the file
const pluginBetterSlug = require("@borisschapira/eleventy-plugin-better-slug");
…
module.exports = function(eleventyConfig) {
…
eleventyConfig.addPlugin(pluginBetterSlug);
…
}
By design, this `slug' filter deletes all reserved characters but you can use a custom configuration to modify the characters to be deleted and even replace some characters.
const pluginBetterSlug = require("@borisschapira/eleventy-plugin-better-slug");
…
module.exports = function(eleventyConfig) {
…
const options = {
extensions: {
"'": "-"
}
}
eleventyConfig.addPlugin(pluginBetterSlug, {});
…
}
The options
object is defined as follows:
removals
(optional): a string containing the characters to remove (any value overwrites the default value)extensions
(optional): a charset of all the characters replacements (any new key-value pair is added to the default library)