티스토리

개요 현재 티스토리 스킨에 사용 중인 prism.js의 줄번호를 표시하는 플러그인을 추가하고자 합니다. 본문 스킨 편집 - + 사용법 앞서 body 태그에 line-numbers 클래스를 추가하였기 때문에, 기본적으로 code는 줄번호가 좌측에 추가됩니다. 특별히 줄번호를 추가하고 싶지 않을 경우, pre 태그에 no-line-numbers 클래스를 추가합니다. ... ... 출처 Line Numbers

개요 "애드센스를 사용하려면 사이트에서 발견된 문제를 해결해야 합니다."라는 다음과 같은 안내문을 받았습니다. 사이트에서 정책 위반이 발견되어 아직 광고를 게재할 수 없습니다. 가치 있는 인벤토리: 콘텐츠 없음 Google에서는 콘텐츠가 없는 경우 수익 창출을 허용하지 않습니다. ◦ 제작 중인 사이트 또는 앱에 대한 자리표시자 콘텐츠를 포함하는 콘텐츠가 없습니다. 자세한 내용은 다음 자료를 참조하세요. 일단 내용은 콘텐츠가 부족하다는 내용으로 보이는데 하단의 "제작 중인 사이트 또는 앱에 대한 자리표시자 콘텐츠를 포함하는 콘텐츠가 없습니다. 자세한 내용은 다음 자료를 참조하세요."라는 문장은 이해가 되지 않아 확인해 보았습니다. 구글 검색 결과 해당 문구로 직접 구글을 검색하니 해결방법이라는 내용들이 여..

개요 몇몇 사이트에 애드블록을 사용한 채 방문하면 콘텐츠가 보이지 않거나 비활성화되면서 애드블록을 비활성화하면 정상 접속이 가능하다는 안내가 표시됩니다. 이번 포스트에서는 개인적인 호기심으로 이것을 어떻게 작동하는지 확인한 내용을 정리해보도록 하겠습니다. 애드블록(Adblock) 사용여부 감지하기 방문자가 애드블록을 사용하고 있는지 감지하는 방법을 구현한 JavaScript 모듈의 내용을 살펴보았습니다. 요약하면 감지방법은 일단 자체적인 가짜 광고 DOM을 생성하고 (class 등의 속성을 널리 쓰이는 광고의 값으로 설정 및 ad와 같은 keyword를 삽입) 이것을 잠시 후 확인하여 제거되었을 경우 방문자가 애드블록을 사용하고 있다고 판단하는 것입니다. 티스토리에 적용하기 JavaScript로 구현된 ..

개요 그동안 블로그를 운영하며 별 고민 없이 콘텐츠를 무단으로 복사할 수 없도록 티스토리에서 제공하는 플러그인을 사용하여 마우스의 사용을 막아 놓았습니다. 하지만 가만히 생각해보니 제 블로그에 기록해 놓은 많은 코드 부분(이하 코드 블록)의 경우 사용하기 위해서는 Copy & Paste 작업이 필요한 것을 깨닫게 되었습니다. 최근 이를 위하여 코드블록에 대해서 마우스를 이용하여 선택을 할 수 있도록 변경하였습니다. 이번에는 여기에 더하여 코드블록의 오른쪽 상단에 복사를 할 수 있는 버튼을 추가하여 사용자가 직접 드래그 등의 추가 조작 없이 편리하게 해당 콘텐츠를 이용할 수 있도록 하는 기능을 추가하였습니다. 이번 포스트에서는 티스토리의 스킨을 편집하여 코드블록에 복사 버튼을 추가한 내용을 정리하겠습니다...

개요 카테고리의 표시 형식은 티스토리의 형식이 아닌 Bootstrap의 리스트그룹으로 표시하고 있습니다. 최초 스킨 배포자의 경우, JavaScript를 사용하여 상위 레벨의 카테고리만 표시하도록 설정을 해 놓았습니다. 저의 경우는 서브 카테고리를 사용하기에 이 역시 화면에 함께 표시를 하고자 하였습니다. 따라서 해당 리스트그룹을 접었다 폈다 할 수 있는 형식으로 변경하였습니다. 완성된 모습은 다음과 같습니다. 수정사항 기존의 코드는 다음과 같습니다. // script.js var categories = []; // 전체 글 갯수 구하기 var totalNumberOfPosts = $("a.link_tit > span").text().match(/\(([^)]+)\)/)[1]; categories.pus..

개요 제가 수행하는 업무와 관심사로 인하여 제가 작성하는 대부분의 포스트는 소스코드가 삽입되어 있습니다. 때문에 이를 조금이라도 보기 좋게 표시 해줄 수 있도록 구문 강조기능을 적용해 주었습니다.Prismjs는 구문강조(syntax highlighter) 기능을 사용할 수 있도록 해주는 JavaScript module입니다. 다음과 같이 차이가 발생합니다.c언어 문법강조 미적용 #include int main(void) { printf("hello world\n"); return 0; } c언어 문법강조 예시 #include int main(void) { printf("hello world\n"); return 0; } 티스토리 적용하기 스킨수정 참고 : PrismJs - Basic Usage티스토리의 ..

개요 참고 : HTML Snippets for Twitter Boostrap framework : Bootsnipp.com 모바일 환경에서 편리하게 페이지 내에서 이동할 수 있도록, 오른쪽 하단에 back to top 버튼을 추가하였습니다. 화면이 아래로 스크롤되면 왼쪽 하단에 표시되며 누르면 스크롤되어 페이지 상단으로 이동하는 기능입니다. back to top 버튼 추가 작업은 티스토리의 스킨편집창에서 진행합니다. 단순한 기능이지만 조금더 멋스럽고 자연스럽게 화면을 스크롤해주고 툴팁이 사라지는 등의 애니메이션 기능이 필요하기 때문에 Jquery 라이브러리를 변경해주어야 합니다. html 항목을 선택한 후, 아래의 소스코드를 태그 아래에 추가하였습니다. Top 기존 수정들과 달리 html 뿐만 아니라 C..

개요 이번 포스트에서는 블로그의 접속 시 글의 제목과 본문이 표시되는 영역, 그리고 포스트 및 공지사항을 수정하도록 하겠습니다. 수정 대상 영역은 아래와 같습니다. Read more 버튼으로 교체하기 기초 템플릿은 메인화면에 글제목과 내용의 앞부분이 표시되며 글의 전체 내용을 보기 위한 주소는 Read more라는 링크로 되어있습니다. 이를 버튼으로 교체하였습니다. 스킨편집창에서 Read more 를 검색하여 해당부분을 찾습니다. 앞서 복사한 코드를 붙여 넣으면 링크대신 버튼으로 표시됩니다. [수정전 - 기본 템플릿] Read more [수정후 - 현재 버전] Read more → 댓글 시스템 교체하기 기본 템플릿은 티스토리의 기본 댓글 시스템이 적용되어있지 않았습니다. (덕분에 다양한 댓글 시스템이 있..