Переходы на многостраничном сайте?

Question

[Иван Филипов]

Как грамотно реализовать переход по ссылкам для многостраничного сайта?Допустим, есть секция с карточками товаров. При клике на img пользователь переходит на ссылку с новой html страничкой того товара, который он выбрал. Если в данный момент товаров не очень много, имеет место быть просто повесить на каждое изображение href с ссылкой на страничку.Но, если же у нас каталоги будут масштабироваться, то прийдётся опять переписывать все элементы "a". Или же лучше через js повесить слушатель события на клик или тач в зависимости от устройства и доставать название выбранного товара и далее уже этот полученный string из id или alt использовать для открытия нужной странички?И так же интересует создание этих самих страничек.Как я понимаю, прийдётся для каждого товара свой html файл создавать?Css для них можно в main файле задать, как я понимаю.Этот момент как-то можно автоматизировать? Хотелось бы услышать мнение опытных людей, как сделать лучше и грамотней.

Answer 1

[Егор Живагин]

Ох, я постараюсь тезисно

Вам нужен чуть более умный бэкенд (можно на любом языке, включая Node.js)
Вместо html-файлов вы пишите шаблоны. Если у вас нода+Express.js, у него вроде был встроенный шаблонизатор ejs, есть ещё pug и много других (гуглить по Node шаблонизаторы). Если у вас на фронте React/Angular/View - лучше погуглить "название-библиотеки server side rendering", шаблонизация в них встроена

Абстрактно, ваш бэкенд получает запрос, идёт в базу данных или какой-нибудь JSON-файл за данными, а потом передаёт эти данные в шаблонизатор

В шаблонах можно использовать циклы, условия и разные другие плюшки из программирования. Вам не нужно писать 10 тэгов "a" для вывода списка, ваш список - стандартный массив, вы проходитесь по нему циклом и выводите данные в тэг "a". Условно:

myItems.map(item => (
<a href={item.link}>{item.text}</a>
))

Нужно поменять что-то в ссылках - меняете в одном месте
Нужно добавить товар или другие сущности - добавляете их данные в базу или JSON

Answer 2

[Антон Антон]

помимо варианта с бэкэндом есть еще генераторы статических сайтов, которые на основе шаблонов сгенерят папку для размещения на хостинге, и там можно в виде json положить "товары" и сгенерируется необходимое количество страниц. Например https://nuxtjs.org/docs/concepts/static-site-generation или https://vuepress.vuejs.org/