网站搭建笔记精简版---廖雪峰WebApp实战-Day8:构建前端笔记

最新推荐文章于 2020-07-10 05:25:17 发布

三川水祭

最新推荐文章于 2020-07-10 05:25:17 发布

阅读量306

点赞数

分类专栏： web学习文章标签： web学习

本文链接：https://blog.csdn.net/suyiwei5993/article/details/83549918

版权

web学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍如何使用CSS框架美化MVC框架的界面，通过下载并应用UIkit等资源，实现了网页的视觉升级。同时，文章深入探讨了Jinja2模板引擎的使用，演示了如何创建可复用的基模板以及继承机制，有效减少了重复工作。

摘要由CSDN通过智能技术生成

前面已经构建好MVC，可以进行可视化，但是，老丑了，因此需要CSS等进行美化一下。这样形容一下，html为网页的骨架，JavaScript为网页的肌肉，css为网页的衣服。

模板下载

感谢强大的互联网，我们可以通过这里找到已经写好的强大的CSS框架。它具备完善的响应式布局，漂亮的UI，以及丰富的HTML组件，让我们能轻松设计出美观而简洁的页面。
下载后，看了下与廖老师的代码对比，有点不一样呀，就直接下载了老师的github源文件，将static里的东西给复制过来。

模板生成

生成的许多前端网页html模板，当需要修改页眉页脚时候，需要所有的一个一个修改，老麻烦了，因此jinjia2的模板解决了这个问题，它具有“继承”的方式，实现模板的复用更简单。

base.html父模板编写

接下来我们基于uikit这个css框架写一下templates文件夹中的基网页的模板__base__.html。之后的各个子网页均基于这个网页派生出来的。
“继承”模板的方式是通过编写一个“父模板”，在父模板中定义一些可替换的block（块）。然后，编写多个“子模板”，每个子模板都可以只替换父模板定义的block。当用的时候或做项目的时候直接在这个页面上修改即可。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    # 用于子页面定义一些meta，例如rss feed
    {% block meta %}<!-- block meta  -->{% endblock %}
    # 用于子页面覆盖当前页面的标题
    <title>{% block title %} ? {% endblock %} - Awesome Python Webapp</title>
    <link rel="stylesheet" href="/static/css/uikit.min.css">
    <link rel="stylesheet" href="/static/css/uikit.gradient.min.css">
    <link rel="stylesheet" href="/static/css/awesome.css" />
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/md5.js"></script>
    <script src="/static/js/uikit.min.js"></script>
    <script src="/static/js/awesome.js"></script>
    # 子页面可以在<head>标签关闭前插入JavaScript代码
    {% block beforehead %}<!-- before head  -->{% endblock %}
</head>
<body>
    <nav class="uk-navbar uk-navbar-attached uk-margin-bottom">
        <div class="uk-container uk-container-center">
            <a href="/" class="uk-navbar-brand">Awesome</a>
            <ul class="uk-navbar-nav">
                <li data-url="blogs"><a href="/"><i class="uk-icon-home"></i> 日志</a></li>
                <li><a target="_blank" href="#"><i class="uk-icon-book"></i> 教程</a></li>
                <li><a target="_blank" href="#"><i class="uk-icon-code"></i> 源码</a></li>
            </ul>
            <div class="uk-navbar-flip">
                <ul class="uk-navbar-nav">
                {% if user %}
                    <li class="uk-parent" data-uk-dropdown>
                        <a href="#0"><i class="uk-icon-user"></i> {{ user.name }}</a>
                        <div class="uk-dropdown uk-dropdown-navbar">
                            <ul class="uk-nav uk-nav-navbar">
                                <li><a href="/signout"><i class="uk-icon-sign-out"></i> 登出</a></li>
                            </ul>
                        </div>
                    </li>
                {% else %}
                    <li><a href="/signin"><i class="uk-icon-sign-in"></i> 登陆</a></li>
                    <li><a href="/register"><i class="uk-icon-edit"></i> 注册</a></li>
                {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <div class="uk-container uk-container-center">
        <div class="uk-grid">
            # 子页面的content布局和内容
            <!-- content -->
            {% block content %}
            {% endblock %}
            <!-- // content -->
        </div>
    </div>

    <div class="uk-margin-large-top" style="background-color:#eee; border-top:1px solid #ccc;">
        <div class="uk-container uk-container-center uk-text-center">
            <div class="uk-panel uk-margin-top uk-margin-bottom">
                <p>
                    <a target="_blank" href="#" class="uk-icon-button uk-icon-weibo"></a>
                    <a target="_blank" href="#" class="uk-icon-button uk-icon-github"></a>
                    <a target="_blank" href="#" class="uk-icon-button uk-icon-linkedin-square"></a>
                    <a target="_blank" href="#" class="uk-icon-button uk-icon-twitter"></a>
                </p>
                <p>Powered by <a href="#">Awesome Python Webapp</a>. Copyright &copy; 2014. [<a href="/manage/" target="_blank">Manage</a>]</p>
                <p><a href="http://www.liaoxuefeng.com/" target="_blank">www.liaoxuefeng.com</a>. All rights reserved.</p>
                <a target="_blank" href="#"><i class="uk-icon-html5" style="font-size:64px; color: #444;"></i></a>
            </div>
        </div>
    </div>
</body>
</html>

blogs.html

接下来将上述__base__.html模板继承一个blogs.html出来，即将block替代。

# 强调继承自哪里
{% extends '__base__.html' %}
# 仅向block中的内容
{% block title %}日志{% endblock %}

{% block content %}

    <div class="uk-width-medium-3-4">
        {% for blog in blogs %}
            <article class="uk-article">
                <h2><a href="/blog/{{ blog.id }}">{{ blog.name }}</a></h2>
                # 若不加datetime则会显示浮点的时间，datetime在app.py中定义
                # 因此通过jinja2的filter（过滤器），把一个浮点数转换成日期字符串。
                <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 class="uk-article-divider">
        {% endfor %}
    </div>

    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-header">
            <h3 class="uk-panel-title">友情链接</h3>
            <ul class="uk-list uk-list-line">
                <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">编程</a></li>
                <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">读书</a></li>
                <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">Python教程</a></li>
                <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">Git教程</a></li>
            </ul>
        </div>
    </div>

{% endblock %}

app代码更改

在app.py中增加如下代码。

def datetime_filter(t):
    delta = int(time.time() - t)
    if delta < 60:
        return '1分钟前'
    if delta < 3600:
        return '%s分钟前' % (delta // 60)
    if delta < 86400:
        return '%s小时前' % (delta // 3600)
    if delta < 604800:
        return '%s天前' % (delta // 86400)
    dt = datetime.fromtimestamp(t)
    return '%s年%s月%s日' % (dt.year, dt.month, dt.day)

...
init_jinja2(app, filters=dict(datetime=datetime_filter))
...

改后的app.py代码如图
app.py更改