Django 3.2.5博客开发教程:实现网站首页
實現首頁模板前，我們先把共公的頁面模板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博客开发教程:实现网站首页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【收藏】maven跳过单元测试-mave
- 下一篇： Dockerfile 之 ARG指令详解