Python 网站开发(9) -- 构建前端

构建前端

至此,后端工作基本构建完成。接下要开始设计和编程前端页面了。为了更容易构建出复杂的HTML前端页面,我们需要一套基础的CSS框架和jQuery作为操作DOM的JavaScript库。

如今好用流行的CSS框架有很多例如:Bootstrap, Pure CSS, Bulma, Semantic UI 等。此教程会使用UIkit 作为网站的CSS 框架,具体的教程请参考官方Documentation。请下载UIkit的最新版本(3.0.0或以上,廖大用的UIkit 2.0 将不适用),将js和css文件放入www/static相应的文件目录中:

static/
+- css/
|  +- awesome.css ## 自定义的css
|  +- uikit.min.css
+- js/
   +- awesome.js ## 自定义的script
   +- jquery.min.js
   +- uikit.min.js
   +- uikit-icons.min.js
   +- sha1.min.js ## 计算HASH值
   +- vue.min.js ## Vue是一种MVVM前端框架, 我们会用它将数据及数据操作与HTML页面显示联系起来
   +- sticky.min.js ## 实现黏性布局

由于前端包含很多页面,而每个页面都会有相同的页眉和页脚,最有效率的方法就是构建可以继承的父模板, jinja2提供了很便捷方法用可替换的block来建立模板。例如最简单的父模板base.html

<!-- base.html -->
<html>
    <head>
        <title>{% block title%} 子模板可替换title内容 {% endblock %}</title>
    </head>
    <body>
        {% block content %} 子模板可替换content内容 {% endblock %}
    </body>
</html>

对于子模板a.html, b.html, c.html,只需要把父模板的titlecontent替换掉:

{% extends 'base.html' %}

{% block title %} A or B or C {% endblock %}

{% block content %}
    <h1>Chapter A or B or C</h1>
    <p>blablabla...</p>
{% endblock %}

知道了如何用jinja2, 我们就可以用UIkit框架来完成网站父模板__base__.html的编写了(请将所有的html文件存放在www/templates目录下)。代码已加入屏幕自适应,可以在移动端上凹大卜查看效果。

<!DOCTYPE html>

<!--处理分页导航栏代码-->
{% macro pagination(page) %}
    <ul class="uk-pagination uk-flex-center uk-margin-medium-top uk-margin-large-bottom">
        {% if page.has_previous %}
            <li><a href="?page={{ page.page_index - 1 }}"><span uk-pagination-previous></span></a></li>
        {% else %}
            <li class="uk-disabled"><a href="#"><span uk-pagination-previous></span></a></li>
        {% endif %}
            <li class="uk-active"><span>{{ page.page_index }}</span></li>
        {% if page.has_next %}
            <li><a href="?page={{ page.page_index + 1 }}"><span uk-pagination-next></span></a></li>
        {% else %}
            <li class="uk-disabled"><a href="#"><span uk-pagination-next></span></a></li>
        {% endif %}
    </ul>
{% endmacro %}

<!--导航页代码-->
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width,initial-scale=0.9,minimum-scale=0.9,maximum-scale=0.9,user-scalable=no">
    <meta name="wap-font-scale" content="no">
    <!--jinja2 meta块-->
    {% block meta %}<!-- block meta  -->{% endblock %}
    <!--jinja2 title块-->
    <title>{% block title %} ? {% endblock %}| AwesomeDavidBlog</title>
    <link rel="stylesheet" href="/static/css/uikit.min.css">
    <link rel="stylesheet" href="/static/css/awesome.css" />
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/sha1.min.js"></script>
    <script src="/static/js/uikit.min.js"></script>
    <script src="/static/js/icons.min.js"></script>
    <script src="/static/js/sticky.min.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/awesome.js"></script>
    <!--jinja2 beforehead块-->
    {% block beforehead %}<!-- before head  -->{% endblock %}
</head>

