티스토리 Stroke 스킨 v1.0.0 출시

 

stroke v1 출시

지난번에 공개했던 Stroke 스킨의 v1 을 출시하였습니다.

v0 에서 v1 으로 업그레이드 될 때 아래와 같은 점들이 변경 및 개선되었습니다.

• torytis 라는 자체 개발 툴을 사용하여 티스토리 스킨 개발을 위한 프로젝트에 모듈화를 적용하여 유지보수가 더 수월해졌습니다. (해당 툴도 별도로 소개하는 글을 작성할 예정입니다.)
• 스타일에 Tailwindcss 를 적용하였습니다.
• html 을 작성하는 데에 React 를 사용하였습니다.
• 다크모드 기능을 추가하였습니다.

 

스킨 다운로드 및 적용 방법

1. 스킨 파일 다운로드

아래 github 링크에 접속하신 후, Assets 부분에 있는 stroke_v{버전명}.zip 파일을 다운로드 받으세요.

https://github.com/wisdomstar94/torytis-tistory-skin-stroke/releases

Releases · wisdomstar94/torytis-tistory-skin-stroke

2. 압축해제

다운로드 받은 zip 파일을 압축해제하면 다음과 같이 파일들이 나옵니다.

 

3. 블로그 설정 -> 스킨변경 -> 스킨등록 페이지로 이동 후 파일들을 업로드 후 저장

 

4. 스킨변경 -> 스킨 보관함 페이지로 이동 후 등록한 스킨을 적용

 

 

스킨 기능 소개

Stroke 스킨에는 다음과 같은 기능이 지원됩니다.

• 반응형 지원 (디바이스 너비에 따라 최적화된 레이아웃 배치로 자동 변환됩니다.)
• 목차 지원 (포스트 글에 있는 h1 ~ h6 태그들을 읽어와 해당 목록을 우측에 표시합니다.)
• 다크모드 지원 (다크모드 on, off 모드는 사이드바 상단에 위치해 있으며 디폴트 설정으로 방문자가 on, off 할수 있게 되어있지만, "설정" -> "스킨 편집" 에서 항상 다크모드로 고정시킬 수도 있습니다.)
• 이미지 상세보기 기능 지원 (글에 첨부되어 있는 이미지 클릭시 Swiper 모달창이 표시되면서 이미지를 축소 및 확대하며 확인하실 수 있습니다.)
• 스킨 최신 버전 체크 기능 지원 (최신 버전을 일일이 확인할 필요 없이 스킨에서 자체적으로 체크하여 최신 버전이 존재할 경우 모달창으로 표시되어 알려줍니다.)

 

스킨 적용 모습

본 스킨이 적용된 모습을 확인해보고 싶으신 분들은 본 블로그에 Stroke 스킨이 적용되어 있으니 본 블로그를 살펴보시면 됩니다!

 

 

마치며

이용하시다가 기타 버그나 개선되길 바라는점, 다크모드시 처리가 미흡한 부분 등이 발견되면 본 포스트의 댓글이나 github 레포지토리의 issue 에 올려주시면 확인해보도록 하겠습니다.

 

감사합니다. :)