• 티스토리 홈
  • 프로필사진
    루루개발자
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
루루개발자
  • 프로필사진
    루루개발자
    • 분류 전체보기 (213)
      • react & next.js (13)
      • Node.js & Javascript & Type.. (24)
        • d3.js (10)
      • 차트 만들기 (1)
      • 티스토리 스킨 개발 (7)
      • 내가 만든 패키지 (3)
      • 내가 만든 CSS (1)
      • CSS (7)
      • 도커 & 쿠버네티스 (3)
      • 개인 프로젝트 (7)
      • 리뷰 & 추천 (2)
      • 알고리즘 (1)
      • IT 기타 (18)
      • 잡동사니 (1)
      • Spring Boot (5)
      • 취미로 그리는 그림들 (120)
      • 개인적인 생각들 (0)
  • 반응형
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • 티스토리 Stroke 스킨 v1.0.0 출시
        2023년 10월 03일
        • 루루개발자
        • 작성자
        • 2023.10.03.:31
        반응형

         

        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

        기존 stroke 티스토리 스킨 레포지토리를 torytis 프레임워크(자체 개발)를 활용하여 마이그레이션한 레포지토리 입니다. - wisdomstar94/torytis-tistory-skin-stroke

        github.com

        2. 압축해제

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

         

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

         

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

         

        스킨 적용 사진

         

         

         

        스킨 기능 소개

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

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

         

         

        마치며

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

         

        감사합니다. :)

        반응형

        '티스토리 스킨 개발' 카테고리의 다른 글

        [torytis] 프레임워크 가이드 문서 웹사이트 배포  (3) 2024.10.06
        Tistory Cyworld Minihompi UI Skin 개발  (39) 2024.10.02
        Tistory Discord UI Skin 개발  (46) 2024.09.22
        티스토리 Stroke 스킨 개발 일지  (5) 2024.01.25
        [torytis] 티스토리 스킨 개발 프레임워크  (7) 2023.10.06
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바