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

2015 年 5 月 27 日17:41:21 2 10,817 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">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>{{get('title','任务管理系统')}}</title>    <!--获取子模板传递进来的值-->  
  8.     <meta name="description" content="任务管理系统" />
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  10.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  11.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  12.     <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
  14.     <!--Basic Styles-->
  15.     <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
  16.     <link href="assets/css/bootstrap-table.css" rel="stylesheet" />
  18.     <link id="bootstrap-rtl-link" href="" rel="stylesheet" />
  19.     <link href="assets/css/font-awesome.min.css" rel="stylesheet" />
  20.     <link href="assets/css/weather-icons.min.css" rel="stylesheet" />
  22.     <!--Fonts
  23.     <link href="http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300" rel="stylesheet" type="text/css">
  24.     <link href='http://fonts.useso.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
  25.     -->
  26.     <!--Beyond styles-->
  27.     <link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet" type="text/css" />
  28.     <link href="assets/css/demo.min.css" rel="stylesheet" />
  29.     <link href="assets/css/typicons.min.css" rel="stylesheet" />
  30.     <link href="assets/css/animate.min.css" rel="stylesheet" />
  31.     <link id="skin-link" href="" rel="stylesheet" type="text/css" />
  32.     <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
  33.     <script src="assets/js/skins.min.js"></script>
  34.     <script src="assets/js/jquery-2.0.3.min.js"></script>
  35.     <script src="assets/js/bootstrap.min.js"></script>
  36.     <script src="assets/js/bootstrap-table.js"></script>
  37.     <script src="assets/js/slimscroll/jquery.slimscroll.min.js"></script>
  38.     <script src="assets/js/bootstrap-table-zh-CN.js"></script>
  41.     <style type="text/css">
  42.         input[type=checkbox]{
  43.             opacity : 1;
  44.             position: static;
  45.         }
  46.     </style>
  48. </head>
  49. <body>
  51.     <!-- Navbar -->
  52.     <div class="navbar">
  53.         % include('top.tpl')  <!--加载top（网站顶部页）模板-->  
  54.     </div>
  55.     <!-- /Navbar -->
  57.     <!-- Main Container -->
  58.     <div class="main-container container-fluid">
  59.         <div class="page-container">
  61.           % include('menu.tpl')  <!--menu（菜单）模板-->  
  63.             <div class="page-content">
  64.                 <!-- Page Breadcrumb -->
  65.                 <div class="page-breadcrumbs">
  66.                     <ul class="breadcrumb">
  67.                         <li>
  68.                             <i class="fa fa-home"></i>
  69.                             <a href="#">首页</a>
  70.                         </li>
  71.                         <li class="active">大厅</li>
  72.                     </ul>
  73.                 </div>
  74.                 <!-- /Page Breadcrumb -->
  75.                 <!-- Page Header -->
  76.                 <div class="page-header position-relative">
  77.                     <div class="header-title">
  78.                         <h1>
  79.                             {{get('position',' ')}}  <!--获取子模板传递进来的值-->  
  80.                         </h1>
  81.                     </div>
  82.                     <!--Header Buttons-->
  83.                     <div class="header-buttons">
  84.                         <a class="sidebar-toggler" href="#">
  85.                             <i class="fa fa-arrows-h" title="宽屏"></i>
  86.                         </a>
  87.                         <a class="refresh" id="refresh-toggler" href="">
  88.                             <i class="glyphicon glyphicon-refresh" title="刷新"></i>
  89.                         </a>
  90.                         <a class="fullscreen" id="fullscreen-toggler" href="#">
  91.                             <i class="glyphicon glyphicon-fullscreen" title="全屏"></i>
  92.                         </a>
  93.                     </div>
  94.                     <!--Header Buttons End-->
  95.                 </div>
  96.                 <!-- /Page Header -->
  97.                 <!-- Page Body -->
  98.                     %include      <!--留下被子模板渲染的位置-->  
  99.                 <!-- /Page Body -->
  100.             </div>
  101.             <!-- /Page Content -->
  102.         </div>
  103.         <!-- /Page Container -->
  104.         <!-- Main Container -->
  106.     </div>
  107. <script src="assets/js/beyond.min.js"></script>
  108.     <!--Beyond Scripts-->
  109. </body>
  110. </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>
  24.                     </li>
  25.                     <li>
  26.                         <a class="wave in dropdown-toggle" data-toggle="dropdown" title="信息" href="#">
  27.                             <i class="icon fa fa-envelope"></i>
  28.                             <span class="badge">0</span>
  29.                         </a>
  31.                     </li>
  33.                     <li>
  34.                         <a class="dropdown-toggle" data-toggle="dropdown" title="任务" href="#">
  35.                             <i class="icon fa fa-tasks"></i>
  36.                             <span class="badge">0</span>
  37.                         </a>
  38.                         <!--Tasks Dropdown-->
  40.                         <!--/Tasks Dropdown-->
  41.                     </li>
  42.                     <li>
  43.                         <a class="login-area dropdown-toggle" data-toggle="dropdown">
  44.                             <div class="avatar" title="查看个人信息配置">
  45.                                 <img src="assets/img/avatars/adam-jansen.jpg">
  46.                             </div>
  47.                             <section>
  48.                                 <h2><span class="profile"><span>个人信息</span></span></h2>
  49.                             </section>
  50.                         </a>
  51.                         <!--Login Area Dropdown-->
  52.                         <ul class="pull-right dropdown-menu dropdown-arrow dropdown-login-area">
  54.                             <li class="email"><a>帐号：drfdai</a></li>
  55.                             <!--Avatar Area-->
  56.                             <li>
  57.                                 <div class="avatar-area">
  58.                                     <img src="assets/img/avatars/adam-jansen.jpg" class="avatar">
  59.                                     <span class="caption">修改头像</span>
  60.                                 </div>
  61.                             </li>
  63.                             <!--Theme Selector Area-->
  64.                             <li class="theme-area">
  65.                                 <ul class="colorpicker" id="skin-changer">
  66.                                     <li><a class="colorpick-btn" href="#" style="background-color:#5DB2FF;" rel="assets/css/skins/blue.min.css"></a></li>
  67.                                     <li><a class="colorpick-btn" href="#" style="background-color:#2dc3e8;" rel="assets/css/skins/azure.min.css"></a></li>
  68.                                     <li><a class="colorpick-btn" href="#" style="background-color:#03B3B2;" rel="assets/css/skins/teal.min.css"></a></li>
  69.                                     <li><a class="colorpick-btn" href="#" style="background-color:#53a93f;" rel="assets/css/skins/green.min.css"></a></li>
  70.                                     <li><a class="colorpick-btn" href="#" style="background-color:#FF8F32;" rel="assets/css/skins/orange.min.css"></a></li>
  71.                                     <li><a class="colorpick-btn" href="#" style="background-color:#cc324b;" rel="assets/css/skins/pink.min.css"></a></li>
  72.                                     <li><a class="colorpick-btn" href="#" style="background-color:#AC193D;" rel="assets/css/skins/darkred.min.css"></a></li>
  73.                                     <li><a class="colorpick-btn" href="#" style="background-color:#8C0095;" rel="assets/css/skins/purple.min.css"></a></li>
  74.                                     <li><a class="colorpick-btn" href="#" style="background-color:#0072C6;" rel="assets/css/skins/darkblue.min.css"></a></li>
  75.                                     <li><a class="colorpick-btn" href="#" style="background-color:#585858;" rel="assets/css/skins/gray.min.css"></a></li>
  76.                                     <li><a class="colorpick-btn" href="#" style="background-color:#474544;" rel="assets/css/skins/black.min.css"></a></li>
  77.                                     <li><a class="colorpick-btn" href="#" style="background-color:#001940;" rel="assets/css/skins/deepblue.min.css"></a></li>
  78.                                 </ul>
  79.                             </li>
  80.                             <!--/Theme Selector Area-->
  81.                             <li class="dropdown-footer">
  82.                                 <a href="/logout">
  83.                                     退出登陆
  84.                                 </a>
  85.                             </li>
  86.                         </ul>
  87.                         <!--/Login Area Dropdown-->
  88.                     </li>
  89.                     <!-- /Account Area -->
  90.                     <!--Note: notice that setting div must start right after account area list.
  91.                     no space must be between these elements-->
  92.                     <!-- Settings -->
  93.                 </ul>
  94.                 <div class="setting">
  95.                     <a id="" title="设置" href="#">
  96.                         <i class="icon glyphicon glyphicon-cog"></i>
  97.                     </a>
  98.                 </div>
  100.                 <!-- Settings -->
  101.             </div>
  102.         </div>
  103.         <!-- /Account Area and Settings -->
  104.     </div>
  105. </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 -->
  11.     <!-- Sidebar Menu -->
  12.     <ul class="nav sidebar-menu">
  13.         <!--Dashboard-->
  14.         <li>
  15.             <a href="/">
  16.                 <i class="menu-icon glyphicon glyphicon-home"></i>
  17.                 <span class="menu-text"> 首页 </span>
  18.             </a>
  19.         </li>
  20.         <li class="active open">
  21.             <a href="#" class="menu-dropdown">
  22.                 <i class="menu-icon fa fa-gavel"></i>
  23.                 <span class="menu-text"> 用户管理 </span>
  24.                 <i class="menu-expand"></i>
  25.             </a>
  26.             <ul class="submenu">
  27.                 <li class="">
  28.                     <a href="/user">
  29.                         <span class="menu-text">用户管理</span>
  30.                     </a>
  31.                 </li>
  32.                 <li class="">
  33.                     <a href="/user">
  34.                         <span class="menu-text">用户权限</span>
  35.                     </a>
  36.                 </li>
  38.             </ul>
  39.         </li>
  41.         <li class="active open">
  42.             <a href="#" class="menu-dropdown">
  43.                 <i class="menu-icon fa fa-bar-chart-o"></i>
  44.                 <span class="menu-text"> 任务管理 </span>
  45.                 <i class="menu-expand"></i>
  46.             </a>
  47.             <ul class="submenu">
  48.                 <li class="">
  49.                     <a href="/taskinfo">
  50.                         <span class="menu-text">任务大厅</span>
  51.                     </a>
  52.                 </li>
  53.                 <li class="">
  54.                     <a href="/addtask">
  55.                         <span class="menu-text">发布任务</span>
  56.                     </a>
  57.                 </li>
  58.                 <li class="">
  59.                     <a href="/gettask">
  60.                         <span class="menu-text">我接收的任务</span>
  61.                     </a>
  62.                 </li>
  64.                 <li>
  65.                     <a href="/sendtask">
  66.                         <span class="menu-text">我发起的任务</span>
  67.                     </a>
  68.                 </li>
  69.             </ul>
  70.         </li>
  71.         <li class="active open">
  72.             <a href="#" class="menu-dropdown">
  73.                 <i class="menu-icon fa fa-gavel"></i>
  74.                 <span class="menu-text"> 项目管理 </span>
  75.                 <i class="menu-expand"></i>
  76.             </a>
  77.             <ul class="submenu">
  78.                 <li class="">
  79.                     <a href="/user">
  80.                         <span class="menu-text">项目列表</span>
  81.                     </a>
  82.                 </li>
  83.                 <li class="">
  84.                     <a href="/addtask">
  85.                         <span class="menu-text">发布项目</span>
  86.                     </a>
  87.                 </li>
  88.                 <li class="">
  89.                     <a href="/gettask">
  90.                         <span class="menu-text">发起任务</span>
  91.                     </a>
  92.                 </li>
  93.             </ul>
  94.         </li>
  95.     </ul>
  96.     <!-- /Sidebar Menu -->
  97. </div>
  98. <!-- /Page Sidebar -->
  99. <!-- Page Content -->

 

下篇继续......

 

相关代码已上传到SVN

SVN请跳转至：python bottle框架（WEB开发、运维开发）教程目录

 

.

发表评论

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

目前评论：2   其中：访客  0   博主  0   引用   2

    来自外部的引用： 2

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