新建一个前台页面的父模板front_base.html

导航条是总boostrap v3中文站拷贝过来的，然后根据自己的需求做一些修改

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{% block title %}{% endblock %}</title>

    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="{{ url_for('static', filename='common/js/bbsajax.js') }}"></script>

    <link href="{{ url_for('static', filename='common/sweetalert/sweetalert.css') }}" rel="stylesheet">

    <script src="{{ url_for('static', filename='common/sweetalert/sweetalert.min.js') }}"></script>

    <script src="{{ url_for('static', filename='common/sweetalert/xtalert.js') }}"></script>

    {% block head %}{% endblock %}

</head>

<body>

    <nav class="navbar navbar-default">

      <div class="container-fluid">

        <div class="navbar-header">

          <a class="navbar-brand" href="#">何波安BBS论坛</a>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

          <ul class="nav navbar-nav">

            <li><a href="#">首页</a></li>

          </ul>

          <form class="navbar-form navbar-left">

            <div class="form-group">

              <input type="text" class="form-control" placeholder="请输入关键字">

            </div>

            <button type="submit" class="btn btn-default">搜索</button>

          </form>

          <ul class="nav navbar-nav navbar-right">

            <li><a href="#">登录</a></li>

            <li><a href="#">注册</a></li>

          </ul>

        </div>

      </div>

    </nav>

    {% block body %}{% endblock %}

</body>

</html>

front_base.html

新建首页front_index.html继承front_base.html

{% extends 'front/front_base.html' %}

{% block title %}首页-BBS论坛{% endblock %}

{% block head %}{% endblock %}

{% block body %}这是首页内容{% endblock %}

修改视图，编辑front.views.py

@bp.route('/')

def index():

    return render_template('front/front_index.html')

Flask实战第47天：首页导航条首先和代码抽离的更多相关文章

  1. 夺命雷公狗---DEDECMS----14dedecms首页导航条的完成

    我们的首页完成了,那么下一步就开始创建一个模型了, 添加好电影模型后我们来给他添加一些字段,这些字段主要还是要看我们的项目需求来添加的,因为我们的项目里有: 我们在项目中要用得上这些字段,所以要对他们 ...

  2. React Native商城项目实战07 - 设置“More”界面导航条

    1.More/More.js /** * 更多 */ import React, { Component } from 'react'; import { AppRegistry, StyleShee ...

  3. Flask实战-留言板-安装虚拟环境、使用包组织代码

    Flask实战 留言板 创建项目目录messageboard,从GreyLi的代码中把Pipfile和Pipfile.lock文件拷贝过来,这两个文件中定义了虚拟环境中需要安装的包的信息和位置,进入m ...

  4. Flutter移动电商实战 --（12）首页导航区域编写

    1.导航单元素的编写 从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套的问题,如果我们都写在一个组件里,那势必造成嵌套严重 ...

  5. 一百二十四：CMS系统之首页导航条和代码抽离

    模板抽离 由于前后台的模板有些需要的元素如,js,css是相同的,这里抽离出来做base模板 {% from "common/_macros.html" import static ...

  6. 分针网—IT教育：使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  7. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  8. React Native商城项目实战05 - 设置首页的导航条

    1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...

  9. 夺命雷公狗---DEDECMS----25dedecms导航条首页的跳转

    我们的导航条首页一直没写跳转,现在我们看看dede自带模版的首页是怎么写的: 他也是封装了一个{dede:global.cfg_cmsurl/}/内置标签来实现的,那么我们来改下我们的head.htm ...

随机推荐

  1. java File (文档流)

    一.   数据流的基本概念 1．数据流 在Java中把不同的数据源与程序之间的数据传输都抽象表述为“流”(stream),以实现相对统一和简单的输入/输出操作方式.传输中的数据就像流水一样,也称为数据 ...

  2. 深入分析Spring 与 Spring MVC容器（山东数漫江湖）

    1 Spring MVC WEB配置 Spring Framework本身没有Web功能,Spring MVC使用WebApplicationContext类扩展ApplicationContext, ...

  3. IT培训班123

    最近20年,IT行业一直处于上升期,程序员的工资越来越高了,年薪几十万的程序员大有人在.根据国家统计局发布的2016年各行业平均工资报表,程序员已经是工资最高的一个群体,超过了金融行业. IT行业的火 ...

  4. Connections between cities（LCA）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2874 题目: Problem Description After World War X, a lot ...

  5. github: Permission denied (publickey). 问题解决方法

    部署服务器过程中想clone自己github中的库,结果出现Permission denied (publickey).的错误,解决方法是添加服务器公钥到github的settings->SSH ...

  6. 将文件内容导入到MySQL中

    1.作用 把文件系统的内容导入到数据库中 2.语法 load data infile "文件名" into table 表名 fields terminated by " ...

  7. Python面向对象学习2（面向对象的语法和特性，待更新）

    上一个内容我们介绍了面向对象和面向对象场景现在我们来学习下语法和特性 1,面向对象基本语法: # -*- coding:utf-8 -*- # Author: Colin Yao class Dog( ...

  8. Angular2.0 基础： 环境搭建

    最近在学习Angular2的使用,其实看过Angular2 文档的都知道,相比于之前的Angular1,Angular2 的改动还是挺大的. 而对于‘angular2 的本地开发环境的搭建的中,我们首 ...

  9. mysql not null default / default

    not null default 说明不能是NULL, 并设置默认值 default 设置默认值 , 但值也可能是NULL mysql> create table test (id int, n ...

  10. mssql手工注入2

    --+ 先说一些函数的说明: substring(str,start,len) 截取字符串的作用,第一个参数为要截取的字符串,第二个参数为从哪里开始截取,第三个参数为截取的长度 ascii(char) ...