tech-blog/app/templates/frontend/base.html

{% extends 'base.html' %}

{% block body %}
<nav class="navbar">
    <div class="container">
        <a href="{{ url_for('frontend.index') }}" class="logo">
            {% if g.site_config.site_logo %}
            <img src="{{ g.site_config.site_logo }}" alt="{{ g.site_config.site_name }}">
            {% else %}
            {{ g.site_config.site_name }}
            {% endif %}
        </a>
        {% if g.site_config.site_subtitle %}
        <span class="site-subtitle">{{ g.site_config.site_subtitle }}</span>
        {% endif %}
        <div class="nav-links">
            <a href="{{ url_for('frontend.index') }}">首页</a>
            {% for cat in categories %}
            <a href="{{ url_for('frontend.category', category_id=cat.id) }}" 
               class="{% if current_category == cat.id %}active{% endif %}">{{ cat.name }}</a>
            {% endfor %}
        </div>
    </div>
</nav>

<main class="main-content">
    <div class="container">
        <div class="content-wrapper">
            <div class="content-area">
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                        <div class="alert alert-{{ category }}">{{ message }}</div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                
                {% block content %}{% endblock %}
            </div>
            
            <aside class="sidebar">
                <!-- 搜索 -->
                <div class="sidebar-section">
                    <h3>搜索</h3>
                    <form class="search-form">
                        <input type="text" placeholder="搜索文章..." name="q">
                        <button type="submit">🔍</button>
                    </form>
                </div>
                
                <!-- 最新文章 -->
                <div class="sidebar-section">
                    <h3>最新文章</h3>
                    <ul class="recent-list">
                        {% for article in recent_articles %}
                        <li>
                            <a href="{{ url_for('frontend.article', slug=article.slug) }}">
                                {{ article.title }}
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                
                <!-- 热门文章 -->
                <div class="sidebar-section">
                    <h3>热门文章</h3>
                    <ul class="hot-list">
                        {% for article in hot_articles %}
                        <li>
                            <a href="{{ url_for('frontend.article', slug=article.slug) }}">
                                <span class="rank">{{ loop.index }}</span>
                                {{ article.title }}
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                
                <!-- 标签云 -->
                <div class="sidebar-section">
                    <h3>标签云</h3>
                    <div class="tag-cloud">
                        {% for tag in tags %}
                        <a href="{{ url_for('frontend.tag', tag_id=tag.id) }}" 
                           class="tag {% if current_tag == tag.id %}active{% endif %}"
                           style="--tag-color: {{ tag.color }}">
                            {{ tag.name }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </aside>
        </div>
    </div>
</main>

<footer class="footer">
    <div class="container">
        <div class="footer-content">
            <div class="footer-main">
                <p>{{ g.site_config.footer_text }}</p>
                {% if g.site_config.footer_copyright %}
                <p class="copyright">{{ g.site_config.footer_copyright }}</p>
                {% endif %}
                {% if g.site_config.footer_technology %}
                <p class="technology">{{ g.site_config.footer_technology }}</p>
                {% endif %}
                {% if g.site_config.contact_email or g.site_config.contact_github %}
                <div class="contact-links">
                    {% if g.site_config.contact_email %}
                    <a href="mailto:{{ g.site_config.contact_email }}">📧 {{ g.site_config.contact_email }}</a>
                    {% endif %}
                    {% if g.site_config.contact_github %}
                    <a href="{{ g.site_config.contact_github }}" target="_blank">🔗 GitHub</a>
                    {% endif %}
                </div>
                {% endif %}
            </div>
            
            {% if g.site_config.promo_image_1 or g.site_config.promo_image_2 or g.site_config.promo_image_3 %}
            <div class="footer-promo">
                {% if g.site_config.promo_image_1 %}
                <div class="promo-item">
                    {% if g.site_config.promo_image_1_link %}
                    <a href="{{ g.site_config.promo_image_1_link }}" target="_blank" class="promo-link">
                        <img src="{{ g.site_config.promo_image_1 }}" alt="">
                    </a>
                    {% else %}
                    <div class="promo-link">
                        <img src="{{ g.site_config.promo_image_1 }}" alt="">
                    </div>
                    {% endif %}
                </div>
                {% endif %}
                
                {% if g.site_config.promo_image_2 %}
                <div class="promo-item">
                    {% if g.site_config.promo_image_2_link %}
                    <a href="{{ g.site_config.promo_image_2_link }}" target="_blank" class="promo-link">
                        <img src="{{ g.site_config.promo_image_2 }}" alt="">
                    </a>
                    {% else %}
                    <div class="promo-link">
                        <img src="{{ g.site_config.promo_image_2 }}" alt="">
                    </div>
                    {% endif %}
                </div>
                {% endif %}
                
                {% if g.site_config.promo_image_3 %}
                <div class="promo-item">
                    <div class="promo-link">
                        <img src="{{ g.site_config.promo_image_3 }}" alt="">
                    </div>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</footer>
{% endblock %}