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
