A-A+

python bottle 框架实战教程:配置基础模板

2015年05月27日 bottle 评论 2 条 阅读 8,032 views 次

 

配置框架

在main.py当前目录下创建views目录,并在views模板目录中,先写好五个HTML模板页:基础模板(base.tpl),菜单模板(menu.tpl),顶部模板(top.tpl),错误页面(404.tpl),首页模板(index.tpl)

如果对模板不熟悉的,请查以下模板教程

python bottle 框架基础教程:模板使用

python bottle 框架基础教程:模板语法

python bottle 框架基础教程:模板继承

 

base.tpl模板代码:

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>{{get('title','任务管理系统')}}</title>    <!--获取子模板传递进来的值-->  
  6.     <meta name="description" content="任务管理系统" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  9.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10.     <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
  11.     <!--Basic Styles-->
  12.     <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
  13.     <link href="assets/css/bootstrap-table.css" rel="stylesheet" />
  14.     <link id="bootstrap-rtl-link" href="" rel="stylesheet" />
  15.     <link href="assets/css/font-awesome.min.css" rel="stylesheet" />
  16.     <link href="assets/css/weather-icons.min.css" rel="stylesheet" />
  17.     <!--Fonts
  18.     <link href="http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300" rel="stylesheet" type="text/css">
  19.     <link href='http://fonts.useso.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
  20.     -->
  21.     <!--Beyond styles-->
  22.     <link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet" type="text/css" />
  23.     <link href="assets/css/demo.min.css" rel="stylesheet" />
  24.     <link href="assets/css/typicons.min.css" rel="stylesheet" />
  25.     <link href="assets/css/animate.min.css" rel="stylesheet" />
  26.     <link id="skin-link" href="" rel="stylesheet" type="text/css" />
  27.     <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
  28.     <script src="assets/js/skins.min.js"></script>
  29.     <script src="assets/js/jquery-2.0.3.min.js"></script>
  30.     <script src="assets/js/bootstrap.min.js"></script>
  31.     <script src="assets/js/bootstrap-table.js"></script>
  32.     <script src="assets/js/slimscroll/jquery.slimscroll.min.js"></script>
  33.     <script src="assets/js/bootstrap-table-zh-CN.js"></script>
  34.     <style type="text/css">
  35.         input[type=checkbox]{
  36.             opacity : 1;
  37.             position: static;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <!-- Navbar -->
  43.     <div class="navbar">
  44.         % include('top.tpl')  <!--加载top(网站顶部页)模板-->  
  45.     </div>
  46.     <!-- /Navbar -->
  47.     <!-- Main Container -->
  48.     <div class="main-container container-fluid">
  49.         <div class="page-container">
  50.           % include('menu.tpl')  <!--menu(菜单)模板-->  
  51.             <div class="page-content">
  52.                 <!-- Page Breadcrumb -->
  53.                 <div class="page-breadcrumbs">
  54.                     <ul class="breadcrumb">
  55.                         <li>
  56.                             <i class="fa fa-home"></i>
  57.                             <a href="#">首页</a>
  58.                         </li>
  59.                         <li class="active">大厅</li>
  60.                     </ul>
  61.                 </div>
  62.                 <!-- /Page Breadcrumb -->
  63.                 <!-- Page Header -->
  64.                 <div class="page-header position-relative">
  65.                     <div class="header-title">
  66.                         <h1>
  67.                             {{get('position',' ')}}  <!--获取子模板传递进来的值-->  
  68.                         </h1>
  69.                     </div>
  70.                     <!--Header Buttons-->
  71.                     <div class="header-buttons">
  72.                         <a class="sidebar-toggler" href="#">
  73.                             <i class="fa fa-arrows-h" title="宽屏"></i>
  74.                         </a>
  75.                         <a class="refresh" id="refresh-toggler" href="">
  76.                             <i class="glyphicon glyphicon-refresh" title="刷新"></i>
  77.                         </a>
  78.                         <a class="fullscreen" id="fullscreen-toggler" href="#">
  79.                             <i class="glyphicon glyphicon-fullscreen" title="全屏"></i>
  80.                         </a>
  81.                     </div>
  82.                     <!--Header Buttons End-->
  83.                 </div>
  84.                 <!-- /Page Header -->
  85.                 <!-- Page Body -->
  86.                     %include      <!--留下被子模板渲染的位置-->  
  87.                 <!-- /Page Body -->
  88.             </div>
  89.             <!-- /Page Content -->
  90.         </div>
  91.         <!-- /Page Container -->
  92.         <!-- Main Container -->
  93.     </div>
  94. <script src="assets/js/beyond.min.js"></script>
  95.     <!--Beyond Scripts-->
  96. </body>
  97. </html>

 

在base.tpl模板中,要注意的是

<title>{{get('title','任务管理系统')}}</title<!--获取子模板传递进来的值-->  

% include('menu.tpl')  <!--menu(菜单)模板-->

{{get('position',' ')}}  <!--获取子模板传递进来的值-->

% include('top.tpl')  <!--加载top(网站顶部页)模板-->

%include      <!--留下被子模板渲染的位置-->  

这个基础HTML模板主要作用是加载样式,字体等文件,继承这个模板的子模板,就不需要再加载这些样式了。

 

top.tpl代码:

  1. <div class="navbar-inner">
  2.     <div class="navbar-container">
  3.         <!-- Navbar Barnd -->
  4.         <div class="navbar-header pull-left">
  5.             <a href="#" class="navbar-brand">
  6.                 <h2 style="margin-top:5px;">任务管理系统</h2>
  7.             </a>
  8.         </div>
  9.         <!-- /Navbar Barnd -->
  10.         <!-- Sidebar Collapse -->
  11.         <div class="sidebar-collapse" id="sidebar-collapse">
  12.             <i class="collapse-icon fa fa-bars"></i>
  13.         </div>
  14.         <!-- /Sidebar Collapse -->
  15.         <!-- Account Area and Settings --->
  16.         <div class="navbar-header pull-right">
  17.             <div class="navbar-account">
  18.                 <ul class="account-area">
  19.                     <li>
  20.                         <a class=" dropdown-toggle" data-toggle="dropdown" title="帮助" href="#">
  21.                             <i class="icon fa fa-warning"></i>
  22.                         </a>
  23.                     </li>
  24.                     <li>
  25.                         <a class="wave in dropdown-toggle" data-toggle="dropdown" title="信息" href="#">
  26.                             <i class="icon fa fa-envelope"></i>
  27.                             <span class="badge">0</span>
  28.                         </a>
  29.                     </li>
  30.                     <li>
  31.                         <a class="dropdown-toggle" data-toggle="dropdown" title="任务" href="#">
  32.                             <i class="icon fa fa-tasks"></i>
  33.                             <span class="badge">0</span>
  34.                         </a>
  35.                         <!--Tasks Dropdown-->
  36.                         <!--/Tasks Dropdown-->
  37.                     </li>
  38.                     <li>
  39.                         <a class="login-area dropdown-toggle" data-toggle="dropdown">
  40.                             <div class="avatar" title="查看个人信息配置">
  41.                                 <img src="assets/img/avatars/adam-jansen.jpg">
  42.                             </div>
  43.                             <section>
  44.                                 <h2><span class="profile"><span>个人信息</span></span></h2>
  45.                             </section>
  46.                         </a>
  47.                         <!--Login Area Dropdown-->
  48.                         <ul class="pull-right dropdown-menu dropdown-arrow dropdown-login-area">
  49.                             <li class="email"><a>帐号:drfdai</a></li>
  50.                             <!--Avatar Area-->
  51.                             <li>
  52.                                 <div class="avatar-area">
  53.                                     <img src="assets/img/avatars/adam-jansen.jpg" class="avatar">
  54.                                     <span class="caption">修改头像</span>
  55.                                 </div>
  56.                             </li>
  57.                             <!--Theme Selector Area-->
  58.                             <li class="theme-area">
  59.                                 <ul class="colorpicker" id="skin-changer">
  60.                                     <li><a class="colorpick-btn" href="#" style="background-color:#5DB2FF;" rel="assets/css/skins/blue.min.css"></a></li>
  61.                                     <li><a class="colorpick-btn" href="#" style="background-color:#2dc3e8;" rel="assets/css/skins/azure.min.css"></a></li>
  62.                                     <li><a class="colorpick-btn" href="#" style="background-color:#03B3B2;" rel="assets/css/skins/teal.min.css"></a></li>
  63.                                     <li><a class="colorpick-btn" href="#" style="background-color:#53a93f;" rel="assets/css/skins/green.min.css"></a></li>
  64.                                     <li><a class="colorpick-btn" href="#" style="background-color:#FF8F32;" rel="assets/css/skins/orange.min.css"></a></li>
  65.                                     <li><a class="colorpick-btn" href="#" style="background-color:#cc324b;" rel="assets/css/skins/pink.min.css"></a></li>
  66.                                     <li><a class="colorpick-btn" href="#" style="background-color:#AC193D;" rel="assets/css/skins/darkred.min.css"></a></li>
  67.                                     <li><a class="colorpick-btn" href="#" style="background-color:#8C0095;" rel="assets/css/skins/purple.min.css"></a></li>
  68.                                     <li><a class="colorpick-btn" href="#" style="background-color:#0072C6;" rel="assets/css/skins/darkblue.min.css"></a></li>
  69.                                     <li><a class="colorpick-btn" href="#" style="background-color:#585858;" rel="assets/css/skins/gray.min.css"></a></li>
  70.                                     <li><a class="colorpick-btn" href="#" style="background-color:#474544;" rel="assets/css/skins/black.min.css"></a></li>
  71.                                     <li><a class="colorpick-btn" href="#" style="background-color:#001940;" rel="assets/css/skins/deepblue.min.css"></a></li>
  72.                                 </ul>
  73.                             </li>
  74.                             <!--/Theme Selector Area-->
  75.                             <li class="dropdown-footer">
  76.                                 <a href="/logout">
  77.                                     退出登陆
  78.                                 </a>
  79.                             </li>
  80.                         </ul>
  81.                         <!--/Login Area Dropdown-->
  82.                     </li>
  83.                     <!-- /Account Area -->
  84.                     <!--Note: notice that setting div must start right after account area list.
  85.                     no space must be between these elements-->
  86.                     <!-- Settings -->
  87.                 </ul>
  88.                 <div class="setting">
  89.                     <a id="" title="设置" href="#">
  90.                         <i class="icon glyphicon glyphicon-cog"></i>
  91.                     </a>
  92.                 </div>
  93.                 <!-- Settings -->
  94.             </div>
  95.         </div>
  96.         <!-- /Account Area and Settings -->
  97.     </div>
  98. </div>

 

menu.tpl代码

  1. <!-- Page Sidebar -->
  2. <div class="page-sidebar" id="sidebar">
  3.     <!-- Page Sidebar Header-->
  4.     <div class="sidebar-header-wrapper">
  5.         <input type="text" class="searchinput" />
  6.         <i class="searchicon fa fa-search"></i>
  7.         <div class="searchhelper">搜索</div>
  8.     </div>
  9.     <!-- /Page Sidebar Header -->
  10.     <!-- Sidebar Menu -->
  11.     <ul class="nav sidebar-menu">
  12.         <!--Dashboard-->
  13.         <li>
  14.             <a href="/">
  15.                 <i class="menu-icon glyphicon glyphicon-home"></i>
  16.                 <span class="menu-text"> 首页 </span>
  17.             </a>
  18.         </li>
  19.         <li class="active open">
  20.             <a href="#" class="menu-dropdown">
  21.                 <i class="menu-icon fa fa-gavel"></i>
  22.                 <span class="menu-text"> 用户管理 </span>
  23.                 <i class="menu-expand"></i>
  24.             </a>
  25.             <ul class="submenu">
  26.                 <li class="">
  27.                     <a href="/user">
  28.                         <span class="menu-text">用户管理</span>
  29.                     </a>
  30.                 </li>
  31.                 <li class="">
  32.                     <a href="/user">
  33.                         <span class="menu-text">用户权限</span>
  34.                     </a>
  35.                 </li>
  36.             </ul>
  37.         </li>
  38.         <li class="active open">
  39.             <a href="#" class="menu-dropdown">
  40.                 <i class="menu-icon fa fa-bar-chart-o"></i>
  41.                 <span class="menu-text"> 任务管理 </span>
  42.                 <i class="menu-expand"></i>
  43.             </a>
  44.             <ul class="submenu">
  45.                 <li class="">
  46.                     <a href="/taskinfo">
  47.                         <span class="menu-text">任务大厅</span>
  48.                     </a>
  49.                 </li>
  50.                 <li class="">
  51.                     <a href="/addtask">
  52.                         <span class="menu-text">发布任务</span>
  53.                     </a>
  54.                 </li>
  55.                 <li class="">
  56.                     <a href="/gettask">
  57.                         <span class="menu-text">我接收的任务</span>
  58.                     </a>
  59.                 </li>
  60.                 <li>
  61.                     <a href="/sendtask">
  62.                         <span class="menu-text">我发起的任务</span>
  63.                     </a>
  64.                 </li>
  65.             </ul>
  66.         </li>
  67.         <li class="active open">
  68.             <a href="#" class="menu-dropdown">
  69.                 <i class="menu-icon fa fa-gavel"></i>
  70.                 <span class="menu-text"> 项目管理 </span>
  71.                 <i class="menu-expand"></i>
  72.             </a>
  73.             <ul class="submenu">
  74.                 <li class="">
  75.                     <a href="/user">
  76.                         <span class="menu-text">项目列表</span>
  77.                     </a>
  78.                 </li>
  79.                 <li class="">
  80.                     <a href="/addtask">
  81.                         <span class="menu-text">发布项目</span>
  82.                     </a>
  83.                 </li>
  84.                 <li class="">
  85.                     <a href="/gettask">
  86.                         <span class="menu-text">发起任务</span>
  87.                     </a>
  88.                 </li>
  89.             </ul>
  90.         </li>
  91.     </ul>
  92.     <!-- /Sidebar Menu -->
  93. </div>
  94. <!-- /Page Sidebar -->
  95. <!-- Page Content -->

 

下篇继续......

 

相关代码已上传到SVN

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

 

.

2 条留言  访客:0 条  博主:0 条   引用: 2 条

来自外部的引用: 2 条

  • python bottle框架(WEB开发、运维开发)教程 | linux系统运维
  • python bottle 框架实战教程:配置网页样式 | linux系统运维

给我留言

Copyright © linux系统运维 保留所有权利.   Theme  Ality 粤ICP备13023035号-1

用户登录

分享到: