static timeline generator 다운로드 - static timeline generator 소스 코드 다운로드

static timeline generator

기타 카테고리

1.0.0

다운로드

정적 타임라인 생성기

내 Wikimedia 타임라인과 같은 정적 타임라인 웹페이지를 쉽게 만들 수 있습니다. GitHub 페이지(https://molly.github.io/static-timeline-generator/)와 함께 배포된 이 샘플 사이트의 미리보기를 확인하세요.

내용물

설치하다
사용자 정의
- 주요 콘텐츠
- 메타
추가 사용자 정의
배포
- GitHub 페이지
- 기타 서비스
민감도
브라우저 호환성
후드 아래

더미 콘텐츠가 포함된 타임라인 페이지의 스크린샷

설치하다

이 저장소를 복제한 다음 해당 디렉터리에서 npm install 실행하세요.

npm run-script serve 프로젝트를 빌드하고 http://localhost:8080에서 로컬로 정적 파일을 제공합니다. npm run-script build 개발 서버를 시작하지 않고 빌드 단계만 실행합니다.

사용자 정의

변경해야 하는 거의 모든 콘텐츠는 src/_data/content.js 에 있습니다.

주요 콘텐츠

header (HTML, 선택사항): 페이지 상단의 헤더에 표시할 내용입니다.
footer (HTML, 선택사항): 페이지 하단의 바닥글에 표시할 내용입니다.
entries (개체 배열, 필수 ): 타임라인에 표시할 항목 목록(표시 순서대로)입니다.
- id (string, 필수 ): 이 타임라인 항목의 고유 ID입니다.
- categories (문자열 배열, 선택 사항): 이 항목에 적용되는 카테고리 목록입니다. 이는 페이지 상단에 체크박스로 표시되며 독자가 타임라인을 필터링할 수 있습니다. 쉼표를 포함할 수 없습니다. 하이픈이나 공백으로 구분할 수 있습니다( sample category 또는 sample-category 모두 페이지에 Sample category 로 표시됩니다). 카테고리가 없는 항목은 항상 표시됩니다.
- color (문자열, 선택): 타임라인 라인에 표시되는 원의 색상입니다. 이미 정의된 옵션은 green , red 및 grey 입니다. css/custom.css 에서 추가 색상을 정의할 수 있습니다(아래 참조).
- faicon (문자열, 선택 사항): 타임라인 라인의 원에 사용할 Font Awesome 아이콘의 이름입니다. 옵션을 살펴보세요. 이것은 단지 아이콘 이름입니다( fa- 접두어 없음). 예: anchor .
- datetime (문자열, datetime 또는 date 있어야 함): 항목에 대한 날짜 및 시간 지정자입니다. moment.js 인식하는 모든 형식이 될 수 있습니다. 나는 보통 "YYYY-MM-DD HH-SS"를 사용합니다. 시간은 없고 날짜만 있는 경우 datetime 대신 date 매개변수를 사용하세요.
- date (문자열, datetime 또는 date 있어야 함): 항목에 대한 날짜 지정자입니다. "YYYY-MM-DD".
- title (HTML, 필수 ): 타임라인 항목의 제목입니다.
- image (선택): 항목에 표시할 이미지
  - src (문자열, 필수): 페이지에 삽입할 이미지 파일에 대한 직접 URL 또는 이 디렉터리에 있는 이미지에 대한 상대 링크(예: img/filename.png ).
  - link (문자열, 선택 사항): 사람들이 클릭하여 더 큰 버전 등을 볼 수 있도록 하려면 이미지가 포함된 페이지에 대한 하이퍼링크입니다.
  - alt (문자열, 선택 사항): 이미지를 설명하는 대체 텍스트입니다.
  - caption (HTML, 선택사항): 이미지를 설명하는 캡션입니다.
- body (HTML, 필수 ): 타임라인 항목의 텍스트입니다. 여러 단락을 원할 경우 <p> 태그를 직접 포함해야 합니다. 그렇지 않으면 추가됩니다.
- links (객체 배열, 선택 사항): 항목 하단에 표시할 링크 배열입니다.
  - href (문자열, 필수 ): 링크의 대상입니다.
  - linkText (HTML, 필수 ): 링크 텍스트입니다.
  - extra (HTML, 선택 사항): 링크 끝에 표시할 추가 HTML입니다.

메타

pageTitle (문자열, 필수 ): 브라우저에서 페이지 제목을 설정하기 위해 <title> 태그에 들어갈 텍스트입니다.
pageDescription (문자열, 선택사항): 메타태그에 들어갈 페이지 설명입니다.
pageAuthor (string, optinal): 메타 태그에 들어갈 페이지 작성자입니다.

추가 사용자 정의

타임라인의 원에 더 많은 색상 옵션을 추가하려면 src/css/custom.css 파일을 편집하여 직접 추가할 수 있습니다. 이 도구를 사용하여 색상을 선택하고 해당 색상의 16진수 색상 코드를 얻을 수 있습니다. 그들은 다음과 같이 정의됩니다:

. timeline-icon . yourcolorhere {
  background-color : # hexcol or code;
}

그런 다음 content.js 파일에서 color: yourcolorhere 사용합니다.

src/img 폴더의 이미지를 교체하여 페이지 파비콘과 OpenGraph 이미지를 맞춤설정하세요.

배포

npm run-script buld 실행하면 사이트 콘텐츠와 함께 정적 HTML/CSS/JS 파일이 포함된 _site 디렉터리가 표시됩니다. 이제 정적 사이트 호스팅을 사용하여 이러한 파일을 배포할 수 있습니다!

GitHub 페이지

GitHub 페이지(무료)에 정적 사이트를 배포하려면 git subtree push --prefix _site origin gh-pages 실행하여 루트 디렉터리에 정적 파일이 포함된 분기를 만듭니다. 그런 다음 저장소의 설정 > 페이지 옵션으로 이동하여 "브랜치에서 배포"를 선택한 다음 gh-pages 브랜치로 선택할 수 있습니다.

Github 페이지 구성 설정. '빌드 및 배포'에서 소스는 '브랜치에서 배포'로 설정되고, 브랜치는 'gh-pages'로, 폴더는 '/(루트)'로 설정됩니다.