<!--导航页正文内容-->
<body>
    <!--"uk-"开头的都是UIkit里的组件,具体请参考UIkit官网的Documents详解-->
    <!--uk-visible@m是大于中等尺寸屏幕时显示的UI-->
    <div class="uk-margin uk-visible@m" style="background-color:rgba(100,150,185,0);">
    <div class="uk-container uk-container-medium">
    <!--导航栏UI-->
    <nav class="uk-navbar-container" uk-navbar style="background-color:rgba(255,255,255,0);">
        <div class="uk-navbar-left uk-margin-medium-top uk-margin-medium-bottom">
            <a class="uk-navbar-item uk-logo uk-margin-left" href="/">
                <!--此处uk-icon为图标,读者可以选UIkit自带icon,也可以添加自定义icon重新打包uk-icon.js,详见官网Documentation-->
                <span class="uk-icon uk-margin-small-right" uk-icon="pagekit" ratio="2"></span>
                 凹大卜  
            </a>
            <ul class="uk-navbar-nav">
                <li><a href="/"> Article | 日志</a></li>
                <li><a href="https://aodabo.tech/tags/tutorial"> Tutorial | 教程</a></li>
                <li><a href="https://aodabo.tech/tags/landscape"> Landscape | 景观</a></li>
                <li><a href="https://aodabo.tech/tags/coding"> Coding | 编程</a></li>
            </ul>
        </div>
        <div class="uk-navbar-right uk-margin-medium-top uk-margin-medium-bottom">
            <ul class="uk-navbar-nav">
            {% if __user__ %}
                <li>
                    <a href="#0"> {{ __user__.name }}</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-dropdown-nav">
                            <li><a href="/manage/"> Manage</a></li>
                            <li><a href="/signout"> Logout</a></li>
                        </ul>
                    </div>
                </li>
            {% else %}
                <li><a href="/signin"> Login</a></li>
                <li><a href="/register"> Register</a></li>
            {% endif %}
            </ul>
        </div>
    </nav>
    </div>
    </div>

    <!--uk-hidden@m是小于中等尺寸屏幕时显示的UI-->
    <nav class="uk-navbar-container uk-margin-medium uk-hidden@m" uk-navbar style="background-color:rgba(255,255,255,0);">
        <div class="uk-navbar-left">
            <a class="uk-navbar-item uk-logo" href="/">
                <span class="uk-icon uk-margin-small-right" uk-icon="pagekit" ratio="2"></span>
                 凹大卜  
            </a>
        </div>
        <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
            <li>
            <a class="uk-navbar-toggle" uk-toggle="target: #offcanvas-nav" uk-navbar-toggle-icon></a>

            <div id="offcanvas-nav" uk-offcanvas="overlay: true; flip: true">
            <div class="uk-offcanvas-bar uk-flex uk-flex-column">
            <ul class="uk-nav uk-nav-default uk-margin-auto-vertical">
                <li><a href="/"> Article | 日志</a></li>
                <li><a href="https://aodabo.tech/tags/tutorial"> Tutorial | 教程</a></li>
                <li><a href="https://aodabo.tech/tags/landscape"> Landscape | 景观</a></li>
                <li><a href="https://aodabo.tech/tags/coding"> Coding | 编程</a></li>
                {% if __user__ %}
                <li><a href="/manage/">Manage | 管理</a></li>
                <li><a href="/signout"> Logout | 注销</a></li>
                {% else %}
                <li><a href="/signin"> Login | 登陆</a></li>
                <li><a href="/register"> Register | 注册</a></li>
                {% endif %}
            </ul>
            </div>
            </div>
            </li>
            </ul>
        </div>
    </nav>


    <div class="uk-container uk-container-medium">
            <!-- jinja2 content块 -->
            {% block content %}
            {% endblock %}
    </div>

    <!-- 页面底部图标栏和网站信息 -->
    <div class="uk-margin-medium">
    <div class="uk-container uk-container-center uk-text-center">
        <p>
            <a target="_blank" href="https://github.com/yzyly1992" class="uk-icon-button uk-margin-small-right" ratio="1.1" uk-icon="github"></a>
            <a target="_blank" href="#" class="uk-icon-button uk-margin-small-right" ratio="1.1" uk-icon="instagram"></a>
            <a target="_blank" href="#" class="uk-icon-button uk-margin-small-right" ratio="1.2" uk-icon="twitter"></a>
            <a target="_blank" href="#" class="uk-icon-button uk-margin-small-right" ratio="1.2" uk-icon="google-plus"></a>
            <a target="_blank" href="#" class="uk-icon-button uk-margin-small-right" ratio="1.1" uk-icon="linkedin"></a>
        </p>
        <p class="uk-text-meta" style="line-height: 10px; padding: 10px 0; margin: 8px 0;">Powered by <a href="https://aodabo.tech">AwesomeDavidBlog!</a> Copyright &copy; 2018.</p>
        <p class="uk-text-meta" style="line-height: 0px; padding: 0px 0; margin: 0px 0;"><a href="https://aodabo.tech/" target="_blank">Zhiyuan Yang</a>. All rights reserved.</p>
    </div>
    </div>

</body>
</html>

[上一章:Python 网站开发(8) -- 搭建API]
[下一章:Python 网站开发(10) -- 用户注册和登录页面]


Powered by Aodabo Copyright © 2024.

Zhiyuan Yang. All rights reserved. Privacy | Terms