도아 :: 텍스트큐브: 인쇄 플러그인

인쇄 기능을 지원합니다에서 설명한 것처럼 인쇄 플러그인은 필자의 숙원사업(?) 중 하나였다. 그러나 텍스트큐브

의 구조를 잘 모르는 필자로서는 섣부르게 시도하기도 힘든 플러그인이었다. 다행이 텍스트큐브에 사용된 함수를 플러그인에서 사용할 수 있다는 것을 알게된 덕에 의외로 쉽게 인쇄 플러그인을 만들 수 있었다.

미공개 플러그인 중 가장 먼저 만든 플러그인이 Firefox에서도 동작하도록 AnyLink를 적용한 수평분류 플러그인이고 그 다음에 만든 플러그인이 오즈용 최저가 주유소 검색 프로그램을 공개하면서 만든 dp.SyntaxHighlighter 플러그인지만 인쇄 플러그인을 가장 먼저 공개하는 것은 바로 이런 맥락이다. 플러그인을 설치하는 방법은 따로 설명하지 않겠다. 텍스트큐브 를 사용하는 사람이라면 이미 알고 있을 것으로 생각하기 때문이다. 따라서 이 글에서는 환경설정과 스킨 및 Style.css 파일을 만드는 방법에 대해서만 설명하겠다.

내려받기

플러그인은 다음 링크에서 내려받을 수 있다. 내려받은 플러그인을 폴더채 플러그인 폴더(plugins/)에 올리면 된다.

vPrintArticle2.zip

환경설정

보통 플러그인에서는 $blogURL과 $plugURL 변수를 사용할 수 있다. 그러나 가상의 plugin 디렉토리로 호출하는 경우 이 두 개의 변수를 사용할 수 없었다. 따라서 이 항목까지 환경설정에서 설정해 주어야 한다.

관리도구/플러그인/인쇄 버튼 3를 클릭한 뒤 환경설정 링크를 클릭한다.

다음 항목을 설정한다.

블로그 주소	자신의 블로그 주소를 입력한다. 루트 폴더에 텍스트큐브를 설치한 것이 아니라면 설치한 폴더의 주소까지 입력한다. 예를 들어 tc라는 폴더에 텍스트큐브를 설치했다면 블로그 주소는 http://offree.net/tc를 입력해야 한다. 마지막에 /를 입력하지 않도록 주의한다.
플러그인 주소	보통은 기본값을 사용하면 된다. 그러나 플러그인을 vPrintArticle2 폴더가 아닌 다른 폴더에 설치했다면 플러그인 주소에 이 폴더에 대한 경로를 입력하면 된다.
선행 문자	인쇄 기능을 이용하려면 블로그 페이지에 인쇄 링크를 달아야 한다. 이 인쇄링크의 앞 부분에 삽입할 문자를 입력하면 된다. 기본 값은 :: 이다.
후행 문자	선행 문자와 마찬가지로 인쇄 링크 뒷 부분에 출력될 문자이다. 자신이 사용하고 있는 스킨에 맞춰 설정하면 된다.
인쇄 라벨	인쇄 링크의 이름을 입력한다. 기본값은 인쇄이며, 프린트처럼 인쇄 링크임을 표시하는 라벨을 입력하면 된다.

환경 설정이 끝났다면 저장 단추를 클릭해서 플러그인의 환경을 저장한다.

스킨에 치환자 삽입

이제 남은 일은 스킨에 인쇄 링크를 달기 위해 치환자를 삽입하면 된다. 인쇄용 링크 치환자는 [##_print_article_##] 이므로 스킨의 적당한 위치에 이 치환자를 삽입하면 그림처럼 인쇄 링크가 나타난다.

인쇄 플러그인용 스킨

인쇄 플러그인은 자신이 사용하고 있는 스킨과 가장 비슷한 출력 화면을 만들기 위해 skin.html 파일을 사용한다. 아울러 사용되는 치환자는 텍스트큐브에서 사용하는 치환자와 똑 같다. 다만 지원하는 치환자가 별로없다. 따라서 자신만의 인쇄용 스킨을 만들고 싶은 사람은 다음 치환자를 이용해서 해서 인쇄용 스킨을 직접 만들 수 있다. 플러그인에 포함된 인쇄용 스킨은 현재 필자가 1단으로 고처 사용하고 있는 Moving Box(Green)을 인쇄용 스킨으로 수정한 것이다.

치환자 설명

인쇄용 스킨 파일의 예

<!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" alt="" /></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="[##_desc_##]">[##_title_##]([##_blog_link_##])</A>
			</div>
			<div class="clear"></div>
		</div>
	</div>
</div>
</body>
</html>

사용하고 있는 플러그인 중 자바스크립트나 스타일쉬트를 이용하는 플러그인이 있다면 <HEAD>와 </HEAD> 사이에 플러그인이 사용하는 자바스크립트를 삽입해야 한다.

플러그인용 스크립트 삽입 예

페이지를 읽자마자 인쇄 창을 띄우고 싶다면 <BODY> 태그를 다음처럼 바꾸어야 한다.

인쇄 창 바로 띄우기

인쇄용 스타일쉬트

인쇄용 스킨에서 스타일쉬트를 사용하고 있다면 마찬가지로 스타일쉬트 역시 만들어 주어야 한다. 필자는 Moving Box(Green)의 스타일쉬트에서 스킨에서 참조하고 있는 부분만 남기고 나머지는 삭제하는 방법으로 스타일쉬트를 만들었다.

인쇄용 스타일쉬트의 예

@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로 해야 한다.

예

현재 이 플러그인은 단일 사용자 환경에 텍스트큐브를 루트에 설치해서 테스트했다. 다중 사용자 환경과 루트 폴더 이외의 폴더에서의 동작도 염두에 두었지만 시험해 보지 않았기 때문에 잘 동작하는지는 필자도 모르고 있다. 따라서 다른 환경에서 이 플러그인이 잘 동작하지 않는다면 플러그인을 활성화한 뒤 동작하지 않는 페이지를 필자에게 알려 주기 바란다.

다음은 인쇄용 플러그인을 적용한 뒤 출력된 인쇄용 화면이다.