djangoBlogStudy/src/templates/share_layout/base.html

{% load static %}
{% load compress %}
{% load i18n %}
{% load blog_tags %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    {% block header %}
        <title>{% block title %}{{ SITE_NAME }}{% endblock %} - {{ SITE_DESCRIPTION }}</title>
        <meta name="description" content="{{ SITE_SEO_DESCRIPTION }}">
        <meta name="keywords" content="{{ SITE_KEYWORDS }}">
    {% endblock %}

    {% head_meta %}

    <!-- 字体与图标 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>

    {% compress css %}
        <!-- 核心主题样式，替换掉旧的style.css -->
        <link rel='stylesheet' href='{% static 'blog/css/theme.css' %}' type='text-css' media='all'/>

        <!-- 其他必要的CSS，例如代码高亮 -->
        <link rel="stylesheet" href="{% static 'pygments/default.css' %}"/>
        <link rel="stylesheet" href="{% static 'blog/css/nprogress.css' %}">

        {% block compress_css %}{% endblock %}
    {% endcompress %}

    {% if GLOBAL_HEADER %}{{ GLOBAL_HEADER|safe }}{% endif %}
</head>

<body>
<div id="page" class="site">
    <!-- 现代化的吸顶导航栏 -->
    <header id="masthead" class="site-header" role="banner">
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <!-- 网站Logo/名称 -->
            <div class="nav-logo">
                <a href="/" title="{{ SITE_NAME }}" rel="home">{{ SITE_NAME }}</a>
            </div>

            <!-- 导航菜单 -->
            {% include 'share_layout/nav.html' %}
        </nav>
    </header>

    <!-- 主体内容区 -->
    <div id="main" class="wrapper">
        {% block content %}{% endblock %}
        {% block sidebar %}{% endblock %}
    </div>

    <!-- 页脚 -->
    {% include 'share_layout/footer.html' %}
</div>

<!-- JavaScript 文件 -->
{% compress js %}
    <script type="text/javascript" src="{% static 'blog/js/jquery-3.6.0.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'blog/js/nprogress.js' %}"></script>
    <script>
        // 简单的JS交互，例如进度条
        $(document).ready(function(){
            NProgress.start();
        });
        $(window).on('load', function(){
            NProgress.done();
        });
    </script>
    {% block compress_js %}{% endblock %}
{% endcompress %}

{% block footer %}{% endblock %}

</body>
</html>