티스토리에 인쇄버튼 달기 총정리

티스토리로 블로그를 운영하다 보면 글 인쇄 기능에 대한 부족함을 많이 느끼게 됩니다.

 

인터넷 브라우저에서 인쇄를 실행하면, 본문 외에도 블로그에 들어 있는 광고, 사이드바, 다른 연계 글 등이 함께 인쇄되어 보기도 싫고 종이와 프린터 잉크를 낭비하게 됩니다. 그런데 포털에서 직접 제공하는 블로그에는 하단에 인쇄하기 버튼이 있어 이걸 누르면 글만 예쁘게 인쇄할 수 있어서 부러웠습니다.

 

티스토리 블로그 인쇄 기능에 대한 아쉬움은 저만 갖고 있는 것은 아닐 것 같아서 인터넷 검색을 해 보았습니다. 여러개의 글과 방법이 올라와 있는데 제가 원하는 수준만큼으로 되어 있지 않고, 실제 구현해 놓은 곳을 찾기도 어려웠습니다. 이에 오래간만에 Javascript로 코딩을 시작하게 되었습니다.

 

현재 인쇄하기 기능은 코딩을 이미 완료하여 제 블로그에 적용되어 있습니다.

 

아래 그림에 있는 것처럼 제 블로그의 다음 뷰 추천 버튼 하단에 프린터 모양의 인쇄 버튼 아이콘이 있는데 이걸 누르면 제목과 본문만 출력 가능한 별도의 인쇄하기 창이 열립니다. 궁금하신 분들은 직접 시험해 보세요 !

 

제가 인쇄버튼 달면서 참조했던 모델은 까오기네 블로그에 올라온 방법입니다(글 링크). 여러가지 제시된 방법에 비해 융통성이 가장 높았기에 이 방식을 선택 했습니다.

제 블로그 인쇄버튼 달기의 기본 동작 원리는 다음과 같습니다.

 

   티스토리는 사용자들이 Skin을 직접 수정할 수 있도록 허용하고 있는데 모든 것에 대한 자유가 있는 것은 아닙니다. 글의 제목이나 본문 등은 티스토리 서버에서 모든 것을 일괄 처리한 후 전체를 한꺼번에 보내주기 때문에 Skin에서 세세하게 설정할 수 없습니다. 실제로 Skin.html에서 글의 제목은 article_rep_title, 글의 본문은 article_rep_desc로 표기된 위치에 자동적으로 나타나게 됩니다.

  제 블로그의 경우 글 본문에 모바일에서의 광고 노출을 위해 구글 광고 코드를 넣었습니다. 따라서 티스토리 서버가 보내오는 본문 내용을 그대로 출력하면 구글 광고까지 포함되어져 나오기에 이를 처리하기 위해서는 JavaScript로 별도의 처리 루틴을 만들어주어야만 합니다.

 

  또한 인터넷 브라우저에 Internet Explorer, Firefox, Chrome 등이 있는데 브라우저별로 처리하는 방식이 약간씩 다릅니다. 따라서 브라우저별 차이에 따른 오류 처리를 위해서도 추가 처리 루틴이 필요합니다. 이러한 상황이 반영되어 최종적으로 만들어진 코드를 보면 무척 복잡해 보입니다. 그러나 하나하나 살펴보면 그리 어렵지도 복잡하지도 않습니다.

 

  그리고 인쇄하기 기능을 구현하면서 블로그 글이 쉽게 복사될 수 있어서는 안될 것입니다. 마우스로 영역 선택 후 복사가 된다면 원하지 않는 퍼가기가 증가할 것이기 때문입니다. 따라서 이 기능도 구현했습니다. 제 블로그의 인쇄하기 버튼을 누르면 별도 창으로 글이 나오는데 이 창에서 마우스로 영역을 선택하거나 복사할 수 없게 되어 있습니다. 이 기능이 필요치 않은 분들은 당연히 이를 제외 시킬 수도 있습니다. 

인쇄 버튼의 전체적인 동작 과정은 다음과 같습니다.

  Skin에서 글 제목에 대한 Div tag에 art_title, 본문은 art1으로 고유의 이름을 부여 합니다. 이렇게 지정하는 이유는 티스토리 서버가 보내오는 데이터에서 제목과 본문을 JavaScript로 분류하기 위함입니다.

 

   div class="titleWrap" id="art_title"

   div class="article" id="art1"

 

  인쇄 버튼을 클릭하면 PrintArea3라는 JavaScript 함수가 실행됩니다.

  글 제목으로 전달된 데이터(art_title)에서 순수한 글 제목만을 분리합니다.

      - 제목 시작 영역은 <h2>, 끝나는 영역은 </a>를 이용하여 전달된 데이터 내에서의 위치 게산

      - JavaScript의 문자 추출 함수인 .substring()을 이용하여 제목 문자열만 추출

      - Internet Explorer, FireFox, Chrome별 대소문자 처리 방식의 차이를 고려하여 If 조건문으로 별도 처리

 글 본문으로 전달된 데이터에서 광고 등 불필요한 영역 제외 후 분리

     - 본문 시작 영역은 데이터에 포함되어 있는 tt_article_useless라는 문자열을 이용하여 추출

     - 본문 마지막 영역은 저작권 표시 아이콘 영역에 있는 entry -ccl이라는 문자열을 이용하여 추출

 인쇄 시 상단을 꾸미는 HTML 코드를 변수에 저장

    - 블로그에 대한 설명, 제목 등

    - 글 복사 방지를 위한 Javascript code 추가

 구글 광고가 들어가 있지 않은 글의 경우  tt_article_useless라는 문자열이 없으므로 이에 대한 예외처리 조건 추가

   - </ iframe> 및 < div style 태그를 찾아 제외 시킴

 

 인쇄 후 하단에 넣을 저작권 표시, 출력하기버튼 등의 HTML 코드를 추가

 모든 내용을 변수에 넣은 후 새롭게 인쇄하기 창(window)을 생성

   - 폭 800, 높이 600, 스크롤바 있고, 윈도우 크기 변경 가능 조건(너무 크면 본 화면을 가려 작게 창을 만듬)

   - 변수를 이용하여 새로 만들어진 Window에 추출했던 제목, 본문, 꾸밈글을 보내면 화면에 출력 됨

   

