게시판에 SocialXE 댓글을 적용하기 SocialXE 팁

안녕하세요. 이번 포스팅에서는 게시판에 SocialXE 댓글을 적용하는 방법에 대해 알아보겠습니다.

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

게시판 스킨 수정하기

게시판에 SocialXE 댓글을 적용하기 위해서는 기존 게시판 스킨에서 댓글 부분을 SocialXE 댓글 위젯 코드로 대체해야 합니다. PC 버전의 스킨은 view_document.html 파일을 고치면 되고, 모바일 버전의 스킨은 read.html 파일을 고치면 됩니다.

PC 버전 스킨 (view_document.html)

게시판 스킨에 따라 그 구조가 다르겠습니다만, 보통 <!--@if($oDocument->allowComment())-->부터 이 if문의 <!--@end--> 까지의 내용을 위젯 코드로 대체하면 됩니다. 이때, if와 end의 짝을 잘 찾아서 수정하는 것이 중요합니다.

xe_official
<!--@if($oDocument->allowComment())-->
    <a name="comment"></a>
    <!--#include("./comment.html")-->

    <!--@if($grant->write_comment && $oDocument->isEnableComment() )-->
        <form action="./" method="post" onsubmit="jQuery(this).find('input').each(function(){if(this.title==this.value)this.value='';});return procFilter(this, insert_comment)" class="boardEditor" >
        <input type="hidden" name="mid" value="{$mid}" />
        <input type="hidden" name="document_srl" value="{$oDocument->document_srl}" />
        <input type="hidden" name="comment_srl" value="" />
        <input type="hidden" name="content" value="" />
            <div class="boardWrite commentEditor">
                <div class="editor">{$oDocument->getCommentEditor()}</div>

                <div class="editorOption">
                <!--@if(!$is_logged)-->
                   <input type="text" name="nick_name" class="inputText userName" value="{$lang->writer}"  title="{$lang->writer}" onfocus="if(this.value==this.title)this.value='';return false;" />
                   <input type="password" name="password" class="inputText userPw" value="{$lang->password}" title="{$lang->password}" onfocus="if(this.value==this.title)this.value='';return false;" />
                   <input type="text" name="email_address" class="inputText emailAddress" value="{$lang->email_address}" title="{$lang->email_address}" onfocus="if(this.value==this.title)this.value='';return false;" />
                   <input type="text" name="homepage" class="inputText homePage" value="{$lang->homepage}" title="{$lang->homepage}" onfocus="if(this.value==this.title)this.value='';return false;" />
                <!--@end-->

                <!--@if($is_logged)-->
                    <input type="checkbox" name="notify_message" value="Y" id="notify_message" class="inputCheck" />
                    <label for="notify_message">{$lang->notify}</label>
                <!--@end-->
                    <input type="checkbox" name="is_secret" value="Y" id="is_secret" class="inputCheck" />
                    <label for="is_secret">{$lang->secret}</label>
                </div>

                <div class="boardNavigation">
                    <span class="buttonOfficial"><input type="submit" value="{$lang->cmd_comment_registration}" accesskey="s" /></span>
                </div>

            </div>

        </form>
    <!--@end-->
<!--@end-->

위 코드의 앞 뒤로 <!--// ... --> 를 추가하여 주석 처리해 줍니다. XE의 템플릿 코드에서 <!--// ... -->로 처리된 주석은 아예 HTML 출력이 되지 않습니다. 이렇게 한 다음 SocialXE 댓글의 위젯 코드를 추가해줍니다. 이때, 댓글 영역을 알리는 앵커 <a name="comment"></a>도 위젯 코드 위에 적어줍니다. 이렇게 하면 게시판 목록에서 댓글 개수를 눌러 들어왔을 때 댓글을 바로 보여주는 XE의 기본 동작을 지원할 수 있습니다. 수정된 코드는 아래와 같습니다.

<a name="comment"></a>
<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())}"/>
<!--// 소셜XE 기존 댓글 감추기
<!--@if($oDocument->allowComment())-->
    <a name="comment"></a>
    <!--#include("./comment.html")-->

    <!--@if($grant->write_comment && $oDocument->isEnableComment() )-->
        <form action="./" method="post" onsubmit="jQuery(this).find('input').each(function(){if(this.title==this.value)this.value='';});return procFilter(this, insert_comment)" class="boardEditor" >
        <input type="hidden" name="mid" value="{$mid}" />
        <input type="hidden" name="document_srl" value="{$oDocument->document_srl}" />
        <input type="hidden" name="comment_srl" value="" />
        <input type="hidden" name="content" value="" />
            <div class="boardWrite commentEditor">
                <div class="editor">{$oDocument->getCommentEditor()}</div>

                <div class="editorOption">
                <!--@if(!$is_logged)-->
                   <input type="text" name="nick_name" class="inputText userName" value="{$lang->writer}"  title="{$lang->writer}" onfocus="if(this.value==this.title)this.value='';return false;" />
                   <input type="password" name="password" class="inputText userPw" value="{$lang->password}" title="{$lang->password}" onfocus="if(this.value==this.title)this.value='';return false;" />
                   <input type="text" name="email_address" class="inputText emailAddress" value="{$lang->email_address}" title="{$lang->email_address}" onfocus="if(this.value==this.title)this.value='';return false;" />
                   <input type="text" name="homepage" class="inputText homePage" value="{$lang->homepage}" title="{$lang->homepage}" onfocus="if(this.value==this.title)this.value='';return false;" />
                <!--@end-->

                <!--@if($is_logged)-->
                    <input type="checkbox" name="notify_message" value="Y" id="notify_message" class="inputCheck" />
                    <label for="notify_message">{$lang->notify}</label>
                <!--@end-->
                    <input type="checkbox" name="is_secret" value="Y" id="is_secret" class="inputCheck" />
                    <label for="is_secret">{$lang->secret}</label>
                </div>

                <div class="boardNavigation">
                    <span class="buttonOfficial"><input type="submit" value="{$lang->cmd_comment_registration}" accesskey="s" /></span>
                </div>

            </div>

        </form>
    <!--@end-->
