nxxy335/halo-theme-WarmIsland
1
1 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

优化移动端阅读体验、优化瞬间样式、修复导航target属性渲染错误

Browse Source
This commit is contained in:
nxxy335top committed 2026-05-22 14:56:55 +08:00
1 parent f48db60690
commit 9d0bfcfb4f
24 files changed
+246 -276
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/MobileMenu.astro
+1 -1
View File
@@ -16,7 +16,7 @@
<a
th:each="menuItem : ${menu.menuItems}"
th:href="@{${menuItem.status.href}}"
th:target="${menuItem.spec.target}"
th:target="${menuItem.spec?.target?.value == '_blank'} ? '_blank' : '_self'"
th:text="${menuItem.status.displayName}"
class="wi-mobile-menu__link"
th:data-href="${menuItem.status.href}"
src/components/Navbar.astro
+2 -1
View File
@@ -12,6 +12,7 @@ import ThemeSwitcher from "./ThemeSwitcher.astro";
class="wi-navbar__logo"
loading="eager"
decoding="async"
onerror="this.style.display='none';this.nextElementSibling&&this.nextElementSibling.classList.add('wi-navbar__title')"
/>
<span
th:if="${#strings.isEmpty(theme.config?.basic?.logo)}"
@@ -30,7 +31,7 @@ import ThemeSwitcher from "./ThemeSwitcher.astro";
<a
th:each="menuItem : ${menu.menuItems}"
th:href="@{${menuItem.status.href}}"
th:target="${menuItem.spec.target}"
th:target="${menuItem.spec?.target?.value == '_blank'} ? '_blank' : '_self'"
th:text="${menuItem.status.displayName}"
class="wi-navbar__link"
th:data-href="${menuItem.status.href}"
src/components/PostCard.astro
+36
View File
@@ -244,5 +244,41 @@ const { variant = "default" } = Astro.props;
width: 100%;
aspect-ratio: 16 / 9;
}
.post-card__content {
padding: var(--space-md);
}
.post-card__title {
font-size: clamp(1.15rem, 3vw, 1.5rem);
}
.post-card__excerpt {
font-size: var(--text-sm);
-webkit-line-clamp: 3;
}
.post-card--featured .post-card__content {
padding: var(--space-lg);
}
.post-card--featured .post-card__title {
font-size: clamp(1.3rem, 4vw, 1.7rem);
}
}
@media (max-width: 480px) {
.post-card__content {
padding: var(--space-md) var(--space-sm);
}
.post-card__title {
font-size: clamp(1.05rem, 4vw, 1.25rem);
}
.post-card__excerpt {
font-size: var(--text-sm);
-webkit-line-clamp: 2;
}
}
</style>
src/layouts/Layout.astro
+7
View File
@@ -76,6 +76,13 @@ const { pageTitle, contentClass, wide, home } = Astro.props;
<slot name="head" />
</head>
<body class="wi-body">
<script is:inline>
window.addEventListener("unhandledrejection", function (e) {
if (e.reason && e.reason.message && e.reason.message.indexOf("Could not establish connection") !== -1) {
e.preventDefault();
}
});
</script>
<script is:inline>
(function(){
try{
src/pages/moments.astro
+22 -206
View File
@@ -19,70 +19,7 @@ import LightGallery from "../components/LightGallery.astro";
<div class="wi-moments-page__content">
<th:block th:if="${momentFinder != null}">
<th:block th:with="pageSize = ${theme.config?.moments?.moments_page_size ?: 10}, momentsResult = ${momentFinder.list(1, pageSize)}">
<div
class="wi-moments-page__timeline"
th:if="${theme.config?.moments?.moments_style == 'timeline' or theme.config?.moments?.moments_style == null}"
>
<th:block th:if="${momentsResult != null and not #lists.isEmpty(momentsResult.items)}">
<div class="wi-moments-page__item" th:each="moment : ${momentsResult.items}">
<div class="wi-moments-page__dot"></div>
<div class="wi-moments-page__line"></div>
<div class="wi-moments-page__card">
<div class="wi-moments-page__text" th:utext="${moment.spec?.content?.html ?: moment.spec?.content?.raw ?: moment.spec?.content}"></div>
<div class="wi-moments-page__media" th:if="${moment.spec.content.medium != null and !#lists.isEmpty(moment.spec.content.medium)}">
<th:block th:each="media : ${moment.spec.content.medium}">
<img
th:if="${media.type.name == 'PHOTO'}"
th:src="${media.url}"
th:alt="''"
class="wi-moments-page__image"
loading="lazy"
decoding="async"
/>
</th:block>
</div>
<div class="wi-moments-page__footer">
<time
class="wi-moments-page__date"
th:text="${#dates.format(moment.spec?.releaseTime ?: moment.metadata?.creationTimestamp, 'yyyy-MM-dd HH:mm')}"
></time>
<div class="wi-moments-page__actions">
<button
class="wi-moments-page__like-btn"
type="button"
th:attr="data-moment-name=${moment.metadata.name}"
>
<svg class="wi-moments-page__like-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
<span class="wi-moments-page__like-count" th:text="${moment.stats?.upvote ?: 0}">0</span>
</button>
<button
class="wi-moments-page__comment-btn"
type="button"
th:attr="data-moment-name=${moment.metadata.name}"
>
<svg class="wi-moments-page__comment-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
<span class="wi-moments-page__comment-count" th:text="${moment.stats?.approvedComment ?: 0}">0</span>
</button>
</div>
</div>
<div class="wi-moments-page__comment-area" th:attr="data-moment-name=${moment.metadata.name}" style="display:none;">
<halo:comment
group="moment.halo.run"
kind="Moment"
th:attr="name=${moment.metadata.name}"
/>
</div>
</div>
</div>
</th:block>
<th:block th:if="${momentsResult == null or #lists.isEmpty(momentsResult.items)}">
<div class="wi-moments-page__empty">
<p th:text="#{moments.noMoments}">No moments yet</p>
</div>
</th:block>
</div>
<div class="wi-moments-page__cards" th:if="${theme.config?.moments?.moments_style == 'cards'}">
<div class="wi-moments-page__cards" th:if="${theme.config?.moments?.moments_style == 'cards' or theme.config?.moments?.moments_style == null or theme.config?.moments?.moments_style == 'timeline'}">
<th:block th:if="${momentsResult != null and not #lists.isEmpty(momentsResult.items)}">
<div class="wi-moments-page__card-item" th:each="moment : ${momentsResult.items}">
<div class="wi-moments-page__card-text" th:utext="${moment.spec?.content?.html ?: moment.spec?.content?.raw ?: moment.spec?.content}"></div>
@@ -362,13 +299,12 @@ import LightGallery from "../components/LightGallery.astro";
? sentinel.closest(".wi-moments-page__content").querySelector(
sentinel.previousElementSibling
? sentinel.previousElementSibling.className.split(" ")[0]
: ".wi-moments-page__timeline"
: ".wi-moments-page__cards"
)
: null;
var container = null;
var selectors = [
".wi-moments-page__timeline",
".wi-moments-page__cards",
".wi-moments-page__masonry"
];
@@ -475,117 +411,6 @@ import LightGallery from "../components/LightGallery.astro";
contain-intrinsic-size: auto 800px;
}
.wi-moments-page__timeline {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-xl);
padding-left: var(--space-2xl);
}
.wi-moments-page__item {
position: relative;
}
.wi-moments-page__dot {
position: absolute;
left: calc(-1 * var(--space-2xl) - 5px);
top: 10px;
width: 10px;
height: 10px;
border-radius: 9999px;
background: var(--accent);
box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent);
z-index: 2;
}
.wi-moments-page__line {
position: absolute;
left: calc(-1 * var(--space-2xl));
top: 20px;
bottom: calc(-1 * var(--space-xl));
width: 1px;
background: var(--rule);
z-index: 1;
}
.wi-moments-page__item:last-child .wi-moments-page__line {
display: none;
}
.wi-moments-page__card {
background: var(--bg-raised);
border: 1px solid var(--rule);
border-radius: 16px;
padding: var(--space-xl);
transition:
box-shadow var(--duration-normal) var(--ease-out-expo),
transform var(--duration-normal) var(--ease-out-expo);
}
.wi-moments-page__card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.wi-moments-page__text {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--ink);
margin-bottom: var(--space-md);
}
.wi-moments-page__media {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-bottom: var(--space-md);
}
.wi-moments-page__image {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s ease;
}
.wi-moments-page__image:hover {
transform: scale(1.03);
}
.wi-moments-page__media:has(.wi-moments-page__image:only-child) {
grid-template-columns: 1fr;
}
.wi-moments-page__media:has(.wi-moments-page__image:only-child) .wi-moments-page__image {
aspect-ratio: auto;
max-height: 300px;
max-width: 400px;
}
.wi-moments-page__media:has(.wi-moments-page__image:nth-child(2):last-child) {
grid-template-columns: repeat(2, 1fr);
}
.wi-moments-page__media:has(.wi-moments-page__image:nth-child(4)) {
grid-template-columns: repeat(3, 1fr);
}
.wi-moments-page__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.wi-moments-page__date {
font-size: var(--text-xs);
color: var(--ink-3);
letter-spacing: var(--tracking-wide);
}
.wi-moments-page__actions {
display: flex;
align-items: center;
@@ -656,9 +481,11 @@ import LightGallery from "../components/LightGallery.astro";
}
.wi-moments-page__cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
display: flex;
flex-direction: column;
gap: var(--space-lg);
max-width: 720px;
margin: 0 auto;
}
.wi-moments-page__card-item {
@@ -851,41 +678,20 @@ import LightGallery from "../components/LightGallery.astro";
}
@media (max-width: 768px) {
.wi-moments-page__timeline {
padding-left: var(--space-xl);
}
.wi-moments-page__dot {
left: calc(-1 * var(--space-xl) - 5px);
}
.wi-moments-page__line {
left: calc(-1 * var(--space-xl));
}
.wi-moments-page__masonry {
columns: 1;
}
.wi-moments-page__cards {
grid-template-columns: 1fr;
.wi-moments-page__card-item {
padding: var(--space-md);
}
.wi-moments-page__card-text {
font-size: var(--text-base);
}
}
@media (max-width: 480px) {
.wi-moments-page__timeline {
padding-left: var(--space-lg);
}
.wi-moments-page__dot {
left: calc(-1 * var(--space-lg) - 5px);
}
.wi-moments-page__line {
left: calc(-1 * var(--space-lg));
}
.wi-moments-page__media,
.wi-moments-page__card-media,
.wi-moments-page__masonry-media {
grid-template-columns: repeat(3, 1fr);
@@ -896,5 +702,15 @@ import LightGallery from "../components/LightGallery.astro";
.wi-moments-page__comment-btn {
padding: 8px 14px;
}
.wi-moments-page__card-item,
.wi-moments-page__masonry-item {
padding: var(--space-md) var(--space-sm);
}
.wi-moments-page__card-text,
.wi-moments-page__masonry-text {
font-size: var(--text-base);
}
}
</style>
src/pages/post.astro
+53 -12
View File
@@ -587,6 +587,17 @@ import LightGallery from "../components/LightGallery.astro";
navigator.clipboard.writeText(url).then(function () {
copyBtn.classList.add("wi-post__share-btn--copied");
setTimeout(function () { copyBtn.classList.remove("wi-post__share-btn--copied"); }, 2000);
}).catch(function () {
var ta = document.createElement("textarea");
ta.value = url;
ta.style.position = "fixed";
ta.style.left = "-9999px";
document.body.appendChild(ta);
ta.select();
try { document.execCommand("copy"); } catch (e) {}
document.body.removeChild(ta);
copyBtn.classList.add("wi-post__share-btn--copied");
setTimeout(function () { copyBtn.classList.remove("wi-post__share-btn--copied"); }, 2000);
});
} else {
var ta = document.createElement("textarea");
@@ -852,8 +863,8 @@ import LightGallery from "../components/LightGallery.astro";
.wi-post__body {
width: 100%;
font-size: 1rem;
line-height: 1.75;
font-size: 1.05rem;
line-height: 1.8;
color: #3d3530;
overflow-wrap: break-word;
word-wrap: break-word;
@@ -1491,6 +1502,21 @@ import LightGallery from "../components/LightGallery.astro";
color: var(--ink-3);
}
@media (max-width: 480px) {
.wi-post__related-grid {
grid-template-columns: 1fr;
}
.wi-post__body {
font-size: 1.05rem;
line-height: 1.85;
}
.wi-post__title {
font-size: clamp(1.6rem, 5vw, 2.8rem);
}
}
@media (max-width: 768px) {
.wi-post__related-grid {
grid-template-columns: 1fr;
@@ -1526,20 +1552,35 @@ import LightGallery from "../components/LightGallery.astro";
.wi-post__nav-link--next {
text-align: right;
}
}
@media (max-width: 480px) {
.wi-post__related-grid {
grid-template-columns: 1fr;
}
.wi-post__body {
font-size: 0.9375rem;
line-height: 1.8;
font-size: 1.025rem;
line-height: 1.82;
}
.wi-post__title {
font-size: clamp(1.5rem, 4vw, 2.8rem);
.wi-post__body p {
margin-block-end: 1.4em;
}
.wi-post__body h2 {
font-size: 1.6rem;
}
.wi-post__body h3 {
font-size: 1.35rem;
}
.wi-post__body h4 {
font-size: 1.2rem;
}
.wi-post__body pre {
font-size: 0.9em;
padding: 1em;
}
.wi-post__body code {
font-size: 0.9em;
}
}
</style>
src/styles/_typography.scss
+10 -10
View File
@@ -3,16 +3,16 @@
--font-body: 'LXGW WenKai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--text-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.75rem);
--text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem);
--text-base: clamp(0.938rem, 0.89rem + 0.24vw, 1rem);
--text-md: clamp(1.05rem, 0.99rem + 0.3vw, 1.125rem);
--text-lg: clamp(1.15rem, 1.06rem + 0.45vw, 1.25rem);
--text-xl: clamp(1.3rem, 1.16rem + 0.7vw, 1.5rem);
--text-2xl: clamp(1.55rem, 1.34rem + 1.05vw, 1.875rem);
--text-3xl: clamp(1.85rem, 1.52rem + 1.65vw, 2.25rem);
--text-4xl: clamp(2.15rem, 1.7rem + 2.25vw, 3rem);
--text-5xl: clamp(2.6rem, 1.9rem + 3.5vw, 3.75rem);
--text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8rem);
--text-sm: clamp(0.875rem, 0.82rem + 0.2vw, 0.95rem);
--text-base: clamp(1rem, 0.94rem + 0.25vw, 1.05rem);
--text-md: clamp(1.1rem, 1.02rem + 0.3vw, 1.2rem);
--text-lg: clamp(1.2rem, 1.1rem + 0.45vw, 1.3rem);
--text-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem);
--text-2xl: clamp(1.65rem, 1.4rem + 1.05vw, 2rem);
--text-3xl: clamp(1.95rem, 1.6rem + 1.65vw, 2.4rem);
--text-4xl: clamp(2.3rem, 1.8rem + 2.25vw, 3.2rem);
--text-5xl: clamp(2.8rem, 2rem + 3.5vw, 4rem);
--leading-none: 1;
--leading-tight: 1.2;
src/styles/main.scss
+49
View File
@@ -222,3 +222,52 @@ table {
width: 100%;
margin: 0 auto;
}
/* 移动端优化 */
@media (max-width: 768px) {
body {
font-size: var(--text-base);
}
p {
margin-block-end: 1.2em;
}
.wi-content-wrap {
padding-inline: 1.25rem;
}
blockquote {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-base);
}
pre {
padding: var(--space-md);
font-size: var(--text-sm);
}
}
@media (max-width: 480px) {
body {
font-size: var(--text-base);
}
.wi-content-wrap {
padding-inline: 1rem;
}
blockquote {
padding: var(--space-sm) var(--space-sm);
font-size: var(--text-base);
}
table {
font-size: var(--text-sm);
}
th,
td {
padding: var(--space-sm) var(--space-sm);
}
}