새로 열린 Window의 최 하단에 있는 "츨력하기" 버튼으로 인쇄, "창 닫기"로 인쇄하지 않고 종료 가능

 

 

 

위의 모든 내용 및 다른 사항들까지 구현된 제 블로그의 Skin.html 화일을 여러분들이 참조할 수 있도록 가감없이 그대로 첨부 합니다.

 

MS-Word 화일이며 인쇄버튼과 관련된 영역은 붉은 색으로 표시 했으니 쉽게 찾을 수 있을 겁니다. 그리고 제가 코딩 과정에서 넣었던 주석 사항과 Debugging 코드들도 그대로 넣었으니 참고 하시기 바랍니다. 디버깅 영역 제외, 논리 단순화 등의 최적화는 향후 추가적으로 진행할 예정입니다.  

 

       블로그의 skin.html 화일 다운로드:     sensechef_com_skin_for_print.docx 

전체가 함께 들어 있어 보기 어려운 분들을 위해 각각 부분을 나누어서 올려 드립니다.

인쇄버튼_처리_함수_JavaScript.txt

글_제목_영역..txt

글_본문_인쇄버튼 용역..txt

그리고 인쇄 버튼의 경우 프린터 모양의 이미지를 이용하기에 이를 티스토리 서버에 다음 방법으로 미리 올려 놓아야만 합니다.

   - 티스토리 관리자로 로그인 후 HTML/CSS 편집

   - 파일업로드 탭에서 하단의 추가 버튼 이용하여 다음 이미지 업로드   

스크립트를 이해 하려면 JavaScript 함수에 대한 이해가 필요하여 중요한 것들에 대해 요약 정리하여 올려 드리오니 참조 하세요 !

var temp_title = getObject(pTitle).innerHTML;

    :  pTitle로 전해진 제목영역의 데이터를 문자열로 temp_title에 저장

var tLen9=temp_title.indexOf("<h2 class");

    : temp에 저장된 문자열 중에서 ""로 둘러싸인 영역의 문자열이 몇번째 위치에 있는지 계산하여 tLen9에 저장

var tLen53 = temp.toLowerCase().lastIndexOf("style");

    : indexOf는 문자열의 처음부분부터 검색하나 lastindexOf는 문자열의 끝부분부터 검색

    : toLowerCase()는 대문자로 되어 있는 것은 소문자로 바꾸어 처리하라는 의미

temp_title_only = temp_title.substring(10, 20);

   : temp_title에 저장된 문자열에서 10번째부터 20번째 사이의 문자열만 추출하여 temp_title_only에 저장

alert("tLen51_iframe " + tLen51 ); 

   : tLen51_iframe이라고 출력하고 여기에 tLen51의 변수에 있는 내용을 화면에 출력. 디버깅 용도로 활용

//alert("tLen5 " + tLen5 );   

    : JavaScript에서 실행을 하지 않으려면 앞에 //를 붙여 주면 됨. 디버깅 용도로 활용 후 화면에 더 이상 출력되지 않도록 할 때 붙임

여기까지 글을 보신 분들은 "인쇄 버튼은 너무 복잡해 포기해야겠다"는 생각을 할 수도 있습니다. 그러나 제 블로그의 경우 광고 등이 복잡하게 들어있기 때문이구요, 단순한 스킨을 쓰시는 분들은 쉽게 구현할 수 있습니다. 또 복잡하더라도 시간을 갖고 구현하면 충분히 가능합니다.

그리고 글 본문 내용에 div 태그가 들어 있으면 글이 다 나오지 않고 중간에 잘립니다. 현재 구현 방식이 그렇게 되어 있기 때문입니다. 따라서 제 함수를 변경없이 이용하는 분들은 글 본문 내용에 div 태그를 쓰지 않아야 합니다. 그러나 꼭 들어가야 한다면 다른 구분자를 찾아서 변경해 보시기 바랍니다.

시도해 보시고 궁금한 사항이 있으면 문의 주세요 ! 행복한 블로그 생활 되세요 !

감사합니다.