로그인

검색

Extra Form
추천지수 5

화면 캡처 2021-10-28 105356.png

 

 

글 읽는 본문 하단에 위와 같이 목록으로 페이지로 완전히 전환하는 목록으로 가기 버튼 바로 옆에 현재 본문 하단의 목록에서 현재 글의 위치로 찾아갈 수 있도록 버튼을 넣어주었습니다.

 

물론 지금 이 글이 있는 이곳 스킨에는 필요가 없어서 구현하지 않았습니다. 

 

https://rxtip.kr/talk/

위와 같은 블로그 타입의 목록 형태를 가진 곳에서 필요해서 블로그,회원광자 쪽의 스킨에 적용했습니다.

 

블로그 타입은 목록에서 내용의 대부분을 파악하는데 초점이 맞춰줘 있다보니 목록에서 하나의 게시글이 가지는 정보가 많고 세로로 길어지게 됩니다. 이때 목록에서 특정 글을 찾으려면 스크롤을 내려가면서 찾아야 합니다. 그렇지 않은 리스트형 목록은 화면에 많은 목록이 다 보이기 때문에 스크롤 없이도 보이는 화면에서 찾고 싶은 글을 쉽게 찾을 수 있죠.

 

 

블로그 타입에서 글을 순차적으로 읽어 가려고 한다면 현재 읽고 있는 글 다음글을 찾아야 하는데 목록에서 내가 방금 읽었던 글을 기억해서 찾아야 하고 그 글의 다음 글을 읽어가야 합니다. 그런데 이게 쉽지 않습니다.

 

그래서 위와 같이 글 읽고 나서 버튼 한번 클릭으로 지금 읽고 있는 글의 위치까치 바로 이동하니 다음 글을 클릭하고 읽어가면 됩니다.

 

제가 수정한 rx-flextagram 스킨의 수정사항을 알려드리면 

 

/modules/board/skins/rx-flextagram/templates/sns/sns.html

/modules/board/skins/rx-flextagram/templates/list/list.html

 

두개의 파일을 열어서 목록에 게시글들을 반복해서 출력해주는 반복문에 각 게시글의 문서번호가 붙은 ID를 가지도록 해주어야 특정한 위치로 이동이 가능해지는 기본 정보를 가지게 됩니다.

 

 

<li id="list_{$document->document_srl}" loop="$document_list=>$no,$document">

 

위 굵게 표시해 드린 부분을 추가해 주세요.

 

 

 

 

그리고 글 열람하는 곳 을 수정해 줍니다.

 

위 스킨에서 목록으로 가는 버튼을 제공하는 파일은 아래 파일입니다.

/modules/board/skins/rx-flextagram/components/board/board.html

 

  <div>
  <a class="app-button" href="{getUrl('category', '', 'document_srl', '')}" style="width: calc(100% - 165px);">
    <ion-icon name="arrow-back-outline"></ion-icon>
    <span>목록</span>
  </a>

    <a class="app-button scroll_move" href="#list_{$document_srl}" style="width:160px;">
    <ion-icon name="arrow-back-outline"></ion-icon>
    <span>이글 목록 위치</span>
  </a>

  </div>

 

굵게 표시해 드린 부분을 추가하는 것으로 코드를 수정해 줍니다.

 

 

지금 수정하는 파일 하단에 아래의 스크립트도 추가해 줍니다.

 

<script>
  $(document).ready(function($) {
        $(".scroll_move").click(function(event){         
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top-80}, 500);
        });
});
</script>

 

-80 의 경우는 글 읽기 시 상단 헤더 부분 때문에 거리를 띄운 것이니 조절이 필요할 경우 변겅하시면 됩니다.

 

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
0 추천
Atachment
첨부 '0'

라이믹스 팁(105)

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

  1. read more
  2. read more
  3. Read More
  4. 라이믹스 설문조사 비회원참여를 막는 방법

    Date2021.12.05 Category기능 Views25 Votes0
    Read More
  5. Read More
  6. Read More
  7. 쿠키를 이용한 목록 스타일 변경 제공하기

    Date2021.11.20 Category기능 Views42 Votes1
    Read More
  8. Read More
  9. Read More
  10. 현재 읽고 있는 글의 목록 위치로 바로 가기 만들기

    Date2021.10.28 Category기능 Views32 Votes0
    Read More
  11. Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. Read More
  22. 라이믹스 CK에디터 툴바의 링크 버튼 제거해 주기

    Date2021.09.04 Category운영 Views93 Votes0
    Read More
  23. Read More
  24. Read More
  25. Read More
  26. Read More
  27. Read More
  28. Read More
  29. Read More
  30. Read More
  31. Read More
  32. Read More
Board Pagination Prev 1 2 3 4 Next
/ 4