該計畫是在耶魯大學數位人文實驗室的前一階段開發的。該實驗室現在隸屬於耶魯大學圖書館計算方法和數據部門,不再將該項目納入其工作範圍。因此,它將不會收到進一步的更新。有一個使用此程式碼的即時網站。當網站發生故障時,將從網路上刪除。
該儲存庫包含 Web 應用程式的原始程式碼,該應用程式詳細介紹了耶魯大學架構的各個方面。該應用程式基於 Angular 1 前端構建,該前端顯示來自 CartoDB 伺服器的地圖資料和來自 Wordpress API 後端的多媒體資產。
管理員使用者可以透過造訪網站的管理介面來更新網站上顯示的資料。登入後,使用者可以透過使用以下元資料欄位建立和編輯貼文來建立要在網站上顯示的資料:
預設字段
每個貼文的標題由傳統的 WordPress 貼文標題欄位定義(範例標題欄位)
預設字段
每個貼文的文字內容由傳統的 Wordpress 文字內容欄位(範例段落欄位)定義。
自訂字段
Accepted values:
* home
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
* about-the-author
* downloads
* links
貼文中的控制器欄位控制該貼文在網站導覽中的顯示位置:即該貼文是否顯示在 www.mydomain.com/routes/historical-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
帖子中的sectionType欄位指示給定帖子是代表特定控制器的目錄部分還是該控制器的基於文字的部分。
table-of-contents
如果帖子的sectionType值設定為目錄(範例目錄欄位),則該部分的文字列將表示為一系列鏈接,後跟該部分的單一段落介紹(範例顯示) 。要建立目錄,應識別給定控制器的所有帖子,然後在主 WordPress 文字方塊中為控制器內目錄後面的每個部分建立一個段落(範例目錄段落內容) )。
text
如果貼文的sectionType 值設定為文字(範例文字欄位),則該部分的文字列將表示為一系列傳統段落(範例顯示)。要建立文字帖子,只需在傳統的 Wordpress 文字欄位(範例文字段落內容)中輸入段落即可。
自訂字段
Accepted values:
* one-div-container
* three-div-container
* four-div-container
貼文中的範本欄位指示要在文字列後面顯示的內容類型。有以下三種選擇:
one-div-container
如果貼文的範本值設定為 one-div-container,則其背景將是整頁背景圖像(範例顯示)。背景圖像由給定帖子的特色圖像決定(例如 one-div-container 欄位)。
three-div-container
如果貼文的範本值設定為三分區容器,則其背景將由螢幕右側表示的三個元素組成(範例顯示)。這些元素中的內容由下列自訂欄位設定: topImage
、 bottomImage
、 topCaption
、 bottomCaption
。 topImage 和bottomImage 欄位都是映像檔的完整路徑,而topCaption 和bottomCaption 欄位是純文字標題欄位。 (範例三格容器欄位)
four-div-container
如果貼文的範本值設定為四分區容器,則其背景將由四個全高影像組成,這些影像連結到給定控制器內的部分(範例顯示)。此背景模板的背景圖像由該控制器的貼文中的introImage
欄位決定。例如,本段前面連結的範例顯示顯示了一個具有四個背景圖像的頁面:混凝土、石頭、磚塊和玻璃。這些圖像中的第一個(具體)由帖子中的 introImage 值定義,其順序值為 1(因為這是出現在目錄之後的第一個帖子)。在訂單值為 1 的貼文中,要在四格容器中表示的映像在 introImage 自訂欄位中指定(範例四格容器欄位)
自訂字段
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-Journeys 的貼文可以使用 iframe 來填入文字列後面 iframe 網域的整頁表示(範例顯示)。為此,只需將 iframe 的值設定為您希望顯示的頁面(範例 iframe 欄位)。
網站的主頁由一系列覆蓋中心圖像的圖示組成(範例主頁圖示)。這些圖示中的內容以及這些圖示的位置由具有以下元資料欄位的貼文決定:
預設字段
主頁上每個圖示的標題由傳統的 Wordpress 貼文標題欄位(範例標題欄位)定義。標題後面加上&ra;產生良好的視覺顯示。
預設字段
主頁圖示的文字內容由傳統的 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,將確保點擊主頁圖示連結的使用者被傳送到分配了controller值material-journeys和訂單值3的貼文(例如destinationId欄位) 。
自訂字段
Accepted values:
* A decimal value between 0 and 1
主頁圖示的 xOffset 值指示圖示在 x 軸上主頁影像上的位置。將此值設為 0 將確保圖示位於影像的最左邊緣,將此值設為 1 將確保圖示位於影像的最右邊緣,並將該值設為介於0 和1 會將圖示定位在由這兩個點界定的頻譜內(例如xOffset 欄位)。
自訂字段
Accepted values:
* A decimal value between 0 and 1
主頁圖示的 yOffset 值指示圖示應位於 y 軸上主頁影像上方的位置。將此值設為 0 將確保圖示位於影像的最上緣,將此值設為 1 將確保圖示位於影像的最下緣,並將該值設為介於0 和1 會將圖示定位在由這兩個點界定的頻譜內(例如yOffset 欄位)。
可以在此處找到此儲存庫的開發實例。
該應用程式是在 Node.js 運行時構建的,因此需要安裝該應用程式才能使用該原始程式碼。要檢查您的電腦上是否安裝了 Node.js,您可以執行:
which node
如果您收到的回應表示節點不是可識別的命令,則需要安裝 Node.js。
安裝 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 資料庫進行變更後,您可以使用下列命令將 json 從 Wordpress 伺服器拉取到本機電腦來預覽變更:
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 上 master 分支上的最新更改,您可以執行:
git pull origin master
這將開啟 vim 命令列文字編輯器,提示您在螢幕中輸入「提交訊息」。您可以按i
(將 vim 文字編輯器移至插入模式),然後按向下箭頭(將遊標在文字文件中向下移動一行),然後向您的團隊成員發送訊息(例如「將遠端主機合併到本機」),然後是ESCAPE :wq ENTER
。
要合併 GitHub 上尚未合併到 Github 上的 master 分支的分支,您可以執行:
git pull origin {{branch-name}}
一旦您對內容的外觀感到滿意,您可以透過執行以下命令將變更推送到已部署的伺服器:
chmod 600 PEM_FILE_NAME.pem
npm run deploy
這會將遠端伺服器上的檔案替換為這些檔案的本機副本。