Diango博客--2.博客从“裸奔”到“有皮肤”
生活随笔
收集整理的這篇文章主要介紹了
Diango博客--2.博客从“裸奔”到“有皮肤”
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 0.思路引導
- 1.更改視圖函數，從數據庫中獲取數據
- 2.網上下載模板，添加靜態文件
- 3.修改模板Templates中css、js文件的加載路徑
- 4.修改模板，引入模板變量，獲取數據庫數據
0.思路引導
前文的Hello World 級別的視圖函數特別簡單，且毫無美感，本文有以下兩個重點：
1）將借用網上的模板文件，豐富模板內容；
2）從數據庫中獲取數據，并推送到模板文件的模板變量中。
1.更改視圖函數，從數據庫中獲取數據
文件位置：blog/views.py
from django.shortcuts import render from .models import Postdef index(request):post_list = Post.objects.all().order_by('-created_time')return render(request, 'blog/index.html', context={'post_list': post_list})2.網上下載模板，添加靜態文件
網上下載靜態文件，地址：戳這里
先在 blog 應用下建立一個 static 文件夾，然后在 static目錄下建立一個 blog 文件夾，把下載的博客模板中的 css 和 js 文件夾連同里面的全部文件一同拷貝進這個目錄；
然后將下載文件中的index.html中代替模板Templates里邊的index.html；
此時運行pipenv run python manage.py runserver，打開瀏覽器如下：
可以看到，首頁顯示的樣式非常混亂，原因是瀏覽器無法正確加載 CSS 等樣式文件。需要修改CSS 和 JavaScript 等靜態文件的加載路徑。
3.修改模板Templates中css、js文件的加載路徑
文件位置：templates/blog/index.html
+ {% load static %} <!DOCTYPE html> <html><head><title>Black & White</title><!-- meta --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- css -->- <link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">- <link rel="stylesheet" href="css/pace.css">- <link rel="stylesheet" href="css/custom.css">+ <link rel="stylesheet" href="{% static 'blog/css/bootstrap.min.css' %}">+ <link rel="stylesheet" href="{% static 'blog/css/pace.css' %}">+ <link rel="stylesheet" href="{% static 'blog/css/custom.css' %}"><!-- js -->- <script src="js/jquery-2.1.3.min.js"></script>- <script src="js/bootstrap.min.js"></script>- <script src="js/pace.min.js"></script>- <script src="js/modernizr.custom.js"></script>+ <script src="{% static 'blog/js/jquery-2.1.3.min.js' %}"></script>+ <script src="{% static 'blog/js/bootstrap.min.js' %}"></script>+ <script src="{% static 'blog/js/pace.min.js' %}"></script>+ <script src="{% static 'blog/js/modernizr.custom.js' %}"></script></head><body><!-- 其它內容 -->- <script src="js/script.js' %}"></script>+ <script src="{% static 'blog/js/script.js' %}"></script></body> </html>注意：這里 - 表示刪掉這一行，而 + 表示增加這一行。
運行服務器后，顯示效果如下：
4.修改模板，引入模板變量，獲取數據庫數據
目前我們看到的只是模板中預先填充的一些數據，我們得讓它顯示從數據庫中獲取的文章數據。下面來稍微改造一下模板：
1）在模板 index.html 中找到一系列 article 標簽：
2）將 index.html 中多余的 article 標簽刪掉，只留下一個 article 標簽，然后寫上下列代碼：
... {% for post in post_list %}<article class="post post-{{ post.pk }}">...</article> {% empty %}<div class="no-post">暫時還沒有發布的文章！</div> {% endfor %} ...3）修改article 標簽中的具體內容
<h1 class="entry-title"><a href="single.html">Adaptive Vs. Responsive Layouts And Optimal Text Readability</a> </h1> <div class="entry-meta"><span class="post-category"><a href="#">django 博客教程</a></span><span class="post-date"><a href="#"><time class="entry-date"datetime="2012-11-09T23:15:57+00:00">2017年5月11日</time></a></span><span class="post-author"><a href="#">追夢人物</a></span><span class="comments-link"><a href="#">4 評論</a></span><span class="views-count"><a href="#">588 閱讀</a></span> </div>改為
<h1 class="entry-title"><a href="single.html">{{ post.title }}</a> </h1> <div class="entry-meta"><span class="post-category"><a href="#">{{ post.category.name }}</a></span><span class="post-date"><a href="#"><time class="entry-date"datetime="{{ post.created_time }}">{{ post.created_time }}</time></a></span><span class="post-author"><a href="#">{{ post.author }}</a></span><span class="comments-link"><a href="#">4 評論</a></span><span class="views-count"><a href="#">588 閱讀</a></span> </div>標簽中
<div class="entry-content clearfix"><p>免費、中文、零基礎，完整的項目，基于最新版 django 1.10 和 Python 3.5。帶你從零開始一步步開發屬于自己的博客網站，幫助你以最快的速度掌握 django開發的技巧...</p><div class="read-more cl-effect-14"><a href="#" class="more-link">繼續閱讀 <span class="meta-nav">→</span></a></div> </div>改為：
<div class="entry-content clearfix"><p>{{ post.excerpt }}</p><div class="read-more cl-effect-14"><a href="#" class="more-link">繼續閱讀 <span class="meta-nav">→</span></a></div> </div>4）運行服務器后，顯示效果如下：
總結
以上是生活随笔為你收集整理的Diango博客--2.博客从“裸奔”到“有皮肤”的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 值传递与地址传递
- 下一篇： wordpress 评论ajax,Wor