로그인

검색

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
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
2 추천
Atachment
첨부 '0'
  • 고게임77 2022.04.11 08:22
    좋은팁 감사합니다.
    혹시 모든게시판 스킨에 적용할수있는걸까요
    스케치북 스킨을사용중이긴한데
  • profile
    꿀팁관리소장 2022.04.11 08:59
    To.고게임77
    스틴에 상관없이 사용 가능합니다. 그런데 저처럼 sns 스타일의 목록이 아니라면 굳이...
  • 맥스터 2022.05.04 23:20
    와 이거 골치덩이 였는데 이렇게 해결을! 최고에요!
  • 웅돌프 2022.05.22 23:59
    comely 스킨에 경우 foreach 반복문으로 된것 같은데요.

    <!--@foreach($document_list as $no => $document)-->

    이런식으로 된 경우 id="list_{$document->document_srl}" 이렇게 id를 추가 할 수 있나요?
  • profile
    꿀팁관리소장 2022.05.23 00:01
    To.웅돌프
    반복문을 어떤것을 사용했는지는 중요하지 않구요. 글 목록을 이루는 엘리먼트 단위에 id를 넣으시고 응용하시면 됩니다.
    소스도 보시고 잘 모르시겠으면 개발자도구로 한번 살펴보세요.
  • 라이믹스입문 2022.11.15 18:08
    감사합니다!

라이믹스 팁(112)

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

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

    Date2022.05.01 Category기능 Views508 Votes3
    Read More
  5. Read More
  6. 라이믹스 게시판 목록에서 문서의 태그 출력해 주기 10

    Date2022.01.30 Category기능 Views2582 Votes5
    Read More
  7. Read More
  8. 라이믹스 설문조사 비회원참여를 막는 방법 2

    Date2021.12.05 Category기능 Views171 Votes2
    Read More
  9. 쿠키를 이용한 목록 스타일 변경 제공하기 1

    Date2021.11.20 Category기능 Views182 Votes4
    Read More
  10. Read More
  11. Read More
  12. 현재 읽고 있는 글의 목록 위치로 바로 가기 만들기 6

    Date2021.10.28 Category기능 Views183 Votes2
    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. Read More
Prev 1 2 3 4 Next
/ 4