CookieCMS Wiki

Appearance

Как создать или изменить страницу в CookieCMS Frontend (Next.js) ​

Подготовка ​

  1. Клонируйте репозиторий:

    bash
    git clone https://github.com/Cookie-cms/frontend
cd frontend

  2. Установите зависимости:

    bash
    npm install

Создание новой страницы ​

В CookieCMS используется маршрутизация Next.js на основе файловой системы:

  1. Создайте новую директорию в папке app/:

    bash
    mkdir app/my-new-page

  2. Создайте файл page.jsx внутри этой директории:

    bash
    touch app/my-new-page/page.jsx

  3. Добавьте базовый код для страницы:

    jsx
    export default function MyNewPage() {
  return (
    <div className="container">
      <h1>Моя новая страница</h1>
      <p>Здесь содержимое страницы</p>
    </div>
  );
}

  4. Страница будет доступна по адресу /my-new-page

Редактирование существующей страницы ​

  1. Найдите нужную страницу в структуре директорий (см. структуру выше)
  2. Отредактируйте соответствующий файл page.jsx
  3. Например, чтобы изменить страницу авторизации:
    jsx
    // app/signin/page.jsx

// Внесите нужные изменения в код

Создание динамической страницы ​

  1. Для создания динамического маршрута используйте квадратные скобки:

    bash
    mkdir -p app/users/[userId]
touch app/users/[userId]/page.jsx

  2. В файле страницы используйте параметры:

    jsx
    export default function UserPage({ params }) {
  return (
    <div>
      <h1>Пользователь {params.userId}</h1>
      {/* Остальной контент */}
    </div>
  );
}

Запуск и тестирование ​

  1. Запустите режим разработки:

    bash
    npm run dev

  2. Откройте браузер и перейдите по адресу http://localhost:3000

  3. Проверьте созданную или измененную страницу

что бы пересобрать проект, выполните команду:

bash
npm run build

Структура проекта ​

Проект организован следующим образом:

  • app/ - основная директория с маршрутами
  • app/admin/ - административная панель
  • app/signin/, app/signup/ - страницы авторизации
  • app/home/ - домашняя страница
  • Остальные специализированные страницы

После внесения изменений не забудьте отправить их в репозиторий через Git. Соблюдайте правила лицензии AGPL-3.0