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

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

Дополнительно:

Содержание

1 Дополнительно:
2 Ответы:

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

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

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

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

myItems.map(item =&gt; ( &lt;a href={item.link}&gt;{item.text}&lt;/a&gt; ))

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

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

Ответы:

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

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

Есть ответ
07.04.2024

Ответить

Для реализации переходов на многостраничном сайте можно использовать различные подходы и технологии в зависимости от конкретных требований и особенностей проекта. Вот несколько способов, которые можно применить:

1. Использование ссылок или кнопок с указанием адреса страницы в атрибуте href или data-href. При клике на такие элементы пользователь будет перенаправлен на указанную страницу.

html



		
		
			
			
XHTML
			
			<a href="page2.html">Перейти на вторую страницу</a>
			
				
					
				
					1
				
						<a href="page2.html">Перейти на вторую страницу</a>

2. Загрузка содержимого страницы с помощью AJAX. При этом обновление страницы происходит без перезагрузки всей страницы, что обеспечивает более плавный переход между страницами.

js



		
		
			
			
JavaScript
			
			document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault();
  var url = this.getAttribute('href');
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 400) {
      var response = xhr.responseText;
      document.body.innerHTML = response;
    }
  };
  xhr.send();
});
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
				
						document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault();
  var url = this.getAttribute('href');
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 400) {
      var response = xhr.responseText;
      document.body.innerHTML = response;
    }
  };
  xhr.send();
});

3. Использование фреймов или iframe для загрузки содержимого другой страницы на текущей странице.

html

4. Использование технологии Single Page Application (SPA) с помощью фреймворков или библиотек, таких как React, Angular или Vue.js. При этом все необходимые данные загружаются один раз, а переходы между страницами осуществляются без перезагрузки страницы.

Надеюсь, эти рекомендации помогут вам реализовать переходы на многостраничном сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.

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

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

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

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно