實現首頁模板前，我們先把共公的頁面模板base.html調用好。首先我們先看導航部分，除開首頁和關于博主之外，其它的其實是我們的文章分類名。如圖：

我們只需要在首頁視圖函數里，查詢出所有的文章分類名稱，然后在模板頁面上展示就行。

blog/views.pyfrom .models import Category #從models里導入Category類 def index(request):allcategory = Category.objects.all()#通過Category表查出所有分類#把查詢出來的分類封裝到上下文里context = {'allcategory': allcategory,}return render(request, 'index.html', context)#把上下文傳到index.html頁面

打開base.html頁面，我們找到導航代碼：

templates/base.html<nav class="nav fl"><ul id="fix-list" class="fix-list clearfix"><li id="menu-item-24086" class="menu-item"><a href="/">首頁</a></li><li id="menu-item-117720" class="menu-item"><a href="/list-1.html">Django</a></li><li id="menu-item-117720" class="menu-item"><a href="/list-2.html">Python</a></li><li id="menu-item-117720" class="menu-item"><a href="/list-3.html">Linux</a></li><li id="menu-item-117720" class="menu-item"><a href="/list-4.html">Mysql</a></li><li id="menu-item-117720" class="menu-item"><a href="/list-5.html">運維知識</a></li><li id="menu-item-117720" class="menu-item"><a href="/list-6.html">我的日記</a></li><li id="menu-item-24086" class="menu-item"><a href="/about/">關于博主</a></li></ul> </nav>

里面的

• 標簽只留下首頁和關于博主的：
  <nav class="nav fl"><ul id="fix-list" class="fix-list clearfix"><li id="menu-item-117720" class="menu-item"><a href="/">首頁</a></li><li id="menu-item-117720" class="menu-item"><a href="/about/">關于博主</a></li></ul> </nav>

  然后中間部分加入如下代碼：

  {% for category in allcategory %} <li id="menu-item-117720" class="menu-item"><a href="{% url 'index' %}list-{{ category.id }}.html">{{ category.name }}</a></li> {% endfor %}

  最終代碼：

  templates/base.html<nav class="nav fl"><ul id="fix-list" class="fix-list clearfix"><li id="menu-item-117720" class="menu-item"><a href="/">首頁</a></li>{% for category in allcategory %}<li id="menu-item-117720" class="menu-item"><a href="{% url 'index' %}list-{{ category.id }}.html">{{ category.name }}</a></li>{% endfor %}<li id="menu-item-117720" class="menu-item"><a href="/about/">關于博主</a></li></ul> </nav>

  代碼里面我們通過下面的代碼遍歷輸出變量的內容：

  {% for category in allcategory %}

  文章分類名我們通過下面的代碼可得到：

  {{ category.name }}

  點擊文章分類名，就是進入到各個文章分類的列表頁面，結合myblog/urls.py里的列表頁面URL list-int:lid.html是由list-和分類ID組成，所以完整的URL是：

  網站首頁(網站域名)/list-分類ID.html

  在模板頁面調用url別名的代碼是：

  {% url 'xxx' %} #xxx為別名 網站首頁就是{% url 'index' %}

  分類ID通過下面的代碼可得到：

  {{ category.id }}

  為什么可以通過這樣的方式可以查到分類ID，之前的文章有提到：體驗數據查詢

  最后得到完整的列表URL代碼如下：

  {% url 'index' %}list-{{ category.id }}.html

  弄好之后，然后我們刷新頁面就能看到效果。

  首頁幻燈圖的實現

  實現前，要先添加一些數據**。**然后在首頁視圖函數里查詢出所有的幻燈圖的數據：

  blog/views.pyfrom blog.models import Category, Banner #把Banner表導入 def index(request):allcategory = Category.objects.all()banner = Banner.objects.filter(is_active=True)[0:4]#查詢所有幻燈圖數據，并進行切片context = {'allcategory': allcategory,'banner':banner, #把查詢到的幻燈圖數據封裝到上下文}return render(request, 'index.html', context)

  提示：我們通過filrter查詢出所有激活的is_active幻燈圖數據，并進行切片，只顯示4條數據。

  首頁index.html文件里，找到幻燈圖代碼，里面的

