作者: 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"> 
<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"> 
<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)后可以看见导航栏已经有图标了。 首页:
文章页面: