SocialXE 댓글을 Textyle에 적용하기 SocialXE 팁

안녕하세요. 지난 번 SocialXE 댓글 게시판에 적용하기에 이어 오늘은 Textyle에 적용하는 방법을 알아보겠습니다.

본 내용에 들어가기에 앞서 한가지 팁을 알려드리겠습니다. 배포판에 포함된 스킨을 수정하실 때는 곧바로 수정하지 마시고 다른 이름으로 스킨 폴더를 만들어 복사하신 후에 수정하기는 것이 좋습니다. 이렇게 해야 다음 새 버전을 설치하더라고 수정된 내용을 지킬 수 있습니다.

Textyle 스킨 수정하기

Textyle에 SocialXE 댓글을 적용하기 위해서는 게시판과 마찬가지로 스킨의 댓글 목록과 입력 부분을 SocialXE 댓글 위젯 코드로 변경하여야 합니다. PC 버전의 스킨은 post.list.html파일을 고치면 되고(초창기 Textyle 스킨 등 일부 스킨은 고쳐야할 파일이 다를 수도 있습니다), 모바일 버전의 스킨은 read.html 파일을 고치면 됩니다.

PC 버전 스킨 수정 (post.list.html)

PC 버전의 스킨을 수정하기 전 한가지 팁이 있습니다. 텍스타일의 PC 버전 스킨은 스킨을 적용시키면 원본 스킨은 그대로 둔채 files/attach/textyle/ 아래에 module_srl을 이용한 numbering 폴더로 적용한 스킨을 복사해 둡니다. 텍스타일의 HTML·CSS 편집에서 수정된 내용은 원본 스킨에 반영되지 않고 바로 이곳에 반영됩니다. 때문에 스킨을 수정하실 때 수정하고 확인하려면 매번 새로 스킨 적용을 해야 하기 때문에 바로 저 files/attach/textyle/xxxx/에 있는 복사본을 수정하시면 쉽게 작업하실 수 있습니다.

그럼, 스킨을 수정해 보겠습니다. 저는 Textyle 스킨 중 이 블로그에 사용한 SimpleLine 스킨을 예로 하겠습니다.

스킨에 따라 다르겠지만 보통 <!--@if($document->allowComment())-->부터 이 if문의 짝인 <!--@end-->까지를 위젯코드로 대체하면됩니다. 이 역시 if문의 연결된 end를 정확히 찾아주시는 게 중요합니다. SimpleLine 스킨의 경우 아래 코드가 해당합니다.

