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

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

• Firstly, <div class="ui basic segment">.
• Secondly, <div class="ui five column grid">, use a 'five column grid' to make the page show five columns in a row.
• Then, there are five <div class="column"> to represent each column.
• Lastly, in each column, put numbers of <div class="ui fluid card"> to make it the layout of 'pinterest'

<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