Руководство по Разработке Веб-сайта
Добро пожаловать к участию в проекте с открытым исходным кодом сайта "PvZ2 Gardendless"! Независимо от того, являетесь ли вы начинающим или опытным разработчиком, мы призываем вас вносить свой код, отправлять проблемы и предложения. Ниже приведено краткое руководство по разработке, которое поможет пользователям нулевого уровня быстро принять участие в этом проекте.
1. Подготовка
Прежде чем приступить к работе, необходимо выполнить некоторые базовые настройки. Для систем Windows мы рекомендуем использовать PowerShell из Windows Terminal для запуска команд, которые можно запустить через меню правой кнопки мыши.
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 --versionNode.js
VuePress - это генератор статических сайтов, основанный на Node.js, поэтому вам необходимо установить Node.js.
- Скачайте и установите Node.js: Официальный веб-сайт Node.js
- После завершения установки вы можете выполнить следующую команду, чтобы подтвердить успешность установки:
node --version
npm --version1.2 Установите Corepack
Corepack - это менеджер пакетов Node.js, который помогает вам быстрее устанавливать и управлять зависимостями проекта.
- Выполните следующую команду, чтобы активировать Corepack:
corepack enable2. Форк проекта
2.1 Создайте аккаунт Github
Перед участием в проекте необходимо зарегистрировать аккаунт на GitHub.
2.2 Сделайте форк проекта
Участвуя в проекте на GitHub, вы можете сделать форк (скопировать копию проекта на свой аккаунт) для выполнения работ по разработке.
- Посетите pvzg_site project.
- Нажмите кнопку
Forkв правом верхнем углу страницы, чтобы скопировать проект в свой собственный репозиторий GitHub. - Зайдите в репозиторий проекта, который вы форкнули.
3) Клонируйте проект локально
После форка проекта вам нужно клонировать код проекта на свой локальный компьютер. VScode предоставляет функцию клонирования репозиториев. Чтобы узнать больше, можно обратиться к документации или воспользоваться терминалом:
Откройте терминал. Для Windows используйте
Windows Terminalили функцию терминала, входящую в составVScode.В каталоге, где вы хотите разместить этот проект, выполните следующую команду для клонирования проекта локально:
git clone https://github.com/YOUR_USERNAME/pvzg_site.gitПожалуйста, замените YOUR_USERNAME на ваше имя пользователя GitHub.
- Укажите каталог проекта, в котором должен находиться файл
package.json:
cd pvzg_site- Откройте каталог проекта через
VScode. После этого вы можете использоватьVScodeдля ввода команд и записи файлов:
code .4. Установите зависимости
После входа в каталог проекта необходимо установить пакеты зависимостей, необходимые для проекта. Все последующие команды должны вводиться по пути к каталогу проекта.
- Используйте
Corepackдля установкиpnpm, и используйтеpnpmдля установки зависимостей:
corepack install
# Check if pnpm is correctly installed in the project
pnpm -v
# Install dependencies
pnpm install5. Запустите среду разработки
После установки зависимостей вы можете запустить среду разработки проекта и просмотреть сайт с документацией, работающий локально.
- Используйте следующую команду для запуска сервера разработки:
pnpm docs:devПосле успешного запуска вы можете посетить http://localhost:8080 в вашем браузере, чтобы увидеть сайт в разработке.
6. Начало Редактирования
Теперь вы можете изменять и оптимизировать код.
6.1 Файл Markdown
Markdown - это легкий язык разметки. Вы можете узнать больше о нем в Руководстве Markdown.
Содержание страниц проекта в основном написано в формате Markdown, с расширением .md. Файлы страниц проекта находятся в директории src.
Этот проект разработан с использованием Vuepress. Для использования Vuepress можно ознакомиться с официальной документацией Vuepress.
Формат файлов .md следующий:
<!-- Configuration items -->
---
title: page title
index: false
...
---
<!-- HTML components -->
<script />
<Catalog />
> [!info]
> info here...
### Title
Content...6.2 Добавление переводов
В каталоге src находится каталог en, содержащий англоязычные страницы этого сайта. Вы можете использовать его для перевода на другие языки.
Для работы над переводом достаточно изменить файлы .md в соответствующем языковом каталоге, например ru-RU, pt-BR. Необходимо, чтобы структура файлов и имена в каталоге соответствовали en.
Для элементов конфигурации в файле .md необходимо изменить только title, а компонент HTML можно оставить без изменений. Рекомендуется проверять правильность отображения страницы в любое время при внесении изменений.
7. Отправка изменений и инициирование Pull Request
Когда вы завершили модификацию кода и успешно протестировали его, вы можете отправить свои изменения и инициировать Pull Request.
7.1 Коммит и отправка изменений
Мы рекомендуем вам использовать VScode для отправки. Просто заполните информацию для отправки в Source Control слева от VScode, затем нажмите Submit, и нажмите Synchronize Changes.
Для отправки через терминал:
- Добавьте измененный код в Git:
git add .- Отправьте изменения:
git commit -m "Describe your changes"- Внесите локальные изменения в свой собственный репозиторий GitHub:
git push origin main7.2 Создание Pull Request
- Откройте страницу вашего репозитория на GitHub.
- Нажмите кнопку
Compare & pull requestв верхней части страницы. - Заполните описание изменений и отправьте Pull Request.
Мы рассмотрим ваш Pull Request как можно скорее и предоставим обратную связь или произведем слияние при необходимости.
8. Сообщение о проблемах
Если в процессе разработки у вас возникнут проблемы, вы можете оставить отзыв через систему Issues на GitHub.
Перейдите на Issues проекта.
Нажмите
New issue.Опишите проблему и отправьте.
9) Участие в обсуждениях
Мы приглашаем всех пользователей принять участие в обсуждениях проекта! Вы можете общаться с нами следующими способами:
Участвуйте в обсуждениях на GitHub.
Участвуйте в обсуждениях на сервере Discord.
Благодарим вас за поддержку и вклад в этот проект и надеемся на сотрудничество с вами для его улучшения!