В этой статье я расскажу о том, как добавить pagefind на астро-сайт. Этот код доступен в этом репозитории github для тех, кто заинтересован.
Для 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
Ссылки
- https://pagefind.app/
- https://friendlyuser.github.io