Python Django个人网站搭建17-优化导航栏2

zifan

发布于 2021-12-14 12:36:05

5210

发布于 2021-12-14 12:36:05

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

首先选择一个网站的logo，命名为my_ico.jpg并放入static/img文件夹里，并修改base.html：

{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="Shortcut Icon" href="/img/my_ico.jpg" type="image/x-icon">
    ...
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    {% include 'header.html' %}
    {% block content %}{% endblock content %}
    {% include 'footer.html' %}
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>
    ...
</body>
</html>

再修改basee.html：

{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="Shortcut Icon" href="/img/my_ico.jpg" type="image/x-icon">
    ...
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</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>
    ...
</body>
</html>

接着修改header.html：

...
<style>
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-blue { color: #66ccff; }
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<img src="/img/my_ico.jpg" height="36" width="36">&emsp;
 <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="/"><i class="material-icons md-18 md-blue">home</i>Home</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="{% url 'article:article_list' %}"><i class="material-icons md-18">book</i>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">
               ...
     </ul>
   </div>
 </div>
</nav>

然后修改headerr.html：

...
<style>
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-blue { color: #66ccff; }
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<img src="/img/my_ico.jpg" height="36" width="36">&emsp;
<div class="container">
 <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' %}"><i class="material-icons md-18">book</i>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>
               ...
     </ul>
   </div>
 </div>
</div>
</nav>

最后运行服务器(python manage.py runserver)后可以看见导航栏已经有图标了。首页：