Django 快速搭建博客 第六節

上節我們用模板弄出來第一個hello world ,這節課,我們把數據庫里面真正的數據跟單篇文章的詳情頁顯示出來

一. 模板的下載

  1. 這里的模板下載指的是,下載js和css文件, 一個網站想要變得漂亮,變得可以稍微好看點,這里我們使用是bootstrap,是facebook的一套模板?適配了手機,平板,移動端。我也是因為學這個才了解到的這套框架,不過據公司前端小哥哥說,現在已經是算過時了,有很多vue,angular,react框架,不過我們現在用一下還是可以行得通的。
    下面說下模板使用步驟:

1 . https://github.com/zmrenwu/django-blog-tutorial-templates(用的追夢大哥的,這套學習系列也是基于這個自己做一個更深刻的總結)

  1. 下載完后,我們在blog/下新建一個static文件夾,在static下再新建一個blog文件夾,我們這樣子寫是按照功能static下的blog是以后還會有其他功能,或者是comments功能之類的,工作經驗會讓你懂得這是為什么的,

  2. 這時候我們把css,js文件夾都拷到static/blog下,把模板中的index.html 替換掉我們之前寫的index.html,這時候我們再啟動一下服務器會看到:

模板未做修改的index.html.png
  1. 這樣子看起來是js和css 沒有起到作用的,我們需要在index.html中head標簽中進行重新修改一下
<head>
    <title>Black &amp; White</title>

    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- css -->
    <link rel="stylesheet" >
    <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="{% 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>

還有這里的:

<!-- Mobile Menu -->
<div class="overlay overlay-hugeinc">
    <button type="button" class="overlay-close"><span class="ion-ios-close-empty"></span></button>
    <nav>
        <ul>
            <li><a href="index.html">首頁</a></li>
            <li><a href="full-width.html">博客</a></li>
            <li><a href="about.html">關于</a></li>
            <li><a href="contact.html">聯系</a></li>
        </ul>
    </nav>
</div>

<script src="{% static 'blog/js/script.js' %}"></script>

</body>
</html>

說明一下:主要用模板代碼引入,加入了{% static 'blog%}
這里的<link rel="stylesheet" href="{% static 'blog/css/pace.css' %}"> 代碼在瀏覽器中運行被替換成了:
<link rel="stylesheet" href="/static/blog/css/pace.css">

我們再運行一遍:


正常引用js,css樣式的index.html.png
  1. 我們把index.html的數據完善一下,因為現在有多個article標簽,我們這里只需要一個就可以了,然后寫上代碼:
    templates/blog/index.html
{% for post in post_list %}
  <article class="post post-{{ post.pk }}">
    ...
  </article>
{% empty %}
  <div class="no-post">暫時還沒有發布的文章!</div>
{% endfor %}

這里的post_list 是從blog/views.py index方法傳的post_list,模板代碼用for 循環取出每一個post文章,
我們再在article標簽中把內容填一下:

{% for post in post_list %}
        <article class="post post-{{ post.pk }}">
            <header class="entry-header">
                <h1 class="entry-title">
                    <a href="{{ post.get_absolute_url }}">{{ 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>
            </header>
            <div class="entry-content clearfix">
                <p>{{ post.excerpt }}</p>
                <div class="read-more cl-effect-14">
                    <a href="{{ post.get_absolute_url }}" class="more-link">繼續閱讀 <span class="meta-nav">→</span></a>
                </div>
            </div>
        </article>
    {% empty %}
        <div class="no-post">暫時還沒有發布的文章!</div>
    {% endfor %}
image.png

我們再訪問一次,瀏覽器中顯示的是: 暫時還沒有發布的文章


暫時還沒有發布的文章.png

好吧,我們應該從后臺創建admin賬號,進行文章的添加操作了。

二. admin后臺用戶的創建并發布文章

  1. 使用命令行:python manage.py createsuperuser
創建admin后臺管理賬戶.png

這里我們可以暫時不填寫email address,在填寫密碼時是看不出你填的什么的

  1. 我們創建好賬戶了,現在需要在后臺注冊我們自己創建的幾個模型
    Django 快速搭建博客 第三節
    這里有說道,在blog/admin.py 下寫上上面的代碼:
from django.contrib import admin
from .models import Post,Category,Tag

# Register your models here.

#希望能看到文章的更多信息,而不僅僅是文章
class PostAdmin(admin.ModelAdmin):
    list_display = ['title','category','created_time','modified_time','author']

# 把新注冊的PostAdmin也注冊進來
admin.site.register(Post,PostAdmin)
admin.site.register(Category)
admin.site.register(Tag)

這里寫了個class類是為了在后臺能看清楚post(文章)的具體信息,標題,標簽,時間,etc

現在我們在服務器運行,輸入:http://127.0.0.1:8000/admin/

這時候:


輸入賬號密碼界面.png

輸入完之后:


admin管理站點.png

我們新建幾篇文章試試:


admin新建文章.png

到這里,我們在刷新一下服務器,就會出現我們剛剛寫的文章標題作者什么的

ending...

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容