Shellmiao
/
MyFirstBlog


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							{% load static %}
<head>
    <link rel="stylesheet" href="{% static 'header.css' %}">
</head>

<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">

        <!-- 导航栏商标 -->
        <a class="navbar-brand" href="#">Shellmiao's Blog</a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault"
                aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span></span>
            <span></span>
            <span></span>
        </button>
        <!-- 导航入口 -->
        <div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
            <ul class="navbar-nav">
                <!-- 条目 -->
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'article:article_create' %}">Publish An Article</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'article:article_list' %}">Articles</a>
                </li>
                <!-- Django的 if 模板语句 -->
                {% if user.is_authenticated %}
                    <!-- 如果用户已经登录，则显示用户名下拉框 -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {% if unread_count %}
                                <svg viewBox="0 0 8 8"
                                     width="8px"
                                     height="8px">
                                    <circle cx="4" cy="4" r="4" fill="#ff6b6b"></circle>
                                </svg>
                            {% endif %}
                            {{ user.username }}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <!--通知的计数-->
                            <a class="dropdown-item" href="{% url 'notice:list' %}">Notice
                                {% if unread_count %}
                                    <span class="badge badge-danger">{{ unread_count }}</span>
                                {% endif %}
                            </a>
                            <a class="dropdown-item" href="{% url 'userprofile:edit' user.id %}">Profile</a>
                            <a class="dropdown-item" href="{% url 'userprofile:logout' %}">Logout</a>
                            <a class="dropdown-item" href="#" onclick="user_delete()">Delete Account</a>
                        </div>
                        {% if user.is_authenticated %}
                            <form
                                    style="display:none;"
                                    id="user_delete"
                                    action="{% url 'userprofile:delete' user.id %}"
                                    method="POST"
                            >
                                {% csrf_token %}
                                <button type="submit">发送</button>
                            </form>
                            <script>
                                function user_delete() {
                                    // 调用layer弹窗组件
                                    layer.open({
                                        title: "删除用户",
                                        content: "确认删除用户资料吗？",
                                        yes: function (index, layero) {
                                            $('form#user_delete button').click();
                                            layer.close(index);
                                        },
                                    })
                                }
                            </script>
                        {% endif %}
                    </li>
                    <!-- 如果用户未登录，则显示 “登录” -->
                {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'userprofile:login' %}">Login</a>
                    </li>
                    <!-- if 语句在这里结束 -->
                {% endif %}
            </ul>
        </div>

    </div>
</nav>