사이트를 운영하다보면 미리 알고 있으면 유용한 것을 FAQ 로 작성해서 방문자에게 미리 알리게 되는데요. 스케치북 스킨을 사용하는 경우 이 FAQ 목록스타일을 사용하면 쉽게 구성할 수 있습니다.
게시글로 제목,내용으로 작성을 하면 FAQ 스타일로 지정되면 Q(질문), A(답변) 으로 보여주게 되고 클릭시 답변이 펼쳐지고 다시 클릭시 답변이 접히게 되는 방식입니다.
그런데 여기에 설명을 해 놓은 특정한 것을 지정해서 링크를 걸어주고 싶은데 게시글 주소로 링크를 걸면 FAQ 스타일이 아닌 일반 문서를 읽는 형태로 보여지게 됩니다.
개인적으로 이왕이면 그냥 정확히 지정된 순서의 항목에 답변이 펼치지는 형태로 링크를 걸어주고 싶습니다.
스케치북의 FAQ 스킨의 하단에 스크립트 하나를 추가해 줍니다.
/modules/board/skins/sketchbook/_list_faq.html
<script>
$(document).ready(function(){
var r = decodeURIComponent(location.href).replace(/.*#bdFaq_/,'');
if(!r || r === decodeURIComponent(location.href)) return;
bdFaq(r);
});
</script>
위와 같이 스크립트를 추가해 주었으면 내가 FAQ에 작성한 것 중 하나를 링크를 걸고 싶다면
개발자도구로 보면 FAQ 각 항목이 li 단위로 구분되어 있는게 확인되고 id가 bdFaq_문서번호 로 표시되는 것을 확인할 수 있습니다.
각 faq 제목에 마우스를 올리면 게시글 주소도 보이기도 합니다.
이 게시글 주소를 직접 링크를 걸면 그냥 일반 문서를 열람하듯이 보이기 때문에 지금 하려고 하는 #id로 링크를 걸어주려고 합니다.
미리 스킨에 넣어둔 스크립트로 인해서 해당 id와 매칭되는 항목을 펼치는 함수가 실행되도록 되어있습니다.
링크는
https://rxtip.kr/faq#bdFaq_28404 이렇게 걸어주면됩니다. 스크립트가 없다면 그냥 해당 id 위치까지 자동으로 찾아가기만 하고 답변을 펼쳐주지는 못합니다.
faq 목록에서 링크를 위 설명한 링크를 직접 가지도록 수정하는 법을 하단에 추가했습니다.
어떤 한페이지에 설명을 할때 어떤 엘리먼트(div,p,span,li 등)에 id="특정할수있는문자열" 로 하여 문서를 작성하면 쉽게 해당 id로 스크롤이 찾아가는 링크를 사용할 수 있습니다. 해당페이지주소#id 를 사용하면 됩니다.
단, 여기서 설명하는 것은 스크립트를 추가해서 스케치북에서 제공하는 답변 펼치는 함수를 자동으로 실행해주게 하는 것 입니다.
- 추가사항 -
FAQ의 게시글 링크 주소를 보다 편하게 바꿔주기
문서에서 특정 FAQ를 언급해서 링크를 걸어줄때 위 설명한대로 id값을 확인해서 작성해줘야 하는 불편을 덜기 위해 스킨에 직접 원하는 링크주소를 가지도록 고쳐보았습니다.
_list_faq.html 을 열어보면
<!--// Normal -->
<li loop="$document_list=>$no,$document" id="bdFaq_{$document->document_srl}" class="article clear">
<input cond="$grant->manager" type="checkbox" name="cart" value="{$document->document_srl}" class="iCheck" title="Check This Article" onclick="doAddDocumentCart(this)" checked="checked"|cond="$document->isCarted()" />
<a class="q clear" href="{getUrl('document_srl',$document->document_srl,'cpage','')}" onClick="bdFaq({$document->document_srl});return false;">
<b class="mrk mrkQ">Q<span>:</span></b>
<strong cond="$mi->use_category=='Y' && $document->get('category_srl')" class="cate">[{$category_list[$document->get('category_srl')]->title}]</strong>
<span class="tl">{$document->getTitle($mi->subject_cut_size)}</span>
<span class="fr">
<span cond="$document->getExtraEidValue('rating')" class="starRating" title="{$document->getExtraEidValue('rating')}점"><span style="width:{$document->getExtraEidValue('rating')*10}%">{$document->getExtraEidValue('rating')}점</span></span>
<span cond="$list_config['nick_name']" class="nick">{$document->getNickName()}</span>
<span cond="$list_config['regdate']" class="date">{$document->getRegdate('Y.m.d')}</span>
</span>
<i class="fa fa-chevron-up"></i>
<i class="fa fa-chevron-down"></i>
</a>
<div class="a clear">
<b class="mrk mrkA">A<span>:</span></b>
<div class="editArea">
<!--a class="url" href="{$document->getPermanentUrl()}">{$document->getPermanentUrl()}</a-->
<block cond="$document->isEditable()">
<a class="edit" href="{getUrl('act','dispBoardWrite','document_srl',$document->document_srl,'comment_srl','')}"><span class="ico_16px write"></span>{$lang->cmd_modify}</a>
<a class="edit" href="{getUrl('act','dispBoardDelete','document_srl',$document->document_srl,'comment_srl','')}"><span class="ico_16px delete"></span>{$lang->cmd_delete}</a>
</block>
</div>
{$document->getContent(false)}
</div>
</li>
지금 강조한 줄의 url에서 문서번호를 지워주고 #id 값을 붙여주게 수정하면 됩니다.
<a class="q clear" href="{getUrl('document_srl','','cpage','')}#bdFaq_{$document->document_srl}" onClick="bdFaq({$document->document_srl});return false;">
이렇게 고쳐주면 FAQ 화면에서 해당 항목에 링크주소가 지금 개별 항목을 가리키는 주소로 가지게 되어 오른쪽 마우스로 링크복사를 쉽게 할 수 있습니다.
