gathering a building
1.0.0
このプロジェクトは、エール大学デジタル ヒューマニティー ラボの前段階で開発されました。現在、エール大学図書館の計算方法およびデータ部門の一部となっているこの研究室は、このプロジェクトをその業務範囲に含めていません。そのため、今後の更新は受信されません。このコードを使用するライブ Web サイトがあります。この Web サイトが壊れると、Web から削除されます。
このリポジトリには、イェール大学のアーキテクチャの詳細を説明する Web アプリケーションのソース コードが含まれています。このアプリケーションは、CartoDB サーバーからの地図データと Wordpress API バックエンドからのマルチメディア アセットを提供する Angular 1 フロントエンド上に構築されています。
管理者ユーザーは、サイトの管理インターフェイスにアクセスして、サイトに表示されるデータを更新できます。ログイン後、ユーザーは次のメタデータ フィールドを使用して投稿を作成および編集することで、サイトに表示するデータを設定できます。
デフォルトのフィールド
各投稿のタイトルは、従来の Wordpress の投稿タイトル フィールド (タイトル フィールドの例) によって定義されます。
デフォルトのフィールド
各投稿のテキスト コンテンツは、従来の Wordpress テキスト コンテンツ フィールド (段落フィールドの例) によって定義されます。
カスタムフィールド
Accepted values:
* home
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
* about-the-author
* downloads
* links
投稿内のコントローラー フィールドは、その投稿がサイト ナビゲーションのどこに表示されるかを制御します。つまり、投稿が www.mydomain.com/routes/historyal-geography の下に表示されるか、www.mydomain.com/routes/people-and-places の下に表示されるかです。 、またはサイト上の他のルート (コントローラー フィールドの例)。
カスタムフィールド
Accepted values:
* An integer value between 0 and the number of posts for the given controller -1
投稿内の順序フィールドは、投稿がルート内のどこに表示されるかを制御します。つまり、ユーザーが特定のルートのコンテンツをスクロールしたときにテキスト列内にセクションが表示される順序を制御します。
すべての投稿がコントローラーを共有している場合、最初に表示される投稿に順序値 0、次に表示される投稿に順序値 1 などを与えることで、投稿の表示順序を設定できます。重複した注文値は受け付けられないことに注意してください (注文フィールドの例)。
カスタムフィールド
Accepted values:
* table-of-contents
* text
投稿内のセクションタイプフィールドは、指定された投稿が特定のコントローラーの目次セクションを表すか、そのコントローラーのテキストベースのセクションを表すかを示します。
table-of-contents
投稿のセクションタイプ値が目次 (目次フィールドの例) に設定されている場合、そのセクションのテキスト列は一連のリンクとして表され、その後にセクションへの 1 つの段落の紹介が続きます (表示例)。 。目次を作成するには、特定のコントローラーのすべての投稿を特定し、目次に続くコントローラー内のセクションごとに Wordpress のメイン テキスト ボックスに 1 つの段落を作成する必要があります (例: 目次段落のコンテンツ) ）。
text
投稿のセクションタイプ値がテキスト (テキストフィールドの例) に設定されている場合、そのセクションのテキスト列は一連の従来の段落として表されます (表示例)。テキスト投稿を作成するには、従来の Wordpress テキスト フィールドのサンプル テキスト段落コンテンツに段落を入力するだけです。
カスタムフィールド
Accepted values:
* one-div-container
* three-div-container
* four-div-container
投稿内のテンプレート フィールドは、テキスト列の後ろに表示されるコンテンツのタイプを示します。次の 3 つのオプションがあります。
one-div-container
投稿のテンプレート値が one-div-container に設定されている場合、その背景はページ全体の背景画像になります (表示例)。背景画像は、特定の投稿の注目画像によって決定されます (例: one-div-container フィールド)。
three-div-container
投稿のテンプレート値が three-div-container に設定されている場合、その背景は画面の右側に表示される 3 つの要素で構成されます (表示例)。これらの要素内のコンテンツは、カスタム フィールドtopImage 、 bottomImage 、 topCaption 、 bottomCaptionによって設定されます。 topImage フィールドとbottomImage フィールドはどちらも画像ファイルへの絶対パスですが、topCaption フィールドとbottomCaption フィールドはプレーンテキストのキャプション フィールドです。 (例 3-div-container フィールド)
four-div-container
投稿のテンプレート値が four-div-container に設定されている場合、その背景は、指定されたコントローラー内のセクションにリンクする 4 つのフルハイト画像で構成されます (表示例)。この背景テンプレートの背景画像は、このコントローラーのポスト内のintroImageフィールドによって決定されます。たとえば、この段落の前半でリンクした表示例には、コンクリート、石、レンガ、ガラスの 4 つの背景画像を含むページが表示されています。これらの最初の画像 (具体的) は、順序値 1 を持つ投稿内の introImage 値によって定義されます (これは、目次の後に表示される最初の投稿であるため)。順序値 1 の投稿内では、four-div-container で表される画像が introImage カスタム フィールド (例の four-div-container フィールド) で指定されます。
カスタムフィールド
Accepted values:
* light
* dark
light
brandIcon 値を light に設定すると、サイトのブランド アイコン (DHLab など) が白く表示されます。これは、背景が暗いページ (明るい brandIcon フィールドなど) に推奨されます。
dark
brandIcon 値を dark に設定すると、サイトのブランド アイコン (DHLab など) が濃い灰色で表示され、背景が明るいページに推奨されます。
カスタムフィールド
Accepted values:
* light
* dark
light
NavigationButton の値を light に設定すると、サイトのナビゲーション メニュー ボタン (つまり、「ハンバーガー」アイコン) が白く表示されます。これは、背景が暗いページ (明るい NavigationButton フィールドなど) に推奨されます。
dark
NavigationButton 値を dark に設定すると、サイトのナビゲーション メニュー ボタン (つまり、「ハンバーガー」アイコン) が濃い灰色で表示され、背景が明るいページに推奨されます。
カスタムフィールド
Accepted values:
* A fully-qualified url to an iframe
コントローラー値がmaterial-journeyの投稿では、iframeを使用してテキスト列の後ろにiframeドメインのページ全体を表示できます(表示例)。これを行うには、表示したいページ (iframe フィールドの例) に iframe の値を設定するだけです。
サイトのホームページは、中央の画像に重なる一連のアイコンで構成されています (ホームページ アイコンの例)。これらのアイコン内のコンテンツとアイコンの位置は、次のメタデータ フィールドを持つ投稿によって決まります。
デフォルトのフィールド
ホームページ上の各アイコンのタイトルは、従来の Wordpress の投稿タイトル フィールド (タイトル フィールドの例) によって定義されます。タイトルの後に「raquo;」を付けます。素晴らしい視覚的な表示を生成します。
デフォルトのフィールド
ホームページ アイコンのテキスト コンテンツは、従来の Wordpress テキスト コンテンツ フィールド (サンプル テキスト フィールド) によって定義されます。
カスタムフィールド
Accepted values:
* home
ホーム ページ上の各アイコンのコントローラー値は home (コントローラー フィールドの例) に設定されている必要があります。
カスタムフィールド
Accepted values:
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
各 destinationController 値は、指定されたホーム アイコン内のリンクをクリックしたときにユーザーが誘導されるルートを制御します。たとえば、ホーム アイコンの destinationController をmaterial-journeys に設定すると、ユーザーはホーム アイコンのリンク (destinationController フィールドの例) をクリックした後に、material-journeys ルートに確実に送信されます。
カスタムフィールド
Accepted values:
* An value between 0 and the number of posts for the given destinationController -1
destinationId は、指定されたホーム アイコン内のリンクをクリックした後にユーザーがルーティングされる destinationController 内の投稿を示します。たとえば、ホーム アイコンの destinationController をmaterial-journeys に設定し、destinationId を 3 に設定すると、ホーム アイコンのリンクをクリックしたユーザーは、コントローラーの値がmaterial-journeys、順序の値が3 (例のdestinationId フィールド) が割り当てられたポストに送信されます。 。
カスタムフィールド
Accepted values:
* A decimal value between 0 and 1
ホーム アイコンの xOffset 値は、ホーム イメージ上の X 軸上のどこにアイコンを配置するかを示します。この値を 0 に設定すると、アイコンは画像の左端に沿って配置され、値を 1 に設定すると、アイコンは画像の右端に沿って配置され、値を次の間の小数に設定します。 0 と 1 は、これら 2 つの点で囲まれたスペクトル内にアイコンを配置します (xOffset フィールドなど)。
カスタムフィールド
Accepted values:
* A decimal value between 0 and 1
ホーム アイコンの yOffset 値は、ホーム イメージ上の y 軸上のどこにアイコンを配置するかを示します。この値を 0 に設定すると、アイコンは画像の最上端に沿って配置され、値を 1 に設定すると、アイコンは画像の最下端に沿って配置され、値を次の間の小数に設定します。 0 と 1 は、これら 2 つの点で囲まれたスペクトル内にアイコンを配置します (例: yOffset フィールド)。
このリポジトリの開発インスタンスはここにあります。
このアプリケーションは Node.js ランタイム上に構築されているため、このソース コードを使用するには Node.js ランタイムをインストールする必要があります。マシンに Node.js がインストールされているかどうかを確認するには、次のコマンドを実行します。
which node
Node が認識されるコマンドではないことを示す応答を受け取った場合は、Node をインストールする必要があります。
Node がインストールされたら、次のコマンドを使用してソース コードを複製し、依存関係をインストールし、ローカル Web サーバーを起動できます。
git clone https://github.com/YaleDHLab/gathering-a-building
cd gathering-a-building
npm install --no-optional
npm start
次にブラウザを開いて localhost:8000 に移動すると、アプリケーションが表示されるはずです。このローカル サーバーは、サーバーが実行されているターミナル ウィンドウで CTRL+C を押すことで、いつでも終了できます。
Wordpress データベースに変更を加えた後、次のコマンドを使用して Wordpress サーバーからローカル マシンに json をプルすることで、変更をプレビューできます。
npm run build-content {{username}} {{password}}
ここで、 {{username}}と{{password}}パスワードで保護されたサイト URL にアクセスするために入力するユーザー名とパスワードの文字列を指します。
Wordpress データベースのフィールドが上記のガイドに従って設定されている場合は、各コントローラーの json が書き込まれたことを示す確認メッセージが表示されるはずです。検証エラー メッセージを受け取った場合は、影響を受けるメタデータ フィールドを修正し、npm run build-content コマンドを再度実行してください。
新しい json をローカル マシンに書き込んだ後、ブラウザを更新して変更をプレビューできます。 Wordpress データベースで変更したルート/投稿に移動すると、新しい値またはコンテンツが表示されるはずです。
他のチーム メンバーがアプリケーション コードに変更を加え、その変更を GitHub にアップロードした場合は、次のコマンドを使用して、それらの変更をプルダウンして自分の変更とマージできます。
まず、次のコマンドを使用して、ローカル リポジトリに加えた変更を追加してコミットできます。
git add .
git commit -m "type a message indicating the changes you made here"
次に、GitHub 上のマスター ブランチの最新の変更をプルダウンするには、次のコマンドを実行します。
git pull origin master
これにより、vim コマンド ライン テキスト エディタが開き、画面に「コミット メッセージ」を入力するよう求められます。これを行うには、 i (vim テキスト エディターを挿入モードに移動します) を押し、続いて下矢印 (カーソルをテキスト ドキュメント内で 1 行下に移動します) を押し、続いてチーム メンバーへのメッセージ (例: "リモートマスターをローカルマスターにマージします")、続いてESCAPE :wq ENTER押します。
代わりに、Github 上のマスター ブランチにマージされていない GitHub 上のブランチをマージするには、次のコマンドを実行します。
git pull origin {{branch-name}}
コンテンツの外観に満足したら、次のコマンドを実行して、デプロイされたサーバーに変更をプッシュできます。
chmod 600 PEM_FILE_NAME.pem
npm run deploy
これにより、リモート サーバー上のファイルがそれらのファイルのローカル コピーに置き換えられます。
