정적 사이트에 검색 추가 방법

This post was originally posted on The Algorithmic Cookbook under How To Add Search To Your Static Site. This post is also on YouTube

본고에서, 나는 검색엔진을 가리키는 폼을 추가함으로써 정적 사이트에 검색을 추가하는 방법을 소개할 것이다.

검색표에 무슨 내용이 있을 거예요.

검색 양식을 작업하려면 다음이 필요합니다.

은 form 속성 role의 search, method 속성(일반적으로 GET)과 action 속성, 그리고 검색 공급자를 가리키는 URL,

은 name 속성을 검색 엔진이 검색 필드로 사용하는 (탭이 있는) 텍스트 입력 필드로 설정합니다. 그 값은 site:yourdomain.example 및

을 포함합니다.

제출 버튼 및

의 일부 최적화, 예를 들어 여러 개의 검색 엔진, 그리고 검색 필드에 site:yourdomain.example을 숨긴다.

나는 검색엔진이 anti-CSRF tokens을 사용하지 않는다고 가정하는데, 당신은 그것을 표의 나머지 부분과 함께 제출할 방법을 찾아야 합니다.
만약 네가 해 보고 싶다면, 나는 이미 search form in my site’s header을 하나 추가했는데, 보기에 이렇다.

검색 엔진 확인

