Вы когда-нибудь задумывались, как опустить часть имени файла из URL-адреса или как обеспечить базовую навигацию по папкам при создании микро/статического сайта?
Example
- http://ashishuideveloper.in/2017/12/folder-based-navigation-handlebar-static-blog/
Для этого нам нужно будет создать папку с таким же именем, как у файла, а затем создать в ней файл index.html или default.html. Но создавать папку с тем же именем файла, а затем создавать индексный файл в каждой папке скучно.
Я предполагаю, что вы знакомы с хрюканьем и рулем.
grunt-сборка-постоянные ссылки
grunt-assemble-permalinks — это плагин для Grunt, который помогает создавать навигацию по папкам, см. ниже код, который создает имя папки из имени файла и переименовывает имя файла в 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/' } }
Значение Structure в объектах permalinks
творит чудеса и создает путь, который нам нужен.
- :year — получит текущий год
- :month — получит текущий месяц
- :basename — получит имя файла .hbs и создаст папку с именем, переименует файл .hbs с индексом и скопирует его в папку.
Мы можем добавлять/удалять или манипулировать значением, чтобы получить желаемую структуру, и плагин будет работать так, как требуется.
Я создал простую структуру руля, чтобы получить навигацию по папкам, и загрузил ее в bitbucket. Не стесняйтесь раскошелиться или скачать и использовать его.
Я использовал диспетчер задач Grunt для этого примера, но вы также можете использовать gulp или yeoman и использовать плагин grunt-assemble-permalinks
для создания собственных желаемых постоянных ссылок.
Надеюсь, это поможет!
Дайте мне знать, что вы думаете об этой статье в поле для комментариев ниже.
Первоначально опубликовано на ashishuideveloper.in 26 декабря 2017 г.