<div class="tabs"> <div class="tab active" data-target="news">News</div> <div class="tab" data-target="commu">Commu</div> </div> <div id="news" class="tab-content active"> <div class="wordcloud"> <?php include_once(G5_THEME_PATH.'/inboard_wordcloud_news.php'); ?> </div> </div> <div id="commu" class="tab-content"> <div class="wordcloud"> <?php include_once(G5_THEME_PATH.'/inboard_wordcloud_commu.php'); ?> </div> </div>
 
<script> document.querySelectorAll('.tab').forEach(function(tab) { tab.addEventListener('click', function() { // 모든 탭에서 active 클래스 제거 document.querySelectorAll('.tab').forEach(function(tab) { tab.classList.remove('active'); }); // 클릭된 탭에 active 클래스 추가 this.classList.add('active'); // 모든 탭 내용을 숨김 document.querySelectorAll('.tab-content').forEach(function(content) { content.classList.remove('active'); }); // 클릭된 탭의 내용을 표시 var target = this.getAttribute('data-target'); document.getElementById(target).classList.add('active'); }); }); </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.0/wordcloud2.min.js"></script>
<canvas id="wordcloud" style="width: 100%; height: 200px;"></canvas>
<script>
document.addEventListener("DOMContentLoaded", function() {
    // 키워드와 빈도 데이터를 가져옴
    fetch('https://nolazo.com/theme/BS4-Basic/inboard_hot_keyword_news.php')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            // 상위 100개의 키워드와 비율만 가져오기
            var words = data.words.slice(0, 100); // 단어 100개
            var rates = data.rates.slice(0, 100); // 비율 100개
            // 키워드와 비율을 기반으로 워드 클라우드 생성
            var keywordList = words.map(function(word, index) {
                var rate = rates[index] ? rates[index].match(/[\d.]+/) : [1]; // 비율이 없을 때 기본 값 1
                var frequency = parseFloat(rate[0]) * 100; // 비율을 빈도로 사용
                return [word, frequency]; // 모든 단어 포함
            });
            // 워드 클라우드 생성
            WordCloud(document.getElementById('wordcloud'), { 
                list: keywordList,
                gridSize: 5, // 더 좁은 간격
                weightFactor: 0.25, // 크기를 더 크게 조정
                color: 'random-dark',
                rotateRatio: 0, // 모든 키워드에 대해 rotate 함수 적용
                backgroundColor: '#ffffff',
                click: function(item) {
                    // 클릭된 키워드로 Google 검색
                    var searchUrl = "https://www.google.com/search?q=" + encodeURIComponent(item[0] + ' site:nolazo.com');
                    window.open(searchUrl, '_blank'); // 새 탭에서 검색 결과 열기
                }
            });
        })
        .catch(error => {
            console.error('Fetch error:', error);
        });
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.0/wordcloud2.min.js"></script>
<canvas id="wordcloud" style="width: 100%; height: 200px;"></canvas>
<script>
document.addEventListener("DOMContentLoaded", function() {
    // 키워드와 빈도 데이터를 가져옴
    fetch('https://nolazo.com/theme/BS4-Basic/inboard_hot_keyword_commu.php')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            // 상위 100개의 키워드와 비율만 가져오기
            var words = data.words.slice(0, 50); // 단어 100개
            var rates = data.rates.slice(0, 50); // 비율 100개
            // 키워드와 비율을 기반으로 워드 클라우드 생성
            var keywordList = words.map(function(word, index) {
                var rate = rates[index] ? rates[index].match(/[\d.]+/) : [1]; // 비율이 없을 때 기본 값 1
                var frequency = parseFloat(rate[0]) * 100; // 비율을 빈도로 사용
                return [word, frequency]; // 모든 단어 포함
            });
            // 워드 클라우드 생성
            WordCloud(document.getElementById('wordcloud'), { 
                list: keywordList,
                gridSize: 5, // 더 좁은 간격
                weightFactor: 0.3, // 크기를 더 크게 조정
                color: 'random-dark',
                rotateRatio: 0, // 모든 키워드에 대해 rotate 함수 적용
                backgroundColor: '#ffffff',
                click: function(item) {
                    // 클릭된 키워드로 Google 검색
                    var searchUrl = "https://www.google.com/search?q=" + encodeURIComponent(item[0] + ' site:nolazo.com');
                    window.open(searchUrl, '_blank'); // 새 탭에서 검색 결과 열기
                }
            });
        })
        .catch(error => {
            console.error('Fetch error:', error);
        });
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.0/wordcloud2.min.js"></script> <canvas id="wordcloud" style="width: 100%; height: 200px;"></canvas> <?php // 여기서 $tab_name 변수가 어떻게 설정되었는지 확인하세요. if ($tab_name === 'news') { echo '<script> ... </script>'; // News 탭 스크립트 } else if ($tab_name === 'commu') { echo '<script> ... </script>'; // Commu 탭 스크립트 } ?>

<div id="news" class="tab-content active"> <div class="wordcloud">News 탭이 활성화되었습니다.</div> </div> <div id="commu" class="tab-content"> <div class="wordcloud">Commu 탭이 활성화되었습니다.</div> </div>