Python爬虫实战笔记_4-3 Semantic UI

2016-07-23  本文已影响157人  Sugeei

Reference:
Semantic UI

Get problem when install GULP, below are references to solve it.
learnsemantic
npm instll gulp
installing-npm-packages-globally
fixing-npm-permissions
About how to solve "Command not found"

My Pinterest layout

<div class="ui basic segment">
    <div class="ui five column grid">
        <div class="column">
            <div class="ui fluid card">
                    <div class="image" >
                        <img src="src/img/003.jpg">
                    </div>
                <div class="content">
                    <div class="header">
                        Elliot Fu
                    </div>
                    <div class="meta">
                        Friends of Veronika
                    </div>
                    <div class="description">
                         Elliot 
                    </div>
                </div>
                <div class="extra content">
                    extra
                </div>
            </div>
            <div class="ui fluid card">...</div>
            ...
        </div>
        <div class="column">
            <div class="ui fluid card">...</div>
            ...
        </div>
        <div class="column">
            <div class="ui fluid card">...</div>
            ...
        </div>
        ....
    </div>
</div>

The structure, though ugly.

Screen Shot 2016-07-23 at 10.38.02 AM.png
Define a new view in views.py

Separate all data into five parts, each for one column.

def zinterest(request):
    mdata = ZufangList.objects
    length = len(mdata)
    each = int(length /5)
    datalist = []
    for i in range(5):
        datalist.append(mdata[0 + each * i: each + each * i])
    context = {
        'zindata': mdata,
        'c1': datalist[0],
        'c2': datalist[1],
        'c3': datalist[2],
        'c4': datalist[3],
        'c5': datalist[4],
    }
    return render(request, 'zinterest.html', context)
最终效果

用从小猪爬取到的数据生成页面

页中


Screen Shot 2016-07-23 at 12.40.48 PM.png

页尾


Screen Shot 2016-07-23 at 12.52.11 PM.png
上一篇 下一篇

猜你喜欢

热点阅读