新建一个前台页面的父模板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. MySQL和Postgresql的区别

    一.PostgreSQL相对于MySQL的优势 1.在SQL的标准实现上要比MySQL完善,而且功能实现比较严谨:2.存储过程的功能支持要比MySQL好,具备本地缓存执行计划的能力:3.对表连接支持较 ...

  2. jsp 内置对象(一)

    一.jsp的九大内置对象 内置对象 所属类 pageContext javax.servlet.jsp.PageContext request javax.servlet.http.HttpServl ...

  3. Item 3 ------单例模式的几种实现方式，及优缺点

    单例模式,是指一个类只有一个唯一的实例,一个类只会被实例化一次.实现这种效果,最佳的方式,编写包含单个元素的枚举类型. 单例模式的最佳实现方式-----创建一个包含单个元素的枚举类 public en ...

  4. 【Atcoder】CODE FESTIVAL 2017 qual A D - Four Coloring

    [题意]给定h,w,d,要求构造矩阵h*w满足任意两个曼哈顿距离为d的点都不同色,染四色. [算法]结论+矩阵变换 [题解] 曼哈顿距离是一个立着的正方形,不方便处理.d=|xi-xj|+|yi-yj ...

  5. idea ssm框架搭建

    1.分享一篇完整的ssm框架搭建连接 大牛博客:https://www.cnblogs.com/toutou/p/ssm_spring.html#_nav_0 2.我的搭建的完整项目连接,可以进入我的 ...

  6. 14、char和varchar的区别？

    就长度来说: ♣ char的长度是不可变的; ♣ 而varchar的长度是可变的,也就是说,定义一个char[10]和varchar[10],如果存进去的是‘csdn’,那么char所占的长度依然为1 ...

  7. Java的Integer常量池和String常量池

    1.Integer的常量池 看下面一段代码: package cn.qlq.test; public class ArrayTest { public static void main(String[ ...

  8. arch中yaourt的安装和使用

    yaourt-Yet AnOther User Repository Tool Yaourt是archlinux方便使用的关键部件之一,但没有被整合到系统安装中的工具.建议在装完系统重启之后,更新完p ...

  9. peepscan前期准备工作

    具有的功能 1.whoami 2.sub doamin https://dns.aizhan.com/huayi-faucet.com/ 3.dir scan 4.web server 5.port ...

  10. Django 1.10中文文档-第一个应用Part4-表单和通用视图

    本教程接Part3开始.继续网页投票应用程序,并将重点介绍简单的表单处理和精简代码. 一个简单表单 更新一下在上一个教程中编写的投票详细页面的模板polls/detail.html,让它包含一个HTM ...