[스케치북5 게시판에 적용하는 방법]
1. 먼저 /addons/drag_interaction/tpl/index.html 코드를 보면
$list_area_id = 'board_list'; $document_area_id = 'board_read';
board_list 가 페이지 부분 id 이고,
board_read 가 본문글 부분 id 입니다.
2. 그럼 어떻게 적용하는가
/modules/board/m.skins/sketchbook5/list.html 파일안에 파란색부분을 찾아서 빨간색부분으로 감사줍니다.
<!--// 본문 --> <div id="board_read"> <include cond="$oDocument->isExists()" target="_read.html" /> </div>
이렇게 하면 본문글(_read.html)부분이 board_read 라는 id 값으로 설정됩니다.
<div id="board_list"> <!--// 게시판 유형 --> <!--@if($mi->default_style=='list')--> <!--@if(!Mobile::isMobileCheckByAgent() || $mi->list_m)--> <include target="_list_normal.html" /> <!--@else--> <include target="_list_m.html" /> <!--@end--> <!--@elseif($mi->default_style=='webzine')--> <include target="_list_webzine.html" /> - 중략 - <!--@else--> <include target="_list_normal.html" /> <!--@end--> </div>
이 부분은 페이지리스트 부분이 board_list 라는 id 값으로 설정됩니다.
이렇게 까지만 해도 모바일에서 게시판 스킨이 스케치북5 이면 잘 작동합니다.
3. Xetown의 웹지기님이 남긴 팁적용
https://xetown.com/tips/1163417
애드온의 php 파일에 사용되지 않아야할 조건에 || $_COOKIE['donotdragpage'] == 'true' 를 추가해 줍니다.
/addons/drag_interaction/drag_interaction.addon.php
<?php
// 중단 조건
if (
!Mobile::isMobileCheckByAgent()
|| $called_position !== 'before_display_content'
|| Context::getResponseMethod() !== 'HTML'
|| Context::get('module_info')->module !== 'board'
|| !Context::get('grant')->access
|| Context::get('act')
|| $_COOKIE['donotdragpage'] == 'true'
) return;
저는 페이지이동 문구를 상단으로 끌어 올렸습니다.
/modules/board/m.skins/sketchbook5/list.html
빨간색부분 추가 하시고 img방에 drag.png파일 추가
<!--// FAQ 검색창 -->
<div cond="$mi->srch_window!='N'" class="bd_faq_srch<!--@if($mi->srch_window==3)--> clear<!--@end-->" style="display:block"|cond="$mi->srch_window==2 || $search_keyword">
<include target="_search.html" />
</div>
</div>
<div style="text-align:center; margin:10px 0; color:orange">
<img src="img/drag.png" />
<p style="display:none;" class="dragoff"> 좌우 스크롤로 페이지 이동이 가능합니다. 끄기 <i class="fa fa-toggle-on dragoff" aria-hidden="true"></i></p>
<p style="display:none;" class="dragon"> 좌우 스크롤로 페이지 이동이 불가능합니다. 켜기 <i class="fa fa-toggle-off dragon" aria-hidden="true"></i></p>
</div>
<!--// 카테고리 -->
<div class="cnb_n_list">
list.html 파일 최하단에 아래 스크립트 추가
<script>
jQuery(function($){
if(getCookie('donotdragpage') == 'true'){
$('.dragoff').hide();
$('.dragon').show();
}
else {
$('.dragon').hide();
$('.dragoff').show();
}
$('.dragoff').click(function(){
setCookie('donotdragpage', 'true', new Date(Date.now() + 1000000000000));
$('.dragoff').remove();
$('.dragon').show();
location.reload();
});
$('.dragon').click(function(){
setCookie('donotdragpage', 'true', new Date(Date.now() - 1));
$('.dragon').remove();
$('.dragoff').show();
location.reload();
});
});
</script>
/modules/board/m.skins/sketchbook5/_read.html 상단에 빨간색 부분 추가
<div style="text-align:center; margin:10px 0; color:orange">
<img src="img/drag.png" />
<p style="display:none;" class="dragoff"> 좌우 스크롤로 이전/다음 글 이동이 가능합니다. 끄기 <i class="fa fa-toggle-on dragoff" aria-hidden="true"></i></p>
<p style="display:none;" class="dragon"> 좌우 스크롤로 이전/다음 글 이동이 불가능합니다. 켜기 <i class="fa fa-toggle-off dragon" aria-hidden="true"></i></p>
</div>
<div class="rd<!--@if(!$mi->rd_nav_style)--> rd_nav_style2<!--@end--><!--@if($mi->default_style=='blog')--> rd_blog {$mi->blog_style}<!--@end--> clear" style="padding:{$mi->rd_padding};" data-docSrl="{$oDocument->document_srl}">
게시판 글쓰기시 Tag부분 출력 유무 설정방법
XE 위젯을 반응형으로 적용하자
Tip이 도움이 되었다면 댓글과 평가 부탁합니다.
Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다. 
이런거 보면 그냥 스케치북을 써야하나 싶네요ㅠ 유료 게시판은 아무도 팁을 올려주지 않네요.