fixed 样式bug

hugo.toml

@@ -112,6 +112,47 @@ hasCJKLanguage = true
     avatar = "/image/avatar/tx7.jpg"
     description = "不以物喜，不以己悲"
 
+  # ----------------------------------------------------------------------------
+  # 首页搜索配置 (Home Search Configuration)
+  # ----------------------------------------------------------------------------
+  [params.home_search]
+    enable = true
+    # 搜索提示小人头像 (Search Mascot Avatar)
+    mascot = "/emotion/bqb/chijing.png"
+    # 搜索提示文案 (Search Hint Text)
+    hint = "点击随笔 开始搜索"
+    
+    # 时段问候语 (Time-based Greetings)
+    [params.home_search.greetings]
+        morning = "早安呀！新的一天也要元气满满哦 (*/ω＼*)"      # 6:00 - 11:00
+        noon = "干饭人干饭魂！中午记得吃饱饱 🍚"          # 11:00 - 14:00
+        afternoon = "下午好！摸鱼累了就喝杯茶歇歇吧 🍵"  # 14:00 - 18:00
+        evening = "晚上好！今天的你辛苦啦，放松一下 🌙" # 18:00 - 22:00
+        night = "还在修仙吗？早点睡对皮肤好哦 (。-ω-)zzz"   # 22:00 - 6:00
+
+    # 节日问候语 (Holiday Greetings) - 格式: "MM-DD" = "文案"
+    # 已包含 2026 年农历节日对应的公历日期
+    [params.home_search.holidays]
+        "01-01" = "元旦快乐！新的一年，新的flag立起来了吗？🎉"
+        "02-14" = "情人节快乐！愿你身边有人相伴 💖"
+        "03-08" = "女神节快乐！做自己的女王 👑"
+        "04-01" = "愚人节快乐！今天的话不要全信哦 🤡"
+        "05-01" = "劳动节快乐！给忙碌的自己放个假吧 🛠️"
+        "05-04" = "青年节快乐！永远年轻，永远热泪盈眶 🔥"
+        "06-01" = "儿童节快乐！谁还不是个宝宝呢 🎈"
+        "10-01" = "国庆节快乐！享受美好的假期吧 🇨🇳"
+        "12-25" = "Merry Christmas！圣诞快乐 🎄"
+        
+        # 2026 农历节日 (需每年更新)
+        "02-16" = "除夕快乐！记得吃年夜饭哦 🥟"
+        "02-17" = "过年好！恭喜发财，红包拿来 🧧" # 春节
+        "03-03" = "元宵节快乐！吃汤圆，人团圆 🏮"
+        "04-05" = "清明安康。🌱"
+        "06-19" = "端午安康！记得吃粽子 (￣～￣) �"
+        "08-19" = "七夕快乐！今晚月色真美 💑"
+        "09-25" = "中秋快乐！月圆人更圆 🥮"
+        "10-19" = "重阳节安康！登高望远 🏔️"
+
   # ----------------------------------------------------------------------------
   # 留言页面友链申请示例配置 (Message Page Link Exchange Example)
   # ----------------------------------------------------------------------------

themes/Ying/assets/css/main.css

