45 장고에 구글 검색엔진 기능 추가

45.1 구글 맞춤검색 등록 - custom_google_search.js

구글 맞춤검색 사이트

사이트에 구글검색 기능을 추가하겠습니다.

구글 맞춤검색 또는 애드센스의 광고단위에서 검색엔진 추가하여 partner id를 발급 받아야 합니다.

위 그림 과 같이 js파일을 추가합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
(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를 추가합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!-- 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

검색 결과가 화면에 어디에 나타날지 추가 합니다.

본문위에 나타나도록 추가했습니다.

1
2
3
<div id="search_result" class="results g_search_hide" >
     <gcse:searchresults-only></gcse:searchresults-only>    
</div>

45.4 브라우저에서 확인하기

브라우저로 접속하여 정상 동작을 확인합니다.

검색 잘되네요^__^