Python Django个人网站搭建15-优化导航栏1

zifan

发布于 2021-12-14 12:34:38

5250

发布于 2021-12-14 12:34:38

作者： zifanwang 发布于2020-05-22

修改templates/shou/shou.html：

{% extends "basee.html" %}
{% block title %}
    My Site-Home
{% endblock title %}
{% block  content %}
    <br>
    <center>
    <h1>My Site</h1>
    <p>Welcome to my site</p>
    <hr>
    </center>
{% endblock content %}

再在templates文件夹里创建basee.html并写入：

{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
</head>
<body>
    {% include 'headerr.html' %}

    {% block content %}{% endblock content %}
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

修改header.html：

<head>
    {% if user.is_authenticated %}
        <script>
            function user_delete() {
                var r=confirm("Wanna delete this user?");
                if (r==true)
                {
                    window.location='{% url "userprofile:delete" user.id %}';
                }
            }
        </script>
    {% endif %}
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <div class="container">
   <a class="navbar-brand" href="#">My Site</a>
   <div>
     <ul class="navbar-nav">
         <li class="nav-item">
           <a class="nav-link" href="/">Home</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="{% url 'article:article_list' %}">Article</a>
         </li>
         <li class="nav-item">
             <a class="nav-link" href="{% url 'article:article_create' %}">New</a>
         </li>
         {% 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">
                 {{ user.username }}
               </a>
               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="{% url "userprofile:edit" user.id %}">User</a>
                 <a class="dropdown-item" href="{% url "userprofile:logout" %}">Exit</a>
         <a class="dropdown-item" href="#" onclick="user_delete()">Delete</a>
               </div>
           </li>
           {% else %}
               <li class="nav-item">
                   <a class="nav-link" href="{% url 'userprofile:login' %}">Login</a>
               </li>
         {% endif %}
     </ul>
   </div>
 </div>
</nav>

然后在templates文件夹里创建headerr.html并写入：

<head>
    {% if user.is_authenticated %}
        <script>
            function user_delete() {
                var r=confirm("Wanna delete this user?");
                if (r==true)
                {
                    window.location='{% url "userprofile:delete" user.id %}';
                }
            }
        </script>
    {% endif %}
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <div class="container">
   <a class="navbar-brand" href="#">My Site</a>
   <div>
     <ul class="navbar-nav">
         <li class="nav-item">
           <a class="nav-link" href="{% url 'article:article_list' %}">Article</a>
         </li>
         {% 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">
                 {{ user.username }}
               </a>
               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="{% url "userprofile:edit" user.id %}">User</a>
                 <a class="dropdown-item" href="{% url "userprofile:logout" %}">Exit</a>
         <a class="dropdown-item" href="#" onclick="user_delete()">Delete</a>
               </div>
           </li>
           {% else %}
               <li class="nav-item">
                   <a class="nav-link" href="{% url 'userprofile:login' %}">Login</a>
               </li>
         {% endif %}
     </ul>
   </div>
 </div>
</nav>

修改article/list.html：

{% extends "base.html" %}
{% load static %}
{% block title %}
    Article
{% endblock title %}
{% block content %}
...
<div class="pagination">
    <div class="m-auto">
        <span class="step-links">
            {% if articles.has_previous %}
                <a href="?page=1" class="btn btn-success">
                    &laquo; 1
                </a>
...
{% endblock content %}

运行服务器(python manage.py runserver)查看效果：文章页导航栏：

首页导航栏：

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-05-22，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度

Python Django个人网站搭建15-优化导航栏1

Python Django个人网站搭建15-优化导航栏1

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