Update app/templates/index.html

app/templates/index.html

@@ -1,352 +1,352 @@
-{% extends "base.html" %}
-
-{% block title %}首页 - 个人博客{% endblock %}
-
-{% block content %}
-<!-- 搜索区域 -->
-<section class="search-container">
-    <div class="search-wrapper">
-        <input 
-            type="text" 
-            class="search-input" 
-            placeholder="搜索文章..."
-            id="searchInput"
-        >
-        <i class="fas fa-search search-icon"></i>
-        <button class="search-reset" id="searchReset" style="display: none;">
-            <i class="fas fa-times"></i>
-        </button>
-    </div>
-</section>
-
-<!-- 文章列表 -->
-<section class="articles-section">
-    <div class="section-header">
-        <h1 class="section-title">所有文章</h1>
-        <div class="view-controls">
-            <button class="view-btn" data-view="list">
-                <i class="fas fa-list"></i>
-                列表视图
-            </button>
-            <button class="view-btn active" data-view="grid">
-                <i class="fas fa-th-large"></i>
-                卡片视图
-            </button>
-        </div>
-    </div>
-
-    <div class="articles-container grid-view" id="articlesContainer">
-        {% for article in articles %}
-        <article class="article-card">
-            <div class="article-icon">
-                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                    <polyline points="14 2 14 8 20 8"></polyline>
-                    <line x1="16" y1="13" x2="8" y2="13"></line>
-                    <line x1="16" y1="17" x2="8" y2="17"></line>
-                    <line x1="10" y1="9" x2="8" y2="9"></line>
-                </svg>
-            </div>
-            <div class="article-content">
-                <h2 class="article-title">
-                    <a href="{{ url_for('main.article', slug=article.slug) }}">
-                        {{ article.title }}
-                    </a>
-                </h2>
-                {% if article.summary %}
-                <div class="article-summary">
-                    {{ article.summary }}
-                </div>
-                {% endif %}
-                <div class="article-meta">
-                    <span class="meta-date">
-                        <i class="fas fa-calendar"></i>
-                        {{ article.created_at.strftime('%Y-%m-%d') }}
-                    </span>
-                </div>
-            </div>
-        </article>
-        {% endfor %}
-    </div>
-</section>
-
-<style>
-    .search-container {
-        margin-bottom: 2rem;
-    }
-
-    .search-wrapper {
-        position: relative;
-        max-width: 800px;
-        margin: 0 auto;
-    }
-
-    .search-input {
-        width: 100%;
-        padding: 1rem 1.25rem 1rem 3rem;
-        border: 2px solid var(--light-blue);
-        border-radius: 12px;
-        background: white;
-        font-size: 1rem;
-        transition: all 0.3s ease;
-        color: var(--text-dark);
-        padding-right: 3rem;
-    }
-
-    .search-input:focus {
-        outline: none;
-        border-color: var(--primary-blue);
-        box-shadow: 0 0 0 4px rgba(99, 145, 197, 0.1);
-    }
-
-    .search-icon {
-        position: absolute;
-        left: 1.25rem;
-        top: 50%;
-        transform: translateY(-50%);
-        color: var(--primary-blue);
-    }
-
-    .search-reset {
-        position: absolute;
-        right: 1rem;
-        top: 50%;
-        transform: translateY(-50%);
-        background: none;
-        border: none;
-        color: var(--primary-blue);
-        cursor: pointer;
-        padding: 0.5rem;
-        border-radius: 50%;
-        transition: all 0.3s ease;
-    }
-
-    .search-reset:hover {
-        background: rgba(99, 145, 197, 0.1);
-    }
-
-    .section-header {
-        margin-bottom: 2rem;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .section-title {
-        font-size: 1.75rem;
-        color: var(--text-dark);
-        font-weight: 600;
-    }
-
-    .view-controls {
-        display: flex;
-        gap: 0.5rem;
-        background: white;
-        padding: 0.25rem;
-        border-radius: 8px;
-        border: 1px solid var(--light-blue);
-    }
-
-    .view-btn {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 1rem;
-        border: none;
-        background: none;
-        border-radius: 6px;
-        color: var(--text-dark);
-        cursor: pointer;
-        transition: all 0.3s ease;
-    }
-
-    .view-btn.active {
-        background: var(--primary-blue);
-        color: white;
-    }
-
-    .view-btn i {
-        font-size: 1rem;
-    }
-
-    /* 列表视图样式 */
-    .articles-container.list-view {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    .list-view .article-card {
-        background: white;
-        border-radius: 12px;
-        border: 1px solid var(--light-blue);
-        padding: 1.5rem;
-        display: flex;
-        gap: 1.5rem;
-        transition: all 0.3s ease;
-    }
-
-    /* 网格视图样式 */
-    .articles-container.grid-view {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        gap: 1.5rem;
-    }
-
-    .grid-view .article-card {
-        background: white;
-        border-radius: 12px;
-        border: 1px solid var(--light-blue);
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        transition: all 0.3s ease;
-    }
-
-    .grid-view .article-icon {
-        align-self: flex-start;
-    }
-
-    .article-card:hover {
-        border-color: var(--primary-blue);
-        box-shadow: 0 4px 12px rgba(99, 145, 197, 0.1);
-        transform: translateY(-2px);
-    }
-
-    .article-icon {
-        color: var(--primary-blue);
-        flex-shrink: 0;
-    }
-
-    .article-content {
-        flex: 1;
-    }
-
-    .article-title {
-        font-size: 1.25rem;
-        font-weight: 600;
-        margin-bottom: 0.75rem;
-        line-height: 1.4;
-    }
-
-    .article-title a {
-        color: var(--text-dark);
-        text-decoration: none;
-        transition: color 0.3s ease;
-    }
-
-    .article-title a:hover {
-        color: var(--primary-blue);
-    }
-
-    .article-summary {
-        color: #64748B;
-        margin-bottom: 1rem;
-        line-height: 1.6;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
-
-    .article-meta {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        color: #94A3B8;
-        font-size: 0.875rem;
-    }
-
-    .meta-date {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-
-    .meta-date i {
-        color: var(--primary-blue);
-    }
-
-    @media (max-width: 640px) {
-        .article-card {
-            padding: 1rem;
-        }
-        
-        .article-summary {
-            -webkit-line-clamp: 3;
-        }
-        
-        .articles-container.grid-view {
-            grid-template-columns: 1fr;
-        }
-        
-        .section-header {
-            flex-direction: column;
-            gap: 1rem;
-            align-items: flex-start;
-        }
-    }
-</style>
-
-<script>
-    const searchInput = document.getElementById('searchInput');
-    const searchReset = document.getElementById('searchReset');
-    const articlesContainer = document.getElementById('articlesContainer');
-    const viewButtons = document.querySelectorAll('.view-btn');
-    let allArticles = [...document.querySelectorAll('.article-card')];
-
-    function debounce(func, wait) {
-        let timeout;
-        return function executedFunction(...args) {
-            const later = () => {
-                clearTimeout(timeout);
-                func(...args);
-            };
-            clearTimeout(timeout);
-            timeout = setTimeout(later, wait);
-        };
-    }
-
-    function filterArticles(query) {
-        query = query.toLowerCase().trim();
-        searchReset.style.display = query ? 'block' : 'none';
-        
-        allArticles.forEach(article => {
-            const title = article.querySelector('.article-title').textContent.toLowerCase();
-            const summary = article.querySelector('.article-summary')?.textContent.toLowerCase() || '';
-            
-            if (title.includes(query) || summary.includes(query) || query === '') {
-                article.style.display = '';
-            } else {
-                article.style.display = 'none';
-            }
-        });
-    }
-
-    // 视图切换
-    viewButtons.forEach(button => {
-        button.addEventListener('click', () => {
-            viewButtons.forEach(btn => btn.classList.remove('active'));
-            button.classList.add('active');
-            
-            const viewType = button.dataset.view;
-            articlesContainer.className = `articles-container ${viewType}-view`;
-        });
-    });
-
-    // 搜索功能
-    const debouncedFilter = debounce(filterArticles, 300);
-
-    searchInput.addEventListener('input', (e) => {
-        debouncedFilter(e.target.value);
-    });
-
-    // 重置搜索
-    searchReset.addEventListener('click', () => {
-        searchInput.value = '';
-        filterArticles('');
-        searchInput.focus();
-    });
-</script>
+{% extends "base.html" %}
+
+{% block title %}首页 - Wisdom Hub{% endblock %}
+
+{% block content %}
+<!-- 搜索区域 -->
+<section class="search-container">
+    <div class="search-wrapper">
+        <input 
+            type="text" 
+            class="search-input" 
+            placeholder="搜索文章..."
+            id="searchInput"
+        >
+        <i class="fas fa-search search-icon"></i>
+        <button class="search-reset" id="searchReset" style="display: none;">
+            <i class="fas fa-times"></i>
+        </button>
+    </div>
+</section>
+
+<!-- 文章列表 -->
+<section class="articles-section">
+    <div class="section-header">
+        <h1 class="section-title">所有文章</h1>
+        <div class="view-controls">
+            <button class="view-btn" data-view="list">
+                <i class="fas fa-list"></i>
+                列表视图
+            </button>
+            <button class="view-btn active" data-view="grid">
+                <i class="fas fa-th-large"></i>
+                卡片视图
+            </button>
+        </div>
+    </div>
+
+    <div class="articles-container grid-view" id="articlesContainer">
+        {% for article in articles %}
+        <article class="article-card">
+            <div class="article-icon">
+                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" y1="13" x2="8" y2="13"></line>
+                    <line x1="16" y1="17" x2="8" y2="17"></line>
+                    <line x1="10" y1="9" x2="8" y2="9"></line>
+                </svg>
+            </div>
+            <div class="article-content">
+                <h2 class="article-title">
+                    <a href="{{ url_for('main.article', slug=article.slug) }}">
+                        {{ article.title }}
+                    </a>
+                </h2>
+                {% if article.summary %}
+                <div class="article-summary">
+                    {{ article.summary }}
+                </div>
+                {% endif %}
+                <div class="article-meta">
+                    <span class="meta-date">
+                        <i class="fas fa-calendar"></i>
+                        {{ article.created_at.strftime('%Y-%m-%d') }}
+                    </span>
+                </div>
+            </div>
+        </article>
+        {% endfor %}
+    </div>
+</section>
+
+<style>
+    .search-container {
+        margin-bottom: 2rem;
+    }
+
+    .search-wrapper {
+        position: relative;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+
+    .search-input {
+        width: 100%;
+        padding: 1rem 1.25rem 1rem 3rem;
+        border: 2px solid var(--light-blue);
+        border-radius: 12px;
+        background: white;
+        font-size: 1rem;
+        transition: all 0.3s ease;
+        color: var(--text-dark);
+        padding-right: 3rem;
+    }
+
+    .search-input:focus {
+        outline: none;
+        border-color: var(--primary-blue);
+        box-shadow: 0 0 0 4px rgba(99, 145, 197, 0.1);
+    }
+
+    .search-icon {
+        position: absolute;
+        left: 1.25rem;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--primary-blue);
+    }
+
+    .search-reset {
+        position: absolute;
+        right: 1rem;
+        top: 50%;
+        transform: translateY(-50%);
+        background: none;
+        border: none;
+        color: var(--primary-blue);
+        cursor: pointer;
+        padding: 0.5rem;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+    }
+
+    .search-reset:hover {
+        background: rgba(99, 145, 197, 0.1);
+    }
+
+    .section-header {
+        margin-bottom: 2rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .section-title {
+        font-size: 1.75rem;
+        color: var(--text-dark);
+        font-weight: 600;
+    }
+
+    .view-controls {
+        display: flex;
+        gap: 0.5rem;
+        background: white;
+        padding: 0.25rem;
+        border-radius: 8px;
+        border: 1px solid var(--light-blue);
+    }
+
+    .view-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        border: none;
+        background: none;
+        border-radius: 6px;
+        color: var(--text-dark);
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .view-btn.active {
+        background: var(--primary-blue);
+        color: white;
+    }
+
+    .view-btn i {
+        font-size: 1rem;
+    }
+
+    /* 列表视图样式 */
+    .articles-container.list-view {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .list-view .article-card {
+        background: white;
+        border-radius: 12px;
+        border: 1px solid var(--light-blue);
+        padding: 1.5rem;
+        display: flex;
+        gap: 1.5rem;
+        transition: all 0.3s ease;
+    }
+
+    /* 网格视图样式 */
+    .articles-container.grid-view {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .grid-view .article-card {
+        background: white;
+        border-radius: 12px;
+        border: 1px solid var(--light-blue);
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        transition: all 0.3s ease;
+    }
+
+    .grid-view .article-icon {
+        align-self: flex-start;
+    }
+
+    .article-card:hover {
+        border-color: var(--primary-blue);
+        box-shadow: 0 4px 12px rgba(99, 145, 197, 0.1);
+        transform: translateY(-2px);
+    }
+
+    .article-icon {
+        color: var(--primary-blue);
+        flex-shrink: 0;
+    }
+
+    .article-content {
+        flex: 1;
+    }
+
+    .article-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin-bottom: 0.75rem;
+        line-height: 1.4;
+    }
+
+    .article-title a {
+        color: var(--text-dark);
+        text-decoration: none;
+        transition: color 0.3s ease;
+    }
+
+    .article-title a:hover {
+        color: var(--primary-blue);
+    }
+
+    .article-summary {
+        color: #64748B;
+        margin-bottom: 1rem;
+        line-height: 1.6;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .article-meta {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        color: #94A3B8;
+        font-size: 0.875rem;
+    }
+
+    .meta-date {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .meta-date i {
+        color: var(--primary-blue);
+    }
+
+    @media (max-width: 640px) {
+        .article-card {
+            padding: 1rem;
+        }
+        
+        .article-summary {
+            -webkit-line-clamp: 3;
+        }
+        
+        .articles-container.grid-view {
+            grid-template-columns: 1fr;
+        }
+        
+        .section-header {
+            flex-direction: column;
+            gap: 1rem;
+            align-items: flex-start;
+        }
+    }
+</style>
+
+<script>
+    const searchInput = document.getElementById('searchInput');
+    const searchReset = document.getElementById('searchReset');
+    const articlesContainer = document.getElementById('articlesContainer');
+    const viewButtons = document.querySelectorAll('.view-btn');
+    let allArticles = [...document.querySelectorAll('.article-card')];
+
+    function debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+
+    function filterArticles(query) {
+        query = query.toLowerCase().trim();
+        searchReset.style.display = query ? 'block' : 'none';
+        
+        allArticles.forEach(article => {
+            const title = article.querySelector('.article-title').textContent.toLowerCase();
+            const summary = article.querySelector('.article-summary')?.textContent.toLowerCase() || '';
+            
+            if (title.includes(query) || summary.includes(query) || query === '') {
+                article.style.display = '';
+            } else {
+                article.style.display = 'none';
+            }
+        });
+    }
+
+    // 视图切换
+    viewButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            viewButtons.forEach(btn => btn.classList.remove('active'));
+            button.classList.add('active');
+            
+            const viewType = button.dataset.view;
+            articlesContainer.className = `articles-container ${viewType}-view`;
+        });
+    });
+
+    // 搜索功能
+    const debouncedFilter = debounce(filterArticles, 300);
+
+    searchInput.addEventListener('input', (e) => {
+        debouncedFilter(e.target.value);
+    });
+
+    // 重置搜索
+    searchReset.addEventListener('click', () => {
+        searchInput.value = '';
+        filterArticles('');
+        searchInput.focus();
+    });
+</script>
 {% endblock %}