Skip to content

Commit 1889d99

Browse files
xihalexihale
committed
refactor(search): optimize implementation
- Restore missing CSS link in search layout - Use defer for script loading to improve performance - Refactor CSS to remove !important usage by increasing specificity - Improve Pagefind initialization logic
1 parent 390f1aa commit 1889d99

3 files changed

Lines changed: 143 additions & 179 deletions

File tree

‎assets/style.css‎

Lines changed: 113 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -477,37 +477,6 @@ nav a:hover {
477477
height: 100%;
478478
}
479479

480-
.search-link {
481-
display: inline-flex;
482-
align-items: center;
483-
justify-content: center;
484-
transition: all 0.2s ease;
485-
padding: 0 0.5rem;
486-
opacity: 0.8;
487-
}
488-
489-
.search-link:hover {
490-
opacity: 1;
491-
color: var(--brand-primary);
492-
text-decoration: none !important;
493-
}
494-
495-
.search-icon {
496-
width: 20px;
497-
height: 20px;
498-
vertical-align: middle;
499-
}
500-
501-
@media (prefers-color-scheme: dark) {
502-
.search-icon {
503-
filter: invert(1) brightness(2);
504-
}
505-
}
506-
507-
.search-link:hover .search-icon {
508-
transform: scale(1.1);
509-
}
510-
511480
.search-container {
512481
margin-top: 4rem;
513482
width: 100%;
@@ -517,167 +486,167 @@ nav a:hover {
517486
.pagefind-ui *,
518487
.pagefind-ui *::before,
519488
.pagefind-ui *::after {
520-
background-color: transparent !important;
521-
border: none !important;
522-
box-shadow: none !important;
523-
border-radius: 0 !important;
524489
}
525490

526-
.pagefind-ui__search-input {
527-
background-color: transparent !important;
528-
color: var(--text-primary) !important;
529-
border: none !important;
530-
border-bottom: 2px solid var(--border-subtle) !important;
531-
padding: 12px 0 12px 40px !important;
532-
font-size: 2rem !important;
533-
width: 100% !important;
534-
outline: none !important;
535-
transition: border-color 0.2s ease !important;
491+
#search .pagefind-ui,
492+
#search .pagefind-ui *,
493+
#search .pagefind-ui *::before,
494+
#search .pagefind-ui *::after {
495+
box-sizing: border-box;
496+
}
497+
498+
#search .pagefind-ui .pagefind-ui__search-input {
499+
background-color: transparent;
500+
color: var(--text-primary);
501+
border: none;
502+
border-bottom: 2px solid var(--border-subtle);
503+
padding: 12px 0 12px 40px;
504+
font-size: 2rem;
505+
width: 100%;
506+
outline: none;
507+
transition: border-color 0.2s ease;
536508
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
537-
background-repeat: no-repeat !important;
538-
background-position: left center !important;
539-
background-size: 24px 24px !important;
509+
background-repeat: no-repeat;
510+
background-position: left center;
511+
background-size: 24px 24px;
512+
border-radius: 0;
540513
}
541514

542515
@media (prefers-color-scheme: dark) {
543-
.pagefind-ui__search-input {
516+
#search .pagefind-ui .pagefind-ui__search-input {
544517
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
545518
}
546519
}
547520

548-
.pagefind-ui__search-input:focus {
549-
border-bottom-color: var(--brand-primary) !important;
521+
#search .pagefind-ui .pagefind-ui__search-input:focus {
522+
border-bottom-color: var(--brand-primary);
550523
}
551524

552-
.pagefind-ui__search-clear {
553-
display: none !important;
525+
/* Hide default Pagefind form icon to prevent duplication */
526+
#search .pagefind-ui .pagefind-ui__form::before {
527+
display: none;
554528
}
555529

556-
.pagefind-ui__result {
557-
list-style: none !important;
558-
padding: 0 !important;
559-
margin: 3rem 0 !important;
560-
border: none !important;
561-
border-bottom: 1px dashed var(--border-subtle) !important;
562-
padding-bottom: 3rem !important;
530+
#search .pagefind-ui .pagefind-ui__search-clear {
531+
display: none;
563532
}
564533

565-
.pagefind-ui__result:last-child {
566-
border-bottom: none !important;
534+
#search .pagefind-ui .pagefind-ui__result {
535+
list-style: none;
536+
padding: 0;
537+
margin: 3rem 0;
538+
border: none;
539+
border-bottom: 1px dashed var(--border-subtle);
540+
padding-bottom: 3rem;
567541
}
568542

569-
.pagefind-ui__result-link {
570-
color: var(--text-primary) !important;
571-
font-weight: 700 !important;
572-
font-size: 1.75rem !important;
573-
text-decoration: none !important;
574-
display: inline-block !important;
575-
margin-bottom: 0.75rem !important;
576-
line-height: 1.2 !important;
543+
#search .pagefind-ui .pagefind-ui__result:last-child {
544+
border-bottom: none;
577545
}
578546

579-
.pagefind-ui__result-link:hover {
580-
color: var(--brand-primary) !important;
547+
#search .pagefind-ui .pagefind-ui__result-link {
548+
color: var(--text-primary);
549+
font-weight: 700;
550+
font-size: 1.75rem;
551+
text-decoration: none;
552+
display: inline-block;
553+
margin-bottom: 0.75rem;
554+
line-height: 1.2;
581555
}
582556

583-
.pagefind-ui__result-excerpt {
584-
color: var(--text-secondary) !important;
585-
line-height: 1.8 !important;
586-
font-size: 1.05rem !important;
587-
margin-bottom: 0 !important;
557+
#search .pagefind-ui .pagefind-ui__result-link:hover {
558+
color: var(--brand-primary);
559+
text-decoration: none;
588560
}
589561

590-
.pagefind-ui__result-excerpt mark {
591-
background-color: transparent !important;
592-
color: var(--brand-primary) !important;
593-
font-weight: 700 !important;
594-
text-decoration: underline !important;
595-
text-decoration-thickness: 2px !important;
596-
text-underline-offset: 2px !important;
562+
#search .pagefind-ui .pagefind-ui__result-excerpt {
563+
color: var(--text-secondary);
564+
line-height: 1.8;
565+
font-size: 1.05rem;
566+
margin-bottom: 0;
597567
}
598568

599-
.pagefind-ui__result-nested {
600-
display: flex !important;
601-
flex-direction: column !important;
602-
gap: 1rem !important;
603-
margin: 0 !important;
604-
padding: 0 0 0 1.5rem !important;
605-
border-left: 2px solid var(--border-subtle) !important;
606-
margin-left: 0.5rem !important;
607-
margin-top: 1rem !important;
569+
#search .pagefind-ui .pagefind-ui__result-excerpt mark {
570+
background-color: transparent;
571+
color: var(--brand-primary);
572+
font-weight: 700;
573+
text-decoration: underline;
574+
text-decoration-thickness: 2px;
575+
text-underline-offset: 2px;
608576
}
609577

610-
.pagefind-ui__result-nested + .pagefind-ui__result-nested {
611-
margin-top: 0 !important;
612-
padding-top: 1rem !important;
578+
#search .pagefind-ui .pagefind-ui__result-nested {
579+
display: flex;
580+
flex-direction: column;
581+
gap: 1rem;
582+
margin: 1rem 0 0 0.5rem;
583+
padding: 0 0 0 1.5rem;
584+
border-left: 2px solid var(--border-subtle);
613585
}
614586

615-
.pagefind-ui__result-sub {
616-
position: relative !important;
617-
display: flex !important;
618-
flex-direction: column !important;
619-
gap: 0 !important;
587+
#search .pagefind-ui .pagefind-ui__result-nested .pagefind-ui__result-link::before {
588+
content: none;
589+
display: none;
620590
}
621591

622-
.pagefind-ui__result-sub .pagefind-ui__result-link {
623-
font-size: 1.25rem !important;
624-
color: var(--text-primary) !important;
625-
font-weight: 600 !important;
626-
margin-bottom: 0 !important;
592+
#search .pagefind-ui .pagefind-ui__result-nested + .pagefind-ui__result-nested {
593+
margin-top: 0;
594+
padding-top: 1rem;
627595
}
628596

629-
.pagefind-ui__result-sub {
630-
position: relative !important;
631-
display: flex !important;
632-
flex-direction: column !important;
633-
gap: 0.25rem !important;
597+
#search .pagefind-ui .pagefind-ui__result-sub {
598+
position: relative;
599+
display: flex;
600+
flex-direction: column;
601+
gap: 0.25rem;
634602
}
635603

636-
.pagefind-ui__result-sub::before {
637-
display: none !important;
604+
#search .pagefind-ui .pagefind-ui__result-sub::before {
605+
display: none;
638606
}
639607

640-
.pagefind-ui__result-sub .pagefind-ui__result-link {
641-
font-size: 1.25rem !important;
642-
color: var(--text-primary) !important;
643-
font-weight: 600 !important;
644-
margin-bottom: 0.25rem !important;
608+
#search .pagefind-ui .pagefind-ui__result-sub .pagefind-ui__result-link {
609+
font-size: 1.25rem;
610+
color: var(--text-primary);
611+
font-weight: 600;
612+
margin-bottom: 0.25rem;
645613
}
646614

647-
.pagefind-ui__result-sub .pagefind-ui__result-link:hover {
648-
color: var(--brand-primary) !important;
615+
#search .pagefind-ui .pagefind-ui__result-sub .pagefind-ui__result-link:hover {
616+
color: var(--brand-primary);
649617
}
650618

651-
.pagefind-ui__result-sub .pagefind-ui__result-excerpt {
652-
font-size: 0.95rem !important;
653-
color: var(--text-tertiary) !important;
654-
opacity: 0.9 !important;
619+
#search .pagefind-ui .pagefind-ui__result-sub .pagefind-ui__result-excerpt {
620+
font-size: 0.95rem;
621+
color: var(--text-tertiary);
622+
opacity: 0.9;
655623
}
656624

657-
.pagefind-ui__message {
658-
padding: 2rem 0 1rem !important;
659-
font-family: var(--font-mono) !important;
660-
font-size: 0.85rem !important;
661-
color: var(--text-tertiary) !important;
662-
text-transform: uppercase !important;
663-
letter-spacing: 0.05em !important;
625+
#search .pagefind-ui .pagefind-ui__message {
626+
padding: 2rem 0 1rem;
627+
font-family: var(--font-mono);
628+
font-size: 0.85rem;
629+
color: var(--text-tertiary);
630+
text-transform: uppercase;
631+
letter-spacing: 0.05em;
664632
}
665633

666-
.pagefind-ui__button {
667-
border: 1px solid var(--border-subtle) !important;
668-
color: var(--text-secondary) !important;
669-
padding: 12px !important;
670-
width: 100% !important;
671-
cursor: pointer !important;
672-
margin-top: 2rem !important;
673-
font-family: var(--font-mono) !important;
674-
text-transform: uppercase !important;
675-
letter-spacing: 0.1em !important;
634+
#search .pagefind-ui .pagefind-ui__button {
635+
border: 1px solid var(--border-subtle);
636+
background: transparent;
637+
color: var(--text-secondary);
638+
padding: 12px;
639+
width: 100%;
640+
cursor: pointer;
641+
margin-top: 2rem;
642+
font-family: var(--font-mono);
643+
text-transform: uppercase;
644+
letter-spacing: 0.1em;
676645
}
677646

678-
.pagefind-ui__button:hover {
679-
border-color: var(--text-primary) !important;
680-
color: var(--text-primary) !important;
647+
#search .pagefind-ui .pagefind-ui__button:hover {
648+
border-color: var(--text-primary);
649+
color: var(--text-primary);
681650
}
682651

683652
.main-content {

‎layouts/search.shtml‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,39 @@
11
<extend template="base.shtml">
22
<head id="head">
3-
<script src="/pagefind/pagefind-ui.js"></script>
4-
<style>
5-
.pagefind-ui__result-nested {
6-
display: block !important;
7-
}
8-
</style>
3+
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
4+
<script src="/pagefind/pagefind-ui.js" defer></script>
95
<script>
106
function initSearch() {
7+
if (typeof PagefindUI === 'undefined') {
8+
return;
9+
}
10+
new PagefindUI({
11+
element: "#search",
12+
showSubResults: true,
13+
excerptLength: 40,
14+
showImages: false,
15+
translations: {
16+
placeholder: "搜索...",
17+
load_more: "加载更多",
18+
search_label: "搜索",
19+
filters_label: "筛选",
20+
zero_results: "没有找到关于 [SEARCH_TERM] 的结果",
21+
many_results: "找到 [COUNT] 条关于 [SEARCH_TERM] 的结果",
22+
one_result: "找到 [COUNT] 条关于 [SEARCH_TERM] 的结果",
23+
alt_search: "没有找到关于 [SEARCH_TERM] 的结果。显示关于 [DIFFERENT_TERM] 的结果：",
24+
search_suggestion: "没有找到关于 [SEARCH_TERM] 的结果。请尝试以下搜索之一：",
25+
searching: "正在搜索 [SEARCH_TERM]...",
26+
sort_label: "排序"
27+
}
28+
});
29+
}
30+
window.addEventListener('DOMContentLoaded', () => {
1131
if (typeof PagefindUI !== 'undefined') {
12-
new PagefindUI({
13-
element: "#search",
14-
showSubResults: true,
15-
excerptLength: 40,
16-
showImages: false,
17-
translations: {
18-
placeholder: "搜索...",
19-
load_more: "加载更多",
20-
search_label: "搜索",
21-
filters_label: "筛选",
22-
zero_results: "没有找到关于 [SEARCH_TERM] 的结果",
23-
many_results: "找到 [COUNT] 条关于 [SEARCH_TERM] 的结果",
24-
one_result: "找到 [COUNT] 条关于 [SEARCH_TERM] 的结果",
25-
alt_search: "没有找到关于 [SEARCH_TERM] 的结果。显示关于 [DIFFERENT_TERM] 的结果：",
26-
search_suggestion: "没有找到关于 [SEARCH_TERM] 的结果。请尝试以下搜索之一：",
27-
searching: "正在搜索 [SEARCH_TERM]...",
28-
sort_label: "排序"
29-
}
30-
});
32+
initSearch();
3133
} else {
32-
setTimeout(initSearch, 50);
34+
window.addEventListener('load', initSearch);
3335
}
34-
}
35-
if (document.readyState === 'loading') {
36-
window.addEventListener('DOMContentLoaded', initSearch);
37-
} else {
38-
initSearch();
39-
}
36+
});
4037
</script>
4138
</head>
4239
<body id="body" data-pagefind-ignore>

0 commit comments

Comments
 (0)