krashna site

クラシュナ ムシカのウェブサイト

React と Gatsby.js で構築された、デルフトの学生音楽団体 Krashna Musika のサイト用の静的サイト ジェネレーター。

インストール

開始するには、Node.js 環境と Yarn パッケージ マネージャーが必要です。これらをインストールしたら、このリポジトリのルート ディレクトリから次のコマンドを実行します。

yarn
yarn global add gatsby-cli

ランニング

発達

開発サーバーを (ライブリロードを使用して) 起動するには、次のコマンドを実行します。

yarn develop

これで、localhost:8000 でリッスンするサーバーが存在します。

生産

実稼働バンドルを構築するには、次を実行します。

yarn build

masterブランチへの変更は、Netlify ビルド サービスを通じてライブ サイト (krashna.nl) に自動的にデプロイされます。

ドキュメント

全体構造

一般に、このプロジェクトは一般的な Gatsby.js フォルダー構造に従います。

• ページは/src/pagesで定義されます。各JSファイルのファイル名(拡張子.jsを除く)が、対応するページのURLとして使用されます。
• ページ テンプレート (さまざまなタイプのページがどのように見えるかに関する定型的な構造) は/src/templatesにあります。
• これらのページとテンプレートが使用するコンポーネントは、 /src/componentsフォルダーに含まれています。

ただし、国際化やその他の機能を提供するために、異なる点がいくつかあります。

• すべての翻訳は、 /src/localesフォルダーの YAML ファイルに含まれています。各サブフォルダーには、特定の言語での各翻訳定義ファイルのコピーが含まれています。これらの翻訳ファイルは JSON にコンパイルされ、残りのコンテンツとともに提供され、実行時にページに動的に挿入されます。翻訳には、 gatsby-plugin-intlによって統合されたreact-intlライブラリを使用します。
• コンサートのリストなど、ページ生成の基礎となるすべてのデータは/src/dataに含まれています。

コンテンツの追加

コンテンツの追加は、事前定義されたファイルにテキストまたはその他のデータを追加することで簡単に行うことができます。いくつかの例を以下に示します。すべてのコンテンツは Markdown で記述されます。 Markdown に慣れていない場合、またはヘルプが必要な場合は、この便利なリンクをチェックしてください。

ページの追加

ページを追加するには...

1. そのページを配置する URL を名前として/src/pagesに JS ファイルを追加します。このファイルをどのように構成するか疑問がある場合は、そのフォルダー内の他の既存のページを見てください。
2. 使用する翻訳キーに必要な翻訳を/src/localesに追加します。ページ ファイル内のそのような変換キーにアクセスする方法と、これを翻訳ファイルで定義する方法の例については、既存のページと翻訳を参照してください。

コンサートを追加する

コンサートを追加するには...

1. 他のエントリと同じ形式に従って、 /src/data/concerts.yamlリストにエントリを追加します。
2. /src/localesフォルダー内のconcerts.yamlファイルに、両方の言語で言語依存のテキストを追加します。

ニュース投稿の追加

ニュース投稿を追加するには...

1. 他のエントリと同じ形式に従って、 /src/data/news.yamlリストにエントリを追加します。
2. /src/localesフォルダー内のnews.yamlファイルに言語依存のテキストを両方の言語で追加します。