프로그래밍 검색 엔진을 만들면 사이트에 프로그래밍 검색 요소를 추가할 수 있습니다. 이렇게 하려면 코드를 복사하여 검색엔진을 표시하려는 사이트의 HTML에 붙여넣어야 합니다.
- Control Panel에서 사용할 검색엔진을 클릭합니다.
- 개요 페이지의 기본 섹션에서 코드 가져오기를 클릭합니다. 코드를 복사하여 프로그래밍 검색 요소를 표시하려는 페이지의 HTML 소스 코드에 붙여넣습니다.
<div class="gcse-search"></div>
요소는 자리표시자입니다. 여기에서 검색 요소 (검색창과 검색결과 모두)가 렌더링됩니다.
<div class="gcse-search"></div>
다양한 레이아웃 시도
검색창은 검색결과와 별도로 표시되는 것이 좋은 경우가 많습니다. 2열 레이아웃을 사용하면 페이지의 한 영역 (예: 사이드바)에 검색창을 렌더링하고 다른 영역 (예: 페이지의 기본 영역)에 검색결과를 표시할 수 있습니다.
엔진 레이아웃을 변경하려면 제어판의 디자인 페이지에서 레이아웃 섹션으로 이동하세요. Control Panel에서 2열 레이아웃을 선택하고 저장한 후 검색 요소에 대한 HTML 코드도 변경해야 합니다.
<div style="border: 1px solid blue;">
Area 1 (for example a sidebar)
<div class="gcse-searchbox"></div>
</div>
<div style="border: 1px solid red;">
Area 2 (for example main area of the page)
<div class="gcse-searchresults"></div>
</div>
또 다른 흥미로운 레이아웃은 두 페이지 옵션입니다. 한 페이지에 나만의 검색창을 구현하고 주소 표시줄의 매개변수를 사용하여 다른 페이지에 표준 검색결과를 렌더링할 수 있습니다.
Control Panel에서 두 페이지 레이아웃을 선택하고 저장합니다. 한 페이지에서 독립형 검색창을 구현하여 결과를 표시할 URL을 가리키도록 resultsUrl
속성을 변경합니다.
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>
독립된 검색결과 페이지를 구현하려면 결과 코드 스니펫을 결과 페이지에 붙여넣습니다.
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>
이제 URL에 'q' 인수를 전달하여 이 페이지에서 검색결과를 트리거할 수 있습니다.
https://my-results-page-url.com/?q=myQuery
주소 표시줄의 q=myQuery 매개변수를 확인합니다. 이를 통해 <div class="gcse-searchresults-only"></div>
요소는 표시할 쿼리 결과를 알 수 있습니다.
다음...
자동 완성 사용 설정하기를 참고하세요.