인쇄 플러그인
인쇄 기능을 지원합니다에서 설명한 것처럼 인쇄 플러그인은 내 '숙원사업(?)' 중 하나였다. 그러나 텍스트큐브 구조를 잘 모르는 나로서는 섣부르게 시도하기도 힘든 플러그인이었다. 다행이 "텍스트큐브에 사용된 함수를 플러그인에서 사용할 수 있다"는 것을 알게된 덕에 의외로 쉽게 인쇄 플러그인을 만들 수 있었다.
인쇄 플러그인
인쇄 기능을 지원합니다에서 설명한 것처럼 인쇄 플러그인은 내 '숙원사업(?)' 중 하나였다. 그러나 텍스트큐브의 구조를 잘 모르는 나로서는 섣부르게 시도하기도 힘든 플러그인이었다. 다행이 텍스트큐브에 사용된 함수를 플러그인에서 사용할 수 있다는 것을 알게된 덕에 의외로 쉽게 인쇄 플러그인을 만들 수 있었다.
미공개 플러그인 중 가장 먼저 만든 플러그인이 Firefox에서도 동작하도록 AnyLink를 적용한 수평분류 플러그인이고 그 다음에 만든 플러그인이 오즈용 최저가 주유소 검색 프로그램을 공개하면서 만든 dp.SyntaxHighlighter 플러그인지만 인쇄 플러그인을 가장 먼저 공개하는 것은 바로 이런 맥락이다. 플러그인을 설치하는 방법은 따로 설명하지 않겠다. 텍스트큐브를 사용하는 사람이라면 이미 알고 있을 것으로 생각하기 때문이다. 따라서 이 글에서는 '환경설정'과 '스킨 및 Style.css 파일을 만드는 방법'에 대해서만 설명하겠다.
내려받기
플러그인은 다음 링크에서 내려받을 수 있다. 내려받은 플러그인을 폴더채 플러그인 폴더(plugins/)에 올리면 된다.
환경설정
보통 플러그인에서는 $blogURL과 $plugURL 변수를 사용할 수 있다. 그러나 가상의 plugin 디렉토리로 호출하는 경우 이 두 개의 변수를 사용할 수 없었다. 따라서 이 항목까지 환경설정에서 설정해 주어야 한다.
- '관리도구/플러그인/인쇄 버튼 3'를 클릭한 뒤 '환경설정' 링크를 클릭한다.
다음 항목을 설정한다.
블로그 주소 자신의 블로그 주소를 입력한다. 루트 폴더에 텍스트큐브를 설치한 것이 아니라면 설치한 폴더의 주소까지 입력한다. 예를 들어 tc라는 폴더에 텍스트큐브를 설치했다면 블로그 주소는 플러그인 주소 보통은 기본값을 사용하면 된다. 그러나 플러그인을 vPrintArticle2 폴더가 아닌 다른 폴더에 설치했다면 플러그인 주소에 이 폴더에 대한 경로를 입력하면 된다. 선행 문자 인쇄 기능을 이용하려면 블로그 페이지에 인쇄 링크를 달아야 한다. 이 인쇄링크의 앞 부분에 삽입할 문자를 입력하면 된다. 기본 값은 :: 이다. 후행 문자 선행 문자와 마찬가지로 인쇄 링크 뒷 부분에 출력될 문자이다. 자신이 사용하고 있는 스킨에 맞춰 설정하면 된다. 인쇄 라벨 인쇄 링크의 이름을 입력한다. 기본값은 인쇄이며, 프린트처럼 인쇄 링크임을 표시하는 라벨을 입력하면 된다. 
- 환경 설정이 끝났다면 저장 단추를 클릭해서 플러그인의 환경을 저장한다.
스킨에 치환자 삽입 {#replace}
이제 남은 일은 스킨에 인쇄 링크를 달기 위해 치환자를 삽입하면 된다. 인쇄용 링크 치환자는 [##_print_article_##] 이므로 스킨의 적당한 위치에 이 치환자를 삽입하면 그림처럼 인쇄 링크가 나타난다.
인쇄 플러그인용 스킨
인쇄 플러그인은 자신이 사용하고 있는 스킨과 가장 비슷한 출력 화면을 만들기 위해 skin.html 파일을 사용한다. 아울러 사용되는 치환자는 '텍스트큐브에서 사용하는 치환자와 똑 같다'. 다만 지원하는 치환자가 별로없다. 따라서 자신만의 인쇄용 스킨을 만들고 싶은 사람은 다음 치환자를 이용해서 해서 인쇄용 스킨을 직접 만들 수 있다. 플러그인에 포함된 인쇄용 스킨은 현재 내가 1단으로 고쳐 사용하고 있는 'Moving Box'(Green)을 인쇄용 스킨으로 수정한 것이다.
<span class="detailB">치환자 설명</span>
~~~~
[##_blogger_##] 블로거의 필명(예: 도아)
[##_desc_##] 블로그 설명(예: 당신의 한마디가 세상을...)
[##_blog_link_##] 블로그 주소(예: https://offree.net/)
[##_title_##] 블로그 타이틀(예: 도아의 세상사는 이야기)
[##_page_title_##] 페이지 제목(글의 제목과 같음)
[##_article_rep_title_##] 글 제목
[##_article_rep_link_##] 글 주소
[##_article_rep_date_##] 글 작성일
[##_article_rep_desc_##] 글 내용
~~~~
<span class="detailB">인쇄용 스킨 파일의 예</span>
~~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta NAME="ROBOTS" CONTENT="NOARCHIVE">
<link title="skinStyle" rel="stylesheet" media="all" type="text/css" href="/plugins/vPrintArticle2/style.css" />
<title>[##_blogger_##] :: [##_page_title_##]</title>
<script type="text/javascript" src="/script/common2.js"></script>
</head>
<body onLoad='window.print(); return false;'>
<div id="wrap">
<!-- 포스팅 본문 -->
<div class="article">
<div class="article_head">
<div class="article_title">
<h2 class="title"><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a> by [##_blogger_##]</h2>
<div class="article_info">
<span class="date">[##_article_rep_date_##]</span> :: <a href="[##_article_rep_category_link_##]" class="category">[##_article_rep_category_##]</a> <br />
<a href="[##_article_rep_link_##]">[##_article_rep_link_##]</a>
</div>
</div>
<div class="clear"><img src="/skin/moving_box/images/bg_clear.gif" /></div>
</div>
<div class="article_post">
[##_article_rep_desc_##]
</div>
</div>
<div id="footer">
<div class="copyright">
<div class="footer_link">
Copyright 2004~2008 <a href="[##_blog_link_##]">[##_title_##]([##_blog_link_##])</a>
</div>
</div>
</div>
</div>
</body>
</html>
~~~~
사용하고 있는 플러그인 중 자바스크립트나 스타일쉬트를 이용하는 플러그인이 있다면 <HEAD>와 </HEAD> 사이에 플러그인이 사용하는 자바스크립트를 삽입해야 한다.
<span class="detailB">플러그인용 스크립트 삽입 예</span>
~~~~
<link rel="stylesheet" href="/plugins/vResampleLB/lightbox.css">
<script language="JavaScript" type="text/javascript"
src="/plugins/vResampleLB/lightbox_plus.js"></script>
~~~~
페이지를 읽자마자 인쇄 창을 띄우고 싶다면 <BODY> 태그를 다음처럼 바꾸어야 한다.
<span class="detailB">인쇄 창 바로 띄우기</span>
~~~~
<body onLoad='window.print(); return false;'>
~~~~
인쇄용 스타일쉬트
인쇄용 스킨에서 스타일쉬트를 사용하고 있다면 마찬가지로 스타일쉬트 역시 만들어 주어야 한다. 나는 Moving Box(Green)의 스타일쉬트에서 스킨에서 참조하고 있는 부분만 남기고 나머지는 삭제하는 방법으로 스타일쉬트를 만들었다.
<span class="detailB">인쇄용 스타일쉬트의 예</span>
~~~~
@font-face {font-family: 우리바탕; src:url(http://offree.com/attachment/gk150000000000.eot);}
@font-face {font-family: 우리새봄; src:url(http://offree.com/attachment/fk040000000000.eot);}
@charset "utf-8";
/* 공통 요소 */
body {margin: 0; padding: 5px; background:/*@background-color*/ /*@*/
/*@background-image*/ /*@*/
/*@background-image-repeat*/repeat-x /*@*/
/*@background-image-position*/0 /*@*/;
/*@title-height:-62*/0/*@*/; font-size:small; line-height:180%; font-family:우리바탕,돋움;}
a {text-decoration: none; }
a:hover {text-decoration: underline; }
img {border: 0;}
.ib .click img {vertical-align:baseline !important;}
hr {display: none; }
input {vertical-align: middle; }
ul, ol {margin: 0; padding: 0; list-style: none; }
li, dl, dt, dd {margin: 0; padding: 0; }
h1, h2, h3, h4 ,h5 ,h6 {margin: 0; padding: 0; line-height: 1em}
blockquote {margin-top: 0; margin-bottom: 0; padding: 0px 0 0px 24px; background: url('./images/icon_qoute.gif') no-repeat 0 0px; color: #868686; }
.clear {clear: both; }
.count {font-size: 11px; }
.body {/*@background-color*/ /*@*/
/*@background-image*/ /*@*/
/*@background-image-repeat*/ /*@*/
/*@background-image-position*/ /*@*/}
/* 포스트 내부 요소 */
.imageblock img { margin:15px 0;}
.location {line-height: 1.1em}
.article_post ul {padding: 0 15px; list-style-type: disc; }
.article_post ol {padding: 0 15px 0 45px; list-style-type: decimal; }
.article_post blockquote {margin-top: 0; margin-bottom: 0; padding: 10px 0 10px 24px; background: url('./images/icon_qoute.gif') no-repeat 0 0px; color: #868686; }
.article_post blockquote a {color: #868686; }
.article_post .moreless_fold {padding-left: 16px; background: url('./images/btn_more1.gif') no-repeat 0 50%; color: #5d5d5d; }
.article_post .moreless_top {padding-left: 16px; background: url('./images/btn_less1.gif') no-repeat 0 50%; color: #5d5d5d; }
.article_post .moreless_bottom {padding-left: 16px; background: url('./images/btn_less1.gif') no-repeat 0 50%; color: #5d5d5d; }
.article_post h1,
.article_post h2,
.article_post h3,
.article_post h4,
.article_post h5,
.article_post h6 {padding:10px 0; line-height:1.1em;}
/* content */
.separate {color:#b8b8b8;}
.article {width:/*@post-width*/700px/*@*/; overflow:hidden; margin-bottom:30px}
.article .article_head {border-bottom:#d8d8d8 dashed 1px;}
.article_head .article_title {float:left; width:/*@post-width:-64*/640px/*@*/; margin-left:10px;}
.article_title .title {color:#678d01; font-size:/*@post-title-font-size*/1.3em/*@*/; font-family:/*@post-title-font-family*/우리새봄,Tahoma, gulim/*@*/; font-weight:bold; line-height:1.1em; letter-spacing:-0.09em; padding:7px 0 5px 0;}
.article_title .title a {color:/*@post-title-color*/#678d01/*@*/;}
.article_head .article_info {color:#838382; font-size:0.85em; font-family:우리새봄,Tahoma;}
.article_info a {color:#838382;}
.article .article_post {padding:25px 10px 25px 0; color:/*@post-body-color*/#565656/*@*/; font-family:/*@post-body-font-family*/우리바탕, Tahoma, gulim/*@*/; font-size:/*@post-body-font-size*/10pt/*@*/;}
.article .article_post a {color: blue;}
.article .article_author {clear:both; padding:20px 0; color:#565656; text-align:right; font-family:우리새봄, Tahoma, gulim, gulim; font-size: 11pt;}
/* footer */
.copyright {border-top:1px solid #f0f0f0; color:#a6a6a6; font-size:1.2em; text-align: right; padding-right: 10px; width: 700px; font-family: 우리새봄}
.copyright a {color:#a6a6a6;}
.footer_banner {float:left; padding:3px 0 0 0; letter-spacing:-1px;}
.footer_banner img {vertical-align:middle; margin-bottom:8px;}
.footer_link {float:right; margin-top:12px; font-family:Tahoma;}
/* IE 핵 */
* html .ib {height:18px;}
*:first-child+html .ib {height:18px;}
.article_etc .search {border: solid red 1px}
.hanrss {float: right}
~~~~
마지막으로 작성된 스타일쉬트를 인쇄에서도 그대로 적용하고 싶다면 스킨에서 스타일쉬트를 지정하면 `media` 속성을 `screen`이 아니라 `print`나 `all`로 해야 한다.
<span class="detailB">예</span>
~~~~
<link title="skinStyle" rel="stylesheet" media="all"
type="text/css" href="/plugins/vPrintArticle2/style.css" />
~~~~
현재 이 플러그인은 단일 사용자 환경에 텍스트큐브를 루트에 설치해서 테스트했다. 다중 사용자 환경과 루트 폴더 이외의 폴더에서의 동작도 염두에 두었지만 시험해 보지 않았기 때문에 잘 동작하는지는 나도 모르고 있다. 따라서 다른 환경에서 이 플러그인이 잘 동작하지 않는다면 플러그인을 활성화한 뒤 동작하지 않는 페이지를 알려 주기 바란다.
다음은 인쇄용 플러그인을 적용한 뒤 출력된 인쇄용 화면이다.
Trackback
Trackback Address :: https://offree.net/trackback/1741
Comments
-
-
-
-
-
-
이수현 2008/06/09 21:56
설정을
블로그주소 :http://allsolution.kr/kls8
플러그인 주소 : /plugins/vPrintArticle2
선행 문자 : /
이렇게 했는데..
선행문자대로 '/ 인쇄' 라고 잘 나옵니다만
링크를 클릭하면 http://www.allsolution.kr/plugin/print/?id=1 라는 링크로 가게 되고...
페이지가 없다라는 말이 나오네요..
어떻게 해야 하나요? -
-
-
부사리 2008/11/04 15:30
도아님 도움감사합니다.
그런데 xml 경우처럼 각 블러그 특성마다 약간씩 다른 점이 있는 것인지 제가 부족함이 많은 것인지 블러그에 플러그인 적용하기가 힘드네요. ^^;
busari.net/blog(2단스킨)에도 적용해보고 krcafe.x-y.net/tc(1단스킨,테스트 블러그)에도 적용해 봤는데
두 곳 모두 인쇄버튼 클릭하면 데이터를 못 읽어오네요.
아무튼 매번 도움 감사했습니다.
항상 건강하세요~~~~~~~~~ ^^ -
NoSyu 2009/02/14 11:58
반갑습니다. Textcube 플러그인 페이지를 타고 왔습니다.
필요에 의해 찾다보니 이미 만들어져있네요.^^
덕분에 설치하여 사용할 수 있게 되었습니다.
좋은 플러그인 개발 및 공개해주셔서 고맙습니다.-
NoSyu 2009/02/14 12:49
Mr.Dust 님 블로그에 최근 댓글을 달지 않았더니...
눈팅만 하는지라...ㅎㅎ
한가지 질문이 있습니다.
스타일시트에서 overflow property에 hidden이 아니라 visible을 해야지 제대로 출력되는 것이 아닌가요?
IE에서는 제대로 출력되나 FF에서는 본문이 짤려 나오기에 이를 수정(정확하게는 제 입맛에 맞게 수정하였지만 여튼 hidden을 visible로 바꾸었습니다.)하여 원하는 결과를 얻었습니다.
CSS에 대해 잘 모르는지라 이렇게 질문 드립니다.
-
-
게토 2009/10/05 01:29
관련 없는 내용입니다만,
도아 님의 블로그에서 [인쇄]버튼 옆에 있는 [PDF저장]버튼은 누르면 페이지를 찾을 수 없다고 나오는군요;
사이트가 망한 듯 싶습니다;; -
서정호 2009/12/29 11:11
안녕하세요. 만들어주신 플러그인을 Textcube 1.7.8 : Con moto 판에서 다중 블로그 환경에서 사용하고 싶은데 에러가 납니다. 별도로 수정이 필요한 부분이 있을까요?
블로그 주소는 http://blog.changbi.com/weekly
플러그인 설치 주소는 /plugins/vPrintArticle2 로 했습니다.
블로그 글에 붙은 인쇄 링크를 클릭하면 에러가 납니다.
원본글 링크값 : http://blog.changbi.com/weekly/408
인쇄글 링크값 : http://blog.changbi.com/weekly/plugin/print/?id=408
경로의 문제인지 아니면 다른 원인인지 찾고 있는데 쉽지가 않습니다. 작은 도움이라도 주시면 감사하겠습니다.
Facebook