Fuzzy Paths
Syntax
- Fuzzy paths
- Variables
- Conditionals
- File imports
- Resource linking
- Reference
The <!-- @path PATH --> directive will output a relative path to the nearest file or folder that matches the passed "PATH" in your project.
For instance, if you want to display the image "cute-kittens.png" you can use this code:
<img src="<!-- @path cute-kittens.png -->" />This is useful not only because you do not need to remember the relative path to the file, but also because if you move either the image or the HTML file linking to it, Dynamo will silently update the path.
The @path directive also supports basic wildcards (*).
Relative paths
If you have multiple files with the same name, the @path directive will look for the closest on to your current file. If you wish to select a different file of the same name, you can use relative (../) or root-relative (/) links instead.
For instance, if you have multiple "about.html" files in your tree, this will link to the one in the root of the project:
<!-- @path /about.html -->Optional file extensions
When working with HTML or formats that automatically generate HTML (such as Markdown), file extensions are optional. For example, if you have a file called "index.md", you can simply link to "index":
<!-- @path index -->And it will correctly output "index.html". The same applies to CSS and JavaScript files, if you are generating them from SCSS, LESS, or CoffeeScript.
If you need to distinguish between identically named files and folders, simply append a trailing slash for the folder:
<!-- @path about/ --> (outputs "about")
<!-- @path about --> (outputs "about.html")Automatic CSS path parsing
For CSS files, Dynamo will automatically parse paths without the need for any special syntax. For instance, background-image: url(background.png) will output as background-image: url(../images/background.png) in the final file.