Skip to content

Commit a753d41

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 a753d41

2 files changed

Lines changed: 142 additions & 145 deletions

File tree

‎assets/style.css‎

Lines changed: 113 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -517,167 +517,167 @@ nav a:hover {
517517
.pagefind-ui *,
518518
.pagefind-ui *::before,
519519
.pagefind-ui *::after {
520-
background-color: transparent !important;
521-
border: none !important;
522-
box-shadow: none !important;
523-
border-radius: 0 !important;
524520
}
525521

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;
522+
#search .pagefind-ui,
523+
#search .pagefind-ui *,
524+
#search .pagefind-ui *::before,
525+
#search .pagefind-ui *::after {
526+
box-sizing: border-box;
527+
}
528+
529+
#search .pagefind-ui .pagefind-ui__search-input {
530+
background-color: transparent;
531+
color: var(--text-primary);
532+
border: none;
533+
border-bottom: 2px solid var(--border-subtle);
534+
padding: 12px 0 12px 40px;
535+
font-size: 2rem;
536+
width: 100%;
537+
outline: none;
538+
transition: border-color 0.2s ease;
536539
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;
540+
background-repeat: no-repeat;
541+
background-position: left center;
542+
background-size: 24px 24px;
543+
border-radius: 0;
540544
}
541545

542546
@media (prefers-color-scheme: dark) {
543-
.pagefind-ui__search-input {
547+
#search .pagefind-ui .pagefind-ui__search-input {
544548
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;
545549
}
546550
}
547551

548-
.pagefind-ui__search-input:focus {
549-
border-bottom-color: var(--brand-primary) !important;
552+
#search .pagefind-ui .pagefind-ui__search-input:focus {
553+
border-bottom-color: var(--brand-primary);
550554
}
551555

552-
.pagefind-ui__search-clear {
553-
display: none !important;
556+
/* Hide default Pagefind form icon to prevent duplication */
557+
#search .pagefind-ui .pagefind-ui__form::before {
558+
display: none;
554559
}
555560

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;
561+
#search .pagefind-ui .pagefind-ui__search-clear {
562+
display: none;
563563
}
564564

565-
.pagefind-ui__result:last-child {
566-
border-bottom: none !important;
565+
#search .pagefind-ui .pagefind-ui__result {
566+
list-style: none;
567+
padding: 0;
568+
margin: 3rem 0;
569+
border: none;
570+
border-bottom: 1px dashed var(--border-subtle);
571+
padding-bottom: 3rem;
567572
}
568573

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;
574+
#search .pagefind-ui .pagefind-ui__result:last-child {
575+
border-bottom: none;
577576
}
578577

579-
.pagefind-ui__result-link:hover {
580-
color: var(--brand-primary) !important;
578+
#search .pagefind-ui .pagefind-ui__result-link {
579+
color: var(--text-primary);
580+
font-weight: 700;
581+
font-size: 1.75rem;
582+
text-decoration: none;
583+
display: inline-block;
584+
margin-bottom: 0.75rem;
585+
line-height: 1.2;
581586
}
582587

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;
588+
#search .pagefind-ui .pagefind-ui__result-link:hover {
589+
color: var(--brand-primary);
590+
text-decoration: none;
588591
}
589592

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;
593+
#search .pagefind-ui .pagefind-ui__result-excerpt {
594+
color: var(--text-secondary);
595+
line-height: 1.8;
596+
font-size: 1.05rem;
597+
margin-bottom: 0;
597598
}
598599

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;
600+
#search .pagefind-ui .pagefind-ui__result-excerpt mark {
601+
background-color: transparent;
602+
color: var(--brand-primary);
603+
font-weight: 700;
604+
text-decoration: underline;
605+
text-decoration-thickness: 2px;
606+
text-underline-offset: 2px;
608607
}
609608

610-
.pagefind-ui__result-nested + .pagefind-ui__result-nested {
611-
margin-top: 0 !important;
612-
padding-top: 1rem !important;
609+
#search .pagefind-ui .pagefind-ui__result-nested {
610+
display: flex;
611+
flex-direction: column;
612+
gap: 1rem;
613+
margin: 1rem 0 0 0.5rem;
614+
padding: 0 0 0 1.5rem;
615+
border-left: 2px solid var(--border-subtle);
613616
}
614617

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

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;
623+
#search .pagefind-ui .pagefind-ui__result-nested + .pagefind-ui__result-nested {
624+
margin-top: 0;
625+
padding-top: 1rem;
627626
}
628627

629-
.pagefind-ui__result-sub {
630-
position: relative !important;
631-
display: flex !important;
632-
flex-direction: column !important;
633-
gap: 0.25rem !important;
628+
#search .pagefind-ui .pagefind-ui__result-sub {
629+
position: relative;
630+
display: flex;
631+
flex-direction: column;
632+
gap: 0.25rem;
634633
}
635634

636-
.pagefind-ui__result-sub::before {
637-
display: none !important;
635+
#search .pagefind-ui .pagefind-ui__result-sub::before {
636+
display: none;
638637
}
639638

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;
639+
#search .pagefind-ui .pagefind-ui__result-sub .pagefind-ui__result-link {
640+
font-size: 1.25rem;
641+
color: var(--text-primary);
642+
font-weight: 600;
643+
margin-bottom: 0.25rem;
645644
}
646645

647-
.pagefind-ui__result-sub .pagefind-ui__result-link:hover {
648-
color: var(--brand-primary) !important;
646+
#search .pagefind-ui .pagefind-ui__result-sub .pagefind-ui__result-link:hover {
647+
color: var(--brand-primary);
649648
}
650649

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;
650+
#search .pagefind-ui .pagefind-ui__result-sub .pagefind-ui__result-excerpt {
651+
font-size: 0.95rem;
652+
color: var(--text-tertiary);
653+
opacity: 0.9;
655654
}
656655

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;
656+
#search .pagefind-ui .pagefind-ui__message {
657+
padding: 2rem 0 1rem;
658+
font-family: var(--font-mono);
659+
font-size: 0.85rem;
660+
color: var(--text-tertiary);
661+
text-transform: uppercase;
662+
letter-spacing: 0.05em;
664663
}
665664

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;
665+
#search .pagefind-ui .pagefind-ui__button {
666+
border: 1px solid var(--border-subtle);
667+
background: transparent;
668+
color: var(--text-secondary);
669+
padding: 12px;
670+
width: 100%;
671+
cursor: pointer;
672+
margin-top: 2rem;
673+
font-family: var(--font-mono);
674+
text-transform: uppercase;
675+
letter-spacing: 0.1em;
676676
}
677677

678-
.pagefind-ui__button:hover {
679-
border-color: var(--text-primary) !important;
680-
color: var(--text-primary) !important;
678+
#search .pagefind-ui .pagefind-ui__button:hover {
679+
border-color: var(--text-primary);
680+
color: var(--text-primary);
681681
}
682682

683683
.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)