metalsmith-html-relative
A Metalsmith plugin to convert to relative paths within HTML.
This will change href, src, and other tag attributes that reference local files (pages, CSS, JavaScript, images, etc.) to use relative links (e.g. ../static/css/styles.css) rather than absolute links (e.g. /static/css/styles.css). This allows your website to be more portable, it can exist in any kind of subdomain or subdirectory.
Installation
npm install --save metalsmith-html-relativeJavaScript Usage
const Metalsmith = require('metalsmith');
const relative = require('metalsmith-html-relative');
Metalsmith(__dirname)
.use(relative({
// options here
}))
.build((err) => {
if (err) {
throw err;
}
});Options
html (optional)
Type: string Default: "**/*.html"
A micromatch glob pattern to find HTML files.
tags (optional)
Type: object Default:
{
"a": "href",
"img": ["src", "data-src"],
"link": "href",
"script": "src",
"form": "action"
}An object of what tags and attributes to process for glob patterns.
Example HTML
Example Input
Given a file tree:
.
├── contact
│ └── index.html
├── index.html
└── static
├── css
│ └── styles.css
└── js
└── scripts.js
And the contents of contact/index.html are:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/static/css/styles.css">
</head>
<body>
<script src="/static/js/scripts.js"></script>
</body>
</html>Example Output
After this plugin is run, the output of contact/index.html will be:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<script src="../static/js/scripts.js"></script>
</body>
</html>