Создание Whinst, часть 5: создание страниц и добавление к ним структуры
Большинство веб-приложений в Интернете сегодня являются многостраничными веб-приложениями, что означает, что они состоят из более чем одной страницы. Эти страницы имеют некоторую структуру, которая представляет собой просто организацию и дизайн различных компонентов, находящихся на веб-странице. Эта структура обычно реализуется с использованием HTML. В этой статье я расскажу вам, как я создавал страницы и добавлял структуру к этим страницам в веб-приложении Whinst. Давайте погрузимся🏂🏾
Создание страниц📑
Создание страниц и роутинг в Next.js, который является фреймворком для фронтенда, который я использую, немного отличается от того, к чему я привык, но научиться этому было несложно😅. Next.js использует интересную систему страниц и маршрутизации, в которой маршрут страницы — это папка, а фактическая страница — это файл в папке с именем page.tsx. Когда проект создается впервые, он инициализируется домашней страницей, находящейся в корне проекта, с именем page.tsx. Изображение ниже, взятое из документации Next.js, показывает, как работает система маршрутизации и страниц.
Чтобы создать новую страницу и ее маршрут в веб-приложении Whinst, мне сначала пришлось создать папку с ее заголовком в качестве имени маршрута, который я хочу. Затем я создал в этой папке файл с именем page.tsx, который является фактической страницей, которую я хотел создать. Пока я сделал это для 3-х страниц в проекте.
Добавление структуры на страницы🔧
Я добавил структуру к страницам в качестве одного из первых шагов в процессе разработки, чтобы организовать их и дать мне представление о том, как эти страницы будут выглядеть. Я сделал это, сначала набросав несколько структурных планов в своем блокноте. Я предпочитаю делать наброски вручную, а не использовать программное обеспечение для дизайна, потому что я не слишком хорош в использовании программного обеспечения для дизайна🥲. Затем я закодировал эти наброски с помощью HTML и Tailwind CSS. Этот процесс не был слишком сложным, потому что у меня большой опыт работы с HTML и CSS😏. Для этого я просто использовал простые элементы div для размещения объектов, а для их аккуратного размещения в строках и столбцах я использовал гибкие блоки CSS.
Теперь, когда реализована четкая структура страниц для всех страниц, я перешел к разработке и созданию адаптивных страниц по одной, начиная с домашней страницы, которую вы не захотите пропустить, так что следите за обновлениями блога. Спасибо за прочтение🙏.
