Leilukin/leilukin-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bundle CSS of search field to <head>

Browse Source
This commit is contained in:
Leilukin 2025-05-09 16:42:40 +08:00
parent 244663c384
commit 9c17643bf9
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/_includes/layouts/base.vto
View File

@ -16,6 +16,11 @@
{{ if hasTooltips }}
<link rel="stylesheet" href="/assets/css/tooltips.css">
{{ /if }}
{{ if externalCss }}
{{ for file of externalCss }}
<link rel="stylesheet" href="{{ externalCss }}">
{{ /for }}
{{ /if }}
<style>{{ getBundle "css" }}</style>
<!-- Favicon -->
{{ favicon }}

6
src/pages/search.vto
View File

@ -1,11 +1,11 @@
---
title: Search
externalCss: "/pagefind/pagefind-ui.css"
eleventyComputed:
desc: Search {{ sitemeta.siteName }}.
---
<p>Looking for something on my website? If you have JavaScript enabled, you can use the search field below, which is powered by the static search library <a href="https://pagefind.app/">Pagefind</a>. Your search query will not be recorded anywhere.</p>
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
@ -19,7 +19,7 @@ eleventyComputed:
<p>Looks like you have JavaScript disabled. This search field requires JavaScript to function.</p>
</noscript>
<style>
{{- css }}
:root {
--pagefind-ui-scale: 1;
--pagefind-ui-font: var(--ff-default);
@ -33,4 +33,4 @@ eleventyComputed:
.pagefind-ui__search-input.svelte-e9gkc3::placeholder {
opacity:.6;
}
</style>
{{ /css }}