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.
