종속성 없이 5분 안에 Hugo 정적 사이트에 검색 추가
대신에 저는 과거에서 영감을 얻었습니다. 2000년대의 많은 사이트처럼 검색 엔진이 저를 대신해 작업하도록 했습니다. 이것은 귀하의 사이트에 검색을 추가하는 80/20 버전입니다. 최소한의 노력으로 충분히 좋은 옵션입니다.
우리는 무엇을 추가하고 있습니까?
검색 엔진은
site:<domain>
를 사용하여 단일 웹 사이트 내에서 검색할 수 있는 옵션을 제공합니다. 이를 기본으로 사용하고 입력 상자를 사용자 텍스트가 포함된 클릭 가능한 링크와 동기화합니다. 클릭하면 검색이 채워진 검색 엔진 페이지로 이동합니다.site:kevinquinn.fun <user-input-text-here>
코드베이스에 대한 총 추가 사항 - 3.
예를 보여주세요
이 사이트는 이전 버전의 Boostrap으로 구축되었지만 핵심 요소는 여기handy dandy Stack Overflow post에서
<script>
인 다음 입력 상자에 연결합니다.<div class="input-group">
<input id='search-input' type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<a id='generated-link' target="_blank" class="btn btn-default" href="https://duckduckgo.com/">Go!</a>
</span>
</div>
<script type="text/javascript">
var link= document.getElementById('generated-link');
var input= document.getElementById('search-input');
input.onchange=input.onkeyup= function() {
link.search= '?q=site%3Akevinquinn.fun+'+encodeURIComponent(input.value);
};
</script>
5분 안에 검색하세요 😎
귀하의 웹사이트에 검색 기능을 즉시 추가하셨습니다. 스스로를 격려하십시오! 세상에서 가장 놀라운 검색인가요? 아니요, 실제로는 아니지만 작업을 수행합니다. 대부분의 개발자 블로그에는 Hello World! 어쨌든 게시물이므로 Algolia는 아주 작고 약간 과잉 일 수 있습니다. 이제 절약한 시간을 가지고 Hacker News 스크롤로 돌아갑니다.
Reference
이 문제에 관하여(종속성 없이 5분 안에 Hugo 정적 사이트에 검색 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/idontremember/add-search-to-hugo-static-site-in-5-minutes-with-no-dependencies-38ab텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)