우선, 검색엔진에 가서 그것이 어떻게 작동하는지 봅시다.여기서 나는 Google Search을 사용할 것이다.홈 페이지를 볼 때 검색 상자는 input이라는 q 필드입니다.form 요소로 이동하면 /search의 조작(https://www.google.com/search)과 GET의 방법을 볼 수 있습니다.불필요한 것을 없애면 구글의 검색표는 이렇게 보인다.

<form ... action="search" ... method="GET" name="f" ...role="search">
  ...
  <input ... name="q" ... aria-label="search">
  ...
  <input ... value="Google Search" ... name="btnK" type="submit">
  ...
</form>

만약 내가 site:agckb.xyz을 검색한다면 구글은 나의 사이트, 알고리즘 요리책에서 나에게 검색 결과를 줄 것이다.

이것들은 이 URL에 표시됩니다.

https://www.google.com/search?sxsrf=ALeKk01GA8FFoL3T8g20i8cZI0hBiXwdCw%3A1598164783561&source=hp&ei=Lw9CX5m8H4mQlwSxsZDoAw&q=site%3Aagckb.xyz&oq=site%3A&gs_lcp=CgZwc3ktYWIQAxgAMgQIIxAnMgQIIxAnMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADICCAA6BQgAEJECOgQIABBDOggIABCxAxCDAToICC4QsQMQgwE6CgguEMcBEKMCEEM6BwguELEDEEM6AgguULrgBViH7wVg0PYFaAFwAHgAgAH_A4gB4BWSAQU0LTUuMZgBAKABAaoBB2d3cy13aXo&sclient=psy-ab

다른 모든 매개 변수는 무서워 보이지만 q 매개 변수와 (URI 인코딩된) 검색 필드만 있으면 됩니다.그래서 이 역시 효과가 있다.

https://www.google.com/search?q=site%3Aagckb.xyz

우리가 발견한 것을 이용하여 우리는 자신의 형식을 만들 수 있다.

<form method="GET" class="search-form" action="https://www.google.com/search" role="search" name="search-form">
    <label for="search-form_query" class="sr-only search-form_label">Search Term</label>
    <input class="search-form_query" type="text" name="q" id="search-form_query" value="site:agckb.xyz ">
    <button class="search-form_button" type="submit">Search on Google</button>
</form>

여기서 우리는 구글 검색에서 무엇을 보았고 이를 하나의 형식으로 바꾸었다.
이 폼의 동작은 우리가 구글 검색 폼 https://www.google.com/search/에서 본 GET 방법을 가리킨다.이 폼을 보조 기술의 검색 이정표로 삼는 role= search 도 있다.
검색 입력에 태그가 있습니다.sr-only은 보조 기술이 입력의 목적을 이해할 수 있도록 라벨을 직관적으로 숨기기 위한 것이다.만약 label 원소를 원하지 않는다면, 다른 accessible labeling techniques도 원합니다.
입력 자체에는 이름 q, 유형text, 라벨 id와 충전 site:agckb.xyz␣(␣은 공백 U+020)이 있습니다.웹 사이트를 검색할 때 탭을 미리 채워야 합니다. 그렇지 않으면 웹 사이트가 아닌 웹 사이트를 검색합니다.
내가 위에서 한 일은 검색엔진을 통해 검색하는 가장 지원되고 간단한 방식이다.JavaScript는 필요 없습니다.나는 또한 각종 검색엔진에서 각자의 폼 조작과 검색 검색 검색 매개 변수를 사용할 것이라고 믿는다.

여러 검색 엔진

검색 엔진이 동일한 검색 버튼 양식 매개 변수를 사용하는 경우 formaction이 있는 버튼을 다른 검색 엔진에 추가할 수 있습니다.예를 들어 구글과 DuckDuckGo는 q을 검색 매개 변수로 사용한다.다음 버튼을 추가하여 DuckDuckGo를 지원할 수 있습니다.

<button action="submit" formaction="https://duckduckgo.com/">Search DuckDuckGo</button>

DuckDuckGo의 예에서 당신은 POST 검색을 통해 formmethod=POST을 추가하여 이 점을 실현할 수 있습니다.

숨겨진 사이트: yoursite.양식 입력 예

내가 구글을 사용하는 것은 그것을 더욱 쉽게 하기 때문이다.두 번째 입력을 추가할 수 있습니다. 이름은 q이고 속성은 hidden이며 site:yoursite.example을 값으로 지정할 수 있습니다.

<input type="text" name="q" label="site:agckb.xyz" hidden>

이것은 검색엔진에 특정하지만 브라우저는 두 개의 q 파라미터를 제공하여 검색엔진이 그것들을 한데 합칠 수 있습니다.
만약 이 점을 할 수 없다면, 자바스크립트를 사용하여 불러올 때 삭제하고, 사용자가 폼을 제출하기를 원할 때 바꿀 수 있습니다.

const searchForm = document.forms['search-form'];

window.addEventListener('load', () => {
  searchForm.q.value = '';
});

searchForm.addEventListener('submit', function(e){
  e.preventDefault();
  searchForm.q.value += 'site:yoursite.example';
  e.currentTarget.submit();
});

만약 당신이 site:yoursite.example을 하드코딩하고 싶지 않다면, 'site:' + window.location.hostname으로 바꿀 수 있습니다.

검색 엔진 비교

나는 이 시계를 함께 놓고 각종 검색엔진의 설정 방식을 비교했다.나는 그중의 네 개나 다섯 개만 열거할 수 있지만, 이 검색엔진들이 매우 재미있다는 것을 발견했다.
검색 엔진
양식 URL
방법
검색어 이름
여러 입력 병합?
상호 호환
구글https://www.google.com/searchGETq맞다
DuckDuckGo、Ecosia、Bing、Yooz、Quant、Parsijoo
반드시https://www.bing.com/searchGETq아니오
구글, DuckDuckGo, Ecosia, Yooz, Quant, Parsijoo
야후https://search.yahoo.com/searchGET , POST p아니오
덕덕덕고 오리.https://duckduckgo.com/GET , POST q아니오
구글, 에코시아, 빙, 유즈, Quant, Parsijoo
Yandex 회사https://yandex.com/search/GETtext아니오
바이두https://www.baidu.com/sGETwd아니오
생태 서아시아https://ecosia.org/searchGETq아니오
구글, DuckDuckGo, Bing, Yooz, Quant, Parsijoo
시작 페이지https://www.startpage.com/sp/searchGET , POST query아니오
SwissCows 스위치
Swisscows 스위치https://swisscows.com/webGETquery이 가능하다, ~할 수 있다,...
검색
유오스https://yooz.ir/searchGETq아니오
구글, DuckDuckGo, Ecosia, Bing, Quant, Parsijoo
정량https://quant.com/GETq아니오
구글, DuckDuckGo, Ecosia, Bing, Yooz, Parsijoo
파시호https://parsijoo.ir/webGETq아니오
구글, DuckDuckGo, Ecosia, Bing, Yooz, Quant

결론

이것이 바로 검색 엔진을 가리키는 폼을 통해 정적 사이트에 검색을 추가하는 방법입니다.이것은 정적 사이트에 검색을 추가하는 유일한 방법이 아닙니다. 저는 미래에 다른 방법을 탐색하고 싶습니다.
농담으로 나는 purely front-end search solution on my old website으로 lunr.js을 만들었지만 이것은 무서운 전단 전략이다.

웹 페이지에 약 450KB의 JavaScript,

추가

사전 구축 검색 인덱스 없음,

은 주 라인의 모든 작업을 완성합니다.

내가 지금 알고 있는 바에 의하면, 이런 방법을 개선할 때가 되었다.귀신이 곡할 노릇이다. 나는 심지어 이 논리를 백엔드로 옮기고 서버 없는 기능을 이용하여 실제 검색을 할 수도 있다.가능성은 무한한 1입니다.
가능성은 무궁무진하지 않을 수도 있다. 네가 이 점을 할 수 있는 모든 코드 배열을 계산해 내지 않으면, 나는 그것들을 추측할 수 있다.다시 한 번 말하지만, 당신은 단지 몇 가지 통용적인 방법에 한정됩니다.그러나 일반적인 방법의 서브집합으로서 이런 구체적인 알고리즘은 다르지 않습니까?이것을 케케묵은 말투의 결말로 삼아야 한다.↩︎
읽어주셔서 감사합니다!만약 네가 이 게시물을 좋아한다면, 너는 다음과 같은 방식으로 나를 지지할 수 있다

이 게시물 공유,

Patron,

Paypal, Ko-fi 또는 Buy Me A Coffee 또는

을 통해 저에게 돈을 좀 부쳐 주십시오

은 my Namecheap affiliate link을 사용하여 도메인을 가져옵니다.내가 커미션을 벌 테니 당신이 산 링크를 주의하세요.