前提
我們應(yīng)該把精力放在寫Python上亮垫，而不是寫前端的樣式，所以我比較喜歡的就是拿一個(gè)模版來改一改伟骨，就可以獲得一個(gè)漂亮的界面饮潦，否則，你需要好好的了解了解html和css相關(guān)的知識(shí)携狭。
版本相關(guān)
操作系統(tǒng)：Mac OS X EI Caption
Python版本：3.4
Django版本：1.9
IDE：PyCharm
模版下載
網(wǎng)絡(luò)上應(yīng)該有很多很多的模版可以下載继蜡，可以直接找Django的源碼下載，不過我是不太推薦這樣逛腿，因?yàn)橄孪聛淼臇|西你不知道要如何實(shí)現(xiàn)它稀并。對于學(xué)習(xí)Django來說沒有什么好處，本次演示的模版下載地址：黑色質(zhì)感時(shí)間軸html5個(gè)人博客模板我個(gè)人比較喜歡這種黑色系的風(fēng)格单默。
放入Django
我目前的目錄結(jié)構(gòu)是這樣的
|-MyBlog
|---__pycache__
|-grzx
|---__pycache__
|---migrations
|-----__pycache__
|---templates
|-static
|---css
|---images
|-----index_img
|-----music_img
|---js
很簡單碘举，把所有的.html文件放到templates文件夾下，所有的css搁廓、js和img文件全部放在static文件中引颈，Django讀取靜態(tài)文件就是從static文件夾中加載。詳細(xì)的配置實(shí)在setting.py中境蜕，有興趣的可以看看Django的官方中文文檔蝙场。
數(shù)據(jù)庫系統(tǒng)
數(shù)據(jù)庫目前我弄了兩個(gè)簡單的表來處理數(shù)據(jù)
About Me
網(wǎng)名：Sven Weng | 點(diǎn)點(diǎn)寒彬
職業(yè)：測試工程師
公司：XXX
Email：XXX
這部分在model里面，用一個(gè)表來處理這部分?jǐn)?shù)據(jù)粱年，記錄這個(gè)主要是為了以后拓展使用
models.py
class UserInfo(models.Model):
nickname = models.CharField(max_length=20)
work = models.CharField(max_length=20)
company = models.CharField(max_length=50)
email = models.CharField(max_length=20)
主體部分我們可以看到有一段一段的文章售滤，元素有：標(biāo)題、圖片逼泣、部分內(nèi)容趴泌、時(shí)間着撩、（喜歡和評(píng)論）還有一個(gè)沒顯示的作者鼎姊。所以數(shù)據(jù)庫這樣寫挣输。
models.py
class BlogBody(models.Model):
blog_title = models.CharField(max_length=50)
blog_body = models.TextField()
blog_type = models.CharField(max_length=50)
blog_timestamp = models.DateTimeField()
blog_imgurl = models.CharField(max_length=50, null=True)
blog_author = models.CharField(max_length=20)
null=True表示這個(gè)字段允許空虏冻。這兩個(gè)表內(nèi)容寫好后生成數(shù)據(jù)庫捅暴。1.9生成數(shù)據(jù)庫的方式和之前不一樣妖胀，不了解的可以看看《Django1.9快速寫簡單的博客》葛闷，數(shù)據(jù)庫結(jié)構(gòu)生成之后放案，進(jìn)入admin手工插入文章內(nèi)容。
視圖函數(shù)
視圖函數(shù)中我們需要返回給index.html兩個(gè)數(shù)據(jù)庫的信息呐舔，一個(gè)是UserInfo中的我的個(gè)人信息币励，另外一個(gè)是文章的信息，代碼如下：
views.py
from django.shortcuts import render
from .models import UserInfo, BlogBody
def index(request):
userinfo = UserInfo.objects.first()
blog_body = BlogBody.objects.all()[:6]
return render(request,
'index.html',
{'userinfo': userinfo, 'blog_body': blog_body})
userinfo = UserInfo.objects.first()這句表示返回UserInfo數(shù)據(jù)庫中的第一條信息（其實(shí)也只有自己插入的一條信息）
blog_body = BlogBody.objects.all()[:6]這句表示返回BlogBody中的前6條數(shù)據(jù)珊拼。（首頁視圖有限食呻，只能展示其中的一些）
更多的數(shù)據(jù)庫操作方式請查看《執(zhí)行查詢》
地址配置
我們需要給視圖函數(shù)配置一個(gè)地址。按照《Django1.9快速寫簡單的博客》把地址鏈接到自己應(yīng)用的urls澎现。
app/urls.py
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.index, name='index'),
]
加上這句url后仅胞，我們進(jìn)入127.0.0.1:8000/app/就可以看到我們調(diào)用的index.html
模版修改
模版文件中有index.html list.html view.html這些頁面使用的都是同一個(gè)頭部和腳部。所以把這部分內(nèi)容單獨(dú)抓出來寫一個(gè)base.html文件剑辫，所有頁面都繼承這個(gè)就行了干旧。在頭部和腳部中間加上
{% block bodycontent %}
{% endblock bodycontent %}
這一段，內(nèi)容就是可以自定義的內(nèi)容妹蔽，index.html中只要輸入
{% extends "base.html" %}#繼承base.html
{% block bodycontent %}
#index的中間內(nèi)容
{% endblock bodycontent %}
這樣椎眯，頭部和尾部就是統(tǒng)一樣式了。現(xiàn)在需要修改index的內(nèi)容胳岂。
思路
首先编整，首頁中多篇文章的顯示方式是相同的，也就是說我們可以使用一個(gè)for循環(huán)來生成多個(gè)數(shù)據(jù)旦万。其次闹击，我們需要把每一篇文章的數(shù)據(jù)用數(shù)據(jù)庫的內(nèi)容來填充，最后成艘，點(diǎn)擊標(biāo)題后可以跳轉(zhuǎn)到文章詳細(xì)內(nèi)容（后續(xù)再談）
實(shí)現(xiàn)
實(shí)現(xiàn)的過程中赏半，只要填充內(nèi)容就行，不要修改html中的相關(guān)樣式參數(shù)
index.html
...
<div class="card">
<h1>About Me</h1>
<p>網(wǎng)名：{{ userinfo.nickname }}</p>
<p>職業(yè)：{{ userinfo.work }}</p>
<p>公司：{{ userinfo.company }}</p>
<p>Email：{{ userinfo.email }}</p>
<ul class="linkmore">
<li><a href="/" class="talk" title="給我留言"></a></li>
<li><a href="/" class="address" title="聯(lián)系地址"></a></li>
<li><a href="/" class="email" title="給我寫信"></a></li>
<li><a href="/" class="photos" title="生活照片"></a></li>
<li><a href="/" class="heart" title="關(guān)注我"></a></li>
</ul>
</div>
....
{% for content in blog_body %}
<li>
<div class="arrow_box">
<div class="ti"></div>
<!--三角形-->
<div class="ci"></div>
<!--圓形-->
<h2 class="title"><a href="{% url 'article' content.id%}" target="_blank">{{ content.blog_title }}</a></h2>
<ul class="textinfo">
<a href="/"><img src="{{ content.blog_imgurl }}"></a>
<p> {{ content.blog_body }}</p>
</ul>
<ul class="details">
<li class="likes"><a href="#">10</a></li>
<li class="comments"><a href="#">34</a></li>
<li class="icon-time"><a href="#">{{ content.blog_timestamp }}</a></li>
</ul>
</div>
<!--arrow_box end-->
</li>
{% endfor %}
···
修改完成后淆两，就可以看到最終的樣式了断箫。
