라이믹스의 경우 일반적으로는 운영자가 지정한 목록 스타일로 목록을 보여주는데요. 때로는 방문자가 원하는 스타일로 보게 해주는 것도 보다 선호하는 스타일을 선택할 수 있어 해당 기능이 반가운 방문자도 있을 수 있습니다.
제가 운영하는 커뮤니티에 지금 SNS스타일의 목록 형태를 제공합니다. 본문요약 + 섬네일 + 각종지표 등 많은 정보를 목록에서 한번에 다 확인이 가능한 목록형태입니다.
rx-flextagram 테마의 게시판 스킨에서 제공하는 sns 스타일 목록을 제공하고 있는데요. 이 스킨의 경우 테이블형 list 목록도 사용이 가능합니다.
기본 sns 스타일로 제공하고 방문자가 원할경우 간단 list 형태로 볼수 있는 버튼을 제공해서 해당 버튼을 클릭하면 쿠키가 생성되고 테이블형 간단 목록형태로 목록을 열람할 수 있도록 코드를 짜 보았습니다.
게시판 설정에 따라 목록 유형을 결정해주는 곳은
/modules/board/skins/rx-flextagram/components/board/board.html
위 파일의 코드에서 작동합니다.
<!--@if($module_info->template == 'list' || $_COOKIE["force_list_$mid"] =='Y')-->
<include target="../../templates/list/list.html" />
<!--@else-->
<include target="../../templates/sns/sns.html" />
<!--@end-->
굵게 표시해 드린 코드가 사용자가 버튼을 클릭해서 쿠키가 생성되었을 경우 list.html 파일로 목록을 보여주게 하는 부분입니다.
그리고 위 파일의 하단에는
<script>
$(document).ready(function($) {
$(".force_list").click(function(){
$.cookie('force_list_' + current_mid, 'Y', { path: '/', expires: 600 });
location.reload();
});
$(".del_force_list").click(function(){
$.removeCookie('force_list_' + current_mid, { path: '/' });
location.reload();
});
});
</script>
위와 같은 코드로 force_list, del_force_list 클래스 버튼을 클릭했을때 각각 쿠키를 생성하거나 삭제하는 작동을 할수 있도록 해줍니다.
같은 파일의 상단쪽에 목록 유형을 전환할 수 있는 버튼을 만들어 줍니다.
<div cond="$mid=='feed' && !$oDocument->isExists()" style="text-align:right;font-size: 12px;margin-bottom:10px;">
<!--@if($_COOKIE["force_list_$mid"] =='Y')-->
<span class="del_force_list" style="padding: 10px;cursor: pointer;">SNS 스타일 전환 <ion-icon name="grid-outline"></ion-icon></span>
<!--@else-->
<span class="force_list" style="padding: 10px;cursor: pointer;">간단 목록 전환 <ion-icon name="list-outline"></ion-icon></span>
<!--@end-->
</div>
$mid=='feed' 의 코드는 특정 feed 게시판에서만 작동하게 한 코드인데 여러 게시판에서 작동하게 하려면 해당 코드를 제거하시면 됩니다.
&& !$oDocument->isExists() 의 코드는 글 열람 페이지에서는 보이지 않도록 조건을 추가한 것입니다.
위와 같이 적용해 주면
평상시 SNS 스타일로 목록이 보이고 상단에는 간단목록 으로 전환할 수 있는 버튼이 보이게 됩니다.
간단 목록으로 전환해서 보고싶어 버튼을 누르게 되면....
이렇게 제목만 표시되는 간단한 테이블형 목록의 형태로 전환되어 보이게 됩니다. 상단의 버튼은 다시 쿠키를 삭제하여 SNS 스타일의 목록으로 돌아갈 수 있도록 버튼이 바뀌어 보이게 됩니다.
