프로그래밍 검색 엔진을 만든 후에는 사이트에 프로그래밍 검색 요소를 추가할 수 있습니다. 이렇게 하려면 몇 가지 코드를 복사하여 검색엔진을 표시하려는 사이트의 HTML에 붙여넣어야 합니다.
- 제어판에서 사용할 검색엔진을 클릭합니다.
- 개요 페이지의 기본 섹션에서 코드 가져오기를 클릭합니다. 코드를 복사하여 프로그래밍 검색 요소를 표시할 페이지의 HTML 소스 코드에 붙여넣습니다.
<div class="gcse-search"></div>
요소는 자리표시자이며, 여기에 검색 요소 (검색창과 검색결과 모두)가 렌더링됩니다.
<div class="gcse-search"></div>
다양한 레이아웃 사용해 보기
대부분의 경우 검색창을 검색결과와 별도로 표시하는 것이 좋습니다. 2열 레이아웃을 사용하면 페이지의 한 영역 (예: 사이드바)에 검색창을 렌더링하고 다른 영역 (예: 페이지의 기본 영역)에 검색결과를 표시할 수 있습니다.
엔진 레이아웃을 변경하려면 제어판에 있는 디자인 페이지의 레이아웃 섹션으로 이동하세요. 제어판에서 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>
또 다른 흥미로운 레이아웃은 두 페이지 옵션입니다. 이 도구를 사용하면 한 페이지에 자체 검색창을 구현하고 주소 표시줄의 매개변수를 사용하여 다른 페이지에 표준 검색 결과를 렌더링할 수 있습니다.
제어판에서 두 페이지 레이아웃을 선택하여 저장합니다. 한 페이지에서 독립형 검색창을 구현하고 resultsUrl
속성이 결과를 표시하려는 URL을 가리키도록 변경합니다.
<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>
이제 'q' 인수를 사용할 수 있습니다.
https://my-results-page-url.com/?q=myQuery
주소 표시줄의 q=myQuery 매개변수를 확인합니다. 이는 <div class="gcse-searchresults-only"></div>
요소가 표시할 쿼리 결과를 아는 방법입니다.
다음...
계속해서 자동 완성 사용 설정을 진행합니다.