@@ -554,6 +554,7 @@ ul {
     flex-direction: column;
     align-items: stretch;
     gap: 16px;
+    text-align: left; /* Reset text align from .main center */
 }
 
 .header-top {
@@ -563,7 +564,7 @@ ul {
     gap: 16px;
 }
 
-.head_author_img {
+.header-avatar {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -630,43 +631,47 @@ ul {
     margin-bottom: 0;
 }
 
-.header nav {
+/* Updated Header Semantics */
+.header-menu {
     border-top: 1px solid #f4f4f4;
     transition: border-color 0.35s ease;
 }
 
-.header nav ul,
+.header-menu ul,
-.header nav li {
+.header-menu li {
     margin: 0;
 }
 
-.header nav ul.flat {
+.header-menu ul.flat {
     padding: 0;
+    /* Flexbox layout for easier spacing control */
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 20px; /* [PC Setting] Adjust this value to change spacing between items */
 }
 
-.header nav ul.flat li {
+.header-menu ul.flat li {
-    display: inline-block;
+    display: block;
     list-style: none;
-    margin-left: 0;
+    margin: 10px 0 0 0;
-    margin-right: 16px;
-    margin-top: 20px;
     text-transform: capitalize;
 }
 
-.header nav ul.flat li.active a {
+.header-menu ul.flat li.active a {
     color: #24292e;
 }
 
-.header nav ul.flat li a {
+.header-menu ul.flat li a {
     color: #586069;
 }
 
-.header nav ul.flat li a:hover {
+.header-menu ul.flat li a:hover {
     color: #646464;
     text-decoration: none;
 }
 
-.header .site-description {
+.header-info {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -674,32 +679,30 @@ ul {
     margin-top: 0;
 }
 
-.header .site-description h2 {
+.header-social {
-    display: none;
-}
-
-.header .site-description nav {
     margin: 0;
     padding: 0;
     border: none;
     min-width: 50px;
     margin-bottom: 0;
     text-align: center;
+    /* Reset gap for social icons as they rely on margin */
+    gap: 0; 
 }
 
-.header .site-description nav ul a {
+.header-social a {
     display: inline-block;
     margin: 0 5px;
     text-decoration: none;
     transition: all 0.2s ease;
 }
 
-.header .site-description nav ul a i {
+.header-social a i {
     font-size: 1.15rem;
     vertical-align: middle;
 }
 
-.header .site-description nav ul a:hover {
+.header-social a:hover {
     color: #24292e;
     transform: scale(1.2);
 }
@@ -717,23 +720,121 @@ ul {
     cursor: pointer;
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: 3px;
     transition: all 0.3s ease;
     margin: 0; /* Reset margin */
+    position: relative; /* Ensure wrapper is positioned relative to this */
 }
 
-.search-hint {
+/* Search Hint Wrapper */
-    font-size: 0.75rem;
+.search-hint-wrapper {
-    font-weight: normal;
+    position: absolute;
-    color: #999;
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%) translateX(10px);
+    display: flex;
+    align-items: center;
+    gap: 8px;
     opacity: 0;
-    transform: translateX(-10px);
+    visibility: hidden;
-    transition: all 0.3s ease;
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    pointer-events: none;
+    z-index: 10;
+    white-space: nowrap;
+    margin-left: 10px;
 }
 
-.section-header.normal-mode:hover .search-hint {
+.search-hint-wrapper.visible {
     opacity: 1;
-    transform: translateX(0);
+    visibility: visible;
+    transform: translateY(-50%) translateX(10px); /* Match the base/hover position */
+}
+
+.section-header.normal-mode:hover .search-hint-wrapper {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Mascot - Emoticon */
+.search-mascot {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+    /* Remove shadow/border as requested */
+    border: none; 
+    box-shadow: none;
+    filter: none;
+    animation: mascot-shake 2.5s infinite ease-in-out;
+    transform-origin: bottom center;
+}
+
+@keyframes mascot-shake {
+    0%, 100% { transform: rotate(0deg); }
+    10% { transform: rotate(5deg); }
+    20% { transform: rotate(-5deg); }
+    30% { transform: rotate(3deg); }
+    40% { transform: rotate(-3deg); }
+    50% { transform: rotate(0deg); }
+}
+
+/* Clean Bubble Style - Mimic .barrage-bubble */
+.search-hint {
+    background: #000000; /* Pure Black Background */
+    color: #ffffff;
+    padding: 7px 12px;
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.4;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    border: none;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: auto;
+    min-height: auto;
+    white-space: nowrap;
+    width: fit-content;
+    max-width: none;
+    margin-top: 1px;
+    z-index: 10;
+}
+
+/* Arrow - Optimized tip */
+.search-hint::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -5px;
+    margin-top: -5px;
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-right: 5px solid #000000; /* Match black background */
+    background: transparent;
+    box-shadow: none;
+    transform: none;
+    filter: drop-shadow(-2px 0 2px rgba(0,0,0,0.1));
+}
+
+[data-theme="dark"] .search-hint {
+    background: #ffffff; /* White background for dark mode contrast */
+    color: #000000;
+    border: none; 
+    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+}
+
+[data-theme="dark"] .search-hint::before {
+    background: transparent;
+    border-right-color: #ffffff;
+    border-left: none;
+    border-bottom: 5px solid transparent;
+    filter: none;
+}
+
+[data-theme="dark"] .search-mascot {
+    filter: none;
 }
 
 .search-mode {
@@ -741,85 +842,150 @@ ul {
     animation: fadeIn 0.3s ease;
 }
 
-/* Simplified Search Styles for Essay/Shuoshuo */
+/* Modern Minimalist Search Styles - Bottom Border Only */
 .search-input-group {
     position: relative;
     display: flex;
     align-items: center;
-    width: 100%;
+    width: 100%; /* Responsive width */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Minimalist bottom border only */
+    max-width: 300px; /* Maximum width for PC */
+    border: none;
+    border-bottom: 1px solid #000000;
     border-radius: 0;
-    padding: 2px 0;
+    padding: 0 4px 6px 0; /* Slightly more bottom padding */
     background: transparent;
     transition: all 0.3s ease;
+    box-shadow: none;
+}
+
+.search-input-group i {
+    border: none; /* Ensure icons have no border */
+    background: transparent;
 }
 
 .search-input-group:hover {
-    border-bottom-color: rgba(0, 0, 0, 0.3);
     background: transparent;
+    border-bottom-color: #666;
 }
 
 .search-input-group:focus-within {
     background: transparent;
-    border-color: transparent;
+    border-bottom-color: #000;
-    border-bottom-color: var(--theme-color, #4a90e2);
     box-shadow: none;
-    transform: none;
 }
 
 [data-theme="dark"] .search-input-group {
-    border-bottom-color: rgba(255, 255, 255, 0.1);
     background: transparent;
+    border-bottom-color: #ffffff;
+    box-shadow: none;
 }
 
 [data-theme="dark"] .search-input-group:hover {
-    border-bottom-color: rgba(255, 255, 255, 0.3);
     background: transparent;
+    border-bottom-color: #ccc;
 }
 
 [data-theme="dark"] .search-input-group:focus-within {
     background: transparent;
-    border-color: transparent;
+    border-bottom-color: #fff;
-    border-bottom-color: var(--theme-color, #4a90e2);
     box-shadow: none;
 }
 
 .search-input-group input {
     width: 100%;
-    border: none;
+    border: none !important;
+    border-radius: 0 !important;
     background: transparent;
-    padding: 5px 30px 5px 0; /* Left align text, space for close icon on right */
+    padding: 0 4px !important;
-    font-size: 0.95rem;
+    padding-left: 8px !important;
-    color: var(--text-title-color);
+    padding-right: 20px !important; /* Prevent text overlap with close icon */
+    font-size: 1rem;
+    color: #000000;
     outline: none;
+    height: 24px;
+    font-weight: 500;
 }
 
-/* Search Icon visible */
+/* Text color on focus */
+.search-input-group:focus-within input {
+    color: #000;
+}
+
+[data-theme="dark"] .search-input-group input {
+    color: #ffffff;
+}
+
+[data-theme="dark"] .search-input-group:focus-within input {
+    color: #ffffff;
+}
+
+/* Search Icon */
 .search-icon {
-    color: #9ca3af;
+    color: #000000;
     font-size: 1.1rem;
-    margin-right: 6px;
     transition: color 0.3s ease;
 }
 
 .search-input-group:focus-within .search-icon {
-    color: var(--text-title-color);
+    color: #000000;
+}
+
+[data-theme="dark"] .search-icon {
+    color: #ffffff;
 }
 
 [data-theme="dark"] .search-input-group:focus-within .search-icon {
-    color: var(--text-title-dark-color);
+    color: #ffffff;
 }
 
-/* Close icon on the right */
+/* Close icon */
 .close-icon {
     position: absolute;
     right: 0;
-    font-size: 1.1rem;
+    font-size: 1rem;
-    color: #9ca3af;
+    color: #999;
     cursor: pointer;
     transition: all 0.2s;
     opacity: 0;
     transform: scale(0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+}
+
+.search-input-group:focus-within .close-icon {
+    color: #cccccc;
+}
+
+.close-icon:hover {
+    background: rgba(0,0,0,0.1);
+    color: #000;
+}
+
+.search-input-group:focus-within .close-icon:hover {
+    background: rgba(255,255,255,0.2);
+    color: #fff;
+}
+
+[data-theme="dark"] .close-icon {
+    color: #aaa;
+}
+
+[data-theme="dark"] .search-input-group:focus-within .close-icon {
+    color: #666;
+}
+
+[data-theme="dark"] .close-icon:hover {
+    background: rgba(255,255,255,0.1);
+    color: #fff;
+}
+
+[data-theme="dark"] .search-input-group:focus-within .close-icon:hover {
+    background: rgba(0,0,0,0.1);
+    color: #000;
 }
 
 .search-input-group.has-value .close-icon {
@@ -827,23 +993,18 @@ ul {
     transform: scale(1);
 }
 
-.close-icon:hover {
-    color: var(--theme-color, #4a90e2);
-}
-
 .search-dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
-    background: rgba(255, 255, 255, 0.98); /* Less transparent for readability */
+    background: #ffffff;
-    /* backdrop-filter: blur(12px); Removed for cleaner look */
+    border-radius: 12px;
-    border-radius: 4px; /* Sharper corners */
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Soft shadow */
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Softer shadow */
+    border: 1px solid #f0f0f0; /* Subtle border */
-    border: 1px solid rgba(0, 0, 0, 0.05);
+    margin-top: 8px; /* Spacing from input */
-    margin-top: 5px;
     overflow: hidden;
-    z-index: 50;
+    z-index: 100;
     opacity: 0;
     transform: translateY(5px);
     visibility: hidden;
@@ -857,28 +1018,40 @@ ul {
 }
 
 [data-theme="dark"] .search-dropdown {
-    background: #1f2933;
+    background: #2a2a2a;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid #444;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
 }
 
 .search-result-item {
-    padding: 8px 10px;
+    padding: 10px 14px;
-    border-bottom: none; /* Clean list */
+    border-bottom: 1px solid #f0f0f0;
     display: flex;
     flex-direction: column;
     transition: background-color 0.2s;
 }
 
+[data-theme="dark"] .search-result-item {
+    border-bottom: 1px solid #333;
+}
+
+.search-result-item:last-child {
+    border-bottom: none;
+}
+
 .search-result-meta {
     display: flex;
     justify-content: flex-start; /* Left align */
     gap: 10px;
     font-size: 0.75rem;
-    color: #999;
+    color: #666;
     margin-top: 2px;
 }
 
+[data-theme="dark"] .search-result-meta {
+    color: #aaa;
+}
+
 .search-result-summary-text {
     max-width: 80%;
     white-space: nowrap;
@@ -888,45 +1061,45 @@ ul {
 
 .no-result {
     text-align: left;
-    color: #999;
+    color: #666;
-    padding: 10px;
+    padding: 12px 16px;
     font-size: 0.9rem;
     cursor: default;
 }
 
-[data-theme="dark"] .search-result-item {
+[data-theme="dark"] .no-result {
-    border-bottom: none;
+    color: #aaa;
 }
 
 .search-result-item:hover {
-    background: rgba(0,0,0,0.03);
+    background: #f5f5f5;
 }
 
 [data-theme="dark"] .search-result-item:hover {
-    background: rgba(255,255,255,0.05);
+    background: #1a1a1a;
 }
 
 .search-result-title {
     display: block;
-    font-weight: normal; /* Lighter weight */
+    font-weight: 600;
-    font-size: 0.9rem;
+    font-size: 0.95rem;
-    color: var(--text-title-color);
+    color: #000000;
     margin-bottom: 0;
 }
 
 [data-theme="dark"] .search-result-title {
-    color: var(--text-title-dark-color);
+    color: #ffffff;
 }
 
 .search-result-date {
     font-size: 0.75rem;
-    color: #999;
+    color: #666;
     margin-right: 10px;
 }
 
 .search-result-summary {
     font-size: 0.85rem;
-    color: #666;
+    color: #444;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -935,7 +1108,7 @@ ul {
 }
 
 [data-theme="dark"] .search-result-summary {
-    color: #9ca3af;
+    color: #ccc;
 }
 
 @keyframes fadeIn {
@@ -950,11 +1123,74 @@ ul {
 
 /* Mobile Adaptation */
 @media (max-width: 767px) {
+    .searchable-header-container {
+        flex-wrap: wrap; 
+        height: auto;
+        min-height: 40px;
+    }
+
+    .section-header.normal-mode {
+        font-size: 1rem; 
+    }
+
+    /* Adjust Hint Wrapper Position for Mobile */
+    .search-hint-wrapper {
+        position: relative; 
+        left: auto;
+        top: auto;
+        transform: none !important; 
+        margin-left: 8px;
+        opacity: 1; 
+    }
+
+    .search-hint-wrapper.visible {
+        transform: none !important;
+    }
+
+    .search-mascot {
+        width: 28px; 
+        height: 28px;
+    }
+
     .search-hint {
         opacity: 1;
-        transform: translateX(0);
+        font-size: 12px;
-        display: inline-block;
+        padding: 5px 10px;
-        margin-left: 8px;
+        margin-top: 0;
+        white-space: normal; 
+        max-width: 200px; 
+    }
+    
+    /* Ensure Input Group fits and is comfortable */
+    .search-input-group {
+        padding: 0 0 6px 0;
+        margin-top: 5px;
+        background: transparent;
+        width: 100%;
+        max-width: 280px; /* Slightly wider on mobile for better usability */
+    }
+    
+    [data-theme="dark"] .search-input-group {
+        background: transparent;
+    }
+    
+    .search-input-group input {
+        font-size: 16px; /* 16px prevents iOS zoom entirely */
+        padding-right: 20px;
+        height: 24px;
+        padding-left: 5px;
+    }
+    
+    .close-icon {
+        right: 0;
+        width: 20px;
+        height: 20px;
+    }
+
+    .search-dropdown {
+        width: 100%;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+        border: none;
     }
 }
 .pjax-leave {
@@ -1258,6 +1494,35 @@ ul {
     .highlight pre::-webkit-scrollbar {
         display: none;
     }
+
+    /* Mobile Navigation Optimization - Single Line Scrollable */
+    .header-menu {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+        scrollbar-width: none; /* Firefox */
+        margin-left: -30px; /* Extend to edges */
+        margin-right: -30px;
+        padding-left: 30px; /* Start content aligned */
+        border-top: 1px solid #f4f4f4;
+    }
+    
+    .header-menu::-webkit-scrollbar {
+        display: none; /* Hide scrollbar for Chrome/Safari */
+    }
+
+    .header-menu ul.flat {
+        display: flex;
+        flex-wrap: nowrap; /* Prevent wrapping */
+        white-space: nowrap;
+        gap: 20px; /* Comfortable touch spacing */
+        align-items: center;
+        padding-right: 30px; /* Ensure scrolling reaches the end with padding */
+    }
+
+    .header-menu ul.flat li {
+        flex: 0 0 auto; /* Do not shrink */
+        margin-top: 10px; /* Maintain vertical spacing from border */
+    }
 }
 
 /* 代码复制按钮 */
@@ -4138,7 +4403,7 @@ html[data-theme="light"] .atk-loading-spinner svg circle {
 /* Inline Search Styles */
 .searchable-header-container {
     position: relative;
-    margin-top: 15px;
+    /* margin-top: 15px; */
     height: 13px; 
     display: flex;
     align-items: center;
@@ -4156,177 +4421,7 @@ html[data-theme="light"] .atk-loading-spinner svg circle {
     opacity: 0.7;
 }
 
-.search-hint {
-    font-size: 12px;
-    font-weight: normal;
-    color: #999;
-    margin-left: 10px;
-    opacity: 0; /* Hidden by default */
-    transform: translateX(-5px);
-    transition: all 0.3s ease;
-    display: inline-block;
-    vertical-align: middle;
-}
 
-.section-header.normal-mode:hover .search-hint {
-    opacity: 1;
-    transform: translateX(0);
-}
-
-/* Mobile: always show hint to ensure discoverability */
-@media (max-width: 768px) {
-    .search-hint {
-        opacity: 0.6;
-        transform: translateX(0);
-    }
-}
-
-.search-mode {
-    width: 100%;
-    animation: fadeIn 0.3s ease;
-}
-
-.search-input-group {
-    display: flex;
-    align-items: center;
-    background: transparent;
-    border-bottom: 1px solid #e5e7eb;
-    padding: 0 5px;
-    width: 100%;
-    max-width: 300px;
-    transition: all 0.3s ease;
-}
-
-.search-input-group:focus-within {
-    background: transparent;
-    border-bottom-color: var(--text-highlight-color);
-    box-shadow: none;
-}
-
-.search-input-group input {
-    border: none;
-    background: transparent;
-    flex: 1;
-    padding: 5px 5px; /* Reduced side padding */
-    font-size: 14px;
-    outline: none;
-    color: #333;
-}
-
-.search-input-group .search-icon {
-    color: #999;
-    font-size: 18px; /* Slightly larger */
-    margin-right: 4px;
-}
-
-.search-input-group .close-icon {
-    color: #999;
-    cursor: pointer;
-    font-size: 16px;
-    padding: 5px;
-}
-
-.search-input-group .close-icon:hover {
-    color: #333;
-}
-
-.search-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    max-width: 300px;
-    background: #fff;
-    border-radius: 4px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    z-index: 100;
-    max-height: 300px;
-    overflow-y: auto;
-    display: none;
-    margin-top: 5px;
-    border: 1px solid #eee;
-}
-
-.search-dropdown .search-result-item {
-    padding: 10px 15px;
-    font-size: 14px;
-    display: block; /* Ensure it behaves like a block */
-    text-decoration: none; /* Remove underline */
-    color: inherit; /* Inherit text color */
-    cursor: pointer;
-    border-left: none; /* Removed accent border */
-    transition: background-color 0.2s;
-}
-
-.search-dropdown .search-result-item:hover {
-    background-color: #f5f5f5;
-    text-decoration: none;
-}
-
-.search-dropdown .search-result-title {
-    font-size: 15px;
-    font-weight: 600;
-    display: block; /* Ensure title is block to break line */
-    color: #333;
-}
-
-.search-dropdown .search-result-summary {
-    font-size: 12px;
-    -webkit-line-clamp: 1;
-}
-
-/* Dark Mode for Inline Search */
-[data-theme="dark"] .search-input-group {
-    background: transparent;
-    border-bottom-color: #444;
-    box-shadow: none;
-}
-
-[data-theme="dark"] .search-input-group:focus-within {
-    background: transparent;
-    border-bottom-color: var(--text-highlight-color);
-    box-shadow: none;
-}
-
-[data-theme="dark"] .search-input-group input {
-    color: #e0e0e0;
-}
-
-[data-theme="dark"] .search-input-group .search-icon {
-    color: #888;
-}
-
-[data-theme="dark"] .search-input-group .close-icon {
-    color: #888;
-}
-
-[data-theme="dark"] .search-input-group .close-icon:hover {
-    color: #fff;
-    background-color: transparent;
-}
-
-[data-theme="dark"] .search-dropdown {
-    background: #2d2d2d;
-    border-color: #444;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-}
-
-[data-theme="dark"] .search-dropdown .search-result-item {
-    color: #e0e0e0;
-}
-
-[data-theme="dark"] .search-dropdown .search-result-item:hover {
-    background-color: #383838;
-}
-
-[data-theme="dark"] .search-dropdown .search-result-title {
-    color: #e0e0e0;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateX(-10px); }
-    to { opacity: 1; transform: translateX(0); }
-}
 
 /* Album / Light and Shadow Page Styles - Waterfall Flow Refined */
 .album-content {

themes/Ying/assets/js/modules/barrage.js

@@ -94,10 +94,13 @@
                             
                             if (!id || !contentEl) return null;
 
+                            // 优先获取 data-src (Artalk 懒加载)，否则获取 src
+                            const avatarSrc = avatarEl ? (avatarEl.getAttribute('data-src') || avatarEl.src) : '';
+                            
                             return {
                                 id: id,
                                 content: contentEl.innerText || contentEl.textContent,
-                                avatar: avatarEl ? avatarEl.src : '',
+                                avatar: avatarSrc,
                                 ua: null 
                             };
                         }).filter(Boolean);

themes/Ying/assets/js/modules/search.js

@@ -3,17 +3,37 @@ window.initSearch = function() {
     initInlineSearch();
 };
 
+var searchLoadingPromise = null;
+
 function loadSearchIndex() {
-    if (!window.searchIndex) {
+    if (window.searchIndex) {
-        return fetch('/index.json')
+        return Promise.resolve(window.searchIndex);
-            .then(response => response.json())
-            .then(data => {
-                window.searchIndex = data;
-                return data;
-            })
-            .catch(err => console.error('Failed to load search index:', err));
     }
-    return Promise.resolve(window.searchIndex);
+    
+    if (searchLoadingPromise) {
+        return searchLoadingPromise;
+    }
+
+    window.isSearchingLoading = true;
+    searchLoadingPromise = fetch('/index.json')
+        .then(response => {
+            if (!response.ok) throw new Error(response.statusText);
+            return response.json();
+        })
+        .then(data => {
+            window.searchIndex = data;
+            window.isSearchingLoading = false;
+            searchLoadingPromise = null;
+            return data;
+        })
+        .catch(err => {
+            console.error('Failed to load search index:', err);
+            window.isSearchingLoading = false;
+            searchLoadingPromise = null;
+            return null; // Return null on error to handle gracefully
+        });
+        
+    return searchLoadingPromise;
 }
 
 function initSearchModal() {
@@ -73,11 +93,24 @@ function initSearchModal() {
 
             searchInput.addEventListener('input', function() {
                 var query = this.value.trim().toLowerCase();
-                if (!window.searchIndex || query.length === 0) {
+                
+                if (query.length === 0) {
                     searchResults.innerHTML = '<p class="search-tip">输入关键词并回车进行搜索</p>';
                     return;
                 }
 
+                if (!window.searchIndex) {
+                    searchResults.innerHTML = '<p class="search-tip">索引加载中...</p>';
+                    loadSearchIndex().then(function(data) {
+                         if (data && searchInput.value.trim().length > 0) {
+                             searchInput.dispatchEvent(new Event('input'));
+                         } else if (!data) {
+                             searchResults.innerHTML = '<p class="search-tip">索引加载失败</p>';
+                         }
+                    });
+                    return;
+                }
+
                 var results = window.searchIndex.filter(function(item) {
                     return (item.title && item.title.toLowerCase().includes(query)) || 
                            (item.summary && item.summary.toLowerCase().includes(query));
@@ -114,16 +147,25 @@ function initInlineSearch() {
     var resultsContainer = document.getElementById('inline-search-results');
     
     window.toggleSearchMode = function(show) {
-        if (!header || !searchContainer || !input || !resultsContainer) return;
+        if (!header || !searchContainer || !input || !resultsContainer) {
+            console.warn('Search elements missing, cannot toggle mode.');
+            return;
+        }
+        
+        var searchHint = document.querySelector('.search-hint-wrapper');
 
         if (show) {
+            if (searchHint) searchHint.style.display = 'none'; // Hide hint completely to avoid layout shifts
             header.style.display = 'none';
             searchContainer.style.display = 'block';
             input.focus();
-            loadSearchIndex();
+            loadSearchIndex().then(() => {
+                console.log('Search index loaded via toggle');
+            }).catch(e => console.error('Search index load failed', e));
             // Add Esc key listener
             document.addEventListener('keydown', escListener);
         } else {
+            if (searchHint) searchHint.style.display = ''; // Restore hint
             header.style.display = 'inline-flex'; 
             searchContainer.style.display = 'none';
             input.value = '';
@@ -199,7 +241,20 @@ function initInlineSearch() {
             return;
         }
 
-        if (!window.searchIndex) return;
+        if (!window.searchIndex) {
+            resultsContainer.innerHTML = '<div class="search-result-item no-result">索引加载中...</div>';
+            resultsContainer.classList.add('show');
+            
+            loadSearchIndex().then(function(data) {
+                // If data loaded successfully and user hasn't cleared input
+                if (data && input.value.trim().length > 0) {
+                     input.dispatchEvent(new Event('input'));
+                } else if (!data) {
+                    resultsContainer.innerHTML = '<div class="search-result-item no-result">索引加载失败</div>';
+                }
+            });
+            return;
+        }
 
         var results = window.searchIndex.filter(function(item) {
             return (item.title && item.title.toLowerCase().includes(query)) || 
@@ -207,26 +262,26 @@ function initInlineSearch() {
         });
 
         if (results.length > 0) {
-            var html = results.slice(0, 5).map(function(item) {
+                    var html = results.slice(0, 5).map(function(item) {
-                return `
+                        return `
-                    <a href="${item.permalink}" class="search-result-item" onclick="window.toggleSearchMode(false)">
+                            <a href="${item.permalink}" class="search-result-item">
-                        <span class="search-result-title">${item.title}</span>
+                                <span class="search-result-title">${item.title}</span>
-                        <div class="search-result-meta">
+                                <div class="search-result-meta">
-                             <span class="search-result-date">${item.date}</span>
+                                     <span class="search-result-date">${item.date}</span>
-                             <span class="search-result-summary-text">${item.summary || ''}</span>
+                                     <span class="search-result-summary-text">${item.summary || ''}</span>
-                        </div>
+                                </div>
-                    </a>
+                            </a>
-                `;
+                        `;
-            }).join('');
+                    }).join('');
                     
-            resultsContainer.innerHTML = html;
+                    resultsContainer.innerHTML = html;
-            resultsContainer.classList.add('show');
+                    resultsContainer.classList.add('show');
                     
-            // PJAX Refresh
+                    // PJAX Refresh
-             if (window.pjax) {
+                     if (window.pjax) {
-                 window.pjax.refresh(resultsContainer);
+                         window.pjax.refresh(resultsContainer);
-             }
+                     }
-        } else {
+                } else {
             resultsContainer.innerHTML = '<div class="search-result-item no-result">暂无相关内容</div>';
             resultsContainer.classList.add('show');
         }
@@ -247,4 +302,80 @@ function initInlineSearch() {
         };
         document.addEventListener('click', window.inlineSearchClickOutside);
     }
+    
+    // Manual PJAX delegation for results
+    resultsContainer.addEventListener('click', function(e) {
+        var link = e.target.closest('a');
+        if (link && window.pjax) {
+            e.preventDefault();
+            // Close search first
+            window.toggleSearchMode(false);
+            // Then navigate
+            window.pjax.loadUrl(link.href, { triggerElement: link });
+        }
+    });
+
+    // Search Hint Typewriter Logic
+    var header = document.getElementById('essay-header');
+    var searchHintWrapper = header ? header.querySelector('.search-hint-wrapper') : null;
+    var searchHintText = searchHintWrapper ? searchHintWrapper.querySelector('.search-hint') : null;
+    
+    if (searchHintWrapper && searchHintText) {
+        // --- Smart Greeting Logic ---
+        var text = window.searchHintText || "点击随笔 开始搜索";
+        var now = new Date();
+        var month = now.getMonth() + 1;
+        var day = now.getDate();
+        var dateStr = (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
+        var hour = now.getHours();
+
+        // 1. Check Holidays
+        if (window.searchHolidays && window.searchHolidays[dateStr]) {
+            text = window.searchHolidays[dateStr];
+        } 
+        // 2. Check Time of Day (if greetings configured)
+        else if (window.searchGreetings) {
+            if (hour >= 6 && hour < 11 && window.searchGreetings.morning) {
+                text = window.searchGreetings.morning;
+            } else if (hour >= 11 && hour < 14 && window.searchGreetings.noon) {
+                text = window.searchGreetings.noon;
+            } else if (hour >= 14 && hour < 18 && window.searchGreetings.afternoon) {
+                text = window.searchGreetings.afternoon;
+            } else if (hour >= 18 && hour < 22 && window.searchGreetings.evening) {
+                text = window.searchGreetings.evening;
+            } else if ((hour >= 22 || hour < 6) && window.searchGreetings.night) {
+                text = window.searchGreetings.night;
+            }
+        }
+        
+        // Reset text content initially but keep it ready
+        // Pre-fill first character to avoid empty bubble on mobile (where CSS forces visibility)
+        if (text.length > 0) {
+            searchHintText.textContent = text.charAt(0);
+        } else {
+            searchHintText.textContent = '';
+        }
+        
+        // Show wrapper initially
+        setTimeout(function() {
+            // Add visible class (triggers fade in on desktop)
+            searchHintWrapper.classList.add('visible');
+            
+            // Typewriter effect
+            var i = 1;
+            var typeInterval = setInterval(function() {
+                if (i >= text.length) {
+                    clearInterval(typeInterval);
+                    
+                    // Hide after 8 seconds (give more time to read greetings)
+                    setTimeout(function() {
+                        searchHintWrapper.classList.remove('visible');
+                    }, 8000);
+                    return;
+                }
+                searchHintText.textContent = text.substring(0, i + 1);
+                i++;
+            }, 100);
+        }, 500);
+    }
 }

themes/Ying/layouts/index.html

@@ -6,7 +6,21 @@
             <div class="searchable-header-container">
                 <h2 class="section-header normal-mode" id="essay-header" onclick="toggleSearchMode(true)" uk-scrollspy="cls: uk-animation-slide-left-small; delay: 200">
                     随笔<i class="ri-quill-pen-line"></i>
-                    <span class="search-hint">点击随笔，开始搜索</span>
+                    <div class="search-hint-wrapper">
+                        {{ if .Site.Params.home_search.mascot }}
+                        <img src="{{ .Site.Params.home_search.mascot | relURL }}" class="search-mascot">
+                        {{ else }}
+                        <img src="{{ "emotion/aru/cheer.png" | relURL }}" class="search-mascot">
+                        {{ end }}
+                        <span class="search-hint"></span>
+                    </div>
+                    {{ if .Site.Params.home_search.hint }}
+                    <script>
+                        window.searchHintText = "{{ .Site.Params.home_search.hint }}";
+                        window.searchGreetings = {{ .Site.Params.home_search.greetings | jsonify | safeJS }};
+                        window.searchHolidays = {{ .Site.Params.home_search.holidays | jsonify | safeJS }};
+                    </script>
+                    {{ end }}
                 </h2>
                 <div class="search-mode" id="search-container" style="display: none;">
                     <div class="search-input-group">

themes/Ying/layouts/partials/header.html

@@ -4,27 +4,24 @@
     <div class="container">
         <div class="header">
             <div class="header-top">
-                <div class="head_author_img load-memos-editor" id="theme-toggle-avatar">
+                <div class="header-avatar load-memos-editor" id="theme-toggle-avatar">
                     <img src="{{ .Site.Params.author.avatar }}" class="blog-img" width="80" height="80" alt="{{ .Site.Title }}" />
                     <div class="avatar-theme-tip">
                         点击头像切换昼夜
                     </div>
                 </div>
-                <div class="site-description">
+                <div class="header-info">
-                    <h2><span class="uk-invisible">{{ .Site.Params.author.description }}</span></h2>
+                    <div class="header-social uk-visible@m">
-                    <nav class="nav social uk-visible@m">
+                        {{ with .Site.Params.social }}
-                        <ul class="flat">
+                            {{ range . }}
-                            {{ with .Site.Params.social }}
+                                <a href="{{ .url }}" title="{{ .title }}" target="_blank"><i class="{{ .icon }}"></i></a>
-                                {{ range . }}
-                                    <a href="{{ .url }}" title="{{ .title }}" target="_blank"><i class="{{ .icon }}"></i></a>
-                                {{ end }}
                             {{ end }}
-                        </ul>
+                        {{ end }}
-                        <div class="yiyandes">{{ .Site.Params.author.description }}</div>
+                    </div>
-                    </nav>
+                    <div class="header-bio">{{ .Site.Params.author.description }}</div>
                 </div>
             </div>
-            <nav class="nav">
+            <nav class="header-menu">
                 <ul class="flat">
                     {{ range site.Menus.main }}
                     <li class="active {{ if eq .Name "光影" }}mobile-hidden{{ end }}"><a href="{{ .URL }}">{{ .Name }}</a></li>