app/templates/index.html

{% 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>
{% endblock %}