라이믹스나 XE로 사이트를 운영하는 운영자라면 기본적인 XE들의 함수와 조건문 정도를 템플릿에서 사용한다면 여러가지를 방문자들에게 조건에 맞춰 특별하게 보여주거나 표시를 해줄 수 있습니다.
지금 라이믹스 꿀팁 이 사이트에 게시판 목록에 불꽃 
이 달려있는 게시글 들이 있습니다.
운영자가 정한 기준의 조회수 보다 높은 조회를 가진 나름의 인기있는 글을 표시를 해주어 여러가지 목적에 사용할 수있습니다.
조회수가 아닌 다른 함수를 쓴다면 조건을 바꿔서 사용할 수 있겠죠.
목록의 템플릿에서 사용할 수 있는 게시글의 조회수를 가져오는 함수는
$document->get('readed_count') 입니다.
이것을 조건으로 사용한다면
<!--@if($document->get('readed_count') > 19)-->표시하고 싶은 내용들<!--@end-->
이렇게 하면 됩니다. 게시글의 조회수가 19보다 크다면 이라는 조건으로 사용되게 됩니다.
목록의 제목을 출력하는 곹 바로 뒤에 특별한 이미지를 불러오게 위 코드를 그대로 사용해도 되고 아니면 제목을 출력하는 바로 뒤에 CSS로 이미지를 백그라운드로 띄우게 할 수도 있습니다.
<!--@if($document->get('readed_count') > 19)--><img src="이미지주소"><!--@end-->
이미지를 단순하게 불러오는 정도는 이렇게 처리하면 되니 매우 간단합니다. 이미지의 위치는 img src 소스에 style="" 을 추가해서 처리해도 되구요.
그럼 여기 라이믹스 꿀팁에 적용한 게시판 스킨에 CSS로 처리한 것을 적어보겠습니다. 각자 사용하는 스킨에 응용해야 합니다.
저희는 스케치북 스킨의 모바일 목록을 PC와 모바일에서 모두 함께 반응형으로 사용하도록 고쳐서 쓰고 있습니다.
_list_m.html 을 사용하는 건데요. 여기에 불꽃 아이콘을 추가해 줄 것입니다.
<!--@if($document->get('readed_count') > 19)--> class="fire"<!--@end--> 를 사용해서 조회수 20부터는 class="fire" 를 가지도록 했습니다.
<a href="{getUrl('document_srl',$document->document_srl,'listStyle',$listStyle, 'cpage','')}"<!--@if($document->get('readed_count') > 19)--> class="fire"<!--@end-->>{$document->getTitle($mi->subject_cut_size)}
<!--@if($document->getCommentCount())--><b>{$document->getCommentCount()}</b><!--@end--></a>
참고로 원래 스킨에는 a 태그가 없는데 제가 필요로 의해 추가한 것이니 이점은 감안해서 봐주세요.
혹은 a 태그도 있고 기존에 사용하는 class 까지 가진 경우도 있습니다.
그럴경우는 class="기존클래스<!--@if($document->get('readed_count') > 19)--> fire<!--@end-->"
이런식으로 fire 클래스 하나를 더 가지도록 추가해주면 됩니다. 이경우는 class="기존클래스 fire" 이렇게 되는 것 입니다. 물론 조회수가 20인 경우의 게시글에서 되겠죠.
한칸 공백을 조건문 안에서 처리를 해주셔야 합니다.
<a href="{getUrl('document_srl',$document->document_srl,'listStyle',$listStyle, 'cpage','')}"<!--@if($document->get('readed_count') > 19)--> class="fire"<!--@end-->>{$document->getTitle($mi->subject_cut_size)}
<!--@if($document->getCommentCount())--><b>{$document->getCommentCount()}</b><!--@end--></a>
저희는 위 경우이니 위의 예시로 다시 설명을 이어갑니다.
저 fire class에 백그라운드 이미지로 불꽃을 가지게 css에서 추가를 해주면 됩니다.
미리 불꽃 아이콘으 스킨의 이미지폴더에 업로드를 해주셔야 겠죠.
저 태그 바로 위쪽에 rt_area 가 있고 그 안에 저 a 태그가 위치하고 있습니다.
.rt_area a.fire::after {
content: '';
position: absolute;
background-image: url(../img/fire.png);
background-repeat: no-repeat;
width: 16px;
height: 16px;
margin-top:2px;
margin-left: 5px;
}
.rt_area a.fire {
margin-right: 25px;
}
CSS에 저렇게 작성해 주면 불꽃 아이콘이 백그라운드 이미지로 불러와져서 글 제목 끝나는 부분에 불꽃이 나오게 됩니다.
::after 를 사용해서 .rt_area a.fire 뒤쪽에 지정한 것들이 적용되는 것입니다. 글 제목 출력하는 a 태그 바로 뒤에 적용되죠.
앞쪽에 적용할때는 ::before 를 사용하면 됩니다.
백그라운드로 이미지를 추가하려 기존의 a 태그 뒤쪽에 불꽃이 보이게 됩니다. 그런데 백그라운의 구조상 바로 뒤에 댓글수나 새글,업데이트 아이콘 등이 위치한다면 거기와 겹치게 됩니다.
그래서 a 태그의 영역을 조금 더 넓혀주어서 다른 부분은 밀려 나도록 해주면 됩니다.
.rt_area a.fire {
margin-right: 25px;
}
위 부분이 그래서 들어간 부분입니다.
