seahi/blogflare
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 优化文章系列导航组件的样式与布局
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
seahi committed 2026-08-17 10:28:13 +08:00
1 parent a913f60b8d
commit 21cc8652ac
1 file changed
+98 -79
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/posts/[slug]/+page.svelte
+98 -79
View File
@@ -88,56 +88,59 @@
{/if} {/if}
{#if data.series && data.seriesPosts.length > 0} {#if data.series && data.seriesPosts.length > 0}
<details class="series-navigation" open> <details class="series-nav" open>
<summary class="series-title" id="series-navigation-title"> <summary class="series-title" id="series-navigation-title">
<span <span
>{$page.data.aliases?.series || '系列'} - >{$page.data.aliases?.series || '系列'} -
<a href={resolve('/series/[slug]', { slug: data.series.slug })}>{data.series.name}</a <a href={resolve('/series/[slug]', { slug: data.series.slug })}>{data.series.name}</a
></span ></span
> >
<svg <span class="details-icon">
class="details-icon" <svg
aria-hidden="true" aria-hidden="true"
focusable="false" focusable="false"
role="img" role="img"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 512" viewBox="0 0 256 512"
width="12" width="12"
height="12" height="12"
><path ><path
fill="currentColor" fill="currentColor"
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
></path></svg ></path></svg
> >
</span>
</summary> </summary>
<div class="series-content"> <div class="series-content">
<ol> <nav>
{#each data.seriesPosts as seriesPost (seriesPost.id)} <ul>
<li class:current={seriesPost.id === data.post.id}> {#each data.seriesPosts as seriesPost (seriesPost.id)}
{#if seriesPost.id === data.post.id} <li class:current={seriesPost.id === data.post.id}>
<span aria-current="page">{seriesPost.title}</span> {#if seriesPost.id === data.post.id}
{:else} <span class="active" aria-current="page">{seriesPost.title}</span>
<a href={resolve('/posts/[slug]', { slug: seriesPost.slug })} {:else}
>{seriesPost.title}</a <a href={resolve('/posts/[slug]', { slug: seriesPost.slug })}
>{seriesPost.title}</a
>
{/if}
</li>
{/each}
</ul>
{#if previousSeriesPost || nextSeriesPost}
<div class="series-prev-next" aria-label="系列文章翻页">
{#if previousSeriesPost}
<a href={resolve('/posts/[slug]', { slug: previousSeriesPost.slug })}
>← {previousSeriesPost.title}</a
>
{:else}<span></span>{/if}
{#if nextSeriesPost}
<a href={resolve('/posts/[slug]', { slug: nextSeriesPost.slug })}
>{nextSeriesPost.title} →</a
> >
{/if} {/if}
</li> </div>
{/each} {/if}
</ol> </nav>
{#if previousSeriesPost || nextSeriesPost}
<nav class="series-prev-next" aria-label="系列文章翻页">
{#if previousSeriesPost}
<a href={resolve('/posts/[slug]', { slug: previousSeriesPost.slug })}
>← {previousSeriesPost.title}</a
>
{:else}<span></span>{/if}
{#if nextSeriesPost}
<a href={resolve('/posts/[slug]', { slug: nextSeriesPost.slug })}
>{nextSeriesPost.title} →</a
>
{/if}
</nav>
{/if}
</div> </div>
</details> </details>
{/if} {/if}
@@ -185,102 +188,118 @@
</main> </main>
<style> <style>
.series-navigation { .series-nav {
margin: 1.5rem 0; margin: 0.8rem 0;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
border: 1px solid var(--border-color);
} }
.series-navigation .series-title { .series-nav .series-title {
font-size: 1.15rem;
font-weight: bold;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.75rem 1rem; line-height: 2em;
background: rgba(0, 0, 0, 0.05); padding: 0 0.75rem;
font-weight: 600; background-color: rgba(0, 0, 0, 0.05);
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
user-select: none; user-select: none;
transition: background-color 0.3s;
} }
.series-navigation .series-title::-webkit-details-marker { .series-nav[open] .series-title {
background-color: rgba(0, 0, 0, 0.08);
}
.series-nav .series-title::-webkit-details-marker {
display: none; display: none;
} }
.series-navigation .details-icon { .series-nav .details-icon {
transition: transform 0.3s; transition: transform 0.3s;
display: flex;
align-items: center;
} }
.series-navigation[open] .details-icon { .series-nav[open] .details-icon {
transform: rotate(90deg); transform: rotate(90deg);
} }
.series-navigation .series-title a, .series-nav .series-title a,
.series-navigation li a, .series-nav li a,
.series-prev-next a { .series-nav .series-prev-next a {
color: var(--text-color); color: var(--text-color);
text-decoration: none; text-decoration: none;
} }
.series-navigation .series-title a:hover, .series-nav .series-title a:hover,
.series-navigation li a:hover, .series-nav li a:hover,
.series-prev-next a:hover { .series-nav .series-prev-next a:hover {
color: var(--accent-color, #419b38); color: var(--accent-color, #419b38);
} }
.series-navigation .series-content { .series-nav .series-content {
padding: 1rem; font-size: 1rem;
background: rgba(0, 0, 0, 0.015); background-color: rgba(0, 0, 0, 0.02);
} }
.series-navigation ol { .series-nav .series-content > nav > ul {
margin: 0; margin: 0;
padding: 0 0 0 1.5rem; padding: 0.4rem 1rem 0.4rem 1.8rem;
list-style-type: none; list-style: none;
text-indent: -0.85rem;
} }
.series-navigation li { .series-nav li {
padding: 0.35rem 0; padding: 0;
position: relative; line-height: 1.8;
padding-left: 0.8rem;
} }
.series-navigation li::before { .series-nav li a::before {
content: '|'; content: '|';
position: absolute; font-weight: bolder;
left: -1rem; margin-right: 0.5rem;
color: var(--border-color); color: var(--text-color);
font-weight: bold; opacity: 0.6;
} }
.series-navigation li.current { .series-nav li span.active {
font-weight: 700; font-weight: bolder;
color: var(--text-color);
}
.series-nav li span.active::before {
content: '|';
font-weight: bolder;
margin-right: 0.5rem;
color: var(--accent-color, #419b38); color: var(--accent-color, #419b38);
} }
.series-navigation li.current::before { .series-nav li a:hover::before {
color: var(--accent-color, #419b38); color: var(--accent-color, #419b38);
} }
.series-prev-next { .series-nav .series-prev-next {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1rem; gap: 1rem;
margin-top: 1rem; padding: 0.8rem 1rem;
padding-top: 1rem;
border-top: 1px dashed var(--border-color, rgba(0, 0, 0, 0.12)); border-top: 1px dashed var(--border-color, rgba(0, 0, 0, 0.12));
font-size: 0.9em; font-size: 0.9em;
} }
.series-prev-next a:last-child { .series-nav .series-prev-next a:last-child {
text-align: right; text-align: right;
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.series-prev-next { .series-nav .series-prev-next {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.series-prev-next a:last-child { .series-nav .series-prev-next a:last-child {
text-align: left; text-align: left;
} }
} }