질문/조언팁/리소스 공유

게시판에서 태그 목록 페이지는 요즘 거의 사양화됐죠?

게시판 주소에 dispBoardTagList 로 들어가면 나오는 그 태그 목록 페이지 말입니다.

그래도 언젠가 시간 나면 태그/워드 클라우드를 만들고 싶다고 생각했는데, 그 쓸데없는 일을 했습니다ㅋㅋ

 

라이믹스에 어울리는 게 뭐가 있나 하고 살펴보다가 제가 고른 것은  https://github.com/prashant1rana/jQWCloud

제이쿼리 3.4.1 대응인 것 같아 좀 망설였는데 라이믹스 현재 마스터 버전에서도 잘 돌아가는 것 같습니다.

 

wordCloud.gif

 

 

구동 방법은 비교적 간단합니다.

 

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 = [
        <[email protected]($tag_list as $val)-->
        <[email protected]($val->count > 1)-->
        {
            word:'{escape($val->tag, false)}',
            weight: '{$val->count}'
        },
        <[email protected]>
        <[email protected]>
    ];
    $('.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 속성이 추가되게 되는 것입니다.

 

그 외의 페이지 스타일링은 각자 쓰는 게시판 스킨에 어울리게 하면 되겠구요.

이상 알아두면 별로 쓸데는 없는 고만고만한 팁이었습니다.

글쓴이 윤삼

profile
사물이 거울에 보이는 것보다 가까이 있음
  • profile
    오 이거 태그클라우드 위젯으로 만들어지면 딱 좋겠어요
  • profile profile
    아 맞다. tag_list 위젯에 스킨으로 들어가도 되겠네요. 누군가 만들어주시면 좋을 듯!
  • profile

    해보지는 않았지만,, 말씀만 들어도 뭔가 멋져 보입니다. 추천버튼 꾸욱!

  • profile profile

    근데 요즘 나오는 멋들어진 워드 클라우드들 같은 확실한 아름다움은 없어요ㅜ

  • profile

    더 살펴보니까 이게 더 간지나네요. https://github.com/metaloha/jQuery.awesomeCloud.plugin
    다만 결과를 canvas로 뿌려주다보니 태그 검색 결과 페이지로 링크를 걸 수가 없구요;;;

     

    덧. 잘 찾아보니 링크도 가능하네요. 저는 이걸로 해야겠습니다ㅋㅋ

    라이브러리 수정할 필요도 없고 이게 더 간단데스!

     

    1. 마찬가지로 jquery.awesomeCloud-0.2.js 파일을 게시판 스킨 내 js 폴더에 저장

    2. tag_list.html 파일 수정

    <load target="js/jquery.awesomeCloud-0.2.js" />
    
    <div class="rd_body" id="_tag_list">
        <span loop="$tag_list => $val" data-weight="{$val->count}" style="display: none;"><a href="{getUrl('', 'mid', $mid, 'act','','search_target','tag','search_keyword',escape($val->tag, false))}">{escape($val->tag, false)}</a></span>
    </div>
    
    <script>
        jQuery(document).ready(function($) {
            $('#_tag_list').awesomeCloud({
                "size" : {
                    "grid" : 8, // word spacing, smaller is more tightly packed
                    "factor" : 0,// font resize factor, 0 means automatic
                    "normalize" :false // reduces outliers for more attractive output
                },
                "color" : {
                    "background" :"rgba(255,255,255,0)",// background color, transparent by default
                    "start" :"#20f",// color of the smallest font, if options.color = "gradient""
                    "end" : "rgb(200,0,0)" // color of the largest font, if options.color = "gradient"
                },
                "options" : {
                    "color" : "random-dark", // random-light, random-dark, gradient
                    "rotationRatio" : 0.35, // 0 is all horizontal, 1 is all vertical
                    "printMultiplier" : 1, // set to 3 for nice printer output; higher numbers take longer
                    "sort" : "random" // highest, lowest or random
                },
                "font" : "'NanumGothic', 'Nanum Gothic', 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'apple sd gothic neo', 'Sans-serif', sans-serif", //  the CSS font-family string
                "shape" : "square"// circle, square, star or a theta function describing a shape
            });
        $('.rd_body canvas').css('z-index', '');
    });
    </script>

    - 스크립트 태그 안에 옵션을 보면 printMultiplier 라는 게 있는데요. 이걸 1로 해야 canvas로 나타내는 각 태그의 href 링크가 이미지맵으로 맞아떨어지더군요. 인쇄용으로 canvas 이미지 사이즈를 키우는 것인데, 그 경우를 배제하고 태그 링크 작동을 제대로 하게 하려면 이 값을 1로 하는 것이 가장 좋습니다.

  • profile
    요즘 태그 위젯이 php7에서 동작하던가요? ㅠ
  • profile profile
    태그 위젯은 잘 모르겠어요. 일단 쓸모 자체가 있는 것인지도 궁금하구요.
    그나마 인포그래픽적 요소가 있으면 어떨까 하는 생각이 있던 거였는데, 이것도 생각만큼 드라마틱하다거나 그러진 않네요ㅎㅎ
  • profile profile
    윤삼님 태그 위젯이나 모듈 좀 같이 작업 좀 도와주세요 @[email protected];;;;
    흐흑...
    https://xetown.com/questions/1394230