<!--@if($document->allowComment())-->
                        <a name="comment"></a>
                        <div class="feedback reply">
                            <h3 class="feedbackTitle">Comments <em>{$document->getCommentCount()}</em></h3>
                            <!--@if($document->getCommentCount())-->
                            <ol class="feedbackOrder">
                                {@ $_comment_list = $document->getComments() }
                                <!--@foreach($_comment_list as $key => $comment)-->
                                <li class="item<!--@if($comment->get('depth'))--> indent indent{$comment->get('depth')}<!--@end-->">
                                    <div class="meta">
                                        <div class="thumb">
                                            <!--@if($comment->getProfileImage())-->
                                                <img src="{$comment->getProfileImage()}" alt="author" />
                                            <!--@else-->
                                                <img src="img/iconAuthorNoImage.gif" width="39" height="39" alt="Author" />
                                            <!--@end-->
                                        </div>
                                        <h4 class="author">
                                            <!--@if($comment->homepage)-->
                                            <a href="{$comment->homepage}" onclick="window.open(this.href);return false;" class="member_{$comment->member_srl}">{$comment->getNickName()}</a>
                                            <!--@else-->
                                            <span class="member_{$comment->member_srl}">{$comment->getNickName()}</span>
                                            <!--@end-->
                                        </h4>
                                        <p class="date">{$comment->getRegdate('Y.m.d')} <span class="hhmm">{$comment->getRegdate('H:i')}</span></p>
                                        <p class="ipAddress">{$comment->getIpaddress()}</p>
                                    </div>
                                    <div class="data textyleContent">
                                        <a name="comment_{$comment->comment_srl}"></a>
                                        <!--@if($comment->isAccessible())-->
                                        {$comment->getContent(false)}
                                        <!--@else-->
                                        <form action="./" method="get" onsubmit="return procFilter(this, input_password)" class="pwForm active">
                                            <input type="hidden" name="mid" value="{$mid}" />
                                            <input type="hidden" name="page" value="{$page}" />
                                            <input type="hidden" name="document_srl" value="{$comment->get('document_srl')}" />
                                            <input type="hidden" name="comment_srl" value="{$comment->get('comment_srl')}" />

                                            <label for="readPw">{$lang->password} : </label> <input name="password" type="password" class="inputText" id="readPw" value="" /><input name="" type="submit" value="{$lang->cmd_confirm}" class="submit" />
                                        </form>
                                        <!--@end-->

                                        <!--@if(!$comment->member_srl)-->
                                        <form action="" method="post" class="modifyPw pwForm comment{$key}" onsubmit="return checkPasswordForModifyComment(this)">
                                            <input type="hidden" name="mid" value="{$mid}" />
                                            <input type="hidden" name="page" value="{$page}" />
                                            <input type="hidden" name="document_srl" value="{$comment->get('document_srl')}" />
                                            <input type="hidden" name="comment_srl" value="{$comment->get('comment_srl')}" />

                                            <label for="modifyPw">{$lang->password} : </label> <input name="password" type="password" class="inputText" id="modifyPw" value="" /><input name="" type="submit" value="{$lang->cmd_confirm}" class="submit" />
                                        </form>
                                        <form action="" method="post" class="deletePw pwForm comment{$key}" onsubmit="return checkPasswordForDeleteComment(this)">
                                            <input type="hidden" name="mid" value="{$mid}" />
                                            <input type="hidden" name="page" value="{$page}" />
                                            <input type="hidden" name="document_srl" value="{$comment->get('document_srl')}" />
                                            <input type="hidden" name="comment_srl" value="{$comment->get('comment_srl')}" />

                                            <label for="deletePw">{$lang->password} : </label> <input name="password" type="password" class="inputText" id="deletePw" value="" /><input name="" type="submit" value="{$lang->cmd_confirm}" class="submit" />
                                        </form>
                                        <!--@end-->
                                        <ul class="reAction">
            
                                        <!--@if($comment->isAccessible())-->

                                            <!--@if($textyle->isEnableComment())--><li><a href="{getUrl('','mid',$mid,'comment_srl',$comment->comment_srl,'document_srl',$document->document_srl,'act','dispTextyleCommentReply')}">{$lang->cmd_reply}</a></li><!--@end-->
                                            <!--@if($comment->member_srl)-->

                                                <!--@if($comment->isGranted() || $comment->member_srl==$logged_info->member_srl)-->
                                                <li><a href="{getUrl('','mid',$mid,'comment_srl',$comment->comment_srl,'document_srl',$document->document_srl,'act','dispTextyleCommentModify')}">{$lang->cmd_modify}</a></li>
                                                <li><button type="button" onclick="if(confirm('{$lang->confirm_delete}')) deleteCommentItem({$comment->comment_srl});">{$lang->cmd_delete}</button></li>
                                                    <!--@elseif($logged_info->is_site_admin)-->
                                                    <li><button type="button" onclick="if(confirm('{$lang->confirm_delete}')) deleteCommentItem({$comment->comment_srl});">{$lang->cmd_delete}</button></li>
                                                <!--@end-->
                                            <!--@else-->
                                                <!--@if($logged_info->is_site_admin)-->
                                                <li><button type="button" onclick="if(confirm('{$lang->confirm_delete}')) deleteCommentItem({$comment->comment_srl});">{$lang->cmd_delete}</button></li>
                                                <!--@else-->
                                                <li><button type="button" onclick="jQuery('.comment{$key}').removeClass('active');jQuery('.modifyPw.comment{$key}').addClass('active')">{$lang->cmd_modify}</button></li>
                                                <li><button type="button" onclick="jQuery('.comment{$key}').removeClass('active');jQuery('.deletePw.comment{$key}').addClass('active')">{$lang->cmd_delete}</button></li>
                                                <!--@end-->
                                            <!--@end-->
                                        <!--@end-->
                                        </ul>
                                    </div>
                                </li>
                                <!--@end-->
                            </ol>
                            <!--@end-->
                        </div>
                        <!--@if($document->comment_page_navigation)-->
                        <div class="pagination paginationNum">
                            <a href="{getUrl('cpage',1)}#comment" class="prev"><span>{$lang->first_page}</span></a>
                            <!--@while($page_no = $document->comment_page_navigation->getNextPage())-->
                            <!--@if($cpage == $page_no)-->
                            <strong>{$page_no}</strong>
                            <!--@else-->
                            <a href="{getUrl('cpage',$page_no)}#comment">{$page_no}</a>
                            <!--@end-->
                            <!--@end-->
                            <a href="{getUrl('cpage',$document->comment_page_navigation->last_page)}#comment" class="next"><span>{$lang->last_page}</span></a>
                        </div>
                        <!--@end-->

                        <div class="replyForm">
                            <h3>Leave Comments</h3>
                            <!--@if($textyle->isEnableComment())-->
                            <fieldset>
                                <form method="post" onsubmit="return insertCommentItem(this, insert_comment)" action="">
                                    <input name="mid" type="hidden" value="{$mid}" />
                                    <input type="hidden" name="document_srl" value="{$document->document_srl}" />
                                    <input type="hidden" name="comment_srl" value="" />
                                    <input type="hidden" name="content" value="" />
                                    {$document->getCommentEditor()}
                                    <!--@if($is_logged)-->
                                    <span class="member_{$logged_info->member_srl}"><strong class="name">{$logged_info->nick_name}</strong></span> <span class="email">{$logged_info->email_address}</span> <span class="url">{$logged_info->homepage}</span>
                                    <!--@else-->
                                    <input name="nick_name" type="text" class="inputText name" value="Name" title="Name"/>
                                    <input name="password" type="password" class="inputText pw" value="Password" title="Password" />
                                    <!--@if($textyle->getInputEmail()!='N')-->
                                        <input type="hidden" name="msg_input_email_address" value="{$lang->msg_input_email_address}"/>
                                        <input name="email_address" type="text" class="inputText email<!--@if($textyle->getInputEmail()=='R')--> request<!--@end-->" value="Email address" title="Email address" />
                                    <!--@end-->
                                    <!--@if($textyle->getInputWebsite()!='N')-->
                                        <input type="hidden" name="msg_input_homepage" value="{$lang->msg_input_homepage}"/>
                                        <input name="homepage" type="text" class="inputText url<!--@if($textyle->getInputWebsite()=='R')--> request<!--@end-->" value="URL" title="URL" />
                                    <!--@end-->
                                    <!--@end-->
                                    <input name="is_secret" id="secret1" type="checkbox" value="Y" class="inputCheck" />
                                    <label for="secret1">{$lang->secret}</label>
                                    <input name="submit" type="submit" value="SUBMIT" class="inputSubmit" />
                                </form>
                            </fieldset>
                            <!--@else-->
                            <p>{$lang->disable_comment}</p>
                            <!--@end-->
                        </div>
                    <!--@end-->

