Django文章欄目前端模板
阿新 • • 發佈：2018-12-30
一 編輯網頁頭部mysite/templates/article/header.html
{% load staticfiles %} <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <img width="100px" src="{% static 'images/logo.png' %}"> </div> <div> <ul class="nav navbar-nav" role="tablist"> <li><a href="{% url 'article:article_column' %}">文章管理</a></li> </ul> <ul class="nav navbar-nav navbar-right" style="margin-right:10px"> <li><a href="{% url 'blog:blog_title' %}">網站首頁</a></li> <li>{{ user.username }}</li> <li><a href="{% url 'account:user_logout' %}">Logout</a></li> </ul> </div> </nav> </div>
二 編輯左側網頁mysite/templates/article/leftslider.html
<div class="bg-info"> <div class="text-center" style="margin-top: 5px;"> <p><h4>文章管理</h4></p> <p><a href="{% url 'article:article_column'%}">欄目管理</a></p> </div> </div>
三 編輯組裝後的base頁mysite/templates/article/base.html
{% load staticfiles %} <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{% block title %}{% endblock %}</title> <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}"> </head> <body> <div class="container"> {% include 'article/header.html' %} <div class="col-md-2"> {% include 'article/leftslider.html' %} </div> <div class="col-md-10"> {% block content %} {% endblock %} </div> <div> {% include 'footer.html' %} </div> </div> </body> </html>
四 編輯mysite/templates/article/column/article_column.html
{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}article column{% endblock %} {% block content %}
<div>
<p class="text-right"><button class="btn btn-primary">add column</button>
</p>
<table class="table table-hover">
<tr>
<td>序號</td>
<td>欄目名稱</td>
<td>操作</td>
</tr>
{% for column in columns %}
<tr>
<!--forloop.counter迴圈次數計數器，從1開始-->
<td>{{ forloop.counter }}</td>
<td>{{ column.column }}</td>
<td>
</td>
</tr>
{% empty %}
<p>還沒有設定欄目，太懶了。</p>
{% endfor %}
</table>
</div>
{% endblock %}五 測試一下效果
