[Tidory] 티도리 가이드 정리

 

티도리 프레임워크

티스토리 스킨을 제작해주는 프레임워크

 

티스토리 스킨 가이드

- https://tistory.github.io/document-tistory-skin/

 

1. 프로젝트 생성

 

npx create-tidory-app my-app

 

2. 폴더 구성 파악하기.

 

├── assets/ │     └── app.js ├── docs/ │     ├── index.xml │     ├── preview256.jpg │     ├── preview560.jpg │     └── preview1600.jpg ├── images/ ├── views/ ├── .env ├── app.pug ├── index.pug └── tidory.config.js

assets/*

- app.js 포함될 파일

- 확장 템플릿 파일(styl, less)

- pug 템플릿

- JavaScript Plugin

- Components

 

docs/*

- 스킨 업로드에 필요한 파일(index.xml, preview256.jpg, preview560.jpg, preview1600.jpg)

- 빌드시 dist 폴더로 이동

 

images/*

- 정적 파일

 

views/*.pug

- pug 템플릿 파일

 

3. 템플릿 구성요소

 

- pug 템플릿

- app.pug, index.pug, views/*.pug로 구성

 

app.pug

- 기본구조가 정의되어있는 템플릿(head, body)

 

index.pug

- 부가요소(헤더, 컨텐츠, 푸터, 사이드바 등)

 

view/*.pug

- 코드 분할을 위한 템플릿(헤더, 컨텐츠, 푸터, 사이드바 등

 

4. 예제

 

├── views/ │     ├── Header.pug │     ├── Header │           ├── BlogTitle.pug │           └── BlogMenu.pug └── index.pug

생략...

 

5. 환경설정

 

- tidory.config.js

 

ts_session: string

- 티스토리 세션 값 : 쿠키의 TSSESSION 값

- 프리뷰, 빌드 및 배포시 사용 

 

url: string

- 티스토리 블로그 주소

- 프리뷰, 빌드 및 배포시 사용

 

preview.mode: string

- 프리뷰 모드

- 프리뷰 서버를 사용할 경우 기준 페이지를 설정

- 홈(index), 글(entry), 카테고리(category), 태그(tag), 위치로그(location), 미디어로그(media), 방명록(guestbook)

 

preview.homeType: string

- 홈 커버 개발

- 최신글(NONE), 커버(COVER)

 

preview.coverSettings: array[object]

- index.xml에 정의된 홈 커버를 시뮬레이션할 때 사용

- 스킨 편집에서 커버를 세팅할 필요 없이 커버의 컨텐츠, 인덱스, 제목 등을 지정하여 프리뷰할 수 있음

 

preview.variableSettings: object

- index.xml에 정의된 스킨 옵션에 해당하는 값을 시뮬레이션할 때 사용

 

build.public_path: string

- 컴포넌트 자원 공개경로

- 뷰, 리액트와 같은 컴포넌트에서 자바스크립트를 통해 이미지 같은 리소스를 사용할 경우 경로가 자동으로 변환되지 않아 공개경로를 설정해야 함.

  ex) https://tistory1.daumcdn.net/tistory/2710108/skin/images

- 개발자 도구를 통하여 script, link 태그에 쓰여있는 경로를 참조할 것.

 

alias: object

- 탬플릿 별칭

- 문자열, 함수

- 함수의 파라미터는 해당 별칭이 사용된 자원의 파일 이름

 

extends (webpackConfig: object)

- 웹팩 설정 확장

- 기본 웹팩 설정의 재정의(추가/확장)

 

- .env

- 템플릿 내부, app.js에서 사용하는 상수 설정 파일.

- 프레임워크에서 사용하는 것이 아닌 템플릿에서 사용됨.

ex) TISTORY_CLIENT_ID=thisisclientid

    > ${process.env.TISTORY_CLIENT_ID}

 

6. 빌드 및 배포

 

빌드

- tidory.config.js파일의 ts_session, url 항목이 정상적으로 등록되어야 함.

 

tidory build(압축)

- npm urn build

 

tidory production(비압축)

- npm run production

 

배포

- tidory.config.js파일의 ts_session, url 항목이 정상적으로 등록되어야 함.

- 배포전에는 빌드를 먼저 진행해야한다.

 

tidory store (스킨 저장소)

- npm run store

- 스킨의 이름은 index.xml에 있는 name 값으로 자동 주입됨.

 

tidory deploy (현재 스킨 덮어쓰기)

- npm run deploy

 

프로덕션 코드

 

dist/ ├── images/ │   ├── script.js │   └── app.js ├── preview256.jpg ├── preview560.jpg ├── preview1600.jpg ├── index.xml ├── skin.html └── style.css

images/*

- 템플릿 또는 컴포넌트에 포함된 리소스들이 모여있는 파일

- 템플릿 내부에서 scoped 속성을 사용하지 않은 script의 집합 script.js

- assets/app.js에서 포함한 에셋들의 집합 app.js

 

skin.html

- 티스토리 스킨으로 업로드할 최종 html 파일

 

style.css

- 템플릿에 있는 scoped 속성이 사용되지 않는 style 태그들의 집합 파일

 

preview*.jpg

- 사용자에게 스킨 미리보기 제공

- docs 폴더에 있던 미리보기 파일

- preview256.jpg, preview560.jpg, preview1600.jpg

 

index.xml

- docs 폴더에 있는 티스토리 스킨 설정 파일

 

코드 저장소

 

push-dir

- 코드 저장소에 특정 디렉토리를 특정 브랜치에 푸쉬할 수 있도록 하는 패키지

- 빌드 결과인 dist 데릭토리만을 독립적으로 다른 브랜치에 올릴수 있음.

- npm install --save-dev push-dir

 

package.json

- npm run deploy > npm run deploy:github 

  배포 순서에 따라 빌드하고, push-dir을 먼저 하는 것으로 코드 저장소에 푸쉬한 다음, 스킨에 적용시키도록 변경하면 코드 저장소와스킨 코드를 통일하게 만들 수 있다.

 

"scripts": { "deploy": "tidory deploy"}

"scripts": { "deploy:github": "tidory build && push-dir --dir=dist --branch=tistory-skin --cleanup && tidory deploy"}

티스토리 스킨 API

 

스킨 편집의 대부분의 기능(파일 및 스킨 추가, 삭제, 프리뷰, 스킨코드 변경 등)을 사용가능 함.

 

 

 

-----

pug 템플릿과 티스토리 스킨 가이드를 먼저 확인해 봐야할듯 싶다.

언젠간 해도 되겠지요?

-----

해야할 것이 많아 다음에 궁금한 분들이 나오거나 시간이 괜찮을 때

한번 샘플로 돌려서 올려보도록 하겠습니다.