Создание отдельной страницы для каждого объявления на сайте-доске объявлений — это классическая задача, и ее можно реализовать без использования современных фреймворков. Главное — правильно организовать структуру и логику работы вашего сайта. Вот несколько шагов, которые могут помочь вам в этом процессе:
### 1. Структура страниц
Сначала вам нужно определить, как будет выглядеть отдельная страница объявления. Это может быть отдельный HTML-шаблон, который будет загружаться при переходе по ссылке на объявление.
Например:
- **Главная страница** (`index.html`)
- **Страница объявления** (`item.html`)
### 2. Генерация уникальных URL
Каждое объявление должно иметь уникальный идентификатор, по которому будет формироваться URL. Например, если у вас есть объявление с ID 123, его URL может быть `item.html?id=123`.
### 3. Хранение данных
Данные о объявлениях можно хранить, например, в формате JSON или у вас может быть серверная часть (например, на Node.js), которая будет взаимодействовать с базой данных. Для простоты, на первом этапе можно использовать локальный JSON-файл:
```json
[
{"id": 1, "title": "Объявление 1", "description": "Описание объявления 1"},
{"id": 2, "title": "Объявление 2", "description": "Описание объявления 2"}
]
```
### 4. Загрузка объявления на страницу
Для загрузки объявления на `item.html` вам потребуется использовать JavaScript. При загрузке страницы нужно будет извлечь ID объявления из URL, а затем найти соответствующее объявление в вашем JSON-файле и отобразить его на странице.
Пример кода:
```html
<!-- item.html -->
<script>
// Функция для извлечения параметров из URL
function getQueryParam(param) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param);
}
// Функция для загрузки объявления
async function loadItem() {
const itemId = getQueryParam('id');
const response = await fetch('data/items.json'); // Ваш файл с данными
const items = await response.json();
const item = items.find(i => i.id == itemId);
if (item) {
document.getElementById('item-title').textContent = item.title;
document.getElementById('item-description').textContent = item.description;
} else {
document.getElementById('item-title').textContent = 'Объявление не найдено';
}
}
window.onload = loadItem;
</script>
<div>
<h1 id="item-title"></h1>
<p id="item-description"></p>
</div>
```
### 5. SEO-оптимизация
Чтобы ваши страницы можно было находить через поисковики:
- Убедитесь, что у каждой страницы есть уникальный заголовок (`<title>`).
- Используйте мета-теги описания для каждой страницы.
- Настройте правильные URL, как упоминалось раньше (preferably "Человекопонятные" URLs).
### 6. Вёрстка страницы
Для вёрстки страницы объявления вы можете использовать HTML и CSS. Пример структуры может быть следующий:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Объявление</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<h1 id="item-title"></h1>
<p id="item-description"></p>
</div>
</body>
</html>
```
### Ресурсы
- [MDN Web Docs](https://developer.mozilla.org/) — отличное место для изучения HTML, CSS и JS.
- [FreeCodeCamp](https://www.freecodecamp.org/) — множество бесплатных курсов по веб-разработке.
### Conclusion
Ваша задача вполне выполнима, и даже без фреймворков можно создать простую, но работоспособную систему для отображения объявлений. Удачи в вашем учебном проекте!