Python 网站开发(12) -- 日志列表页面

日志列表页面

和以上其他页面的创建方法类似,在www/templates下创建blogs.html

<!-- 继承父模板 '__base__.html' -->
{% extends '__base__.html' %}
<!--jinja2 title 块内容替换-->
{% block title %}凹大卜{% endblock %}
<!--jinja2 beforehead 块内容替换-->
{% block beforehead %}

{% endblock %}

<!--jinja2 content 块内容替换-->
{% block content %}
    <!--uk-visible@m是大于中等尺寸屏幕时显示的UI-->
    <!--日志列表内容-->
    <div class="uk-grid  uk-visible@m">
    <div class="uk-width-3-4">
    {% for blog in blogs %}
        <article class="uk-article">
            <h3><a href="/blog/{{ blog.id }}">{{ blog.name }}</a></h3>
            <p class="uk-article-meta">发表于{{ blog.created_at|datetime }}</p>
            <p>{{ blog.summary }}</p>
            <p><a href="/blog/{{ blog.id }}">继续阅读 <i class="uk-icon-angle-double-right"></i></a></p>
        </article>
        <hr>
    {% endfor %}
    <!--分页导航栏,在父模板的开头定义过-->
    {{ pagination(page) }}
    </div>

    <!--uk-visible@m是大于中等尺寸屏幕时显示的UI-->
    <!--右边侧导航栏-->
    <div class="uk-width-1-4 uk-visible@m">
            <h4>站内搜索</h4>
            <FORM method=GET action="https://www.google.com/search">
                <div class="uk-inline">
                    <a class="uk-form-icon uk-form-icon-flip" href="#" uk-icon="search"></a>
                    <INPUT class="uk-input" TYPE=text name=q placeholder="站内搜索" size=31 maxlength=255 value="">
                </div>
                <font size=-1>
                    <INPUT TYPE=hidden name=domains value="aodabo.tech"><br>
                    <INPUT TYPE=hidden name=sitesearch value="aodabo.tech"></br>
                </font>
                <button TYPE=submit name=btnG class="uk-button uk-button-default"> SEARCH</button>

            </FORM>


            <h4>亲密链接</h4>
            <ul class="uk-list uk-list-divider">
                    <li><a target="_blank" href="http://www.davidzyang.com/">Secret/镜像</a></li>
                    <li><a target="_blank" href="http://lilidai-landscape.com/">Lilidai/景观</a></li>
                    <li><a target="_blank" href="https://www.jiumodiary.com/">Reading/读书</a></li>
            </ul>
    </div>
    </div>

    <!--uk-hidden@m是小于中等尺寸屏幕时显示的UI-->
    <!--移动屏幕时日志列表排版-->
    <div class="uk-hidden@m">
    {% for blog in blogs %}
        <article class="uk-article">
            <h5><a href="/blog/{{ blog.id }}">{{ blog.name }}</a></h5>
            <p class="uk-article-meta">发表于{{ blog.created_at|datetime }}</p>
            <p>{{ blog.summary }}</p>
            <p><a href="/blog/{{ blog.id }}">继续阅读 <i class="uk-icon-angle-double-right"></i></a></p>
        </article>
        <hr>
    {% endfor %}
    <!--分页导航栏,在父模板的开头定义过-->
    {{ pagination(page) }}
    </div>


{% endblock %}

[上一章:Python 网站开发(11) -- 日志编写页面]
[下一章:Python 网站开发(13) -- 日志内容详情页面]


Powered by Aodabo Copyright © 2024.

Zhiyuan Yang. All rights reserved.