티스토리에는 지금 보고 있는 페이지가 속해있는 카테고리를 강조하는 기능이 없습니다. 아래 이미지가 사이드 카테고리에 지금 있는 페이지의 카테고리를 강조한 것입니다. 1. 구현 방법 구현 방법은 1) 지금 보고 있는 페이지에서 2) 카테고리 정보를 추출하여 3) 사이드 카테고리에서 찾아서 4) CSS를 추가하는 것입니다. 티스토리는 멀티페이지 사이트이므로 다른 페이지로 가면 페이지가 초기화됩니다. 그러니 이미 들어있는 CSS는 뺄 필요가 없습니다. 2. 카테고리 정보 찾기 카테고리 정보가 들어있는 곳은 스킨별로 다르므로 자신에게 맞는 검색 방법을 찾아야 합니다. 티스토리 치환자 기준으로 포스트 보기에서는 : 카테고리 내용 보기, 검색에서는 : 가 들어있는 'dom'을 찾으면 됩니다. 찾은 dom에서 데이터..

언제부터인가.... 이미지를 클릭하면 무조건 레이어팝업으로 뜨는 것을 알게 됐습니다. 티스토리의 레이어 팝업 이미지는 확대축소가 안 돼서 안 쓰고 있던 건데 말이죠. 비활성화 하려고 플러그인을 확인했는데..... 없어서 찾아보니 플러그인이 삭제됐다고 합니다. 근데 기능은 왜 남아 있어???? 1. 레이어 팝업 제거 검색해보니 이미지를 감싸고 있는 'span'의 'data-lightbox'속성을 제거하면 동작하지 않는다고 합니다. 아래 코드 중 자신에게 맞는 코드를 선택해서 실행하면 됩니다. 실행 시점은 도큐먼트가 모두 바인딩 되고 나서입니다. 예> window.onload(), $(window).onload 등등 //Vanilla JS document.querySelectorAll("[data-light..

티스토리에서는 '연관글' 혹은 '시리즈' 등을 구현하는 방법은 수동으로 작성하는 방법뿐입니다. 저도 수작업으로 연관글을 작성하고 있는데요.... 서너 개만 되도 모든 포스트에 들어가서 수정하는 게 큰일이 돼버립니다. 일반적인 사이트에서는 별도의 파일을 생성하거나 연관글을 관리할 수 있는 인터페이스가 재공되지만, 티스토리는 그런 게 없습니다. 그래서 저는 별도의 파일을 불러오도록 작업을 하고 'images'에 업로드하여 구현하여 사용하고 있었습니다. 그런데 이 방법은 스킨을 백업할 때 같이 백업된다는 문제와 내용을 수정하려면 'HTML'파일을 다운받아서 다시 업로드해야 하는 불편함이 있습니다. 1. 아이디어 티스토리 안에서 뭔가 할 수 없나 해서 이것저것 해봤지만..... 안 됩니다. 대신 쓸만한 기능이 ..

티스토리 가이드에 보면 '' 치환자는 필수라는 내용이 나옵니다. 참고 : 티스토리 스킨 가이드 - 공통 치환자 다른 포스트에서도 언급했었지만 ''와 같은 치환자는 티스토리 전용 기능을 위해 이것저것 잔뜩 불러온다는 문제가 있습니다. (참고 : [티스토리 스킨] 티스토리의 치환자는 자체 스크립트도 불러온다. ) 이런 기능들을 사용하지 않는다면 사이트 속도만 느려지게 만들죠. * 주의 * 이 치환자를 제거한 이후에 나오는 에러들은 상당한 자바스크립트(javascript) 지식이 있어야 해결할 수 있는 문제입니다. 자신이 없다면 제거하지 마시길 바랍니다. 제거로 인한 책임은 모두 자신에게 있음을 명심하세요. 기초적인 자바스크립트에 관한 질문은 받지 않습니다. 1. 제거해보기 일단'' 을 제거하고 블로그로 들어..

티스토리 스킨을 보면 '인덱스(index)'와 '퍼머링크(permalink)' 라는 것이 있습니다. (참고 : 티스토리 스킨 가이드 - 글 ) 이 둘은 뭔지 알아보겠습니다. 1. 인덱스(index) 페이지 인덱스 페이지는 '목록 구성 요소'가 '목록 + 내용' 혹은 '내용'일 때 나오는 페이지를 의미합니다. 홈을 이렇게 설정하면 아래와 같이 목록(포스트 리스트)과 포스트 내용이 함께 나옵니다. 빨간 네모를 보면 인덱스 페이지 치환자가 동작한 것을 알 수 있습니다. 2. 퍼머링크 (Permalink) '고유 주소'라는 의미가 있는데..... 그냥 포스트 내용을 의미합니다. 포스트를 클릭해서 들어가거나 주소를 입력해서 들어가면 볼 수 있는 페이지입니다. 3. 필요한가? 이런 이유로 구분되어 있지만 보통은 퍼..

