안녕하세요!
오늘은 티스토리 스킨을 새로 바꿔보고, 바꾸면서 헤맸던 부분을 공유해드리려고해요.
hELLO 스킨
일단 저는 hELLO 라고 하는 스킨을 적용했습니다.
개발자들에게 아주 인기 있는 스킨이라고 하더라구요!
정상우 개발자 님이 제작하셨으며, 아래 포스팅에서 다운로드 받을 수 있습니다.
https://pronist.tistory.com/5?category=844785
hELLO 티스토리 스킨을 소개합니다.
hELLO 스킨은 본래 기능의 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기
pronist.dev
스킨 적용하기
관리자 페이지에 들어가서 스킨 변경 > 스킨 등록 을 눌러줍니다.
추가 버튼을 누른 후 다운로드 받은 hELLO 스킨 파일들을 추가해줍니다.
다운 받은 여러 폴더, 파일 중에는 image 라는 폴더도 있을텐데요.
이 폴더 안에 있는 파일들도 모두! 추가해주셔야합니다(이걸 올리지 않아서 문제를 겪는 분들이 많은 것 같더라구요.)
추가 하셨다면 이번엔 스킨 보관함에 들어가봅니다.
우리가 등록해놓은 스킨을 볼 수 있습니다.
저 위에 마우스를 올리면 적용이라는 버튼이 뜰거예요. 클릭해주시면 적용이 됩니다.
혹시 이 스킨을 적용하면서 잘 안되는부분이나, 문제가 생겼다면
아래의 깃허브 레포지터리에서 issue 부분을 먼저 확인해보세요!
비슷한 문제를 겪으셨던 분들의 해결방법이 잘 나와있습니다.
https://github.com/pronist/tistory-skin-hELLO/issues?page=2&q=
GitHub - pronist/tistory-skin-hELLO: 😎 당신의 멋진 블로그에 걸맞는 최고의 티스토리 스킨
😎 당신의 멋진 블로그에 걸맞는 최고의 티스토리 스킨. Contribute to pronist/tistory-skin-hELLO development by creating an account on GitHub.
github.com
별모양 버튼의 정체
오른쪽 상단에 있는 별모양 버튼은 눌러도 아무런 동작을 안하길래 궁금했는데 원래 구독 버튼이라고 하네요!
로그인한 본인이 본인 블로그의 별모양 버튼을 누르면 아무런 동작을 안하는게 맞고, 다른 사람이 눌렀을 때에는 구독 기능 정상작동한다고 합니다.
기본 목록 스타일
스킨 편집 > 기본 설정에 보시면 기본 목록 스타일을 설정하실 수 있는데요
리스트, 그리드, 지그재그. 총 3개의 스타일이 있습니다.
맘에드는 스타일로 설정하면 되겠습니다.
저는 무난한 리스트 스타일로 설정했어요!
글쓰기 버튼 추가하기
이 스킨을 적용했을 때 처음 마주하는 당황스러운 문제점은 글쓰기 버튼이 없다는 것입니다..!
관리자 페이지에 들어가서 글쓰기 버튼을 누를 수도 있었지만
기존에 사용하던 스킨은 글쓰기 버튼 접근성이 좋았었거든요 😓
맥북 기준 command + Q 를 누르면 바로 관리자 페이지로 넘어갈 수도 있지만
그래도 글쓰기 버튼을 한번 만들어보도록 하겠습니다.
따로 html css 를 건들진 않구요. 블로그 메뉴에 추가해줄거라서 단순 티스토리 내부 기본 기능을 이용할 거예요.
(스킨 제작자 정상우 개발자님의 포스팅을 참고하였습니다)
블로그 설정 > 메뉴 에 들어갑니다
그리고 이름을 '글쓰기'라고 작성해주고 (자유!)
링크 부분은 (본인의 블로그 링크)/manage/post 로 설정해주었습니다.
추가 버튼을 눌러주면 끝!
사이드바를 펼치면 블로그 메뉴에 글쓰기 버튼이 생긴 것을 확인하실 수 있습니다.
궁금해서 로그아웃하고 클릭해보았는데, 티스토리 로그인 화면으로 넘어가더라구요.
보이는건 모두한테 보이지만 로그인한 본인만 접근할 수 있으니 걱정안하셔도돼요!
highlight.js 적용
이번에는 highlight.js 라는 것을 적용시켜볼텐데요.
개발자들이라면 블로그에 코드블럭을 많이 작성하실겁니다.
이 코드블럭을 예쁘게 바꿔주는 기능을 추가해볼거예요!
https://highlightjs.org/download/
Getting highlight.js
Hosted A prebuilt version of highlight.js with 36 commonly used languages is hosted by following CDNs: cdnjs jsdelivr unpkg You can find the list of commonly used languages below in the custom download form. For other available styles look into the highlig
highlightjs.org
위 링크에 들어가서 원하는 언어를 체크해준 뒤(저는 Common 만 체크한 상태로 그대로 뒀어요)
맨 밑으로 내리면 다운로드 버튼이 보입니다.
클릭해서 파일 다운받기!
이번엔 원하는 테마를 골라볼거예요.
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
위 링크에서 테마들을 구경할 수 있습니다.
저는 Vs 2015 가 제일 예뻐서 이걸로 선택했어요!
이번엔 블로그 설정 > 스킨 편집 > Html 편집 > 파일 업로드 으로 들어가봅니다.
방금 다운로드 받은 파일중에 highlight.min.js 를 추가해주고,
다운로드 받은 파일에 들어가보면 styles 라는 폴더가 있을텐데, 이 안에 있는 테마 css 파일도 추가해주면 됩니다.
(저 같은 경우에는 vs2015.min.css 가 되겠네요)
정리하자면 두개의 파일을 추가해야하는데 아래와 같습니다.
1. highlight.min.js
2. (원하는 테마 이름).min.css
그리고 이번엔 파일 업로드가 아닌 HTML 탭으로 가서 아래와 같이 코드를 4줄 추가해줍니다.
<head> 태그 안에 위치시켜주시면돼요.
전 </head> 바로 위에 복사 붙여넣기 해줬습니다.
<!--Syntax Highlighter-->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/vs2015.min.css">
<script>hljs.initHighlightingOnLoad();</script>다 됐다면 적용을 누릅니다.
혹시 기존 설정해놓은 플러그인 중에서 Syntax Highlight 가 있다면 이건 설정 해제해주시면 됩니다.
(켜놨다가 문제를 겪는 사람들이 있나봅니다)
폰트, 가로스크롤 추가
CSS 맨 아래에 다음과 같은 코드를 추가해줍니다.
pre code {
font-family: "consolas", monospace;
font-size:0.9rem;
line-height: 1.3;
}
pre code.hljs {
padding: 10px; margin: 15px 0; max-width: 100%;
overflow-x: auto; overflow-y: hidden; border-radius: 7px; line-height: 130%;
}
.hljs {
white-space: pre;
overflow-x: auto;
}
/* for block of numbers */
.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
color: #ccc;
border-right: 2px solid #CCC;
vertical-align: top;
padding-right: 10px !important;
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
padding-left: 15px !important;
}이렇게 추가해주면 폰트가 이렇게 바뀌고 숫자 옆에 길게 세로바가 생겨서 코드가 좀 더 깔끔해보일거예요!
근데 지금 문제는, 밝은 바탕에 밝은색 글씨가 적용되어서 잘 안보이는 겁니다!
저는 항상 다크모드처럼 코드블럭이 보였으면 하는데 말이죠..
구글링을 열심히 해봤는데 제가 사용한 방법은 다음과 같습니다.
CSS 에서 pre code 를 검색하면 border-radius 를 적용하는 contents-style 속성이 있는데요.
이 안에 다음과 같은 코드를 작성해줬습니다.
background-color: #292A2D !important;
그러면 이렇게 라이트모드에서도 코드블럭 배경색을 어둡게 만들 수 있어요!
이미지 원본 팝업 문제
저한테는 이미지를 클릭해도, 원본이미지가 팝업으로 뜨는 기능이 작동을 안하더라구요.
맨 아래 블로그에서 해결방법을 찾아 공유합니다!
블로그 설정 > 스킨 편집 > Html 편집 으로 들어가
<head> 태그 바로 아래에 다음과 같은 코드를 추가해줍니다.
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
그럼 이미지 팝업이 잘 뜨는 것을 확인하실 수 있습니다!
코드 블럭 내의 텍스트 색 수정(24.03.06 추가)
스킨을 사용하다보니 코드블럭 내의 특정 class가 어둡게 나타나는 문제가 있었습니다.
예를 들어 다음과 같습니다.
위 예시에서는 'Dog' 라는 글자가 라이트 모드일 때에 #ccc(하얀색) 으로 보이지 않아 문제였습니다.
그래서 개발자 도구를 켜서 이 요소의 이름을 확인했습니다.
마우스를 올려놓으니 class 이름이 hljs-title.class_ 인 것을 확인할 수 있었어요.
이 요소의 색이 현재는 #5C2699(어두운 보라색) 로 되어있는데, #CCC(하얀색) 으로 수정해주면 될 것 같아요.
티스토리의 스킨 편집 > html 편집 으로 들어가줍니다.
그리고 CSS 탭으로 들어가주세요.
그리고 위와 같이 hljs-title.class_ 의 color 를 제가 원하는 #ccc(하얀색)으로 지정해주는 코드를 작성합니다.
.hljs-title.class_ {
color: #ccc !important;
}
작성 후 '적용'을 누르고 미리보기로 수정된 화면을 확인해보겠습니다.
제가 원하던 대로 코드 블럭 내의 요소 color가 수정되었습니다.
포스팅 읽어주셔서 감사합니다 :D
ref: https://leeporter.tistory.com/19
티스토리 스킨 적용하기 (feat. hELLO, highlight.js)
2023.01.04 수정 - 2022년 10월에 있었던 데이터센터 화재로 카카오 서버가 먹통이 되었고, 이후 복구 과정에서 여러 문제점들이 발생되었는데, 그 중 지금까지 문제가 지속되던 '이미지 클릭 시 원본
leeporter.tistory.com
