네이버 검색 결과를 XE로 만든 자기 홈페이지에 뿌리는 방법입니다.

 

미리보기: http://www.layoutskin.com/naverSearch

 

시작하기에 앞서 저는 개발자가 아님을 말씀드립니다. ^^;;

따라서 로직이 아니라 비주얼로 접근하였기 때문에 겉보기에는 멀쩡하지만 내부적인 안정성, 효율성 등은 장담 못하니 참고해주세요.

 

하지만 아주 간단하게 적용이 되는 장점은 있습니다.

 

1. 네이버 회원 가입 후 로그인

 

2. 네이버 개발자 센터> 오픈API (http://dev.naver.com/openapi/) 좌측메뉴에서 키등록

 

3. http://openapi.naver.com/search?key=등록한키값&query=검색어display=검색결과갯수&start=1&target=검색대상

 

위와 같은 형식에 키값을 제외하고 본인이 원하는 대로 값을 넣어 주소를 생성합니다.

 

검색결과갯수는 100가 한계라고 되어있습니다.

검색대상은 http://dev.naver.com/openapi/apis/search/rank을 보시면 다양하게 있습니다.

예: 실시간 급상승은 rank, 블로그는 blog, 웹문서는 webkr 등등

 

생성된 주소가 정상적으로 링크 되는지 꼭 확인하셔야 합니다! 정상이면 정돈된 문서가 나오고 비정상이면 태그들이 나옵니다. 

 

4. 생성된 주소로 외부페이지 만들기

 

5. 전용레이아웃 만들기

레이아웃스킨은 무엇이든 상관없고, 레이아웃 편집을 이용하기 위해 따로 만드는 것이므로 문제가 없다는 확신이 있으면 레이아웃스킨에 다음에 나오는 코드를 넣어도 상관없습니다.

 

6. 코드삽입

 

HTML 편집영역

붉은색 표시부분은 본인레이아웃의 컨텐츠영역을 감싸고 있는 div의 아이디나 클래스 이름을 넣어주세요. 정확해야 합니다!!!

<div id="AAA">이면#AAA, <div class="AAA">이면 .AAA 입니다.

녹색표시부분은 그냥 텍스트 이므로 선택사항입니다.

 

<script>
jQuery(function($){

var xmlTotal = $('#drawerContentsBox').find('total').text();
var xmlDate = $('#drawerContentsBox').find('lastBuildDate').text();
var linkData = $('#drawerContentsBox').find('rss').find('channel').find('item').find('link').html();

$('#drawerContentsBox').append('<p class="xmlSummary">네이버 웹문서에서 "layoutskin"으로 검색한 결과: '+xmlDate+' 현재 '+xmlTotal+'건이 검색됨</p>');

$('#drawerContentsBox').find('rss').find('channel').find('item').each(function(idx) {
var xmlTitle = $(this).find('title').text();
var itemData = $(this).html();
var itemDataSplit = itemData.split('<link>');
var itemDataSplit2 = itemDataSplit[itemDataSplit.length-1];
var itemDataSplit3 = itemDataSplit2.split('<description>');
var xmlLink = itemDataSplit3[itemDataSplit3.length-2];
var xmlDescription = $(this).find('description').text();
$('#drawerContentsBox').append('<div class="xmlDataRow"><p class="xmlTitle"><a href="'+xmlLink+'" target="_blank">' + xmlTitle+'</a></p><p class="xmlDescription">'+xmlDescription+'</p></div>');
});
$('rss').hide();
$('.xmlDataRow').hover(function () {
$(this).css('background','#f4f4f4');
}, function () {
$(this).css('background','none');
});

var rows = $('.xmlDataRow').length;
var per_page = 5;
var no_pages = Math.ceil(rows / per_page);
 
var pageNumbers = $('<div id="pages"></div>');
for ( var i = 0; i < no_pages; i++) {
$('<span class="page">' + (i+1) + '</span>').appendTo(pageNumbers);
}

$('#drawerContentsBox').append(pageNumbers);

$('.xmlDataRow').hide();
var t = $('.xmlDataRow');
for ( var j = 0; j <= per_page - 1; j++) {
$(t[j]).show();
}

$('.page:eq(0)').addClass('bold');

$('span').click(function() {
    $('.page').removeClass('bold');
    $(this).addClass('bold');
    $('.xmlDataRow').hide();
    for ( var k = ($(this).text() - 1) * per_page;
         k <= $(this).text() * per_page - 1;
         k++) {
     $(t[k]).show();
    }
});

});
</script>

 

CSS 편집 영역

 

.xmlDataRow {border-top: 1px solid#ccc; height: 55px; padding: 15px}
.xmlSummary {padding-bottom: 20px; font-size: 13px; border-bottom: 1px solid#ccc}
.xmlTitle {margin-bottom: 10px; font-weight: bold}
.xmlTitle a {text-decoration: none; color:#000}
.xmlTitle a:hover {text-decoration: underline}
.xmlDescription {width: 100%; color:#999}
#pages {padding-top: 20px; width: 100%; border-top: 2px solid#ccc; text-align: center}
.page{margin: 0 5px;cursor: pointer}
.page.bold{font-weight: bold}

 

끝입니다. 도움이 되셨으면 좋겠습니다. ^^