该项目是在耶鲁大学数字人文实验室的前一阶段开发的。该实验室现在隶属于耶鲁大学图书馆计算方法和数据部门,不再将该项目纳入其工作范围。因此,它将不会收到进一步的更新。有一个使用此代码的实时网站。当该网站出现故障时,将从网络上删除。
该存储库包含 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
这会将远程服务器上的文件替换为这些文件的本地副本。