45 장고에 구글 검색엔진 기능 추가
45.1 구글 맞춤검색 등록 - custom_google_search.js
사이트에 구글검색 기능을 추가하겠습니다.
구글 맞춤검색 또는 애드센스의 광고단위에서 검색엔진 추가하여 partner id를 발급 받아야 합니다.
위 그림 과 같이 js파일을 추가합니다.
(function () {
var cx = '파트너 아이디';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
function googleCustomSearchExecute() {
var input = document.getElementById('cse-search-input-box-id');
var element = google.search.cse.element.getElement('searchresults-only0');
console.log("googleCustomSearchExecute")
console.log("element : ",element)
if (input.value == '') {
element.clearAllResults();
} else {
element.execute(input.value);
}
return false;
}
45.2 구글 맞춤검색 등록 - topbar.html
부스트스트랩에서 제공한 html에서 수정했습니다.
1) form 부분의 onsubmit, id 부분을 추가합니다.
2) input의 id를 추가합니다.
<!-- templates/base/topbar.html -->
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#"><i class="fas fa-bars"></i></button>
<!-- Navbar Search-->
<form onsubmit="return googleCustomSearchExecute();" id="cse-search-box-form-id" class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
<div class="input-group">
<input id="cse-search-input-box-id" class="form-control" type="text" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2" />
<div class="input-group-append">
<button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</nav>
45.3 구글 맞춤검색 등록 - base.py
검색 결과가 화면에 어디에 나타날지 추가 합니다.
본문위에 나타나도록 추가했습니다.
<div id="search_result" class="results g_search_hide" >
<gcse:searchresults-only></gcse:searchresults-only>
</div>
45.4 브라우저에서 확인하기
브라우저로 접속하여 정상 동작을 확인합니다.
검색 잘되네요^__^
Comments
Login: