0.2版本號加入的功能

• 以tag分類圖片
• 美化。添加瀑布流效果
• 添加tag頁和單張圖片頁
• 添加公布圖片頁

以下是具體解釋。

每添加一個功能，都要從模型。模板，視圖，路由四個方面一一改動。

模型：添加tag屬性

思考了一下依照昨天想的分類方法還是沒辦法考慮全然。於是決定用tag標簽分類法。

首先在models.py中新建一個Tag類，僅僅有一個name屬性

class Tag(models.Model):
    name=models.CharField(max_length=20,null=False,unique=True,default="")
    def
 
 __unicode__(self):
        return self.name
admin.site.register(Tag)

然後在Photo類中指定多對多屬性tags

tags=models.ManyToManyField(Tag,related_name=‘has_photos‘,blank=True)

模板：添加tag頁，photo頁和post頁

分別用來展示一個tag包括的全部圖片和單個圖片。

所以tag的展示應該和首頁是幾乎相同的、

tag.html

    {% extends "base.html" %}
    {% block title %}
 
{{tag.name}}{% endblock %}
    {% block content %}
    <div class="jumbotron">
      <h1 align="center">{{tag.name}}</h1>
    </div>
    <div class="grid-sizer"></div>
    {% for photo in tag.has_photos.all %}
    <div class="grid-item">
      <a href="p/{{photo.id}}
 
/">
    <img src="{{photo.url}}">
      </a>
      <p>{{photo.title}}</p>
      <p>{% for tag in photo.tags.all %} <a href=‘/t/{{tag.id}}/‘>{{tag.name}}</a> {% endfor %}</p>
    </div>
    {% endfor %}
    {% endblock %}

在這裏在上面設置了一個巨幕來展示tag的名稱，以下放上圖片。
tag變量由視圖傳入，然後通過tag.has_photos.all獲取該tag全部的圖片。

photo.html

    {% extends "base.html" %}
    {% block title %}{{photo.title}}{% endblock %}
    {% block content %}
    <div class="jumbotron" align="center">
      <h3>{{photo.title}}</h3>
      <img src="{{photo.url}}" >
    </div>
    <div class="grid-sizer"></div>
    {% endblock %}

傳入photo然後展示，非常easy。

post.html

post頁面須要一個表單來公布圖片信息

    {% extends "base.html" %}
    {% block title %}公布新圖片{% endblock %}
    {% block content %}
    <form class="form-horizontal panel container" method="POST" action=".">{% csrf_token %}
        <div class="form-group">
            <label  class="control-label" for="exampleReply">標題（必填。每張圖片都必須有名字哦）：</label>
            <input type=‘text‘ name=‘title‘ value="" class="form-control" id="exampleReply" placeholder=""></input>
        </div>
        <div class="form-group">
            <label  class="control-label" for="exampleReply">鏈接（不支持直接上傳，能夠先把圖片公布到堆糖等站點再把鏈接粘貼過來。謝謝合作）：</label>
            <input type=‘text‘ name=‘url‘ value="" class="form-control" id="exampleReply" placeholder=""></input>
        </div>
        <div class="form-group">
            <label  class="control-label" for="exampleReply">標簽（多個可用空格隔開）：</label>
            <input type=‘text‘ name=‘tags‘ value="" class="form-control" id="exampleReply" placeholder=""></input>
            <label  class="control-label" for="exampleReply">最好使用含義明白的名詞或形容詞。能夠指明圖片來源和圖片類型最好。
已有的便簽見下</label>
        </div>
        <div class="form-group col-md-2">
            <input type="hidden" name="next" value="/"/>
            <input type="submit" class="btn btn-lg btn-primary" value="公布"/>
        </div>
    </form>
    <ul class="list-group">
    {% for tag in tags %}
    <li class="list-group-item"><span class="badge">{{tag.}}</span>{{tag.name}}</li>
    {% endfor %}
    </ul>
    {% endblock %}

post傳遞三個參數。圖片title，圖片鏈接url，還有tag，tag以字符串形式傳遞。在視圖文件裏進行分割並和圖片綁定。

路由：添加tag,photo和post的鏈接

加了三行而已：

    url(r‘^post/$‘,post,name=‘post_page‘),
    url(r‘^t/(?P<id>\d+)/$‘,show_by_tag,name=‘tag_page‘),
    url(r‘^p/(?P<id>\d+)/$‘,show_photo,name=‘show_photo_page‘),

以id而不是名字的方式在鏈接中傳遞信息，事實上是偷個懶，直接依據id獲取對象要方便非常多。

視圖：添加三個視圖

post視圖

略微有點復雜，用於展示表單，也用於接收處理數據

    def post(request):
        if request.method==‘POST‘:
            title=request.POST.get(‘title‘)
            url=request.POST.get(‘url‘)
                tags=request.POST.get(‘tags‘).split()
            new_photo=Photo.objects.create(
                title=title,
                url=url
            )
            if tags:
                for tag in tags:
                    new_tag,dummy=Tag.objects.get_or_create(name=tag)
                    new_photo.tags.add(new_tag)#add tag to new_photo
                    new_photo.save()
            return HttpResponseRedirect(‘/‘)
        else:
            tags=Tag.objects.all()
            return render_to_response(‘post.html‘,RequestContext(request,{‘tags‘:tags}))

當傳輸方法是POST時，獲取post過來的數據，據此創建一個photo對象，然後把標簽字符串分割一個分成單個的標簽，加到photo的tags屬性裏面去，然後保存，跳轉到首頁。

當傳輸方法是GET時。直接展示表單頁面，只是這裏我在表單後面展示了全部存在的tag。

tag和photo視圖

    def show_by_tag(request,id):
        tag=Tag.objects.get(pk=id)
        return render_to_response(‘tag.html‘,RequestContext(request,{‘tag‘:tag}))

    def show_photo(request,id):
        photo=Photo.objects.get(pk=id)
        return render_to_response(‘photo.html‘,RequestContext(request,{‘photo‘:photo}))

獲取鏈接中id相應的tag和photo。然後傳遞參數就能夠了

依舊是用pythonanywhere公布的：
大聖畫廊

大聖畫廊v0.2（2015.7.17）