<!--@end-->
소셜XE 기존 댓글 감추기 끝-->

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

모바일 버전 스킨 역시 스킨마다 다를 수 있겠습니다만(현 시점에 배포 스킨 말고 다른 스킨은 없지만;;;<!--@if($oDocument->allowComment() && $oDocument->getCommentCount())-->이 if 문의 <!--@end--> 까지의 내용을 위젯 코드로 대체하면 됩니다. 역시 if 와 end의 짝을 잘 찾아서 수정하시는 것이 중요합니다.

배포 스킨인 default 스킨의 경우 아래 코드가 해당됩니다.

<!--@if($oDocument->allowComment() && $oDocument->getCommentCount())-->
        <h3 class="h3" id="clb">{$lang->comment} <em>[{$oDocument->getCommentCount()}]</em> <button type="button" class="tg tgr" title="open/close"></button></h3>
        <!--@endif-->
        <!--@if($grant->write_comment && $oDocument->isEnableComment() )-->
        <h3 class="h3">{$lang->write_comment} <button type="button" class="tg" title="open/close"></button></h3>
        <form action="./" method="POST" class="sn tgo open" onsubmit="return procFilter(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" class="db fb">{$lang->comment}</label>
                <textarea name="content" cols="20" rows="5" id="rText" class="itxx"></textarea>
            </li>
            <!--@if(!$is_logged)-->
            <li>
                <label for="uName" class="db fb">{$lang->writer}</label>
                <input name="nick_name" type="text" id="uName" class="itx" />
            </li>
            <li>
                <label for="uMail" class="db fb">{$lang->email_address}</label>
                <input name="email_address" type="text" id="uMail" class="itx" />
            </li>
            <li>
                <label for="uPw" class="db fb">{$lang->password}</label>
                <input name="password" type="password" id="uPw" class="itx" />
            </li>
            <li>
                <label for="uSite" class="db fb">{$lang->homepage}</label>
                <input name="homepage" type="text" id="uSite" class="itx" value="http://" />
            </li>
            <!--@endif-->
        </ul>
        <div class="ar">
            <input name="" type="submit" value="{$lang->cmd_comment_registration}" />
        </div>
        </form>
        <!--@end-->

위 코드의 앞 뒤로 <!--// ... --> 를 추가하여 주석 처리해 줍니다. XE의 템플릿 코드에서 <!--// ... -->로 처리된 주석은 아예 HTML 출력이 되지 않습니다. 이렇게 한 다음 SocialXE 댓글의 위젯 코드를 추가해줍니다. 수정된 코드는 아래와 같습니다.

<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())}"/>
<!--// 소셜XE 기존 댓글 감추기
        <!--@if($oDocument->allowComment() && $oDocument->getCommentCount())-->
        <h3 class="h3" id="clb">{$lang->comment} <em>[{$oDocument->getCommentCount()}]</em> <button type="button" class="tg tgr" title="open/close"></button></h3>
        <!--@endif-->
        <!--@if($grant->write_comment && $oDocument->isEnableComment() )-->
        <h3 class="h3">{$lang->write_comment} <button type="button" class="tg" title="open/close"></button></h3>
        <form action="./" method="POST" class="sn tgo open" onsubmit="return procFilter(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" class="db fb">{$lang->comment}</label>
                <textarea name="content" cols="20" rows="5" id="rText" class="itxx"></textarea>
            </li>
            <!--@if(!$is_logged)-->
            <li>
                <label for="uName" class="db fb">{$lang->writer}</label>
                <input name="nick_name" type="text" id="uName" class="itx" />
            </li>
            <li>
                <label for="uMail" class="db fb">{$lang->email_address}</label>
                <input name="email_address" type="text" id="uMail" class="itx" />
            </li>
            <li>
                <label for="uPw" class="db fb">{$lang->password}</label>
                <input name="password" type="password" id="uPw" class="itx" />
            </li>
            <li>
                <label for="uSite" class="db fb">{$lang->homepage}</label>
                <input name="homepage" type="text" id="uSite" class="itx" value="http://" />
            </li>
            <!--@endif-->
        </ul>
        <div class="ar">
            <input name="" type="submit" value="{$lang->cmd_comment_registration}" />
        </div>
        </form>
        <!--@end-->
소셜XE 기존 댓글 감추기 끝-->
Tag :