• 標簽只保留一個，然后修改成如下代碼“
  templates/index.html{% for b in banner %} <li class="slide fix-width"><a href="{{ b.link_url }}" title="{{ b.text_info }}"><img src="{% url 'index' %}media/{{ b.img }}" srcset="{% url 'index' %}media/{{ b.img }}" alt="{{ b.text_info }}"class="wp-post-image" width="370" height="290"/></a><span class="text ani-left"><strong>{{ b.text_info }}</strong></span></li> {% endfor %}

  其中{{ b.link_url }}表示圖片鏈接的URL，{{ b.text_info }}為圖片的標題描述，{{ b.img }}為上傳的圖片名，完整的圖片路徑由{% url ‘index’ %}media/{{ b.img }}組成。media/就是我們之前設置的圖片上傳的目錄。

  首頁推薦閱讀實現

  我們在發布文章的時候，要先在推薦位里選擇好要推薦的文章，然后再進行查詢展現。

  首頁視圖函數里：

  blog/views.py from blog.models import Category,Banner, Article #我們查詢的是進行推薦的文章，所以要導入文章Article表 def index(request):....tui = Article.objects.filter(tui__id=1)[:3]#查詢推薦位ID為1的文章context = {...'tui':tui,}return render(request, 'index.html', context)

  **提示：**filter查詢條件里的tui__id=1，表示為通過文章里的外鍵推薦位進行篩選。

  首頁index.html頁面，找到推薦閱讀里面三個結構相同的代碼，保留一個，然后修改成：

  templates/index.html{% for t in tui %} <div class="caption"><h4><a href="{% url 'index' %}show-{{ t.id }}.html" title="{{ t.title }}"rel="bookmark">{{ t.title }}</a></h4><p>{{ t.excerpt|truncatechars:"80" }}</p></div> {% endfor %}

  里面要留意的是文章的URL的構成，這和列表URL一樣，這里不重復，{{ t.excerpt|truncatechars:“80” }}這個代碼表示截取文章摘要的80個字符。

  首頁最新文章實現

  首頁最新文章，調用的是所有分類里的最新文章，這里只調用10篇：

  blog/views.pydef index(request):...allarticle = Article.objects.all().order_by('-id')[0:10]context = {...'allarticle': allarticle,}return render(request, 'index.html', context)

  里面的.order_by(’-id’)為數據排序方式，[0:10]為只獲取10索引切片，只獲取最新的10篇文章。

  首頁最新文章的，只保留一個文章展示代碼，然后修改為：

  templates/index.html{% for a in allarticle %}<div class="article-box clearfix excerpt-1"><div class="col-md-4"><div class="thumbnail"><a href="{% url 'index' %}show-{{ a.id }}.html" title="{{ a.title }}"><img src="media/{{ a.img }}"srcset="media/{{ a.img }}"alt="{{ a.title }}" class="wp-post-image" width="240" height="160"/></a></div></div><div class="col-md-8"><h2><a href="{% url 'index' %}show-{{ a.id }}.html" target="_blank"title="{{ a.title }}">{{ a.title }}</a></h2><p class="txtcont hidden-xs"><a href="{% url 'index' %}show-{{ a.id }}.html" target="_blank"title="{{ a.title }}">{{ a.excerpt }}</a></p><div class="meta"><span class="label label-info"><ahref="{% url 'index' %}list-{{ a.category.id }}.html">{{ a.category.name }}</a></span><time class="item"><i class="fa fa-clock-o"></i>{{ a.created_time|date:"Y年m月d日" }}</time></div></div></div> {% endfor %}

  **提示：**里面分類名和分類ID是文章里的外鍵字段，所以我們是通過代碼{{ a.category.name }}和{{ a.category.id}}這樣的方式進行調用的。時間字段我們進行格式化，然后通過年月日的形式展現，{{ a.created_time|date:“Y年m月d日” }}。

  熱門文章排行實現

  熱門文章的實現有多種方式，如果你想要在上面展示自己指定的文章，你可以在后臺通過再添加一個推薦位來實現，也可以查詢所有文章，通過文章瀏覽數進行倒序展示，也可以查詢數據庫通過隨機的方式展示。代碼分別如下：

  blog/views.pydef index(request):...#hot = Article.objects.all().order_by('?')[:10]#隨機推薦#hot = Article.objects.filter(tui__id=3)[:10] #通過推薦進行查詢，以推薦ID是3為例hot = Article.objects.all().order_by('views')[:10]#通過瀏覽數進行排序context = {... 'hot':hot,}return render(request, 'index.html', context)

  熱門文章推薦代碼里，

  標志對里，找到
