gathering a building
1.0.0
이 프로젝트는 Yale Digital Humanities Lab의 이전 단계에서 개발되었습니다. 이제 Yale Library의 계산 방법 및 데이터 부서의 일부인 이 연구실은 더 이상 작업 범위에 이 프로젝트를 포함하지 않습니다. 따라서 더 이상 업데이트가 수신되지 않습니다. 이 코드를 사용하는 라이브 웹사이트가 있습니다. 이 웹사이트가 중단되면 웹에서 제거됩니다.
이 저장소에는 Yale University 아키텍처의 측면을 자세히 설명하는 웹 애플리케이션의 소스 코드가 포함되어 있습니다. 이 애플리케이션은 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/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
게시물의 템플릿 값이 three-div-container로 설정된 경우 게시물의 배경은 화면 오른쪽에 표시되는 세 가지 요소로 구성됩니다(예제 디스플레이). 이러한 요소 내의 콘텐츠는 topImage , bottomImage , topCaption , bottomCaption 사용자 정의 필드에 의해 설정됩니다. topImage 및 BottomImage 필드는 모두 이미지 파일의 전체 경로이고 topCaption 및 BottomCaption 필드는 일반 텍스트 캡션 필드입니다. (예: three-div-container 필드)
four-div-container
게시물의 템플릿 값이 four-div-container로 설정된 경우 해당 배경은 지정된 컨트롤러(예제 디스플레이) 내의 섹션에 연결되는 4개의 전체 높이 이미지로 구성됩니다. 이 배경 템플릿의 배경 이미지는 이 컨트롤러에 대한 게시물 내의 introImage 필드에 의해 결정됩니다. 예를 들어, 이 단락 앞부분에 연결된 예제 디스플레이는 콘크리트, 돌, 벽돌, 유리 등 4가지 배경 이미지가 있는 페이지를 보여줍니다. 이러한 이미지 중 첫 번째(구체적)는 순서 값이 1인 게시물 내의 introImage 값으로 정의됩니다(목차 다음에 나타나는 첫 번째 게시물이기 때문입니다). order 값이 1인 게시물 내에서 four-div-container에 표시될 이미지는 introImage 사용자 정의 필드에 지정됩니다(예: four-div-container 필드).
사용자 정의 필드
Accepted values:
* light
* dark
light
BrandIcon 값을 밝게 설정하면 사이트의 브랜드 아이콘(예: DHLab)이 흰색으로 표시됩니다. 이는 배경이 어두운 페이지(예: 밝은 BrandIcon 필드)에 권장됩니다.
dark
BrandIcon 값을 어둡게 설정하면 사이트의 브랜드 아이콘(예: DHLab)이 어두운 회색으로 나타나므로 배경이 밝은 페이지에 권장됩니다.
사용자 정의 필드
Accepted values:
* light
* dark
light
NavigationButton 값을 밝게 설정하면 사이트의 탐색 메뉴 버튼(예: "햄버거" 아이콘)이 흰색으로 표시됩니다. 이는 배경이 어두운 페이지(예: 밝은 NavigationButton 필드)에 권장됩니다.
dark
NavigationButton 값을 어둡게 설정하면 사이트의 탐색 메뉴 버튼(예: "햄버거" 아이콘)이 어두운 회색으로 나타나므로 배경이 밝은 페이지에 권장됩니다.
사용자 정의 필드
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 값은 지정된 홈 아이콘 내의 링크를 클릭할 때 사용자가 이동해야 하는 경로를 제어합니다. 예를 들어 홈 아이콘의 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은 두 점으로 둘러싸인 스펙트럼 내에서 아이콘의 위치를 지정합니다(예: xOffset 필드).
사용자 정의 필드
Accepted values:
* A decimal value between 0 and 1
홈 아이콘의 yOffset 값은 y축에서 홈 이미지 위에 아이콘이 배치되어야 하는 위치를 나타냅니다. 이 값을 0으로 설정하면 아이콘이 이미지의 맨 위 가장자리에 배치되고, 값을 1로 설정하면 아이콘이 이미지의 맨 아래 가장자리에 배치되며, 값은 십진수로 설정됩니다. 0과 1은 두 점으로 둘러싸인 스펙트럼 내에서 아이콘을 배치합니다(예: yOffset 필드).
이 저장소의 개발 인스턴스는 여기에서 찾을 수 있습니다.
이 애플리케이션은 Node.js 런타임을 기반으로 구축되었으므로 이 소스 코드를 사용하려면 Node.js 런타임을 설치해야 합니다. 컴퓨터에 Node.js가 설치되어 있는지 확인하려면 다음을 실행하세요.
which node
node가 인식된 명령이 아니라는 응답을 받으면 Node.js를 설치해야 합니다.
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 데이터베이스를 변경한 후 다음 명령을 사용하여 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 텍스트 편집기를 삽입 모드로 이동)를 누르고 아래쪽 화살표(텍스트 문서에서 커서를 한 행 아래로 이동)를 누른 다음 동료 팀 구성원에게 보내는 메시지(예: " 원격 마스터를 로컬 마스터에 병합"), ESCAPE :wq ENTER 가 이어집니다.
Github의 마스터 브랜치에 병합되지 않은 GitHub의 브랜치를 대신 병합하려면 다음을 실행할 수 있습니다.
git pull origin {{branch-name}}
콘텐츠의 모양이 만족스러우면 다음을 실행하여 배포된 서버에 변경 사항을 푸시할 수 있습니다.
chmod 600 PEM_FILE_NAME.pem
npm run deploy
그러면 원격 서버의 파일이 해당 파일의 로컬 복사본으로 대체됩니다.
