python bottle 框架实战教程:配置网页样式

2015 年 5 月 27 日19:23:18 1 10,385 views

上篇python bottle 框架实战教程:配置网页模板只配置了三个模板,还剩下404.tpl模板和首页index.tpl了

404模板就不说了,此模板已上传至SVN中,页面大概是如下效果:

python bottle 框架实战教程:配置网页样式

404页面

 

index.tpl首页模板,这个模板中,不需要再写<html><head><body>这些标签了,因为它继承的base.tpl就已经包含了,这就是模板继承的方便。

  1. %rebase base title = '任务管理系统'
  2. <div class="page-body">
  3.     <div class="row">
  4.         <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
  5.             左上位置(先占位)
  6.         </div>
  7.         <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
  8.             右上位置(先占位)
  9.         </div>
  10.     </div>
  11. </div>

%rebase base 是继承base.tpl模板,在这里不需要加.tpl模板后缀名

title = '任务管理系统'  是传递给base.tpl的参数值

 

效果:

python bottle 框架实战教程:配置网页样式

任务系统首页模板

 

设置好HTML相关的模板后,就差python bottle框架的编写了

 

要让网页样式跑起来,需要在后端程序main.py中设置样式路由:

  1. #获取本脚本所在的路径
  2. pro_path = os.path.split(os.path.realpath(__file__))[0]
  3. sys.path.append(pro_path)
  4. #定义assets路径,即静态资源路径,如css,js,及样式中用到的图片等
  5. assets_path = '/'.join((pro_path,'assets'))
  6. @route('/assets/<filename:re:.*\.css|.*\.js|.*\.png|.*\.jpg|.*\.gif>')
  7. def server_static(filename):
  8.     """定义/assets/下的静态(css,js,图片)资源路径"""
  9.     return static_file(filename, root=assets_path)
  10. @route('/assets/<filename:re:.*\.ttf|.*\.otf|.*\.eot|.*\.woff|.*\.svg|.*\.map>')
  11. def server_static(filename):
  12.     """定义/assets/字体资源路径"""
  13.     return static_file(filename, root=assets_path)

assets_path 是静态资源存放的路径,这里使用了正则匹配多个文件类型,只要是在/assets/目录下面的.css.js.png.jpg,gif等,程序都会自动找到,所以相关的静态文件,必须放在/assets/目录下,否则程序找不到

 

定义首页路由和404错误

  1. @error(404)
  2. def error404(error):
  3.     """定制错误页面"""
  4.     return template('404')
  5. @route('/')
  6. def index():
  7.     """首页"""
  8.     return template('index')

 

本篇教程相关的代码已上传至SVN之中

SVN请跳转至:python bottle框架(WEB开发、运维开发)教程目录

 

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  0   博主  0   引用   1

    来自外部的引用: 1

    • python bottle框架(WEB开发、运维开发)教程 | linux系统运维