이 코드를 지우고 아래 위젯 코드로 대체해 줍니다.

<img class="zbxe_widget_output" widget="socialxe_comment" skin="default" document_srl="{$document->document_srl}" content_link="{getFullUrl('', 'document_srl', $document->document_srl, 'dummy', '1')}" content_title="{htmlspecialchars($document->getTitleText())}"/>

모바일 버전 스킨 수정 (read.html)

텍스타일 모바일 스킨은 SVN의 최신 코드를 받으시면 사용하실 수 있습니다. 모바일 스킨의 경우 PC 스킨과 달리 수정 내용이 바로 반영이 되니 스킨 파일을 바로 수정하시면 됩니다.

<!--@if($oDocument->allowComment() && $oDocument->getCommentCount())--> 부터 이 if문의 짝인 <!--@end-->까지 위젯 코드로 대체하면 됩니다. default 스킨의 경우 아래 코드에 해당합니다.

<!--@if($oDocument->allowComment() && $oDocument->getCommentCount())-->
        <div class="hx h3">
            <h3 id="clb">{$lang->comment} <em>[{$oDocument->getCommentCount()}]</em></h3>
            <button type="button" class="tg tgr" title="{$lang->cmd_open_close}"></button>
        </div>
        <!--@endif-->
        <!--@if($textyle->isEnableComment() )-->
        <div class="hx h3">
            <h3>{$lang->msg_write_comment}</h3>
            <button type="button" class="tg" title="{$lang->cmd_open_close}"></button>
        </div>
        <form action="./" method="post" class="ff tgo open" onsubmit="return insertCommentItem(this, insert_comment);">
        <input type="hidden" name="mid" value="{$mid}" />
        <input type="hidden" name="document_srl" value="{$oDocument->document_srl}" />
        <input type="hidden" name="comment_srl" value="" />
        <ul>
            <li>
                <label for="rText">{$lang->comment}</label>
                <textarea name="content" cols="20" rows="5" id="rText"></textarea>
            </li>
            <!--@if(!$is_logged)-->
            <li>
                <label for="uName">{$lang->writer}</label>
                <input name="nick_name" type="text" id="uName" />
            </li>

            <!--@if($textyle->getInputEmail()!='N')-->
            <li>
                <label for="uMail">{$lang->email_address}</label>
                <input name="email_address" type="text" id="uMail" />
                <input name="email_address" type="text" class="inputText email<!--@if($textyle->getInputEmail()=='R')--> request<!--@end-->" value="Email address" title="Email address" />
            </li>
            <!--@end-->
            <li>
                <label for="uPw">{$lang->password}</label>
                <input name="password" type="password" id="uPw" />
            </li>

            <!--@if($textyle->getInputWebsite()!='N')-->
            <li>
                <label for="uSite">{$lang->homepage}</label>
                <input name="homepage" type="text" id="uSite" value="http://" />
                <input type="hidden" name="msg_input_homepage" value="{$lang->msg_input_homepage}"/>
            </li>
            <!--@end-->
            <!--@endif-->
            <li>
                <input name="is_secret" id="secret" type="checkbox" value="Y" />
                <label for="secret">{$lang->secret}</label>
            </li>
        </ul>
        <div class="bna">
            <input name="" type="submit" value="{$lang->cmd_comment_registration}" class="bn dark" />
        </div>
        </form>
        <!--@end-->

이 코드를 아래 위젯 코드로 대체해 줍니다.

<img class="zbxe_widget_output" widget="socialxe_comment" skin="default" document_srl="{$oDocument->document_srl}" content_link="{getFullUrl('', 'document_srl', $oDocument->document_srl, 'dummy', '1')}" content_title="{htmlspecialchars($oDocument->getTitleText())}"/>
Tag :