Ever wondered how to omit the file name part from the URL or how to have folder base navigation while making a micro/static site?
Example
- http://ashishuideveloper.in/2017/12/folder-based-navigation-handlebar-static-blog/
To do this we will have to create a folder name same as the file and then create a index.html or default.html file in it. But it is a boring process to create folder with the same name of the file and then create index file in each folder.
I am assuming your familiar with grunt and handlebars.
grunt-assemble-permalinks
‘grunt-assemble-permalinks‘ is a plugin for Grunt which helps to create folder based navigation, please see below the code which create a folder name from a file’s name and rename the file’s name to index.html
assemble: { options:{ plugins: ['grunt-assemble-permalinks'], // This is the plugin to use for folder structure navigation assets: 'siteware', data: ['source/data/**/*.json'], layoutdir: 'source/templates/layouts', flatten: true, layout: 'default.hbs', partials: 'source/templates/modules/*.hbs', permalinks: { structure: ':year/:month/:basename/index.html', } }, page: { options: { layout: 'pages.hbs' }, expand: true, cwd: 'source/templates/pages', src: ['**/*.hbs'], dest: 'source/' } }
Value of Structure in the permalinks
objects do the magic and create a path as we need.
- :year – will get the current year
- :month – will get the current month
- :basename – will get the .hbs file name and create a folder with the name and rename the .hbs file with index and copy it in the folder.
We can add/remove or manipulate the value to get the desired structure and the plugin will work as required.
I have created a simple handlebar structure to get the folder based navigation and uploaded it to bitbucket. Feel free to fork or download and use it.
I have used Grunt Task Manager for this sample but you can use gulp or yeoman as well and use the grunt-assemble-permalinks
plugin to create your own desired permalinks.
Hope this helps!
Do let me know what you think about this article in comment box below.