新建一个前台页面的父模板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. centOS 安装Python3与python2并存

    如果本机安装了`python2`,尽量不要管他,使用`python3`运行python脚本就好,因为可能有程序依赖目前的`python2`环境, 比如`yum`!!!!! 不要动现有的`python2 ...

  2. iOS Button设置

    UIButton *kefuBtn = [[UIButton alloc]initWithFrame:CGRectMake(, , , )]; kefuBtn.backgroundColor = SX ...

  3. 好用的python库（转）

    这个专区就是用来分享你在使用 Python 过程中发现的或者自己写的 Python 库.有时候一个好用的库将大大节省一个开发者的时间,也会让开发者多这个库的作者感激涕零的.例如我在开发 Pythonz ...

  4. Chrome profile manager

    由于Firefox有profile manager这么一说,所以自然联想到chrome应该也有. 默认chrome的profile manager被禁止了. 1. chrome://flags 2. ...

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

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

  6. 使用idea+Tomcat搭建servlet服务器

    1.使用java 搭建一个简单的Servlet 服务器 https://blog.csdn.net/qq_35164169/article/details/76146655

  7. kimbits_USACO

    StringsobitsKim Schrijvers Consider an ordered set S of strings of N (1 <= N <= 31) bits. Bits ...

  8. 測試 battery capacity curve 的負載

    昨天有同事問說, 他要測試 battery capacity curve, 並且負載要使用 33mA, 於是我想到有一個 apk 名稱為 快速放電 (最下方),可以控制 cpu 的 load, 他試了 ...

  9. go语言爬虫goquery和grequests的使用

    /*下载工具*/ package main import ( "fmt" //go语言版本的jquery "github.com/PuerkitoBio/goquery& ...

  10. pycaffe使用.solverstate文件继续训练

    import caffe solver_file = "solver.prototxt" solverstate = "xx.solverstate" caff ...