로그인

검색

Extra Form
추천지수 6

사이트를 운영하다보면 미리 알고 있으면 유용한 것을 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.png

 

개발자도구로 보면 FAQ 각 항목이 li 단위로 구분되어 있는게 확인되고 id가 bdFaq_문서번호 로 표시되는 것을 확인할 수 있습니다.

 

각 faq 제목에 마우스를 올리면 게시글 주소도 보이기도 합니다.

 

화면 캡처 2022-01-20 204546.png

 

 

이 게시글 주소를 직접 링크를 걸면 그냥 일반 문서를 열람하듯이 보이기 때문에 지금 하려고 하는 #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 화면에서 해당 항목에 링크주소가 지금 개별 항목을 가리키는 주소로 가지게 되어 오른쪽 마우스로 링크복사를 쉽게 할 수 있습니다.

 

화면 캡처 2022-03-11 142335.png

이 컨텐츠가 마음에 드셨다면 커피 한잔 (후원)

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
0 추천
Atachment
첨부 '0'
  • k
    karius 2022.03.11 13:57
    좋은정보 감사합니다
  • profile
    꿀팁관리소장 2022.03.11 13:58
    To.karius
    회원들께 글 작성하면서 FAQ의 항목중 특정한 항목을 링크해 주고 싶을 경우가 있으실때 한번 사용해보세요.
    물론 스케치북 스킨이 아니라면 해당 스킨에서 FAQ가 열리고 닫히는 부분에 관해서 응용이 필요하겠지만요.
  • profile
    꿀팁관리소장 2022.03.11 14:20
    To.karius
    해당 항목으로 바로가기 url을 직접 가지도록 스킨에서 수정법을 추가했습니다.
    링크를 걸어줄때 해당 항목에서 링크복사를 해서 작성하는 문서에 붙여넣기만 하면 되도록 간편화할 수 있습니다.

라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. 라이믹스 읽지 않은 쪽지(새쪽지) 표시해 주기 4

    Date2022.05.01 Category기능 Views127 Votes1
    Read More
  6. Read More
  7. Read More
  8. 라이믹스 게시판 목록에서 문서의 태그 출력해 주기 6

    Date2022.01.30 Category기능 Views251 Votes1
    Read More
  9. Read More
  10. Read More
  11. Read More
  12. 라이믹스 설문조사 비회원참여를 막는 방법

    Date2021.12.05 Category기능 Views111 Votes0
    Read More
  13. Read More
  14. Read More
  15. 쿠키를 이용한 목록 스타일 변경 제공하기 1

    Date2021.11.20 Category기능 Views122 Votes1
    Read More
  16. Read More
  17. Read More
  18. 현재 읽고 있는 글의 목록 위치로 바로 가기 만들기 5

    Date2021.10.28 Category기능 Views105 Votes0
    Read More
  19. Read More
  20. Read More
  21. Read More
  22. Read More
  23. Read More
  24. Read More
  25. Read More
  26. Read More
  27. Read More
  28. Read More
  29. Read More
  30. 라이믹스 CK에디터 툴바의 링크 버튼 제거해 주기

    Date2021.09.04 Category운영 Views218 Votes0
    Read More
  31. Read More
  32. Read More
Prev 1 2 3 4 Next
/ 4
닫기
작성자에게 커피 한잔(후원)을 사주세요.
컨텐츠 작성자 : 꿀팁관리소장

후원하셨던 이름을 알려주세요.

후원 완료
후원하셨다면 [후원 완료] 버튼을 눌려주세요.