Вы когда-нибудь задумывались, как опустить часть имени файла из 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 г.