gathering a building
1.0.0
Этот проект был разработан в рамках предыдущего этапа Йельской лаборатории цифровых гуманитарных наук. Лаборатория, которая теперь является частью отдела вычислительных методов и данных Йельской библиотеки, больше не включает этот проект в свою сферу деятельности. Таким образом, он не будет получать никаких дальнейших обновлений. Существует действующий веб-сайт, который использует этот код. Когда этот сайт выйдет из строя, он будет удален из сети.
Этот репозиторий содержит исходный код веб-приложения, подробно описывающего аспекты архитектуры Йельского университета. Приложение построено на основе интерфейса Angular 1, который представляет картографические данные с сервера CartoDB и мультимедийные ресурсы из серверной части API Wordpress.
Пользователи с правами администратора могут обновлять данные, отображаемые на сайте, посетив интерфейс администратора сайта. После входа в систему пользователи могут указать данные, которые будут отображаться на сайте, создавая и редактируя сообщения, используя следующие поля метаданных:
Поле по умолчанию
Заголовок каждого сообщения определяется традиционным полем заголовка сообщения 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
Если для значения шаблона сообщения установлено значение «три-div-контейнер», его фон будет состоять из трех элементов, представленных в правой части экрана (пример отображения). Содержимое этих элементов задается следующими настраиваемыми полями: topImage , bottomImage , topCaption , bottomCaption . Поля topImage и BottomImage представляют собой полные пути к файлам изображений, а поля topCaption и BottomCaption представляют собой поля подписи в виде обычного текста. (пример поля с тремя div-контейнерами)
four-div-container
Если для значения шаблона сообщения установлено значение four-div-container, его фон будет состоять из четырех полноразмерных изображений, которые ссылаются на разделы внутри данного контроллера (пример отображения). Фоновые изображения для этого шаблона фона определяются полем introImage в сообщениях для этого контроллера. Например, пример отображения, ссылка на который приведена ранее в этом абзаце, показывает страницу с четырьмя фоновыми изображениями: бетон, камень, кирпич и стекло. Первое из этих изображений (конкретное) определяется значением introImage в сообщении, которое имеет значение порядка 1 (поскольку это первое сообщение, которое появляется после оглавления). В сообщении со значением порядка 1 изображение, которое должно быть представлено в контейнере с четырьмя div, указывается в настраиваемом поле introImage (пример поля с четырьмя 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-journeys могут использовать iframe для заполнения полностраничного представления домена iframe за текстовым столбцом (пример отображения). Для этого нужно всего лишь установить значение iframe для страницы, которую вы хотите отобразить (пример поля iframe).
Домашняя страница сайта состоит из серии значков, которые накладываются на центральное изображение (пример значка домашней страницы). Содержимое этих значков и положение этих значков определяются сообщениями со следующими полями метаданных:
Поле по умолчанию
Заголовок каждого значка на домашней странице определяется традиционным полем заголовка сообщения Wordpress (пример поля заголовка). После заголовка стоит » производит приятное визуальное отображение.
Поле по умолчанию
Текстовое содержимое значка домашней страницы определяется традиционным полем текстового содержимого Wordpress (пример текстового поля).
Пользовательское поле
Accepted values:
* home
Для каждого значка на домашней странице должно быть установлено значение контроллера home (пример поля контроллера).
Пользовательское поле
Accepted values:
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
Каждое значение DestinationController управляет маршрутом, по которому пользователи должны быть перенаправлены при нажатии на ссылку внутри данного домашнего значка. Например, если задать для элемента назначения главного значка «material-journeys» маршрут, пользователи будут перенаправлены на маршрут «material-journeys» после нажатия на ссылку домашнего значка (пример поля «destinationController»).
Пользовательское поле
Accepted values:
* An value between 0 and the number of posts for the given destinationController -1
DestinationId указывает публикацию в DestinationController, к которой пользователи должны быть перенаправлены после щелчка по ссылке внутри данного домашнего значка. Например, установка для контроллера назначения значка дома значения «material-journeys», а для параметра «DestinationId» — 3, что гарантирует, что пользователи, которые нажимают ссылку на значок «домой», будут отправлены на публикацию, которой присвоено значение контроллера «материальные путешествия» и значение заказа, равное 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 не является распознанной командой, вам необходимо установить Node.
После установки Node вы можете клонировать исходный код, установить зависимости и запустить локальный веб-сервер с помощью следующих команд:
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, вы можете запустить:
git pull origin master
Откроется текстовый редактор командной строки vim, предлагающий ввести на экране «сообщение о фиксации». Вы можете сделать это, нажав i (что переводит текстовый редактор vim в режим вставки), затем стрелку вниз (которая перемещает курсор на одну строку вниз в текстовом документе), а затем сообщение вашим коллегам по команде (например, « объединение удаленного мастера с локальным мастером"), за которым следует ESCAPE :wq ENTER .
Чтобы вместо этого объединить ветку GitHub, которая не была объединена с основной веткой Github, вы можете запустить:
git pull origin {{branch-name}}
Как только вы будете довольны тем, как выглядит контент, вы можете перенести изменения на развернутый сервер, выполнив:
chmod 600 PEM_FILE_NAME.pem
npm run deploy
Это заменит файлы на удаленном сервере вашими локальными копиями этих файлов.
