게시판에서 태그 목록 페이지는 요즘 거의 사양화됐죠?
게시판 주소에 dispBoardTagList 로 들어가면 나오는 그 태그 목록 페이지 말입니다.
그래도 언젠가 시간 나면 태그/워드 클라우드를 만들고 싶다고 생각했는데, 그 쓸데없는 일을 했습니다ㅋㅋ
라이믹스에 어울리는 게 뭐가 있나 하고 살펴보다가 제가 고른 것은 https://github.com/prashant1rana/jQWCloud
제이쿼리 3.4.1 대응인 것 같아 좀 망설였는데 라이믹스 현재 마스터 버전에서도 잘 돌아가는 것 같습니다.
구동 방법은 비교적 간단합니다.
1. 위에 링크한 페이지에서 jQWCloudv3.4.1.js 파일을 다운로드 받아 게시판 스킨 적당한 곳에 받아둡니다. 저는 파일을 구한 경로가 다른 곳이어서 그냥저냥 js폴더에 jQWCloud.js라는 이름으로 저장해뒀습니다.
2. 이제 게시판 스킨의 tag_list.html을 열어서 수정합니다.
<load target="js/jQWCloud.js" />
<div class="rd_body"></div>
<script>
jQuery(document).ready(function($) {
const tag_list = [
<!--@foreach($tag_list as $val)-->
<!--@if($val->count > 1)-->
{
word:'{escape($val->tag, false)}',
weight: '{$val->count}'
},
<!--@end-->
<!--@end-->
];
$('.rd_body').jQWCloud({
words: tag_list,
// min/max font size
minFont: 12,
maxFont: 60,
// font offset
fontOffset: 0,
// shows the algorithm of creating the word cloud
showSpaceDIV: true,
// Enables the vertical alignment of words
verticalEnabled: true,
// color
cloud_color: null,
// font family
cloud_font_family: '나눔고딕',
// color of covering divs
spaceDIVColor: 'transparent',
// left padding of words
padding_left: 1,
// classes with space to be applied on each word
word_common_classes: null
});
});
</script>
- 어째 html 파일에 html 태그는 한 줄이고 전부 다 js 관련입니다ㅋ
- 저는 태그 카운트를 2회 이상을 기준으로 해봤는데 ($val->count > 1) 기호에 따라 숫자를 조정하시면 될 것 같습니다.
- 기타 옵션들도 조금씩 수정해보시면 될 것 같구요.
=> 그런데 이렇게만 하고 페이지를 로드해보면 조금 답답하실 겁니다. 태그들이 span 태그로 처리돼 있고 클릭해서 게시판의 태그 검색 결과 페이지로 넘어간다든가 하는 작업이 안 돼 있기 때문이에요.
2. 저는 추가로 위에서 다운로드 받은 jQWCloudv3.4.1.js 파일을 조금 수정했습니다.
- 우선 7행에 WordObjType='span', 이라는 부분이 있는데요. WordObjType='a',로 바꿔줬어요. 이렇게 하면 태그 클라우드의 태그들이 a 태그로 감싸지게 됩니다.
- 그리고 62행쯤에 다음과 같은 코드를 추가했습니다.
span.setAttribute('href', current_url.setQuery('mid', current_mid).setQuery('act', '').setQuery('search_target', 'tag').setQuery('search_keyword', this.word));
- 이렇게 하면 a 태그에 href 속성이 추가되게 되는 것입니다.
그 외의 페이지 스타일링은 각자 쓰는 게시판 스킨에 어울리게 하면 되겠구요.
이상 알아두면 별로 쓸데는 없는 고만고만한 팁이었습니다.
