Fix search-popup animation using template

This commit is contained in:
Mimi 2026-08-14 16:45:16 +08:00
parent 120d41d0fa
commit 66e3095a31
3 changed files with 6 additions and 2 deletions

View File

@ -1,5 +1,7 @@
{%- if theme.algolia_search.enable or theme.local_search.enable %}
<div class="search-pop-overlay">
{# Keep the popup out of the render tree to prevent Safari from animating it before main.css is applied.
When main.css loads slowly, the unstyled search popup briefly appears and shrinks away. #}
<template id="search-popup-template"><div class="search-pop-overlay">
<div class="popup search-popup">
<div class="search-header">
<span class="search-icon">
@ -20,5 +22,5 @@
</div>
</div>
</div>
</div>
</div></template>
{%- endif %}

View File

@ -1,6 +1,7 @@
/* global CONFIG, NexT, pjax */
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(document.querySelector('#search-popup-template').content.cloneNode(true));
const { indexName, appID, apiKey, hits } = CONFIG.algolia;
const client = window['algoliasearch/lite'].liteClient(appID, apiKey);

View File

@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', () => {
console.warn('`hexo-generator-searchdb` plugin is not installed!');
return;
}
document.body.appendChild(document.querySelector('#search-popup-template').content.cloneNode(true));
const localSearch = new LocalSearch({
path : CONFIG.path,
top_n_per_article: CONFIG.localsearch.top_n_per_article,