블로그를 이전할 계획 중이라 티스토리 스킨을 만질 생각이 없었는데..... 티스토리의 몇 가지 개편들과 부트스트랩의 다음 버전이 나오면서 손을 안 댈 수 없는 상황이 되었네요. 그래서 일단 기존 '부트스트랩(bootstrap) + 티스토리(tistory)' 샘플을 업데이트하고 있습니다. 참고 : 티스토리 부트스트랩 테스트 부트스트랩 기본 예제인 "Carousel" 티스토리 기본 스킨인 "Whatever"를 기반으로 작업하였습니다. 1. 부트스트랩 5 에서 변경된 내용 1) 5버전으로 버전업 되면서 기본 아이콘 세트가 제외되었습니다. 용량도 많이 차지하면서 다른 아이콘 세트를 사용하는 사람이 많아서 제외된 거 같네요. 원하는 아이콘 세트가 있으면 자유롭게 넣을 수 있지만 일단 이 샘플에서는 아이콘을 모두 ..

인터넷을 뒤져보니 티스토리 로그인 체크는 티스토리 툴바(tistory toolbar)를 체크하는 방법 아니면 모든 페이지에 일관되게 체크할 수 있는 방법이 없는거 같습니다. 기존에 많은 분이 만든 코드가 있지만 마음에 드는 게 없어서 만들어 봅니다 ㅎㅎㅎ 0. 티스토리 툴바 표시 티스토리에서 '2차주소'를 사용할 때 '메뉴바 감추기'라는 옵션이 있는데 이 옵션이 체크되어 있으면 툴바 자체가 바인딩 되지 않습니다. 관리 > 기본 정보 > 주소설정 에서 확인 가능합니다. 툴바를 화면에 표시하고 싶지 않다면 css를 이용해야 합니다. css에 다음 코드를 추가합니다. 1 2 3 4 /* 티스토리 메뉴바 가리기*/ #tistorytoolbarid { display:none; } cs 1. 티스토리 툴바 분석 티..

제목이 좀 이해하기 힘들겠지만.... 티스토리에서 제공되는 치환자는 특정 데이터를 바인딩하는 기능 외에도 티스토리 자체에서 제공하는 스크립트를 로드하는 역할도 합니다. 예를 들면 바디영역에 선언하게 되어 있는 ''의 경우 '댓글 펼침'기능이 들어있는 자바스크립트를 로드하게 됩니다. 만약 ''를 제거한다면 댓글 펼침 시 에러가 나는 걸 볼 수 있습니다. 티스토리 스크립트에 'toggleLayerForEntry'함수가 들어있는 스크립트가 'common.js'인데 ''가 있고 없고에 따라 다른 스크립트를 불러온다는 것을 알 수 있습니다. 다른 사람의 티스토리 코드를 사용할 때 이것을 주의해야 합니다. 에러 내용을 잘 확인해서 치환자를 사용해야 하죠. 티스토리의 자체 스크립트를 제거하고 자신이 새로 구축하려면 ..

티스토리의 페이징 처리는 자동으로 바인딩해주기 때문에 css만 신경 쓰면 되는데.... '...'은 따로 노는 현상이 있습니다. 오노!!! 1. 원인 html을 확인하면 '...'만 'li'태그가 없는 것을 확인할 수 있습니다. 아마도 티스토리 쪽에서 '...'은 바인딩 처리를 하지 않는 거 같네요. 2. 해결 방법 css를 조작할 수 있다면 '.interword'를 재정의 하여 처리하시면 됩니다. 다른 방법은 자바스크립트(javascript)를 이용하는 방법입니다. css를 조작하는 건 html작업과 연관 있으니 각자 처리해야 합니다. 저는 제이쿼리(jquery)를 이용하여 '...'을 ''로 감싸는 방법을 사용하겠습니다. ''로 감싸주기만 하면 상속받은 스타일이 먹힐 테니 별도의 작업이 필요 없다는 ..

티스토리에서 스킨을 수정하면서 다루기 가장 귀찮을 요소를 꼽으라면 '카테고리'를 첫 번째로 꼽을 수 있습니다. 원하는 구조로 만들어서 나오는 게 아니라서 직접 수정해야 하는데....그마저도 사용 가능한 클래스 이름은 오버라이드해서 사용해야 하고 그마저도 없으면 css트리로 해결해야 해서 짜증이 증폭되죠 ㅎㅎㅎㅎ 1. 티스토리의 카테고리 알아보기 티스토리에서 카테고리는 2가지 치환자로 제공됩니다. (참고 : 티스토리 가이드 - 치환자 3-5. 카테고리) 1-1. 폴더 형식의 카테고리 치환자는 '' 입니다. 테이블 형태로 제공되며 접고 펼치는 기능이 붙어있는 체로 나옵니다. 1-2. 리스트 형식의 카테고리 치환자는 '' 입니다. '' 형태로 출력됩니다. 하위카테고리도 ''형태로 나옵니다. 2. html 분석..