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.
npm install --save metalsmith-html-relativeimport Metalsmith from 'metalsmith';
import relative from 'metalsmith-html-relative';
Metalsmith(__dirname)
.use(relative({
// options here
}))
.build((err) => {
if (err) {
throw err;
}
});Type: string Default: "**/*.html"
A micromatch glob pattern to find HTML files.
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.
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>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>