<!DOCTYPE html>
<!-- templates/literary/header.tpl -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {include file="seo.tpl"}
    <meta name="theme-color" content="#8B4513">

    <!-- 主CSS -->
    <link rel="stylesheet" href="{resource_url path='templates/literary/css/style.css'}">

    <!-- 优化后的内联CSS -->
    <style>
        /* 关键渲染路径优化 */
        .site-header, .main-layout, .site-footer { 
            opacity: 1 !important; /* 强制显示，避免依赖JS */
        }

        /* 加载动画优化 */
        .loading-placeholder {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #f8f4e9 0%, #f1e8d8 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.3s ease;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(139, 69, 19, 0.3);
            border-top: 3px solid var(--primary-color, #8B4513);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 隐藏加载动画的类 */
        .loading-hidden {
            opacity: 0;
            visibility: hidden;
        }

        /* 衬线字体优化 */
        body {
            font-family: 'SimSun', 'NSimSun', serif;
            opacity: 1 !important;
        }
    </style>
</head>
<body>
<!-- 简化的加载占位符 - 3秒后自动隐藏 -->
<div class="loading-placeholder" id="loadingPlaceholder">
    <div class="loading-spinner"></div>
</div>

<script>
// 页面加载完成后立即隐藏加载动画
window.addEventListener('load', function() {
    const loadingElement = document.getElementById('loadingPlaceholder');
    if (loadingElement) {
        // 立即开始隐藏动画
        loadingElement.classList.add('loading-hidden');
        // 3秒后强制移除元素（安全措施）
        setTimeout(function() {
            if (loadingElement.parentNode) {
                loadingElement.parentNode.removeChild(loadingElement);
            }
        }, 3000);
    }
});

// DOM加载完成后也尝试隐藏（双重保险）
document.addEventListener('DOMContentLoaded', function() {
    const loadingElement = document.getElementById('loadingPlaceholder');
    if (loadingElement) {
        setTimeout(function() {
            loadingElement.classList.add('loading-hidden');
        }, 1000);
    }
    
    // 添加loaded类用于其他动画
    document.body.classList.add('loaded');
});
</script>

<!-- 头部自定义数据钩子 -->
{display_custom_data position='header' page_type=$mod}

<!-- 网站头部 -->
<header class="site-header">
    <div class="container">
        <div class="header-inner">
            <div class="site-branding">
                <a href="{resource_url}" class="site-logo">
                    <span style="font-size: 1.2em;">📖</span>
                    {$config.site.name}
                </a>
                <div class="site-description">{$config.site.description}</div>
            </div>

            <nav class="main-navigation">
                <ul>
                    <li><a href="{resource_url}" class="nav-link {if $mod == 'index'}active{/if}">首页</a></li>
                    {* 使用自定义导航数据 *}
                    {if $config.custom_nav}
                        {foreach $config.custom_nav as $nav}
                            {if $nav.type == 'category'}
                                {* 分类链接 *}
                                <li>
                                    <a href="{build_url mod='category' cate=$nav.category_id}"
                                       class="nav-link {if $mod == 'category' && isset($current_category) && $current_category.id == $nav.category_id}active{/if}"
                                       target="{$nav.target}">
                                        {$nav.name}
                                    </a>
                                </li>
                            {else}
                                {* 自定义链接 *}
                                <li>
                                    <a href="{$nav.url}" class="nav-link" target="{$nav.target}">
                                        {$nav.name}
                                    </a>
                                </li>
                            {/if}
                        {/foreach}
                    {/if}
                </ul>
            </nav>
        </div>
    </div>
</header>

<!-- 主要内容区域 -->
<main class="container">
    <div class="main-layout">
        <div class="content-area">

            <!-- 内容前自定义数据钩子 -->
            {display_custom_data position='before_content' page_type=$mod}