效果

实现

滑屏开源库

flask模板文件

使用上面的fullpage库制作好H5页面后，需要整合到flask里面。 添加一条路由返回渲染的Jinja模板，这个就不多说了。

@app.route(/project)
def project():
    ........
    return render_template(project/index.html, project=project)

这里要考虑模板中引入的js和css文件的打包发布问题： 1.js、css文件需要合并压缩，缩短加载时间。 2.当js、css内容改变后，需要强制客户端刷新缓存。 为此使用了，这个库帮助开发者把webassets工具整合到Flask项目中。使用起来也很简单：

1.安装

$ pip install Flask-Assets 为了压缩css和js文件，还要安装如下两个库

$ pip install cssmin
$ pip install jsmin

2.初始化（proxy方式）

from flask.ext.assets import Bundle, Environment
assets = Environment()

def create_app(config_name):
    ......
    assets.init_app(app)

    bundles = {
        fullpage_css: Bundle(
            css/fullpage.css,
            bower_components/animate.css/animate.min.css,
            output=gen/fullpage.css,
            filters=cssmin),

        fullpage_js: Bundle(
            js/fullpage.js,
            output=gen/fullpage.js,
            filters=jsmin),
    }

    assets.register(bundles)

3.在模板文件中引用

{% assets "fullpage_css" %}
    <link rel="stylesheet" href="{
          
   { ASSET_URL }}" />
{% endassets %} 

{% assets "fullpage_js" %}
    <script type="text/javascript" src="{
          
   { ASSET_URL }}"></script>
{% endassets %}

当访问页面时，flask-assets会检查文件变化，将css和js合并压缩后供前端使用。 可以看到，flask-assets给文件加上了版本号，当文件内容变化时，会自动更新版本号，强制客户端刷新缓存。

二维码生成

效果如下，现在只需要扫一扫就可以把自己的项目分享到朋友圈了。骚年，秀起来！

总结

使用一下组件完成该功能： 1.：滑屏组件 2.：静态文件打包工具 3.：二维码生成工具

效果 实现 滑屏开源库 flask模板文件 使用上面的fullpage库制作好H5页面后，需要整合到flask里面。 添加一条路由返回渲染的Jinja模板，这个就不多说了。 @app.route(/project) def project(): ........ return render_template(project/index.html, project=project) 这里要考虑模板中引入的js和css文件的打包发布问题： 1.js、css文件需要合并压缩，缩短加载时间。 2.当js、css内容改变后，需要强制客户端刷新缓存。 为此使用了，这个库帮助开发者把webassets工具整合到Flask项目中。使用起来也很简单： 1.安装 $ pip install Flask-Assets 为了压缩css和js文件，还要安装如下两个库 $ pip install cssmin $ pip install jsmin 2.初始化（proxy方式） from flask.ext.assets import Bundle, Environment assets = Environment() def create_app(config_name): ...... assets.init_app(app) bundles = { fullpage_css: Bundle( css/fullpage.css, bower_components/animate.css/animate.min.css, output=gen/fullpage.css, filters=cssmin), fullpage_js: Bundle( js/fullpage.js, output=gen/fullpage.js, filters=jsmin), } assets.register(bundles) 3.在模板文件中引用 {% assets "fullpage_css" %} {% endassets %} {% assets "fullpage_js" %} {% endassets %} 当访问页面时，flask-assets会检查文件变化，将css和js合并压缩后供前端使用。 可以看到，flask-assets给文件加上了版本号，当文件内容变化时，会自动更新版本号，强制客户端刷新缓存。 二维码生成 效果如下，现在只需要扫一扫就可以把自己的项目分享到朋友圈了。骚年，秀起来！ 总结 使用一下组件完成该功能： 1.：滑屏组件 2.：静态文件打包工具 3.：二维码生成工具