新建一个前台页面的父模板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. [洛谷P2023] [AHOI2009]维护序列

    洛谷题目链接:[AHOI2009]维护序列 题目描述 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,-,aN .有如下三种操作形式: (1)把数列 ...

  2. Epoll模型讲解

    1.流模型 首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作的内核对象. 不管是文件,还是套接字,还是管道,我们都可以把他们看作流. 之后我们来讨论I/O的操作, ...

  3. Item 9 覆盖equals时总要覆盖hashCode

    为什么覆盖equals时,总要覆盖hashCode?   原因是,根据Object规范: 如果两个对象根据equals(Object)方法比较是相等的,那么调用这两个对象中任意一个对象的hashCod ...

  4. UOJ#179. 线性规划[模板]

    传送门 http://uoj.ac/problem/179 震惊,博主竟然还不会线性规划! 单纯形实在学不会啊……背个板子当黑盒用…… 学(chao)了NanoApe dalao的板子 #includ ...

  5. php trait 变量类型为数组时 不能被父类子类同时use

    直接上代码 --------------------------- trait T1 { public static $a=1; public static $b= []; public static ...

  6. [Unity]用PropertyDrawer自定义struct/class的外观

    一般来说,当我们要扩展编辑器时,我们会从Editor类继承,为自己的MonoBehaviour实现不同的外观. 但是如果有一个struct/class,在许多地方被使用,Unity默认的外观又不够好看 ...

  7. python初步学习-python运算符

    算数运算符 操作 描述 例子 + 加法-对操作符的两侧增加值 a+b=30 - 减法 a-b=30 * 乘法 a * b = 30 / 除法 a/b=30 % 模(取余) a%b=30 ** 指数(幂 ...

  8. 项目记录 -- zpool set

    zfs set <property=value> <filesystem|volume|snapshot> root@UA4300D-spa:~/hanhuakai/pro_0 ...

  9. Python 下调用C动态链接库 -- (转)

    在linux开发的动态链接库需要被python调用,首先需要生成.so文件. 生成动态链接库的方法网上有很多,主要就是首先根据源文件编译生成.o,然后链接这些.o文件-shared生成.so.需要注意 ...

  10. appium===使用weditor代替ui automator viewer

    weditor 一个元素定位工具,并可实现通过wifi连接移动端进行定位. https://github.com/openatx/uiautomator2 python安装方式: pip instal ...