新建一个前台页面的父模板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. Sass 条件-循环语句

    学习Sass中 @if...@else @for @while @each 一.条件判断 - @if @else 示例: @mixin blockOrHidden($boolean:true){ @i ...

  2. 「6月雅礼集训 2017 Day7」三明治

    [题目大意] $1 \leq n,m \leq 400$ N字形表示:上图第1行第1个那种:Z字形表示上图第1行第2个那种. [题解] 很容易得到结论: 考虑如果紫色比绿色先消去,那么黄色一定会比对应 ...

  3. 51nod 1190 最小公倍数之和 V2

    给出2个数a, b,求LCM(a,b) + LCM(a+1,b) + .. + LCM(b,b). 例如:a = 1, b = 6,1,2,3,4,5,6 同6的最小公倍数分别为6,6,6,12,30 ...

  4. 【BZOJ】1455 罗马游戏

    [算法]可并堆(左偏树) #include<cstdio> #include<algorithm> using namespace std; ; int l[maxn],r[m ...

  5. Web Session 浅入浅出（山东数漫江湖）

    使用过几种Web App开发语言和框架,都会接触到Session的概念.即使是一个简单站点访问计数的功能,也常常使用Session来实现的.其他常用的领域还有购物车,登录用户等.但是,对Session ...

  6. 极致的 Hybrid：航旅离线包再加速！(转)

    资源离线的思路简单.场景复杂,最复杂的就是 H5 活动页面的离线化.Mobile Web 在弱网提速的唯一的办法就是坚决杜绝不必要的(运行时)网络请求,即除了 Json 格式的动态数据和其携带的商品配 ...

  7. hdu1002 A + B Problem II(大数题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1002 A + B Problem II Time Limit: 2000/1000 MS (Java/ ...

  8. @EnableEurekaClient源码分析

    @EnableEurekaClient注解,从源码的角度分析是如何work的 NetFlix Eureka client Eureka client 负责与Eureka Server 配合向外提供注册 ...

  9. Linux System.map文件【转】

    转自:http://blog.csdn.net/ysbj123/article/details/51233618 当运行GNU链接器gld(ld)时若使用了"-M"选项,或者使用n ...

  10. linux中没有dos2UNIX或者UNIX2dos命令怎么解决办法

    linux中没有dos2UNIX或者UNIX2dos命令怎么解决办法 http://blog.csdn.net/w616589292/article/details/38274475 dos2unix ...