.. | ||
test | ||
.npmignore | ||
.travis.yml | ||
index.js | ||
LICENSE | ||
package.json | ||
README.md |
metalsmith-rootpath
Easily find the relative path to the root directory in your Metalsmith templates.
Makes relative-to-root links a breeze!
Install
$ npm install --save metalsmith-rootpath
Usage
var rootPath = require('metalsmith-rootpath');
Metalsmith(__dirname)
.use(rootPath())
.build(function(err) {
if (err) throw err;
});
Now you have a rootPath
value assigned to the metadata of the files in your Metalsmith build.
Examples
Let's assume you have a directory structure like this:
index.html
dir1/
index.html
dir2/
foo/
index.html
dir3/
foo/
bar/
baz/
index.html
The rootPath
values in each index.html
file would be:
File | rootPath |
---|---|
index.html | "" |
dir1/index.html | "../" |
dir2/foo/index.html | "../../" |
dir3/foo/bar/baz/index.html | "../../../../" |
Relative Links
Use the rootPath
variable anywhere you want to grab static files relative to your directory. rootPath
will
find the root folder no matter how many levels deep your templates are.
For example, if the following line of code where placed in dir3/foo/bar/baz/index.html
<link src="{{rootPath}}css/main.css" type="text/css" />
It would result in the following output:
<link src="../../../../css/main.css" type="text/css" />
Relative Navigation
This rootPath
variable is useful when building a relative navigation structure, for example, in your Handlebars
template partials/navigation.hbs
<ul>
<li><a href="{{rootPath}}about/">About Us</a></li>
<li><a href="{{rootPath}}awesome-page/">Awesome Page</a></li>
<li><a href="{{rootPath}}contact/">Contact Us</a></li>
</ul>
Important Notes
- I am using the Handlebars syntax in the above examples, but the
rootPath
value is assigned to every file's metadata, so it can be accessed just as easily with your template language of choice. - This plugin is only useful if your
build/
directory is identical to yoursrc/
structure. Meaning, none of the Metalsmith plugins you have on your build chain change the directory structure you have presented in yoursrc
folder.
License
MIT @ Michael Wuergler