Перейти к основному содержанию

Руководство по Разработке Веб-сайта

Добро пожаловать к участию в проекте с открытым исходным кодом официального сайта "PvZ2 Gardendless"! Независимо от того, являетесь ли вы начинающим или опытным разработчиком, мы призываем вас вносить свой вклад в код, сообщать о проблемах или вносить предложения. Ниже приведено краткое руководство по разработке, которое поможет начинающим пользователям быстро принять участие в этом проекте.

1. Подготовка

Перед тем как начать, вам нужно выполнить некоторые базовые настройки. Для систем Windows, мы рекомендуем вам использовать PowerShell Терминала Windows что бы запускать команды, которые могут быть запущены через меню правой кнопкой мыши.

1.1 Установите VScode, Git и Node.js

VScode

VScode - это легкий редактор кода, который поддерживает множество программных языков. При разработке проекта мы рекомендуем использовать VScode для редактирования кода.

  • Скачайте и установите VScode: Официальный веб-сайт VScode
  • Прочитайте документацию VScode что бы узнать больше о том, как его использовать.
  • Рекомендуется установить плагины: Vue - Official, ESLint, GitLens и прочие для повышения эффективности разработки.

Git

Git - это инструмент для управления версиями проекта. При разработке проекта мы будем использовать Git для извлечения кода и внесения изменений.

  • Скачайте и установите Git: Официальный веб-сайт Git, для Windows рекомендуется установить 64-bit Git for Windows Setup.
  • Вы можете посмотреть настройки по умолчанию во время процесса установки.
  • Рекомендуется выбрать Use Visual Studio Code as Git's default editor как редактор по умолчанию.
  • Рекомендуется выбрать Git from the command line and also from 3rd-party software для настройки переменных среды.
  • После заверешения установки, вы можете выполнить следующую команду через командную линию что бы подтвердить успешность установки:
git --version

Node.js

VuePress - это статический генератор веб-сайтов, основанный на Node.js, поэтому вам нужно установить Node.js.

  • Скачайте и установите Node.js: Официальный веб-сайт Node.js
  • После завершения установки, вы можете ввести следующую команду что бы подтвердить правильность установки:
node --version
npm --version

1.2 Установите Corepack

Corepack - это менеджер пакетов, который помогает вам установить и управлять зависимостями проекта быстрее.

  • Введите следующую команду для активации Corepack:
corepack enable

2. Сделайте форк проекта

2.1 Создайте аккаунт Github

Перед участвием в проекте, вам нужно зарегистрировать аккаунт Github.

2.2 Сделайте форк проекта

При участии в проекте на Github, вы можете создать форк (скопировать копию проекта на свой личный аккаунт) для выполнения работ по разработке.

  1. Посетите сайт проекта pvzg.
  2. Нажмите на кнопку Fork в верхнем правом углу страницы что бы скопировать проект в ваш личный репозиторий Github.
  3. Войдите в репозиторий проекта, который вы форкнули.

3. Локально клонируйте проект

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

  1. Откройте терминал. Для Windows, пожалуйста, используйте Терминал Windows, или функцию терминала, включенную в VScode.

  2. В пути, где вы хотите разместить этот проект, введите следующую команду чтобы клонировать проект локально:

git clone https://github.com/ВАШЕ_ИМЯ_ПОЛЬЗОВАТЕЛЯ/pvzg_site.git

Пожалуйста, замените ВАШЕ_ИМЯ_ПОЛЬЗОВАТЕЛЯ на ваше имя пользователя на Github.

  1. Ввойдите в каталог проекта, который должен содержать файл package.json:
cd pvzg_site
  1. Откройте каталог проекта через VScode. После этого вы можете использовать VScode для ввода комманд и записи файлов:
code .

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

После входа в каталог проекта вам нужно установить пакеты зависимостей, необходимые для проекта. Все последующие команды необходимо вводить в путь к каталогу проекта.

  • Используйте Corepack для установки pnpm, и используйте pnpm для установки зависимостей:
corepack install
# Подтвердить правильность установки pnpm в проекте
pnpm -v
# Установить зависимости
pnpm install

5. Запустите среду разработки

После установки зависимостей вы можете запустить среду разработки проекта и просмотреть выполнение веб-сайта документа, работающий локально.

  • Используйте следующую команду для запуска сервера разработки:
pnpm docs:dev

После успешного запуска, вы можете открыть http://localhost:8080 в своем браузере, чтобы посмотреть веб-сайт в разработке.

6. Начните редактирование

Теперь вы можете модифицировать и оптимизоровать код.

6.1 Файл Markdown

Markdown - это легкий язык разметки. Вы можете узнать больше о нем в Руководстве Markdown.

Содержимое страницы проекта в основном написано на Markdown, с суффиксом .md. Файлы страницы проекта вы можете найти в каталоге src.

Этот проект разработан с использованием Vuepress. Для получения более подробной информации об использовании Vuepress, вы можете ознакомиться с официальной документацией Vuepress.

Формат файлов .md следующий:

<!-- Элементы конфигурации -->
---
title: заголовок страницы
index: false
...
---
<!-- Компоненты HTML -->
<script />
<Catalog />

> [!info]
> информация тут...

### Заголовок

Содержимое...

6.2 Предоставить переводы

В каталоге src вы можете найти каталог en, который содержит страницы этого сайта на Английском. Вы можете ссылаться на файлы в этом каталоге и переводить их на другие языки.

Для работы по переводу вам нужно только изменить файлы .md в соответствующем языковом каталоге, например ru-RU, pt-BR. Необходимо сохранить структуру файла и имя в соотвествии с en.

Для элементов конфигурации в файле .md необходимо изменить только title, а компонент HTML можно оставить без изменений. Рекомендуется проверять корректность отображения страницы каждый раз при внесении изменений.

7. Зафиксировать изменения и инициировать запрос на Извлечение

После завершения модификации кода и успешного тестирования, вы можете предоставить ваши изменения на рассмотрение и инициировать запрос на Извлечение.

7.1 Зафиксировать изменения и выложить на Github

Мы рекомендуем вам использовать VScode для фиксации. Просто заполните информацию об отправке в Системе управления версиями в левой части VScode, затем нажмите Фиксация, и нажмите Синхронизировать Изменения.

Для зафиксирования через терминал:

  1. Добавьте измененный код в Git:
git add .
  1. Зафиксируйте изменения:
git commit -m "Опишите ваши изменения"
  1. Отправьте локальные изменения в ваш личный репозиторий Github:
git push origin main

7.2 Инициировать запрос на Извлечение

  1. Перейдите на страницу вашего репозитория Github.
  2. Нажмите на кнопку Compare & pull request в верхней части страницы.
  3. Заполните описание изменений и предоставьте запрос на расмотрение Извлечения.

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

8. Сообщить о проблемах

Если вы встретите проблемы во время разработки, вы можете предоставить обратную связь через систему Проблем Github.

  1. Посетите страницу Проблем проекта.

  2. Нажмите на кнопку New issue.

  3. Заполните описание проблемы и отправьте.

9. Участвуйте в обсуждениях

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

  • Участвуйте в обсуждениях на GitHub.

  • Участвуйте в обсуждениях на сервере Discord.

Спасибо вам за вашу поддержку и вклад в этот проект, мы с нетерпением ждем возможности работать с вами, что бы улучшить этот проект!

Official website of PvZ2 Gardendless: pvzge.com
Copyright 2021-2025 Gaozih © All Rights Reserved | Privacy Policy