krashna site

Веб-сайт Крашна Музыка

Генератор статических сайтов для сайта студенческой музыкальной ассоциации Делфта Krashna Musika, созданный с помощью React и Gatsby.js.

Установка

Для начала вам понадобится среда Node.js и менеджер пакетов Yarn. После их установки выполните следующие команды из корневого каталога этого репозитория:

yarn
yarn global add gatsby-cli

Бег

Разработка

Чтобы запустить сервер разработки (с живой перезагрузкой), запустите:

yarn develop

Теперь сервер будет прослушивать локальный хост: 8000!

Производство

Чтобы собрать производственный пакет, запустите:

yarn build

Изменения в master ветке автоматически развертываются на действующем сайте (krashna.nl) через службу сборки Netlify.

Документация

Общая структура

В целом этот проект соответствует общей структуре папок Gatsby.js:

• Страницы определяются в /src/pages . Имя каждого файла JS (за исключением расширения .js ) используется в качестве URL-адреса соответствующей страницы.
• Шаблоны страниц (шаблоны структуры, определяющие, как должны выглядеть разные типы страниц) находятся в /src/templates .
• Компоненты, используемые на этих страницах и шаблонах, содержатся в папке /src/components .

Однако есть некоторые отличия, предлагающие интернационализацию и другие функции:

• Все переводы содержатся в файлах YAML в папке /src/locales . Каждая подпапка содержит копию каждого файла определения перевода на определенном языке. Эти файлы перевода компилируются в формат JSON, который обслуживается вместе с остальным содержимым и динамически вставляется на страницу во время выполнения. Для перевода мы используем библиотеку react-intl , интегрированную gatsby-plugin-intl .
• Все данные, на которых основано создание страниц, например список концертов, содержатся в /src/data .

Добавление контента

Добавить контент можно легко, добавив текст или некоторые другие данные в предопределенные файлы, некоторые примеры приведены ниже. Весь контент написан в Markdown. Если вы не знакомы с Markdown или вам нужна помощь, перейдите по этой удобной ссылке.

Добавление страницы

Чтобы добавить страницу...

1. Добавьте файл JS в /src/pages с именем URL-адреса, на котором вы хотите разместить эту страницу. Если вы сомневаетесь в том, как структурировать этот файл, посмотрите на другие существующие страницы в этой папке.
2. Добавьте необходимые переводы для всех используемых вами ключей перевода в /src/locales . Обратитесь к существующим страницам и переводам за примерами того, как можно получить доступ к такому ключу перевода в файле подкачки и как его можно определить в файле перевода.

Добавление концерта

Чтобы добавить концерт...

1. Добавьте запись в список /src/data/concerts.yaml в том же формате, что и другие записи.
2. Добавьте тексты, зависящие от языка, в файлы concerts.yaml в папке /src/locales на обоих языках.

Добавление новостного сообщения

Чтобы добавить новость...

1. Добавьте запись в список /src/data/news.yaml в том же формате, что и другие записи.
2. Добавьте тексты, зависящие от языка, в файлы news.yaml в папке /src/locales на обоих языках.