• 標簽，只保留一個，然后修改成如下代碼：
  templates/index.html{% for h in hot %} <li><a href="{% url 'index' %}show-{{ h.id }}.html" title="{{ h.title }}">{{ h.title }}</a></li> {% endfor %}

  右側熱門推薦實現

  打側的熱門推薦代碼在right.html里，所以我們需要修改right.html頁面，這個地方我們是通過后臺的推薦位ID為2實現的，我們在發文章的時候，進行推薦就可以了。查詢代碼：

  blog/views.pydef index(request):...remen = Article.objects.filter(tui__id=2)[:6]context = {...'remen':remen,}return render(request, 'index.html', context)

  打開right.html頁面，修改對應代碼：

  templates/right.html<ul class="post-hot clearfix"> {% for k in remen %}<li><div class="img"><a href="{% url 'index' %}show-{{ k.id }}.html" title="{{ k.title }}"><img src="{% url 'index' %}media/{{ k.img }}"srcset="{% url 'index' %}media/{{ k.img }}" alt="{{ k.title }}" class="wp-post-image" width="120" height="80"/></a></div><div class="text"><a href="{% url 'index' %}show-{{ k.id }}.html" title="{{ k.title }}"target="_blank">{{ k.title }}</a></div></li> {% endfor %} </ul>

  右側所有標簽實現

  blog/views.pyfrom blog.models import Category,Banner, Article, Tag #導入標簽表 def index(request):...tags = Tag.objects.all()context = {...'tags':tags,}return render(request, 'index.html', context)

  找到標簽代碼，修改為：

  templates/right.html<div class="tags">{% for tag in tags %}<a href="{% url 'index' %}tag/{{ tag.name }}">{{ tag.name }}</a>{% endfor %} </div>

  右側的二維碼圖片就簡單了，我們修改一下路徑就行。留意，加之前我們要在right.html頭部加入{% load staticfiles %}：

  templates/right.html{% load staticfiles %} #上面的代碼要加在第一行<img src="static/picture/weixinqr.jpg" alt="微信二維碼" width="160" height="160"> 修改為： <img src="{% static "picture/weixinqr.jpg" %}" alt="微信二維碼" width="160" height="160">

  尾部的友情鏈接實現：

  blog/views.py from blog.models import Category,Banner, Article, Tag, Link #導入友情鏈接表Linkdef index(request):...link = Link.objects.all()context = {...'link':link,}return render(request, 'index.html', context)

  找到友情鏈接代碼，修改為：

  templates/index.html<ul class="clears">{% for l in link %}<li><a href="{{ l.linkurl }}" target="_blank">{{ l.name }}</a></li>{% endfor %} </ul>

  全部修改好之后，刷新頁面，就能看到效果。

  參考鏈接：Django博客開發教程:實現網站首頁

總結

以上是生活随笔為你收集整理的Django 3.2.5博客开发教程:实现网站首页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。