pagefind를 사용하여 정적 사이트에 검색 추가
pagefind의 경우 다음 명령으로 설치할 수 있습니다.
npm install pagefind
그런 다음 package.json 파일에서 정적 사이트가 구축된 후 검색을 생성하는지 확인하십시오.
{
"scripts": {
...
"build": "astro build",
"postbuild": "pagefind --source dist",
},
}
그런 다음 다음 명령을 실행하여 사이트에서 콘텐츠를 검색할 수 있습니다.
<link href="/_pagefind/pagefind-ui.css" rel="stylesheet" />
<script src="/_pagefind/pagefind-ui.js" type="text/javascript">
</script>
<div id="search" class="ml-3 p-4"></div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
new PagefindUI({ element: '#search' });
});
</script>
pagefind 설명서에 설명된 대로 검색 표시줄을 사용하여 사이트의 콘텐츠를 검색할 수 있습니다.
명심해야 할 또 다른 사항은 특정 페이지를 색인화하지 않도록 선택할 수 있다는 것입니다.
<body>
<main>
Content goes here
</main>
<div class="bg-slate-900 text-gray-100" data-pagefind-body >
</div>
</body>
페이지 콘텐츠를 색인화하려면 페이지에서 data-pagefind-body 속성을 사용하세요.
<body class="bg-slate-900 text-gray-100" data-pagefind-body >
<main>
Content goes here
</main>
</body>
이를 실제로 보려면 내 개인 웹 사이트 저장소를 볼 수 있습니다.
https://github.com/FriendlyUser/astro-tech-blog
참조
Reference
이 문제에 관하여(pagefind를 사용하여 정적 사이트에 검색 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/friendlyuser/adding-search-to-static-sites-with-pagefind-3723텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
