首页 > 其他 > 详细

制作首页的显示列表

时间:2017-11-30 23:10:09      阅读:484      评论:0      收藏:0      [点我收藏+]

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

无序列表

<ul >

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

<!DOCTYPE html>
<html lang="en">
<head>
    {% extends ‘index.html‘ %}
    <meta charset="UTF-8">
    <title>
        {% block title %}
            首页
        {% endblock %}</title>
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for(‘static‘,filename=‘css/shouye.css‘) }}">
    {% endblock %}

</head>
<body>
{% block body %}
    <div class="wai">
        <li id="note-20391670" data-note-id="20391670" class="have-img">
            <div class="content">
                <div class="author">
                    <a class="avatar" target="_blank" href="/u/deeea9e09cbc">
                        <img class="img"
                             src="//upload.jianshu.io/users/upload_avatars/1442902/b54c023e8862.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64"
                             alt="64">
                    </a>
                    <div class="info">
                        <a class="nickname" target="_blank" href="/u/deeea9e09cbc">{{ user }}</a>
                        <span class="time" data-shared-at="2017-11-30T08:15:03+08:00">发表时间</span>

                    </div>
                </div>
                <a class="title" target="_blank" href="/p/a2f3428c3ff6">“标题”</a>
                <p class="abstract">
                    内容 内容 内容</p>
                <div class="meta">
                    <a class="collection-tag" target="_blank" href="/c/1hjajt">标签</a>
                </div>
            </div>
        </li>
    </div>
{% endblock %}

</body>
</html>

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

@app.route(‘/‘)
def base():
    context = {
        ‘user‘: ‘mis111‘,
        ‘title‘:‘硬盘不是“背锅侠”‘,
        ‘time‘: ‘2017-11-29‘,
        ‘detail‘: ‘昔日上将悬梁,今天硬盘入党。说这话的是一位资深前媒体人。 光天化日之下,硬盘竟然坏了!众目睽睽之下,硬盘竟然坏了!!大庭广众之下,硬盘竟然坏了!!! 重要的事情说三遍!!! ...‘,
        ‘biaoqian‘:‘社会新闻‘
    }
    return render_template(‘shouye.html‘,**context)

技术分享图片

 

制作首页的显示列表

原文:http://www.cnblogs.com/pys965085265/p/7931976.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!