制作首页的显示列表

Posted 2020-10-16 陌上寻

1. 在首页添加显示问答的列表，并定义好相应的样式。

无序列表

<ul >

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

 1 <div id="list-container">
 2       <!-- 文章列表模块 -->
 3       <ul class="note-list" infinite-scroll-url="/">
 4           
 5 
 6 <li  data-note-id="20398412" class="have-img">
 7     <a class="wrap-img" href="#" target="_blank">
 8       <img class="  img-blur-done" src="#" alt="120">
 9     </a>
10   <div class="content">
11     <div class="author">
12       <a class="avatar" target="_blank" href="#">
13         <img src="#" alt="64">
14 </a>      <div class="info">
15         <a class="nickname" target="_blank" href="#">井底女蛙</a>
16         <span class="time" data-shared-at="2017-11-30T06:48:18+08:00">14小时前</span>
17       </div>
18     </div>
19     <a class="title" target="_blank" href="#">女蛙呱呱｜第一课：六岁以前的性教育</a>
20     <p class="abstract">
21       公交车上，爷爷抱着孙子，一边说笑，一边玩弄孩子的生殖器；马路边会看到幼年的孩子当众便溺；几天前共央君的热文《作为95后，可我对性知识了解的少之又少》……所有这些让我羞愧，因为...
22     </p>
23     <div class="meta">
24         <a class="collection-tag" target="_blank" href="#">故事</a>
25       <a target="_blank" href="#">
26         <i class="iconfont ic-list-read"></i> 12895
27 </a>        <a target="_blank" href="#">
28           <i class="iconfont ic-list-comments"></i> 190
29 </a>      <span><i class="iconfont ic-list-like"></i> 920</span>
30         <span><i class="iconfont ic-list-money"></i> 10</span>
31     </div>
32   </div>
33 </li>
34 
35 
36 <li data-note-id="20401866" class="have-img">
37     <a class="wrap-img" href="#" target="_blank">
38       <img class="  img-blur-done" src="#" alt="120">
39     </a>
40   <div class="content">
41     <div class="author">
42       <a class="avatar" target="_blank" href="#">
43         <img src="#" alt="64">
44 </a>      <div class="info">
45         <a class="nickname" target="_blank" href="#">{{user}}</a>
46         <span class="time" data-shared-at="2017-11-30T09:20:19+08:00">{{time}}</span>
47       </div>
48     </div>
49     <a class="title" target="_blank" href="#">{{title}}</a>
50     <p class="abstract">
51       {{abstract}}
52     </p>
53     <div class="meta">
54         <a class="collection-tag" target="_blank" href="#">{{classlry}}</a>
55       <a target="_blank" href="#">
56         <i class="iconfont ic-list-read"></i> 1210
57 </a>        <a target="_blank" href="#">
58           <i class="iconfont ic-list-comments"></i> 6
59 </a>      <span><i class="iconfont ic-list-like"></i> 76</span>
60     </div>
61   </div>
62 </li>
63 
64 
65      </ul>
66      <!-- 文章列表模块 -->
67 </div>

 

 

 

2. 用字典向index.html传递参数。

 

1 @app.route(‘/shouye/‘)
2 def shouye():
3      context={
4         ‘user‘:‘麻雀/Sparrow:‘,
5         ‘title‘: ‘时尚谍战偶像民国大戏‘,
6         ‘time‘: ‘2016年9月5日‘,
7         ‘adbstras‘:‘《麻雀》在逐渐推进中设置了环环相扣的悬念，一波未平一波又起，紧凑的叙事节奏渲染出惊心动魄的紧张氛围，精彩好看。‘}
8      return render_template(‘shouye.html‘,**context)