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) -- 日志内容详情页面]