feat: ai
This commit is contained in:
181
src/components/ArticleCard.astro
Normal file
181
src/components/ArticleCard.astro
Normal file
@@ -0,0 +1,181 @@
|
||||
---
|
||||
import type { CollectionEntry } from 'astro:content';
|
||||
import { formatDate } from '@/utils/date';
|
||||
import { getReadingTime } from '@/utils/reading-time';
|
||||
|
||||
interface Props {
|
||||
post: CollectionEntry<'posts'>;
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
const readingTime = getReadingTime(post.body);
|
||||
---
|
||||
|
||||
<article class="article-card">
|
||||
<a href={`/posts/${post.slug}`} class="card-link">
|
||||
<div class="title-row">
|
||||
<h2 class="title">{post.data.title}</h2>
|
||||
<span class="category">{post.data.category}</span>
|
||||
</div>
|
||||
<p class="description">{post.data.description}</p>
|
||||
<div class="meta">
|
||||
<time datetime={post.data.pubDate.toISOString()}>
|
||||
{formatDate(post.data.pubDate)}
|
||||
</time>
|
||||
<span class="separator">·</span>
|
||||
<span>{readingTime}</span>
|
||||
</div>
|
||||
{post.data.tags.length > 0 && (
|
||||
<div class="tags">
|
||||
{post.data.tags.map((tag, index) => (
|
||||
<span class="tag">
|
||||
#{tag}{index < post.data.tags.length - 1 ? ', ' : ''}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.article-card {
|
||||
padding: 1.75rem 2rem;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
transition: all var(--transition-base);
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.article-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--accent-color);
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.article-card:hover::before {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.card-link {
|
||||
display: block;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.625rem;
|
||||
color: var(--text-heading);
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
transition: color var(--transition-base);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.article-card:hover .title {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.category {
|
||||
color: var(--accent-secondary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.separator {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.article-card:hover .tag {
|
||||
color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.article-card {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.article-card {
|
||||
padding: 1.25rem 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
44
src/components/BackToTop.tsx
Normal file
44
src/components/BackToTop.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { createSignal, onMount, onCleanup, Show } from 'solid-js';
|
||||
|
||||
export default function BackToTop() {
|
||||
const [isVisible, setIsVisible] = createSignal(false);
|
||||
|
||||
onMount(() => {
|
||||
const handleScroll = () => {
|
||||
setIsVisible(window.scrollY > 800);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
onCleanup(() => window.removeEventListener('scroll', handleScroll));
|
||||
});
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Show when={isVisible()}>
|
||||
<button
|
||||
class="back-to-top"
|
||||
onClick={scrollToTop}
|
||||
aria-label="返回顶部"
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M18 15l-6-6-6 6"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</Show>
|
||||
);
|
||||
}
|
||||
12
src/components/Link.astro
Normal file
12
src/components/Link.astro
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
interface Props {
|
||||
href: string;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { href, class: className } = Astro.props;
|
||||
---
|
||||
|
||||
<a href={href} class={className}>
|
||||
<slot />
|
||||
</a>
|
||||
157
src/components/SearchButton.tsx
Normal file
157
src/components/SearchButton.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import { createSignal, Show, For, onMount } from 'solid-js';
|
||||
import Fuse from 'fuse.js';
|
||||
import type { SearchIndexItem } from '@/utils/search-index';
|
||||
|
||||
export default function SearchButton() {
|
||||
const [isExpanded, setIsExpanded] = createSignal(false);
|
||||
const [searchQuery, setSearchQuery] = createSignal('');
|
||||
const [searchResults, setSearchResults] = createSignal<SearchIndexItem[]>([]);
|
||||
const [showResults, setShowResults] = createSignal(false);
|
||||
const [searchIndex, setSearchIndex] = createSignal<SearchIndexItem[]>([]);
|
||||
const [fuse, setFuse] = createSignal<Fuse<SearchIndexItem> | null>(null);
|
||||
|
||||
let inputRef: HTMLInputElement | undefined;
|
||||
let containerRef: HTMLDivElement | undefined;
|
||||
|
||||
// 加载搜索索引
|
||||
onMount(async () => {
|
||||
try {
|
||||
const response = await fetch('/search-index.json');
|
||||
const data = await response.json();
|
||||
setSearchIndex(data);
|
||||
|
||||
// 初始化 Fuse.js
|
||||
const fuseInstance = new Fuse(data, {
|
||||
keys: [
|
||||
{ name: 'title', weight: 3 },
|
||||
{ name: 'description', weight: 2 },
|
||||
{ name: 'tags', weight: 2 },
|
||||
{ name: 'category', weight: 1.5 },
|
||||
{ name: 'content', weight: 1 },
|
||||
],
|
||||
threshold: 0.3,
|
||||
includeScore: true,
|
||||
});
|
||||
setFuse(fuseInstance);
|
||||
} catch (error) {
|
||||
console.error('Failed to load search index:', error);
|
||||
}
|
||||
|
||||
// 点击外部关闭
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
});
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef && !containerRef.contains(event.target as Node)) {
|
||||
setIsExpanded(false);
|
||||
setShowResults(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExpand = () => {
|
||||
setIsExpanded(true);
|
||||
setTimeout(() => inputRef?.focus(), 100);
|
||||
};
|
||||
|
||||
const handleSearch = (query: string) => {
|
||||
setSearchQuery(query);
|
||||
|
||||
if (!query.trim()) {
|
||||
setShowResults(false);
|
||||
setSearchResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const fuseInstance = fuse();
|
||||
if (!fuseInstance) return;
|
||||
|
||||
const results = fuseInstance.search(query);
|
||||
setSearchResults(results.slice(0, 10).map(r => r.item));
|
||||
setShowResults(true);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
setIsExpanded(false);
|
||||
setShowResults(false);
|
||||
setSearchQuery('');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="search-container" ref={containerRef}>
|
||||
<Show
|
||||
when={isExpanded()}
|
||||
fallback={
|
||||
<button
|
||||
class="search-button"
|
||||
onClick={handleExpand}
|
||||
aria-label="搜索"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<path d="m21 21-4.35-4.35"></path>
|
||||
</svg>
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<div class="search-input-wrapper">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
class="search-input"
|
||||
placeholder="搜索文章..."
|
||||
value={searchQuery()}
|
||||
onInput={(e) => handleSearch(e.currentTarget.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
<button
|
||||
class="search-close"
|
||||
onClick={() => {
|
||||
setIsExpanded(false);
|
||||
setShowResults(false);
|
||||
setSearchQuery('');
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={showResults() && searchResults().length > 0}>
|
||||
<div class="search-results">
|
||||
<For each={searchResults()}>
|
||||
{(result) => (
|
||||
<a href={result.url} class="search-result-item">
|
||||
<div class="result-title">{result.title}</div>
|
||||
<div class="result-description">{result.description}</div>
|
||||
<div class="result-meta">
|
||||
<span class="result-category">{result.category}</span>
|
||||
<span class="result-date">
|
||||
{new Date(result.date).toLocaleDateString('zh-CN')}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={showResults() && searchQuery() && searchResults().length === 0}>
|
||||
<div class="search-results">
|
||||
<div class="no-results">未找到相关文章</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
src/components/SiteFooter.astro
Normal file
32
src/components/SiteFooter.astro
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
const currentYear = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>© {currentYear} 42. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 2rem 0;
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
381
src/components/SiteHeader.astro
Normal file
381
src/components/SiteHeader.astro
Normal file
@@ -0,0 +1,381 @@
|
||||
---
|
||||
import ThemeToggle from './ThemeToggle';
|
||||
import SearchButton from './SearchButton';
|
||||
|
||||
interface Props {
|
||||
currentPath?: string;
|
||||
}
|
||||
|
||||
const { currentPath = '/' } = Astro.props;
|
||||
|
||||
const navItems = [
|
||||
{ label: '首页', href: '/' },
|
||||
{ label: '标签', href: '/tags' },
|
||||
{ label: '分类', href: '/categories' },
|
||||
{ label: '关于', href: '/about' },
|
||||
];
|
||||
---
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="/" class="logo">
|
||||
<span class="logo-icon"></span>
|
||||
<span class="logo-text">
|
||||
<span class="logo-number">42</span><span class="logo-suffix">的博客</span>
|
||||
</span>
|
||||
</a>
|
||||
<nav class="nav">
|
||||
{navItems.map(item => (
|
||||
<a
|
||||
href={item.href}
|
||||
class:list={['nav-link', { active: currentPath === item.href }]}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
<SearchButton client:load />
|
||||
<ThemeToggle client:load />
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.site-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0;
|
||||
background: var(--bg-primary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur(10px)) {
|
||||
.site-header {
|
||||
backdrop-filter: blur(10px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(180%);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-header {
|
||||
background: rgba(9, 9, 11, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.logo-number {
|
||||
color: var(--accent-color);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.logo-suffix {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9em;
|
||||
margin-left: 0.1em;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--accent-color);
|
||||
transform: scaleX(0);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--text-primary);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-link.active::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav :global(.search-container) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav :global(.search-button) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav :global(.search-button:hover) {
|
||||
background: var(--accent-secondary);
|
||||
border-color: var(--accent-secondary);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.nav :global(.search-button svg) {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav :global(.search-button:hover svg) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav :global(.search-input-wrapper) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 280px;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.nav :global(.search-input-wrapper:focus-within) {
|
||||
border-color: var(--accent-secondary);
|
||||
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
|
||||
}
|
||||
|
||||
.nav :global(.search-input) {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav :global(.search-input::placeholder) {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.nav :global(.search-close) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav :global(.search-close:hover) {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav :global(.search-results) {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
right: 0;
|
||||
min-width: 400px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav :global(.search-result-item) {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
transition: background var(--transition-fast);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.nav :global(.search-result-item:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nav :global(.search-result-item:hover) {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.nav :global(.result-title) {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-heading);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.nav :global(.result-description) {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav :global(.result-meta) {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.nav :global(.result-category) {
|
||||
color: var(--accent-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav :global(.no-results) {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle:hover) {
|
||||
background: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon-wrapper) {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity var(--transition-base), transform var(--transition-base);
|
||||
opacity: 0;
|
||||
transform: rotate(-90deg) scale(0);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon.active) {
|
||||
opacity: 1;
|
||||
transform: rotate(0) scale(1);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle:hover svg) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-link:not(:first-child) {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
146
src/components/TableOfContents.tsx
Normal file
146
src/components/TableOfContents.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import { createSignal, onMount, onCleanup, For } from 'solid-js';
|
||||
import type { Heading } from '@/utils/extract-headings';
|
||||
|
||||
interface Props {
|
||||
headings: Heading[];
|
||||
}
|
||||
|
||||
export default function TableOfContents(props: Props) {
|
||||
const [activeId, setActiveId] = createSignal('');
|
||||
const [isOpen, setIsOpen] = createSignal(false);
|
||||
|
||||
onMount(() => {
|
||||
// 使用 IntersectionObserver 监听标题元素
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setActiveId(entry.target.id);
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
rootMargin: '-100px 0px -66%',
|
||||
threshold: 1.0,
|
||||
}
|
||||
);
|
||||
|
||||
// 观察所有标题元素
|
||||
props.headings.forEach((heading) => {
|
||||
const element = document.getElementById(heading.id);
|
||||
if (element) {
|
||||
observer.observe(element);
|
||||
}
|
||||
});
|
||||
|
||||
onCleanup(() => observer.disconnect());
|
||||
});
|
||||
|
||||
const handleClick = (id: string) => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
const top = element.getBoundingClientRect().top + window.scrollY - 80;
|
||||
window.scrollTo({ top, behavior: 'smooth' });
|
||||
}
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
// 如果标题少于3个，不显示目录
|
||||
if (props.headings.length < 3) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 桌面端：侧边固定目录 */}
|
||||
<nav class="toc-desktop">
|
||||
<div class="toc-title">目录</div>
|
||||
<ul class="toc-list">
|
||||
<For each={props.headings}>
|
||||
{(heading) => (
|
||||
<li
|
||||
class="toc-item"
|
||||
classList={{
|
||||
active: activeId() === heading.id,
|
||||
'level-3': heading.level === 3,
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href={`#${heading.id}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleClick(heading.id);
|
||||
}}
|
||||
>
|
||||
{heading.text}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{/* 移动端：浮动按钮 + 抽屉 */}
|
||||
<div class="toc-mobile">
|
||||
<button
|
||||
class="toc-toggle"
|
||||
onClick={() => setIsOpen(!isOpen())}
|
||||
aria-label="目录"
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{isOpen() && (
|
||||
<>
|
||||
<div class="toc-overlay" onClick={() => setIsOpen(false)} />
|
||||
<div class="toc-drawer">
|
||||
<div class="toc-drawer-header">
|
||||
<span class="toc-drawer-title">目录</span>
|
||||
<button
|
||||
class="toc-drawer-close"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<ul class="toc-drawer-list">
|
||||
<For each={props.headings}>
|
||||
{(heading) => (
|
||||
<li
|
||||
class="toc-drawer-item"
|
||||
classList={{
|
||||
active: activeId() === heading.id,
|
||||
'level-3': heading.level === 3,
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href={`#${heading.id}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleClick(heading.id);
|
||||
}}
|
||||
>
|
||||
{heading.text}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
52
src/components/ThemeToggle.tsx
Normal file
52
src/components/ThemeToggle.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { createSignal, onMount } from 'solid-js';
|
||||
|
||||
export default function ThemeToggle() {
|
||||
const [theme, setTheme] = createSignal<'light' | 'dark'>('light');
|
||||
const [isAnimating, setIsAnimating] = createSignal(false);
|
||||
|
||||
onMount(() => {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme') as 'light' | 'dark';
|
||||
setTheme(currentTheme || 'light');
|
||||
});
|
||||
|
||||
const toggleTheme = () => {
|
||||
setIsAnimating(true);
|
||||
setTimeout(() => setIsAnimating(false), 600);
|
||||
|
||||
const newTheme = theme() === 'light' ? 'dark' : 'light';
|
||||
setTheme(newTheme);
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
class="theme-toggle"
|
||||
classList={{ 'is-animating': isAnimating() }}
|
||||
aria-label="切换主题"
|
||||
title={theme() === 'light' ? '切换到暗色模式' : '切换到亮色模式'}
|
||||
>
|
||||
<span class="icon-wrapper">
|
||||
<span class="icon sun" classList={{ 'active': theme() === 'light' }}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="5"/>
|
||||
<line x1="12" y1="1" x2="12" y2="3"/>
|
||||
<line x1="12" y1="21" x2="12" y2="23"/>
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
||||
<line x1="1" y1="12" x2="3" y2="12"/>
|
||||
<line x1="21" y1="12" x2="23" y2="12"/>
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="icon moon" classList={{ 'active': theme() === 'dark' }}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
export const metadata = {
|
||||
siteTitle: "42的博客",
|
||||
siteDescription: "分享技术、思考与生活",
|
||||
siteUrl: "https://ua42.com",
|
||||
author: "42",
|
||||
postsPerPage: 10,
|
||||
}
|
||||
|
||||
18
src/content/config.ts
Normal file
18
src/content/config.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { defineCollection, z } from 'astro:content';
|
||||
|
||||
const posts = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
pubDate: z.coerce.date(),
|
||||
updatedDate: z.coerce.date().optional(),
|
||||
author: z.string().default('42'),
|
||||
image: z.string().optional(),
|
||||
tags: z.array(z.string()).default([]),
|
||||
category: z.string().default('未分类'),
|
||||
draft: z.boolean().default(false),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = { posts };
|
||||
264
src/content/posts/markdown-test.md
Normal file
264
src/content/posts/markdown-test.md
Normal file
@@ -0,0 +1,264 @@
|
||||
---
|
||||
title: "Markdown 渲染测试"
|
||||
description: "测试博客的 Markdown 渲染能力，包括各种元素和代码高亮"
|
||||
pubDate: 2024-11-21
|
||||
author: "42"
|
||||
tags: ["测试", "Markdown", "代码高亮"]
|
||||
category: "技术"
|
||||
draft: false
|
||||
---
|
||||
|
||||
## 标题测试
|
||||
|
||||
### 三级标题
|
||||
|
||||
#### 四级标题
|
||||
|
||||
##### 五级标题
|
||||
|
||||
###### 六级标题
|
||||
|
||||
## 段落和文本格式
|
||||
|
||||
这是一个普通的段落。Lorem ipsum dolor sit amet, consectetur adipiscing elit. 中文和英文混排测试，确保行高和间距合理。
|
||||
|
||||
这是另一个段落，包含**粗体文本**、*斜体文本*和`行内代码`。
|
||||
|
||||
## 列表测试
|
||||
|
||||
### 无序列表
|
||||
|
||||
- 第一项
|
||||
- 第二项
|
||||
- 嵌套项 2.1
|
||||
- 嵌套项 2.2
|
||||
- 更深层嵌套 2.2.1
|
||||
- 第三项
|
||||
|
||||
### 有序列表
|
||||
|
||||
1. 第一步
|
||||
2. 第二步
|
||||
1. 子步骤 2.1
|
||||
2. 子步骤 2.2
|
||||
3. 第三步
|
||||
|
||||
## 链接测试
|
||||
|
||||
这是一个[内联链接](https://example.com)。
|
||||
|
||||
这是一个[带标题的链接](https://example.com "链接标题")。
|
||||
|
||||
## 引用块测试
|
||||
|
||||
> 这是一个引用块。
|
||||
>
|
||||
> 引用块可以包含多个段落。
|
||||
>
|
||||
> 引用块的样式应该与正文有明显区分。
|
||||
|
||||
## 代码测试
|
||||
|
||||
### 行内代码
|
||||
|
||||
使用 `const` 和 `let` 声明变量，用 `console.log()` 输出日志。
|
||||
|
||||
### JavaScript 代码块
|
||||
|
||||
```javascript
|
||||
// JavaScript 示例
|
||||
function fibonacci(n) {
|
||||
if (n <= 1) return n;
|
||||
return fibonacci(n - 1) + fibonacci(n - 2);
|
||||
}
|
||||
|
||||
const result = fibonacci(10);
|
||||
console.log(`Fibonacci(10) = ${result}`);
|
||||
|
||||
// ES6+ 特性
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
const doubled = numbers.map(n => n * 2);
|
||||
```
|
||||
|
||||
### TypeScript 代码块
|
||||
|
||||
```typescript
|
||||
// TypeScript 示例
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
class UserService {
|
||||
private users: User[] = [];
|
||||
|
||||
addUser(user: User): void {
|
||||
this.users.push(user);
|
||||
}
|
||||
|
||||
getUserById(id: number): User | undefined {
|
||||
return this.users.find(user => user.id === id);
|
||||
}
|
||||
}
|
||||
|
||||
const service = new UserService();
|
||||
service.addUser({ id: 1, name: '张三', email: 'zhang@example.com' });
|
||||
```
|
||||
|
||||
### Python 代码块
|
||||
|
||||
```python
|
||||
# Python 示例
|
||||
def fibonacci(n):
|
||||
"""计算斐波那契数列第 n 项"""
|
||||
if n <= 1:
|
||||
return n
|
||||
return fibonacci(n - 1) + fibonacci(n - 2)
|
||||
|
||||
# 列表推导式
|
||||
squares = [x**2 for x in range(10)]
|
||||
|
||||
# 字典
|
||||
user = {
|
||||
'name': '李四',
|
||||
'age': 25,
|
||||
'email': 'li@example.com'
|
||||
}
|
||||
|
||||
print(f"用户: {user['name']}, 年龄: {user['age']}")
|
||||
```
|
||||
|
||||
### CSS 代码块
|
||||
|
||||
```css
|
||||
/* CSS 示例 */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
```
|
||||
|
||||
### HTML 代码块
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>示例页面</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<h1>欢迎</h1>
|
||||
<nav>
|
||||
<a href="/">首页</a>
|
||||
<a href="/about">关于</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>文章标题</h2>
|
||||
<p>文章内容...</p>
|
||||
</article>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Go 代码块
|
||||
|
||||
```go
|
||||
// Go 示例
|
||||
package main
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"time"
|
||||
)
|
||||
|
||||
type User struct {
|
||||
ID int
|
||||
Name string
|
||||
Email string
|
||||
}
|
||||
|
||||
func main() {
|
||||
user := User{
|
||||
ID: 1,
|
||||
Name: "王五",
|
||||
Email: "wang@example.com",
|
||||
}
|
||||
|
||||
fmt.Printf("用户: %s (ID: %d)\n", user.Name, user.ID)
|
||||
|
||||
// 并发示例
|
||||
go func() {
|
||||
fmt.Println("并发执行")
|
||||
}()
|
||||
|
||||
time.Sleep(time.Second)
|
||||
}
|
||||
```
|
||||
|
||||
## 表格测试
|
||||
|
||||
| 语言 | 类型 | 特点 | 流行度 |
|
||||
|-----------|---------|---------------|-------|
|
||||
| JavaScript | 动态 | 灵活，生态丰富 | ⭐⭐⭐⭐⭐ |
|
||||
| TypeScript | 静态 | 类型安全 | ⭐⭐⭐⭐ |
|
||||
| Python | 动态 | 简洁，易学 | ⭐⭐⭐⭐⭐ |
|
||||
| Go | 静态 | 高性能，并发 | ⭐⭐⭐⭐ |
|
||||
| Rust | 静态 | 内存安全，性能 | ⭐⭐⭐ |
|
||||
|
||||
## 图片测试
|
||||
|
||||
|
||||
|
||||
## 分隔线
|
||||
|
||||
---
|
||||
|
||||
## 混合内容测试
|
||||
|
||||
让我们结合多种元素：
|
||||
|
||||
1. **列表项包含代码**：使用 `Array.prototype.map()` 进行数组转换
|
||||
2. **列表项包含链接**：访问 [MDN 文档](https://developer.mozilla.org)
|
||||
3. **列表项包含强调**：这是*非常重要*的一点
|
||||
|
||||
> **提示**：以上测试涵盖了常见的 Markdown 元素。
|
||||
>
|
||||
> 确保在亮色和暗色模式下都有良好的显示效果。
|
||||
|
||||
```typescript
|
||||
// 综合示例
|
||||
interface Config {
|
||||
theme: 'light' | 'dark';
|
||||
language: string;
|
||||
features: string[];
|
||||
}
|
||||
|
||||
const config: Config = {
|
||||
theme: 'dark',
|
||||
language: 'zh-CN',
|
||||
features: ['syntax-highlight', 'responsive', 'dark-mode']
|
||||
};
|
||||
```
|
||||
|
||||
## 结尾
|
||||
|
||||
这个测试文档涵盖了博客系统支持的主要 Markdown 功能。
|
||||
30
src/content/posts/welcome.md
Normal file
30
src/content/posts/welcome.md
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: "欢迎来到我的博客"
|
||||
description: "这是第一篇博客文章，介绍了博客的功能和技术栈。"
|
||||
pubDate: 2024-11-21
|
||||
author: "42"
|
||||
tags: ["博客", "Astro", "SolidJS"]
|
||||
category: "技术"
|
||||
draft: false
|
||||
---
|
||||
|
||||
## 欢迎！
|
||||
|
||||
这是使用 Astro + SolidJS 构建的现代化博客系统。
|
||||
|
||||
### 技术特点
|
||||
|
||||
- **服务端渲染**：基于 Astro 的 SSR 模式，提供极致的首屏加载速度
|
||||
- **响应式组件**：使用 SolidJS 构建高性能的交互式组件
|
||||
- **TypeScript**：完整的类型支持，提升开发体验
|
||||
- **内容管理**：使用 Content Collections 管理文章
|
||||
|
||||
### 功能亮点
|
||||
|
||||
1. 文章分类和标签系统
|
||||
2. 搜索功能
|
||||
3. RSS 订阅
|
||||
4. 响应式设计
|
||||
5. 暗色模式支持
|
||||
|
||||
开始你的阅读之旅吧！
|
||||
56
src/layouts/BaseLayout.astro
Normal file
56
src/layouts/BaseLayout.astro
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
import '@/styles/base.css';
|
||||
import { metadata } from '@/consts';
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title = metadata.siteTitle,
|
||||
description = metadata.siteDescription,
|
||||
image = `${metadata.siteUrl}/og-image.jpg`,
|
||||
} = Astro.props;
|
||||
|
||||
const fullTitle = title === metadata.siteTitle ? title : `${title} - ${metadata.siteTitle}`;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content={fullTitle} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={image} />
|
||||
<meta property="og:url" content={Astro.url} />
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={fullTitle} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
<meta name="twitter:image" content={image} />
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
|
||||
<title>{fullTitle}</title>
|
||||
|
||||
<script is:inline>
|
||||
// 主题切换逻辑
|
||||
const theme = localStorage.getItem('theme') ||
|
||||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
193
src/layouts/PostLayout.astro
Normal file
193
src/layouts/PostLayout.astro
Normal file
@@ -0,0 +1,193 @@
|
||||
---
|
||||
import BaseLayout from './BaseLayout.astro';
|
||||
import { formatDate } from '@/utils/date';
|
||||
import type { CollectionEntry } from 'astro:content';
|
||||
import SiteHeader from '@/components/SiteHeader.astro';
|
||||
import TableOfContents from '@/components/TableOfContents';
|
||||
import BackToTop from '@/components/BackToTop';
|
||||
import { extractHeadings } from '@/utils/extract-headings';
|
||||
import '@/styles/toc.css';
|
||||
|
||||
interface Props {
|
||||
post: CollectionEntry<'posts'>;
|
||||
readingTime: string;
|
||||
}
|
||||
|
||||
const { post, readingTime } = Astro.props;
|
||||
const { title, description, pubDate, author, tags, category } = post.data;
|
||||
const headings = extractHeadings(post.body);
|
||||
---
|
||||
|
||||
<BaseLayout title={title} description={description}>
|
||||
<div class="layout">
|
||||
<SiteHeader currentPath="" />
|
||||
|
||||
<main class="main">
|
||||
<TableOfContents headings={headings} client:load />
|
||||
<BackToTop client:load />
|
||||
<article class="post">
|
||||
<header class="post-header">
|
||||
<h1 class="post-title">{title}</h1>
|
||||
<div class="post-meta">
|
||||
<div class="meta-row">
|
||||
<span class="author">{author}</span>
|
||||
<span class="separator">·</span>
|
||||
<time datetime={pubDate.toISOString()}>
|
||||
{formatDate(pubDate)}
|
||||
</time>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="reading-time">{readingTime}</span>
|
||||
<span class="separator">·</span>
|
||||
<span class="category">{category}</span>
|
||||
</div>
|
||||
</div>
|
||||
{tags.length > 0 && (
|
||||
<div class="post-tags">
|
||||
{tags.map((tag, index) => (
|
||||
<a href={`/tags/${tag}`} class="tag">
|
||||
#{tag}{index < tags.length - 1 ? ', ' : ''}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div class="post-content">
|
||||
<slot />
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>© {new Date().getFullYear()} {author}. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0;
|
||||
background: var(--bg-primary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
margin-bottom: 3rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.3;
|
||||
color: var(--text-heading);
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.9375rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.separator {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.category {
|
||||
color: var(--accent-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 400;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 2rem 0;
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.main {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
283
src/pages/about.astro
Normal file
283
src/pages/about.astro
Normal file
@@ -0,0 +1,283 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import SiteHeader from '@/components/SiteHeader.astro';
|
||||
|
||||
---
|
||||
|
||||
<BaseLayout title="关于">
|
||||
<div class="layout">
|
||||
<SiteHeader currentPath="/about" />
|
||||
|
||||
<main class="main">
|
||||
<article class="about-content">
|
||||
<h1>关于本站</h1>
|
||||
|
||||
<section>
|
||||
<h2>技术栈</h2>
|
||||
<p>本博客基于现代化的技术栈构建：</p>
|
||||
<ul>
|
||||
<li><strong>Astro</strong> - 现代化的静态网站生成器</li>
|
||||
<li><strong>SolidJS</strong> - 高性能的响应式UI框架</li>
|
||||
<li><strong>TypeScript</strong> - 类型安全的开发体验</li>
|
||||
<li><strong>Docker</strong> - 容器化部署方案</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>关于作者</h2>
|
||||
<p>42 - 一个热爱技术、喜欢折腾的开发者。</p>
|
||||
<p>在这里分享技术心得、项目经验和生活感悟。</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>联系方式</h2>
|
||||
<p>欢迎通过以下方式与我交流：</p>
|
||||
<ul>
|
||||
<li>网站：<a href="https://ua42.com">ua42.com</a></li>
|
||||
<li>Email: hello@ua42.com</li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>© {new Date().getFullYear()} 42. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0;
|
||||
background: var(--bg-primary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur(10px)) {
|
||||
.site-header {
|
||||
backdrop-filter: blur(10px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(180%);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-header {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: var(--text-secondary);
|
||||
transition: color var(--transition-fast);
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--gradient-primary);
|
||||
transform: scaleX(0);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav a:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.about-content h1 {
|
||||
font-size: 3rem;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 3rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.about-content section {
|
||||
margin-bottom: 3rem;
|
||||
padding: 2rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: transform var(--transition-base), box-shadow var(--transition-base);
|
||||
}
|
||||
|
||||
.about-content section:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.about-content h2 {
|
||||
font-size: 1.875rem;
|
||||
color: var(--text-heading);
|
||||
margin-bottom: 1.25rem;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.about-content h2::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 70%;
|
||||
background: var(--gradient-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.about-content p {
|
||||
line-height: 1.8;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.about-content ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.about-content li {
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.8;
|
||||
padding-left: 1.75rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-content li::before {
|
||||
content: '▸';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.about-content a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.about-content a:hover {
|
||||
color: var(--link-hover);
|
||||
border-bottom-color: var(--link-hover);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 2rem 0;
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.about-content h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.about-content section {
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.about-content h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav a:not(:first-child) {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.about-content h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.about-content section {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.about-content h2 {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
292
src/pages/categories/[category].astro
Normal file
292
src/pages/categories/[category].astro
Normal file
@@ -0,0 +1,292 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import ArticleCard from '@/components/ArticleCard.astro';
|
||||
import ThemeToggle from '@/components/ThemeToggle';
|
||||
|
||||
const { category } = Astro.params;
|
||||
|
||||
if (!category) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
const allPosts = await getCollection('posts', ({ data }) => !data.draft);
|
||||
const posts = allPosts
|
||||
.filter(post => post.data.category === category)
|
||||
.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
|
||||
|
||||
if (posts.length === 0) {
|
||||
return Astro.redirect('/categories');
|
||||
}
|
||||
---
|
||||
|
||||
<BaseLayout title={`分类: ${category}`}>
|
||||
<div class="layout">
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="/" class="logo">42的博客</a>
|
||||
<nav class="nav">
|
||||
<a href="/">首页</a>
|
||||
<a href="/tags">标签</a>
|
||||
<a href="/categories">分类</a>
|
||||
<a href="/about">关于</a>
|
||||
<ThemeToggle client:load />
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">分类: {category}</h1>
|
||||
<p class="post-count">{posts.length} 篇文章</p>
|
||||
</div>
|
||||
|
||||
<div class="posts-list">
|
||||
{posts.map(post => (
|
||||
<ArticleCard post={post} />
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>© {new Date().getFullYear()} 42. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0;
|
||||
background: var(--bg-primary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur(10px)) {
|
||||
.site-header {
|
||||
backdrop-filter: blur(10px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(180%);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-header {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: var(--text-secondary);
|
||||
transition: color var(--transition-fast);
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--gradient-primary);
|
||||
transform: scaleX(0);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav a:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle:hover) {
|
||||
background: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
transform: rotate(180deg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon-wrapper) {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity var(--transition-base), transform var(--transition-base);
|
||||
opacity: 0;
|
||||
transform: rotate(-180deg) scale(0);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon.active) {
|
||||
opacity: 1;
|
||||
transform: rotate(0) scale(1);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle.is-animating) {
|
||||
animation: spin 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle:hover svg) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.75rem;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.post-count {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.posts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 2rem 0;
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.post-count {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.posts-list {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav a:not(:first-child) {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
358
src/pages/categories/index.astro
Normal file
358
src/pages/categories/index.astro
Normal file
@@ -0,0 +1,358 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import ThemeToggle from '@/components/ThemeToggle';
|
||||
|
||||
const posts = await getCollection('posts', ({ data }) => !data.draft);
|
||||
|
||||
// 统计所有分类
|
||||
const categoryCount = new Map<string, number>();
|
||||
posts.forEach(post => {
|
||||
const category = post.data.category;
|
||||
categoryCount.set(category, (categoryCount.get(category) || 0) + 1);
|
||||
});
|
||||
|
||||
// 按文章数量排序
|
||||
const sortedCategories = Array.from(categoryCount.entries())
|
||||
.sort((a, b) => b[1] - a[1]);
|
||||
---
|
||||
|
||||
<BaseLayout title="分类">
|
||||
<div class="layout">
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="/" class="logo">42的博客</a>
|
||||
<nav class="nav">
|
||||
<a href="/">首页</a>
|
||||
<a href="/tags">标签</a>
|
||||
<a href="/categories">分类</a>
|
||||
<a href="/about">关于</a>
|
||||
<ThemeToggle client:load />
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">分类</h1>
|
||||
<div class="categories-list">
|
||||
{sortedCategories.map(([category, count]) => (
|
||||
<a href={`/categories/${category}`} class="category-item">
|
||||
<span class="category-name">{category}</span>
|
||||
<span class="category-count">{count} 篇</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>© {new Date().getFullYear()} 42. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0;
|
||||
background: var(--bg-primary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur(10px)) {
|
||||
.site-header {
|
||||
backdrop-filter: blur(10px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(180%);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-header {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: var(--text-secondary);
|
||||
transition: color var(--transition-fast);
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--gradient-primary);
|
||||
transform: scaleX(0);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav a:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle:hover) {
|
||||
background: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
transform: rotate(180deg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon-wrapper) {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity var(--transition-base), transform var(--transition-base);
|
||||
opacity: 0;
|
||||
transform: rotate(-180deg) scale(0);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon.active) {
|
||||
opacity: 1;
|
||||
transform: rotate(0) scale(1);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle.is-animating) {
|
||||
animation: spin 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle:hover svg) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3rem;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 3rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.categories-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 2rem 1.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all var(--transition-base);
|
||||
color: var(--text-primary);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.category-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--gradient-primary);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.category-item:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 1.375rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.category-count {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 2rem 0;
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.categories-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.category-count {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav a:not(:first-child) {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
padding: 1.25rem 1rem;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +1,295 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import ArticleCard from '@/components/ArticleCard.astro';
|
||||
import SiteHeader from '@/components/SiteHeader.astro';
|
||||
|
||||
const posts = [
|
||||
{
|
||||
title: "First Post",
|
||||
date: "2024-01-01",
|
||||
summary: "This is the summary of the first post.",
|
||||
},
|
||||
];
|
||||
const posts = await getCollection('posts', ({ data }) => !data.draft);
|
||||
const sortedPosts = posts.sort((a, b) =>
|
||||
b.data.pubDate.getTime() - a.data.pubDate.getTime()
|
||||
);
|
||||
|
||||
// 获取所有标签
|
||||
const allTags = [...new Set(posts.flatMap(post => post.data.tags))];
|
||||
const topTags = allTags.slice(0, 8);
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<a href={`/posts/${post.title.replace(/\s+/g, "-").toLowerCase()}`}>
|
||||
<h2>{post.title}</h2>
|
||||
<p>{post.date}</p>
|
||||
<p class="summary">{post.summary}</p>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
<BaseLayout>
|
||||
<div class="layout">
|
||||
<SiteHeader currentPath="/" />
|
||||
|
||||
<main class="main">
|
||||
<div class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>42的博客</h1>
|
||||
<p class="subtitle">分享技术、思考与生活</p>
|
||||
<p class="description">在这里记录开发过程中的思考，分享工程实践经验，探索技术的可能性。</p>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{sortedPosts.length}</div>
|
||||
<div class="stat-label">篇文章</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{allTags.length}</div>
|
||||
<div class="stat-label">个标签</div>
|
||||
</div>
|
||||
<div class="tags-preview">
|
||||
<div class="tags-title">热门标签</div>
|
||||
<div class="tags-list">
|
||||
{topTags.map(tag => (
|
||||
<a href={`/tags/${tag}`} class="tag-item">#{tag}</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="posts-section">
|
||||
<h2 class="section-title">最新文章</h2>
|
||||
<div class="posts-list">
|
||||
{sortedPosts.map(post => (
|
||||
<ArticleCard post={post} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>© {new Date().getFullYear()} 42. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</Layout>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.summary {
|
||||
line-height: 2;
|
||||
font-size: 16px;
|
||||
color: rgb(66, 63, 63);
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0;
|
||||
background: var(--bg-primary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 5rem 0;
|
||||
margin-bottom: 4rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3rem;
|
||||
color: var(--text-heading);
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero h1::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -0.5rem;
|
||||
left: 0;
|
||||
width: 80px;
|
||||
height: 5px;
|
||||
background: var(--accent-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.0625rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
border-left: 4px solid var(--accent-color);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
color: var(--accent-color);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.tags-preview {
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.tags-title {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tags-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.tag-item:hover {
|
||||
color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
.posts-section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-heading);
|
||||
margin-bottom: 2rem;
|
||||
padding-left: 1rem;
|
||||
border-left: 4px solid var(--accent-color);
|
||||
}
|
||||
|
||||
.posts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 2rem 0;
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tags-preview {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
padding: 0 1rem 2rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 3rem 0;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero {
|
||||
padding: 2rem 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,24 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import { getCollection, getEntry } from 'astro:content';
|
||||
import PostLayout from '@/layouts/PostLayout.astro';
|
||||
import { getReadingTime } from '@/utils/reading-time';
|
||||
|
||||
const { slug } = Astro.params;
|
||||
|
||||
if (!slug) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
const post = await getEntry('posts', slug);
|
||||
|
||||
if (!post || post.data.draft) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
const { Content } = await post.render();
|
||||
const readingTime = getReadingTime(post.body);
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<h1>Post Slug: {slug}</h1>
|
||||
</Layout>
|
||||
<PostLayout post={post} readingTime={readingTime}>
|
||||
<Content />
|
||||
</PostLayout>
|
||||
|
||||
25
src/pages/rss.xml.ts
Normal file
25
src/pages/rss.xml.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import rss from '@astrojs/rss';
|
||||
import { getCollection } from 'astro:content';
|
||||
import { metadata } from '@/consts';
|
||||
import type { APIContext } from 'astro';
|
||||
|
||||
export async function GET(context: APIContext) {
|
||||
const posts = await getCollection('posts', ({ data }) => !data.draft);
|
||||
|
||||
return rss({
|
||||
title: metadata.siteTitle,
|
||||
description: metadata.siteDescription,
|
||||
site: context.site || metadata.siteUrl,
|
||||
items: posts
|
||||
.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
|
||||
.map(post => ({
|
||||
title: post.data.title,
|
||||
description: post.data.description,
|
||||
pubDate: post.data.pubDate,
|
||||
link: `/posts/${post.slug}/`,
|
||||
categories: [post.data.category, ...post.data.tags],
|
||||
author: post.data.author,
|
||||
})),
|
||||
customData: `<language>zh-CN</language>`,
|
||||
});
|
||||
}
|
||||
14
src/pages/search-index.json.ts
Normal file
14
src/pages/search-index.json.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
import { generateSearchIndex } from '@/utils/search-index';
|
||||
|
||||
export const GET: APIRoute = async () => {
|
||||
const searchIndex = await generateSearchIndex();
|
||||
|
||||
return new Response(JSON.stringify(searchIndex), {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Cache-Control': 'public, max-age=3600',
|
||||
},
|
||||
});
|
||||
};
|
||||
407
src/pages/tags/[tag].astro
Normal file
407
src/pages/tags/[tag].astro
Normal file
@@ -0,0 +1,407 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import { formatDate } from '@/utils/date';
|
||||
import { getReadingTime } from '@/utils/reading-time';
|
||||
import ThemeToggle from '@/components/ThemeToggle';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('posts', ({ data }) => !data.draft);
|
||||
|
||||
const tags = new Set<string>();
|
||||
posts.forEach(post => {
|
||||
post.data.tags.forEach(tag => tags.add(tag));
|
||||
});
|
||||
|
||||
return Array.from(tags).map(tag => ({
|
||||
params: { tag },
|
||||
props: {
|
||||
posts: posts.filter(post => post.data.tags.includes(tag))
|
||||
.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime())
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
const { tag } = Astro.params;
|
||||
const { posts } = Astro.props;
|
||||
---
|
||||
|
||||
<BaseLayout title={`标签: ${tag}`}>
|
||||
<div class="layout">
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="/" class="logo">42的博客</a>
|
||||
<nav class="nav">
|
||||
<a href="/">首页</a>
|
||||
<a href="/tags">标签</a>
|
||||
<a href="/categories">分类</a>
|
||||
<a href="/about">关于</a>
|
||||
<ThemeToggle client:load />
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">标签: #{tag}</h1>
|
||||
<p class="post-count">{posts.length} 篇文章</p>
|
||||
</div>
|
||||
|
||||
<div class="posts-list">
|
||||
{posts.map(post => {
|
||||
const readingTime = getReadingTime(post.body);
|
||||
return (
|
||||
<article class="post-card">
|
||||
<a href={`/posts/${post.slug}`} class="post-link">
|
||||
<h2 class="post-title">{post.data.title}</h2>
|
||||
<p class="post-description">{post.data.description}</p>
|
||||
<div class="post-meta">
|
||||
<time datetime={post.data.pubDate.toISOString()}>
|
||||
{formatDate(post.data.pubDate)}
|
||||
</time>
|
||||
<span class="separator">·</span>
|
||||
<span>{readingTime}</span>
|
||||
<span class="separator">·</span>
|
||||
<span class="category">{post.data.category}</span>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>© {new Date().getFullYear()} 42. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0;
|
||||
background: var(--bg-primary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur(10px)) {
|
||||
.site-header {
|
||||
backdrop-filter: blur(10px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(180%);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-header {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: var(--text-secondary);
|
||||
transition: color var(--transition-fast);
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--gradient-primary);
|
||||
transform: scaleX(0);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav a:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle:hover) {
|
||||
background: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
transform: rotate(180deg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon-wrapper) {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity var(--transition-base), transform var(--transition-base);
|
||||
opacity: 0;
|
||||
transform: rotate(-180deg) scale(0);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon.active) {
|
||||
opacity: 1;
|
||||
transform: rotate(0) scale(1);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle.is-animating) {
|
||||
animation: spin 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle:hover svg) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.75rem;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.post-count {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.posts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
padding: 2rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--gradient-primary);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.post-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.post-card:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.post-link {
|
||||
display: block;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 1.75rem;
|
||||
color: var(--text-heading);
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
transition: color var(--transition-base);
|
||||
}
|
||||
|
||||
.post-card:hover .post-title {
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.post-description {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.separator {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 2rem 0;
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.post-count {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.posts-list {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.post-description {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav a:not(:first-child) {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
346
src/pages/tags/index.astro
Normal file
346
src/pages/tags/index.astro
Normal file
@@ -0,0 +1,346 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import SiteHeader from '@/components/SiteHeader.astro';
|
||||
|
||||
const posts = await getCollection('posts', ({ data }) => !data.draft);
|
||||
|
||||
// 统计所有标签
|
||||
const tagCount = new Map<string, number>();
|
||||
posts.forEach(post => {
|
||||
post.data.tags.forEach(tag => {
|
||||
tagCount.set(tag, (tagCount.get(tag) || 0) + 1);
|
||||
});
|
||||
});
|
||||
|
||||
// 按文章数量排序
|
||||
const sortedTags = Array.from(tagCount.entries())
|
||||
.sort((a, b) => b[1] - a[1]);
|
||||
---
|
||||
|
||||
<BaseLayout title="标签">
|
||||
<div class="layout">
|
||||
<SiteHeader currentPath="/tags" />
|
||||
|
||||
<main class="main">
|
||||
<h1 class="page-title">标签</h1>
|
||||
<div class="tags-cloud">
|
||||
{sortedTags.map(([tag, count]) => (
|
||||
<a href={`/tags/${tag}`} class="tag-item">
|
||||
<span class="tag-name">#{tag}</span>
|
||||
<span class="tag-count">{count}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>© {new Date().getFullYear()} 42. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0;
|
||||
background: var(--bg-primary);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur(10px)) {
|
||||
.site-header {
|
||||
backdrop-filter: blur(10px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(180%);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-header {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--layout-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: var(--text-secondary);
|
||||
transition: color var(--transition-fast);
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--gradient-primary);
|
||||
transform: scaleX(0);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav a:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle:hover) {
|
||||
background: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
transform: rotate(180deg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon-wrapper) {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity var(--transition-base), transform var(--transition-base);
|
||||
opacity: 0;
|
||||
transform: rotate(-180deg) scale(0);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle .icon.active) {
|
||||
opacity: 1;
|
||||
transform: rotate(0) scale(1);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle.is-animating) {
|
||||
animation: spin 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav :global(.theme-toggle:hover svg) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3rem;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 3rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tags-cloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.875rem 1.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all var(--transition-base);
|
||||
color: var(--text-primary);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tag-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: var(--gradient-primary);
|
||||
transform: scaleY(0);
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.tag-item:hover {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.tag-item:hover::before {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.tag-name {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tag-count {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 2rem 0;
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.tags-cloud {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.tag-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tag-count {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav a:not(:first-child) {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
padding: 0.625rem 1rem;
|
||||
}
|
||||
|
||||
.tag-name {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,171 @@
|
||||
@import "modern-normalize";
|
||||
@import "./reset.css";
|
||||
@import "./typography.css";
|
||||
@import "./enhancements.css";
|
||||
|
||||
:root {
|
||||
--layout-width: 1200px;
|
||||
--content-width: 680px;
|
||||
|
||||
/* 亮色模式 */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #fafaf9;
|
||||
--bg-tertiary: #f5f5f4;
|
||||
--text-primary: #18181b;
|
||||
--text-secondary: #71717a;
|
||||
--text-tertiary: #a1a1aa;
|
||||
--text-heading: #09090b;
|
||||
--link-color: #0891b2;
|
||||
--link-hover: #0e7490;
|
||||
--accent-color: #d97706;
|
||||
--accent-secondary: #0891b2;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--border-color: #e5e7eb;
|
||||
--border-light: #f3f4f6;
|
||||
|
||||
/* 代码相关 */
|
||||
--code-inline-bg: #f4f5f7;
|
||||
--code-inline-color: #e91e63;
|
||||
--code-inline-border: #e5e7eb;
|
||||
--code-block-bg: #f6f8fa;
|
||||
--code-block-border: #e5e7eb;
|
||||
--code-line-number: #9ca3af;
|
||||
--code-highlight-bg: #fff9db;
|
||||
|
||||
/* Markdown 元素 */
|
||||
--quote-border: #3b82f6;
|
||||
--quote-bg: #f8f9fa;
|
||||
--table-border: #e5e7eb;
|
||||
--table-header-bg: #f0f2f5;
|
||||
--table-stripe-bg: #f8f9fa;
|
||||
--link-underline: #3b82f6;
|
||||
|
||||
/* 间距规范 */
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 2.5rem;
|
||||
--spacing-3xl: 3rem;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* 装饰线条颜色（替代渐变） */
|
||||
--accent-line: var(--accent-color);
|
||||
--accent-line-secondary: var(--accent-secondary);
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 过渡 */
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
/* 暗色模式 */
|
||||
--bg-primary: #09090b;
|
||||
--bg-secondary: #18181b;
|
||||
--bg-tertiary: #27272a;
|
||||
--text-primary: #fafafa;
|
||||
--text-secondary: #a1a1aa;
|
||||
--text-tertiary: #71717a;
|
||||
--text-heading: #fafafa;
|
||||
--link-color: #06b6d4;
|
||||
--link-hover: #22d3ee;
|
||||
--accent-color: #fbbf24;
|
||||
--accent-secondary: #06b6d4;
|
||||
--success-color: #34d399;
|
||||
--warning-color: #fbbf24;
|
||||
--border-color: #27272a;
|
||||
--border-light: #18181b;
|
||||
|
||||
/* 代码相关 */
|
||||
--code-inline-bg: #1e293b;
|
||||
--code-inline-color: #f472b6;
|
||||
--code-inline-border: #334155;
|
||||
--code-block-bg: #1e293b;
|
||||
--code-block-border: #334155;
|
||||
--code-line-number: #64748b;
|
||||
--code-highlight-bg: #374151;
|
||||
|
||||
/* Markdown 元素 */
|
||||
--quote-border: #60a5fa;
|
||||
--quote-bg: #1e293b;
|
||||
--table-border: #334155;
|
||||
--table-header-bg: #1e293b;
|
||||
--table-stripe-bg: #0f172a;
|
||||
--link-underline: #60a5fa;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* 暗色模式装饰线条 */
|
||||
--accent-line: var(--accent-color);
|
||||
--accent-line-secondary: var(--accent-secondary);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: background-color var(--transition-base), color var(--transition-base);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
|
||||
295
src/styles/enhancements.css
Normal file
295
src/styles/enhancements.css
Normal file
@@ -0,0 +1,295 @@
|
||||
/* UI/UX 增强样式 */
|
||||
|
||||
/* 选中文本样式 */
|
||||
::selection {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--text-tertiary);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background var(--transition-base);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Focus 样式增强 */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--accent-color);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
a:focus-visible {
|
||||
outline: 2px solid var(--accent-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 按钮基础样式增强 */
|
||||
button {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* 平滑过渡类 */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 链接悬停效果 */
|
||||
a {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 响应式图片 */
|
||||
img {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
/* 代码块增强 */
|
||||
pre {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Shiki 代码块样式适配 */
|
||||
.astro-code,
|
||||
.shiki {
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow-x: auto;
|
||||
line-height: 1.6;
|
||||
font-size: 0.875rem;
|
||||
margin: 1.5rem 0;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--code-block-border);
|
||||
}
|
||||
|
||||
/* 代码块滚动条样式 */
|
||||
pre::-webkit-scrollbar,
|
||||
.astro-code::-webkit-scrollbar,
|
||||
.shiki::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
pre::-webkit-scrollbar-track,
|
||||
.astro-code::-webkit-scrollbar-track,
|
||||
.shiki::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
pre::-webkit-scrollbar-thumb,
|
||||
.astro-code::-webkit-scrollbar-thumb,
|
||||
.shiki::-webkit-scrollbar-thumb {
|
||||
background: var(--text-tertiary);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
pre::-webkit-scrollbar-thumb:hover,
|
||||
.astro-code::-webkit-scrollbar-thumb:hover,
|
||||
.shiki::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
/* 移动端代码块优化 */
|
||||
@media (max-width: 768px) {
|
||||
.astro-code,
|
||||
.shiki,
|
||||
article pre {
|
||||
padding: 1rem;
|
||||
font-size: 0.8125rem;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
animation: shimmer 2s infinite;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--bg-secondary) 0%,
|
||||
var(--bg-tertiary) 50%,
|
||||
var(--bg-secondary) 100%
|
||||
);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
/* 工具提示基础样式 */
|
||||
[data-tooltip] {
|
||||
position: relative;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
[data-tooltip]::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-8px);
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--text-heading);
|
||||
color: white;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--transition-fast), transform var(--transition-fast);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
[data-tooltip]:hover::after {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(-4px);
|
||||
}
|
||||
|
||||
/* 徽章样式 */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 分隔线增强 */
|
||||
hr {
|
||||
margin: 2rem 0;
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
var(--border-color),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* 引用块增强样式 */
|
||||
blockquote {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* 响应式视频容器 */
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.video-container iframe,
|
||||
.video-container video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 打印样式优化 */
|
||||
@media print {
|
||||
body {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.site-header,
|
||||
.site-footer,
|
||||
.theme-toggle,
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
border: 1px solid #ccc;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画偏好设置 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗色模式特定增强 */
|
||||
[data-theme="dark"] img {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
[data-theme="dark"] img:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 高对比度模式支持 */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
button,
|
||||
a {
|
||||
outline: 2px solid currentColor;
|
||||
}
|
||||
}
|
||||
263
src/styles/toc.css
Normal file
263
src/styles/toc.css
Normal file
@@ -0,0 +1,263 @@
|
||||
/* 文章目录（TOC）样式 */
|
||||
|
||||
/* 桌面端：侧边固定目录 */
|
||||
.toc-desktop {
|
||||
position: fixed;
|
||||
left: max(1rem, calc((100vw - var(--layout-width)) / 2 - 240px));
|
||||
top: 120px;
|
||||
width: 200px;
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.toc-desktop {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.toc-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toc-item {
|
||||
margin-bottom: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toc-item.level-3 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.toc-item a {
|
||||
display: block;
|
||||
padding: 0.25rem 0;
|
||||
padding-left: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
border-left: 2px solid transparent;
|
||||
transition: all var(--transition-fast);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toc-item a:hover {
|
||||
color: var(--text-primary);
|
||||
border-left-color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.toc-item.active a {
|
||||
color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
border-left-color: var(--accent-color);
|
||||
border-left-width: 3px;
|
||||
}
|
||||
|
||||
/* 移动端：浮动按钮 + 抽屉 */
|
||||
.toc-mobile {
|
||||
display: block;
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.toc-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-toggle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: var(--shadow-lg);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.toc-toggle:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.toc-toggle:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.toc-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 200;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-drawer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 60vh;
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
box-shadow: var(--shadow-xl);
|
||||
z-index: 201;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.toc-drawer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.toc-drawer-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
.toc-drawer-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.toc-drawer-close:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.toc-drawer-list {
|
||||
list-style: none;
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toc-drawer-item {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.toc-drawer-item.level-3 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.toc-drawer-item a {
|
||||
display: block;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all var(--transition-fast);
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.toc-drawer-item a:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.toc-drawer-item:hover a {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.toc-drawer-item.active a {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
border-left-color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* 返回顶部按钮 */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-secondary);
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: var(--shadow-lg);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-base);
|
||||
z-index: 50;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.back-to-top:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 当有TOC按钮时，调整返回顶部按钮位置 */
|
||||
@media (max-width: 1399px) {
|
||||
.back-to-top {
|
||||
bottom: 5.5rem;
|
||||
}
|
||||
}
|
||||
267
src/styles/typography.css
Normal file
267
src/styles/typography.css
Normal file
@@ -0,0 +1,267 @@
|
||||
/* 排版样式 */
|
||||
article {
|
||||
line-height: 1.75;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.125rem; /* 18px */
|
||||
}
|
||||
|
||||
article h1,
|
||||
article h2,
|
||||
article h3,
|
||||
article h4,
|
||||
article h5,
|
||||
article h6 {
|
||||
margin-top: 3em;
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
color: var(--text-heading);
|
||||
letter-spacing: -0.02em;
|
||||
scroll-margin-top: 5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
article h1:first-child,
|
||||
article h2:first-child,
|
||||
article h3:first-child,
|
||||
article h4:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--text-heading);
|
||||
position: relative;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
article h1::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: var(--accent-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
article h2 {
|
||||
font-size: 1.875rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
article h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
article h4 {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
article h5 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
article h6 {
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
article p {
|
||||
margin-bottom: 1.75em;
|
||||
}
|
||||
|
||||
article a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
background-image: linear-gradient(var(--link-color), var(--link-color));
|
||||
background-size: 0% 2px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left bottom;
|
||||
transition: background-size var(--transition-base), color var(--transition-base);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
article a:hover {
|
||||
color: var(--link-hover);
|
||||
background-size: 100% 2px;
|
||||
}
|
||||
|
||||
article ul,
|
||||
article ol {
|
||||
margin-bottom: 1.5em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
article ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
article ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
article li {
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
article li > ul,
|
||||
article li > ol {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
article ul ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
article ul ul ul {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
article code {
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: var(--code-inline-bg);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9em;
|
||||
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
|
||||
color: var(--code-inline-color);
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--code-inline-border);
|
||||
}
|
||||
|
||||
article pre {
|
||||
margin-bottom: 1.5em;
|
||||
padding: 1.5em;
|
||||
background: var(--code-block-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow-x: auto;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--code-block-border);
|
||||
position: relative;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
article pre::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: var(--accent-color);
|
||||
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
|
||||
}
|
||||
|
||||
article pre code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.875rem;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
}
|
||||
|
||||
article blockquote {
|
||||
margin: 2em 0;
|
||||
padding: 1.5em 1.5em 1.5em 2em;
|
||||
border-left: 6px solid var(--accent-color);
|
||||
background: var(--quote-bg);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-style: italic;
|
||||
position: relative;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
article blockquote p {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
article blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
article img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-lg);
|
||||
margin: 2em 0;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transition: transform var(--transition-base), box-shadow var(--transition-base);
|
||||
}
|
||||
|
||||
article img:hover {
|
||||
transform: scale(1.01);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
article hr {
|
||||
margin: 3em 0;
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--border-color), transparent);
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
article table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--table-border);
|
||||
}
|
||||
|
||||
article thead {
|
||||
background: var(--table-header-bg);
|
||||
}
|
||||
|
||||
article th {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: var(--text-heading);
|
||||
border-bottom: 2px solid var(--table-border);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
article td {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--table-border);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
article tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
article tbody tr {
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
article tbody tr:nth-child(even) {
|
||||
background: var(--table-stripe-bg);
|
||||
}
|
||||
|
||||
article tbody tr:hover {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
/* 移动端表格滚动 */
|
||||
@media (max-width: 768px) {
|
||||
article table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
19
src/types/post.ts
Normal file
19
src/types/post.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import type { CollectionEntry } from 'astro:content';
|
||||
|
||||
export type Post = CollectionEntry<'posts'>;
|
||||
|
||||
export interface PostMetadata {
|
||||
title: string;
|
||||
description: string;
|
||||
pubDate: Date;
|
||||
updatedDate?: Date;
|
||||
author: string;
|
||||
image?: string;
|
||||
tags: string[];
|
||||
category: string;
|
||||
draft: boolean;
|
||||
}
|
||||
|
||||
export interface PostWithReadingTime extends Post {
|
||||
readingTime: string;
|
||||
}
|
||||
15
src/utils/date.ts
Normal file
15
src/utils/date.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
export function formatDate(date: Date): string {
|
||||
return new Date(date).toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
}
|
||||
|
||||
export function formatDateShort(date: Date): string {
|
||||
return new Date(date).toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
});
|
||||
}
|
||||
29
src/utils/extract-headings.ts
Normal file
29
src/utils/extract-headings.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
// 提取文章标题的工具函数
|
||||
export interface Heading {
|
||||
id: string;
|
||||
text: string;
|
||||
level: number;
|
||||
}
|
||||
|
||||
export function extractHeadings(content: string): Heading[] {
|
||||
const headings: Heading[] = [];
|
||||
const lines = content.split('\n');
|
||||
|
||||
for (const line of lines) {
|
||||
// 匹配 Markdown 标题 (## 或 ###)
|
||||
const match = line.match(/^(#{2,3})\s+(.+)$/);
|
||||
if (match) {
|
||||
const level = match[1].length;
|
||||
const text = match[2].trim();
|
||||
// 生成 ID（简单处理，实际 Astro 会自动生成）
|
||||
const id = text
|
||||
.toLowerCase()
|
||||
.replace(/[^\w\u4e00-\u9fa5]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '');
|
||||
|
||||
headings.push({ id, text, level });
|
||||
}
|
||||
}
|
||||
|
||||
return headings;
|
||||
}
|
||||
19
src/utils/reading-time.ts
Normal file
19
src/utils/reading-time.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
export function getReadingTime(content: string): string {
|
||||
const wordsPerMinute = 200;
|
||||
const chineseCharsPerMinute = 300;
|
||||
|
||||
// 计算中文字符数
|
||||
const chineseChars = (content.match(/[\u4e00-\u9fa5]/g) || []).length;
|
||||
|
||||
// 计算英文单词数
|
||||
const englishWords = content
|
||||
.replace(/[\u4e00-\u9fa5]/g, '')
|
||||
.split(/\s+/)
|
||||
.filter(word => word.length > 0).length;
|
||||
|
||||
const minutes = Math.ceil(
|
||||
chineseChars / chineseCharsPerMinute + englishWords / wordsPerMinute
|
||||
);
|
||||
|
||||
return `${minutes} 分钟`;
|
||||
}
|
||||
28
src/utils/search-index.ts
Normal file
28
src/utils/search-index.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
// 搜索索引生成工具
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
export interface SearchIndexItem {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
content: string;
|
||||
category: string;
|
||||
tags: string[];
|
||||
date: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export async function generateSearchIndex(): Promise<SearchIndexItem[]> {
|
||||
const posts = await getCollection('posts', ({ data }) => !data.draft);
|
||||
|
||||
return posts.map(post => ({
|
||||
id: post.slug,
|
||||
title: post.data.title,
|
||||
description: post.data.description,
|
||||
content: post.body.slice(0, 500), // 仅索引前500字符
|
||||
category: post.data.category,
|
||||
tags: post.data.tags,
|
||||
date: post.data.pubDate.toISOString(),
|
||||
url: `/posts/${post.slug}`,
|
||||
}));
|
||||
}
|
||||
Reference in New Issue
Block a user