From 6f5fe6de351602c35d06be66461637fa76accda4 Mon Sep 17 00:00:00 2001 From: Vaica <94612053+zqlit@users.noreply.github.com> Date: Sun, 1 Feb 2026 17:42:15 +0800 Subject: [PATCH] =?UTF-8?q?fixed=20=E6=A0=B7=E5=BC=8F=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hugo.toml | 44 ++++++++-------- themes/Ying/assets/css/main.css | 66 +++++++++++++++++++++++- themes/Ying/assets/js/main.js | 41 +++++++++++++++ themes/Ying/layouts/page/circles.html | 8 +-- themes/Ying/layouts/partials/header.html | 2 +- 5 files changed, 133 insertions(+), 28 deletions(-) diff --git a/hugo.toml b/hugo.toml index f045a9bd..0de0f8b7 100644 --- a/hugo.toml +++ b/hugo.toml @@ -124,34 +124,34 @@ hasCJKLanguage = true # 时段问候语 (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 + morning = "早安！元气满满" # 6:00 - 11:00 + noon = "中午好！记得干饭" # 11:00 - 14:00 + afternoon = "下午好！喝杯茶吧" # 14:00 - 18:00 + evening = "晚上好！放松一下" # 18:00 - 22:00 + night = "早点睡对皮肤好" # 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！圣诞快乐 🎄" + "01-01" = "元旦快乐！新年新气象" + "02-14" = "情人节快乐！愿有人陪" + "03-08" = "女神节快乐！做自己" + "04-01" = "愚人节快乐！别被骗哦" + "05-01" = "劳动节快乐！放假啦" + "05-04" = "青年节快乐！永远年轻" + "06-01" = "儿童节快乐！童心未泯" + "10-01" = "国庆节快乐！享受假期" + "12-25" = "圣诞快乐！Merry Xmas" # 2026 农历节日 (需每年更新) - "02-16" = "除夕快乐！记得吃年夜饭哦 🥟" - "02-17" = "过年好！恭喜发财，红包拿来 🧧" # 春节 - "03-03" = "元宵节快乐！吃汤圆，人团圆 🏮" - "04-05" = "清明安康。🌱" - "06-19" = "端午安康！记得吃粽子 (￣～￣) �" - "08-19" = "七夕快乐！今晚月色真美 💑" - "09-25" = "中秋快乐！月圆人更圆 🥮" - "10-19" = "重阳节安康！登高望远 🏔️" + "02-16" = "除夕快乐！记得吃饺子" + "02-17" = "春节快乐！恭喜发财" # 春节 + "03-03" = "元宵快乐！吃汤圆啦" + "04-05" = "清明安康" + "06-19" = "端午安康！记得吃粽子" + "08-19" = "七夕快乐！今晚月色美" + "09-25" = "中秋快乐！记得吃月饼" + "10-19" = "重阳安康！登高望远" # ---------------------------------------------------------------------------- # 留言页面友链申请示例配置 (Message Page Link Exchange Example) diff --git a/themes/Ying/assets/css/main.css b/themes/Ying/assets/css/main.css index 6a764d70..1a05a823 100644 --- a/themes/Ying/assets/css/main.css +++ b/themes/Ying/assets/css/main.css @@ -679,6 +679,62 @@ ul { margin-top: 0; } +@media (max-width: 768px) { + .header-top { + justify-content: flex-start; + } + .header-avatar { + margin-right: 0; + justify-content: flex-start; + } + .header-info { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; /* Changed to flex-start to align with text */ + margin-left: 15px; + height: 80px; + width: calc(100vw - 140px); /* Ensure container takes available space */ + } + + .header-social { + display: flex; + flex-wrap: nowrap; + gap: 10px; + margin-bottom: 5px; + width: 100%; /* Take full width to allow centering */ + justify-content: center; /* Center icons horizontally */ + } + + .header-bio { + display: block; + font-size: 0.85rem; + margin: 0; + opacity: 0.8; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; /* Take full width */ + text-align: center; /* Center the text */ + + /* Typewriter Effect Cursor */ + border-right: 2px solid transparent; /* Hidden by default, toggled by JS if needed, or use ::after */ + } + + /* Cursor Animation Class */ + .header-bio.typing::after { + content: '|'; + animation: cursor-blink 1s step-end infinite; + color: var(--text-content-color); + margin-left: 2px; + } +} + +@keyframes cursor-blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } +} + .header-social { margin: 0; padding: 0; @@ -1123,6 +1179,13 @@ ul { /* Mobile Adaptation */ @media (max-width: 767px) { + .recent-posts .posts .post:first-of-type { + margin-top: -10px; + } + + .header { + margin-bottom: 0px!important; +} .searchable-header-container { flex-wrap: wrap; height: auto; @@ -1243,6 +1306,7 @@ ul { margin-top: 20px; } + .recent-posts .posts .post .time, .post .post-header .time, .list .posts .post .time { @@ -4403,7 +4467,7 @@ html[data-theme="light"] .atk-loading-spinner svg circle { /* Inline Search Styles */ .searchable-header-container { position: relative; - /* margin-top: 15px; */ + margin-top: 0px; height: 13px; display: flex; align-items: center; diff --git a/themes/Ying/assets/js/main.js b/themes/Ying/assets/js/main.js index 0e303409..78ab5252 100644 --- a/themes/Ying/assets/js/main.js +++ b/themes/Ying/assets/js/main.js @@ -28,4 +28,45 @@ document.addEventListener('DOMContentLoaded', function() { if (window.initCodeCopy) window.initCodeCopy(); if (window.initParagraphComments) window.initParagraphComments(); if (window.initInfiniteScroll && window.enableInfiniteScroll) window.initInfiniteScroll(); + + // Initialize Typewriter Effect for Mobile Header + initTypewriter(); }); + +/** + * Typewriter Effect for Mobile Header Bio + */ +function initTypewriter() { + // Only run on mobile or if the element is visible + const bioElement = document.querySelector('.header-bio'); + if (!bioElement) return; + + // Check if we are on mobile (matching CSS media query) + const isMobile = window.matchMedia('(max-width: 768px)').matches; + if (!isMobile) return; + + const originalText = bioElement.innerText.trim(); + if (!originalText) return; + + // Clear text initially + bioElement.innerText = ''; + bioElement.classList.add('typing'); + + let i = 0; + const speed = 100; // Typing speed in ms + + function typeWriter() { + if (i < originalText.length) { + bioElement.innerText += originalText.charAt(i); + i++; + setTimeout(typeWriter, speed); + } else { + // Typing finished, remove cursor after a delay? + // bioElement.classList.remove('typing'); + // Keep blinking cursor for effect + } + } + + // Start typing with a small delay + setTimeout(typeWriter, 500); +} diff --git a/themes/Ying/layouts/page/circles.html b/themes/Ying/layouts/page/circles.html index 504daaf9..412981de 100644 --- a/themes/Ying/layouts/page/circles.html +++ b/themes/Ying/layouts/page/circles.html @@ -413,15 +413,15 @@ const description = post.description ? post.description.replace(/"/g, '"') : ''; // Calculate delay for staggered animation - const delay = index * 100; + const delay = index * 50; html += ` - +
${post.title}
- +
- + ${post.author}
diff --git a/themes/Ying/layouts/partials/header.html b/themes/Ying/layouts/partials/header.html index 9b7171fd..631e0423 100644 --- a/themes/Ying/layouts/partials/header.html +++ b/themes/Ying/layouts/partials/header.html @@ -11,7 +11,7 @@
-
+
{{ with .Site.Params.social }} {{ range . }}