大家好，這是皮爺給大家帶來的最新的學習Python能幹啥？之Django教程，從零開始，到最後成功部署上線的項目。這一節，我們將對頂部的Navbar動手，將其優化。
Peekpa.com的官方地址：http://peekpa.com
皮爺的每一篇文章，都配置相對應的代碼。這篇文章的代碼Tag是Post_022
Narbar說的是這個東西：
上一節，我們對我們的頁面進行了整體的優化，其中提到了頁面頂部的Narbar的實現，當時，我們在文章裏說了有兩種方法：
- 第一種是直接寫死a標籤
- 第二種則是在後臺寫好管理程序，前端每次請求的時候，後端把標籤放到變量裏面，然後傳給前端
這兩種方式有利有弊：
- 方式一寫死，靈活性會很差；
- 方式二寫的活，但是代碼量就會上去。
有沒有一種好的方式既能靈活，又能偷懶呢？
答案是沒有，不過，在這裏，皮爺準備用一種“一半寫死，一半寫活”的方式來修改我們的Navbar，即：
- 常用的標籤，準備寫死處理，比如首頁，文章列表；
- 剩下的標籤，打算寫活，這樣日後網站要擴展或者關閉服務，都可以動態的通過後臺來操作，不需要重新發辦修改代碼。
隨着功能的開發，我們還需要做的另一件事兒就是首頁的整合。爲啥要整合首頁啊？是因爲我們的首頁現在變得越來越複雜，已經不再是之前簡簡單單的首頁了，爲了日後能夠更好的維護，我們需要將首頁以及一些公共的功能抽取出來，重新整合。
那，這種方式怎麼做呢？？
寫死的部分
我們說了，針對常用的部分，我們做寫死處理。
需要寫死的部分，要滿足條件：
- 常用
- 日後不打算大型修改
目前滿足的就是首頁還有文章。因爲這兩個分類，從網站長期來看，不需要修改。所以這部分，可以直接寫死a標籤。
{% url 'post:index' as index %}
{% url 'post:post_list' as post_list %}
<li class="nav-item mr-4">
<a class="nav-link {% if request.path == index %}active{% endif %}" href="{{ index }}">首頁</a>
</li>
<li class="nav-item mr-4">
<a class="nav-link {% if request.path == post_list %}active{% endif %}" href="{{ post_list }}">文章</a>
</li>
寫活的部分
剩下的板塊內容，我們就可以寫活了。通過後臺寫的管理界面，來管理前端頁面需要展示的東西。這個開發過程和第20篇寫的友鏈開發很像。開發流程都很像，這裏就不對開發流程做過多的介紹了。
我們就來簡單介紹一些關鍵的技術點吧。
模型創建
既然我們要動態管理標籤，那麼我們就需要創建一個應用，在應用的models.py文件裏面創建模型。這裏我們就創建一個basefunction應用，然後，針對Navbar的標籤創建模型：
class NavbarItem(models.Model):
STATUS_NORMAL = 1
STATUS_DELETE = 0
STATUS_DRAFT = 2
STATUS_ITEMS = (
(STATUS_NORMAL, '正常'),
(STATUS_DELETE, '刪除'),
(STATUS_DRAFT, '草稿'),
)
SHOW_PAGE_HOMEPAGE = 0
SHOW_PAGE_CMS = 1
SHOW_PAGE_FORUM = 2
SHOW_PAGE_ITEMS = (
(SHOW_PAGE_HOMEPAGE, '首頁'),
(SHOW_PAGE_CMS, 'CMS'),
(SHOW_PAGE_FORUM, '論壇'),
)
name = models.CharField(max_length=30)
show_name = models.CharField(max_length=30)
url_path = models.CharField(max_length=100)
create_time = models.DateTimeField(auto_now_add=True)
show_page = models.PositiveIntegerField(default=SHOW_PAGE_HOMEPAGE, choices=SHOW_PAGE_ITEMS)
status = models.PositiveIntegerField(default=STATUS_DRAFT, choices=STATUS_ITEMS)
這裏我們又新增了一個顯示頁面，用來控制這個標籤在哪裏顯示。
然後在settings.py裏面的INSTALLED_APPS配置'apps.basefunction'，這樣就表面應用以及安裝到了框架裏，接着執行$ makemigrations和$ migrate兩條命令，將模型映射到數據庫中。
後臺管理的開發
後臺管理還是和之前一樣，在cms下創建navitem，然後是管理頁面和發佈頁面。當html頁面創建好之後，就要編寫視圖函數，最後頁面基本長這兩個樣子，管理頁面：
發佈修改頁面：
接着我們就是要寫視圖函數，分別是增刪改查。具體的做法都在第20講裏面的友鏈開發中，詳細的說了，這裏就不多說了。
最後別忘了配置url：
path("dashboard/navitem/manage", views.navitem_manage_view, name="navitem_manage_view"),
path("dashboard/navitem/publish", views.navitem_publish_view, name="navitem_publish_view"),
path("dashboard/navitem/add", NavItemView.as_view(), name="navitem_add"),
path("dashboard/navitem/edit", NavItemEditView.as_view(), name="navitem_edit"),
path("dashboard/navitem/delete", NavItemDeleteView.as_view(), name="navitem_delete"),
最後實現了增刪改查，我們接下來就是要在前端來展示數據了。
前端展示
既然是可以配置的，那麼我們就需要在有Navbar的視圖函數裏面，把我們的Navbar讀取出來，然後輸送給前端。
由於之前我們把post還有list頁面，都寫在了post應用下，這樣耦合度太高，我們需要將原來的index視圖函數還有post list視圖函數作爲長期公用的方法，放到basefunction應用裏面，所以，我們頂部的Navbar視圖函數也應該和這些在一起：
{% if navitem_list %}
{% for navitem in navitem_list %}
<li class="nav-item mr-4">
<a class="nav-link {% if request.path == navitem.url_path %}active{% endif %}" href="{{ navitem.url_path }}">{{ navitem.show_name }}</a>
</li>
{% endfor %}
{% endif %}
我們在app/base下創建一個common_view.py文件，將之前獲取閱讀文章的邏輯；友鏈的邏輯全部放到這裏。再加上我們的獲取頂部Navbar的邏輯：
def get_read_most_post():
read_post = Post.objects.all().order_by('-read_num')
if len(read_post) > 5:
read_post = read_post[:5]
context = {
'read_post': read_post
}
return context
def get_exchange_link():
exchange_link = ExchangeLink.objects.filter(status=ExchangeLink.STATUS_NORMAL)
context = {
'exchange_link': exchange_link
}
return context
def get_navbar_item_homepage():
navitem = NavbarItem.objects.filter(status=NavbarItem.STATUS_NORMAL, show_page=NavbarItem.SHOW_PAGE_HOMEPAGE)
context = {
'navitem_list': navitem
}
return context
接下里就是把index搬到basefunction應用裏面：
def index(request):
top_post = Post.objects.filter(is_main_page=True).order_by('-priority')
list_post = Post.objects.filter(is_main_page=False)
context = {
'top_post': top_post,
'list_post': list_post
}
context.update(get_read_most_post())
context.update(get_exchange_link())
context.update(get_navbar_item_homepage())
return render(request, 'post/index.html', context=context)
basefunction/urls.py裏面配置好url映射：
app_name = "base"
urlpatterns = [
path("", views.index, name="index"),
]
同樣，別忘了在文章列表頁裏面，把nav_item的數據傳給前端。
這個時候，就完事兒了。我們注意到，之前我們在創建的NavItem的地址是 /list/，然後呢，我們這個時候打開首頁看一下：
然後點擊我們的動態配置002：
發現他和文章標籤都變白了，說明class裏面添加了active類。
接着，我們再來後臺，將動態配置002的狀態設置成刪除：
這個時候，再返回前端看一眼：
發現頁面沒有了！！是不是很神奇！！
通過這樣簡單的操作，我們就能控制前端頁面的展示內容了。
技術總結
最後總結一下，
Navbar的最優寫法：
- Navbar既能寫死，也能寫活，所以，我們選擇了一種半死半活的寫法，即將常用的內容寫死，不常用的內容通過後臺配置寫活；
- 創建basefunction，將公共功能抽離出來，創建NavItem模型，並開發；
- 開發NavItem的管理，和20講的友鏈開發流程一模一樣；
- 開發完成之後，就可以通過後臺的控制，來實現前端頁面展示內容的變化；
- 完畢。
獲取代碼的唯一途徑：關注『皮爺擼碼』，回覆『代碼』即可獲得。
長按下圖二維碼關注，如文章對你有啓發，歡迎在看與轉發。
