Flask 网站装潢, 简易更换模板

Flask 网站装潢，简易更换模板

本博文找个好看的网页模板，并简单改一改变成flask模板，并展示
主博客目录：《从零开始学习搭建量化平台笔记》

文章目录

  • Flask 网站装潢，简易更换模板
    • 下载模板
    • Python 自动生成目录
    • 修改目录结构
    • 改写模板文件
    • 改写Flask 相关函数
    • 模板网页预览
    • 遇到的坑
      • 出现白色框

主项目计划需要Flask展示可视化数据网站需要一个好看的主页。
任务：找一个好看的模板并改成Flask模板。

下载模板

在某乎上找了个下载免费模板的网站。(中文网站)

找一个自己喜欢的然后点击下载。

我用的是一个叫《Helios》的模板。

下载完他的目录是这样的：

Source:[./helios]
├---assets/├---css/├---fonts/├---js/└---sass/
├---images/├---header.jpg├---pic01.jpg├---......└---pic15.jpg
├---index.html
├---left-sidebar.html
├---LICENSE.txt
├---no-sidebar.html
├---README.txt
└---right-sidebar.html

Python 自动生成目录

这里为了写博客简单地写了个自动生成目录的python小脚本：

#!/usr/bin/env python3
# -*- coding: utf-8 -*-__author__ = "Varalpha"import os
import os.path
from pathlib import Pathdef printSingleDir(item, path, max_depth, this_depth, last_symb=("    ", "├---")):newpath = path / itemif os.path.isdir(newpath):print(f"{last_symb[0]}" * this_depth + f"{last_symb[1]}{item}/")if this_depth < max_depth:printdir4blog(newpath, max_depth, this_depth + 1)else:print(f"{last_symb[0]}" * this_depth + f"{last_symb[1]}{item}")return Nonedef printdir4blog(path, max_depth, this_depth=0):path = Path(path)if this_depth == 0:print("Source:[" + str(path) + "]")dir_list = os.listdir(path)for item in dir_list[:-1]:printSingleDir(item, path, max_depth, this_depth)if 0 != len(dir_list):printSingleDir(dir_list[-1], path, max_depth, this_depth, ("    ", "└---"))if __name__ == "__main__":path = input("输入遍历目录")depth = int(input("输入遍历深度"))printdir4blog(path, depth)

修改目录结构

创建文件

mkdir VarFlask
cd VarFlask
mkdir templates static
touch templates/index.html
touch templates/layout.html

修改进自己项目目录中，重新排了结构：

Source:[./code_web]
├---requirements.txt
├---runserver.py
├---VarFlask/├---static/├---css/├---fonts/├---images/├---js/└---sass/├---templates/├---index.html└---layout.html├---views.py└---__init__.py

这里把images和其他模板文件全部放入static/ 文件夹中。

改写模板文件

  1. 先把html的头文件抄好，并为之后增加补充做好预留{% block head %}{% endblock %}：
<!DOCTYPE html>
<html lang="en">
<head><title>{{ title }} - Flask</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /><meta name="description" content=""><meta name="author" content="Xiuchuan Zhang"><!-- CSS FILES --><link rel="stylesheet" type="text/css" href="/static/css/main.css" />{% block head %}{% endblock %}<!-- end -->
</head>
</html>

这里预留了个 title 参数。

  1. 再抄个页脚，并为之后增加补充做好预留{% block footer %}{% endblock %}：
<!-- Footer -->
<div id="footer"><div class="container">{% block footer %}{% endblock %}<hr /><div class="row"><div class="col-12"><!-- Copyright --><div class="copyright"><ul class="menu"><li>&copy; 2023 - <a href="http://www.varalpha.com">VarAlpha Co.</a> All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li></ul></div></div></div></div>
</div>
<!-- Footer End -->
  1. 把Scripts抄上，并为之后增加补充做好预留{% block scripts %}{% endblock %}
<!-- JAVASCRIPT FILES -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery.dropotron.min.js"></script>
<script src="/static/js/jquery.scrolly.min.js"></script>
<script src="/static/js/jquery.scrollex.min.js"></script>
<script src="/static/js/browser.min.js"></script>
<script src="/static/js/breakpoints.min.js"></script>
<script src="/static/js/util.js"></script>
<script src="/static/js/main.js"></script>
<!-- END JAVASCRIPT FILES -->
{% block scripts %}{% endblock %}
  1. 最后写好Body, 并为之后增加补充做好预留{% block content %}{% endblock %}
<body class="{{page_type}} is-preload"><div id="page-wrapper"><!-- Header --><div id="header">{% block header %}<div class="inner"><h1><a href="{{ url_for('home') }}" id="logo">Flask</a></h1></div>{% endblock %}<!-- Nav --><nav id="nav"><ul><li><a href="{{ url_for('home') }}">Home</a></li></ul></nav></div></div>{% block content %}{% endblock %}
</body>

这里预留了个 page_type 参数, 为了方便修改后续页面模板（主页与子页不同）。

  1. 合成layout.html
<!DOCTYPE html>
<html lang="en">
<head><title>{{ title }} - Flask</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /><meta name="description" content=""><meta name="author" content="Xiuchuan Zhang"><!-- CSS FILES --><link rel="stylesheet" type="text/css" href="/static/css/main.css" />{% block head %}{% endblock %}<!-- end -->
</head><body class="{{page_type}} is-preload"><div id="page-wrapper"><!-- Header --><div id="header">{% block header %}<div class="inner"><h1><a href="{{ url_for('home') }}" id="logo">Flask</a></h1></div>{% endblock %}<!-- Nav --><nav id="nav"><ul><li><a href="{{ url_for('home') }}">Home</a></li></ul></nav></div></div>{% block content %}{% endblock %}<!-- Footer --><div id="footer"><div class="container">{% block footer %}{% endblock %}<hr /><div class="row"><div class="col-12"><!-- Copyright --><div class="copyright"><ul class="menu"><li>&copy; 2023 - <a href="http://www.varalpha.com">VarAlpha Co.</a>All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li></ul></div></div></div></div></div><!-- Footer End --><!-- JAVASCRIPT FILES --><script src="/static/js/jquery.min.js"></script><script src="/static/js/jquery.dropotron.min.js"></script><script src="/static/js/jquery.scrolly.min.js"></script><script src="/static/js/jquery.scrollex.min.js"></script><script src="/static/js/browser.min.js"></script><script src="/static/js/breakpoints.min.js"></script><script src="/static/js/util.js"></script><script src="/static/js/main.js"></script><!-- END JAVASCRIPT FILES -->{% block scripts %}{% endblock %}
</body></html>
  1. 使用layout.html编写index.html
{% extends "layout1.html" %}{% block header %}
<!-- Inner -->
<div class="inner"><header><h1><a href="{{ url_for('home') }}" id="logo">Flask</a></h1><hr /><p>A Quantitative Stock Analysis Platform</p></header><footer><a href="#banner" class="button circled scrolly">Start</a></footer>
</div>
{% endblock %}{% block content %}
<!-- Banner -->
<section id="banner"><header><h2>Hi. You're looking at <strong>Flask</strong>.</h2><p>A Quantitative Stock Analysis Platform</p></header>
</section>
{% endblock %}

改写Flask 相关函数

创建文件

touch __init__.py
touch views.py
  1. 把之前博客的runserver.py的app改写入flask生成文件views.py
"""
Routes and views for the flask application.
"""
from flask import Flask
from flask import render_templateapp = Flask(__name__)@app.route("/")
@app.route("/home")
def home():"""Renders the home page."""return render_template("index.html", title="Home Page", page_type="homepage")
  1. __init__.py 导入app参数
from .views import app
  1. 修改上篇博文中的启动文件runserver.py
cd ..
vim runserver.py

导入app参数

from gevent import pywsgi
from VarFlask import appserver = pywsgi.WSGIServer(("0.0.0.0", 5000), app)
server.serve_forever()
  1. 完成修改，重启flask docker 即可查看新的网页：

命令行输入：

sudo docker restart flask

模板网页预览

Flask_web1
Flask_web2

遇到的坑

出现白色框

上传至服务器后，所有显示的页面每次都有一段白色的框。
网络调试后，查看TCP传输字段，发现有未能解析的字段，发现是传输格式错误导致的。
由于电脑之前配置的文件格式为UTF8带签名，这是文件格式所带的签名导致的问题。
因此需要把上传的文件格式改为UTF8不带签名，就可以解决此问题。
可使用以下命令把签名去除：

find . -type f -name "*" -print | xargs -i sed -i 's/\xE    F\xBB\xBF//' {}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/126556.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

CMake基础【学习笔记（八）】

CMake基础【学习笔记（八）】

声明此博客为转载 CMake基础 文章目录 CMake基础一、准备知识1.1 C的编译过程1.2 静态链接库和动态链接库1.3 为什么需要CMake1.3.1 g 命令行编译1.3.2 CMake简介 二、CMake基础知识2.1 安装2.2 第一个CMake例子2.3 语法基础2.3.1 指定版本2.3.2 设置项目2.3.3 添加可执行文件…
阅读更多...
Goby 漏洞发布｜ Cisco IOS XE ebui_wsma_http 接口权限绕过漏洞（CVE-2023-20198）

Goby 漏洞发布｜ Cisco IOS XE ebui_wsma_http 接口权限绕过漏洞（CVE-2023-20198）

漏洞名称&#xff1a; Cisco IOS XE ebui_wsma_http 接口权限绕过漏洞&#xff08;CVE-2023-20198&#xff09; English Name&#xff1a; Cisco IOS XE ebui_wsma_http API Permission Bypass Vulnerability (CVE-2023-20198) CVSS core: 10 影响资产数&#xff1a; 307282…
阅读更多...
kafka为什么如此之快？

kafka为什么如此之快？

天下武功&#xff0c;唯快不破。同样的&#xff0c;kafka在消息队列领域&#xff0c;也是非常快的&#xff0c;这里的块指的是kafka在单位时间搬运的数据量大小&#xff0c;也就是吞吐量&#xff0c;下图是搬运网上的一个性能测试结果&#xff0c;在同步发送场景下&#xff0c;…
阅读更多...
以八数码问题为例实现A*算法的求解（未完结）

以八数码问题为例实现A*算法的求解（未完结）

八数码&#xff1a; 在一个 33 的网格中&#xff0c;1∼8 这 8 个数字和一个 x 恰好不重不漏地分布在这 33 的网格中。 例如&#xff1a; 1 2 3 x 4 6 7 5 8在游戏过程中&#xff0c;可以把 x 与其上、下、左、右四个方向之一的数字交换&#xff08;如果存在&#xff09;。…
阅读更多...
（11月4日）GBASE南大通用 x openGauss Meetup，欢迎报名

（11月4日）GBASE南大通用 x openGauss Meetup，欢迎报名

由openGauss社区、天津南大通用数据技术股份有限公司主办&#xff0c;伟仕佳杰科技有限公司、神州数码&#xff08;中国&#xff09;有限公司协办的“GBASE南大通用 x openGauss Meetup”活动将于2023年11月4日&#xff08;周六&#xff09;在合肥市高新区云飞路66号天源迪科科…
阅读更多...
3DEXPERIENCE云端项目管理小工具--Project Planner项目策划者角色

3DEXPERIENCE云端项目管理小工具--Project Planner项目策划者角色

云端3DEXPERIENCE平台提供了一个协作环境&#xff0c;使企业和个人能够以全新的方式实现创新。它将人员、创意、数据和解决方案连接到一个始终在线且可用的协作和交互环境中&#xff0c;可以帮助您的企业提高执行力、生产率并加速创新。 3DEXPERIENCE中的Project Planner项目策…
阅读更多...
BUUCTF 后门查杀 1

BUUCTF 后门查杀 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 小白的网站被小黑攻击了&#xff0c;并且上传了Webshell&#xff0c;你能帮小白找到这个后门么&#xff1f;(Webshell中的密码(md5)即为答案)。 密文&#xff1a; 下载附件&#xff0c;解压得到一个网站文件夹。 解…
阅读更多...
Nginx搭载负载均衡及前端项目部署

Nginx搭载负载均衡及前端项目部署

目录 ​编辑 一.Nginx安装 1.安装所需依赖 2.下载并解压Nginx安装包 3.安装nginx 4.启动Nginx服务 二.Tomcat负载均衡 1.准备环境 1.1 准备两个Tomcat 1.2 修改端口号 1.3 配置Nginx服务器集群 2.效果展示 ​编辑三.前端项目打包 ​编辑四.前端项目部署 1.上传项目…
阅读更多...
YOLO目标检测——安全帽佩戴检测数据集【含对应voc、coco和yolo三种格式标签】

YOLO目标检测——安全帽佩戴检测数据集【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;安全帽佩戴检测数据集可以用于实时检测工作人员是否按照要求佩戴了安全帽&#xff0c;以保障他们的安全数据集说明&#xff1a;安全帽佩戴检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富&#xff0c;图片分为带头盔和没带头…
阅读更多...
智慧矿山：AI算法在带式运输机中的异物识别应用

智慧矿山：AI算法在带式运输机中的异物识别应用

随着现代农业和工业的发展&#xff0c;带式运输机在各种生产作业中发挥着越来越重要的作用。然而&#xff0c;在带式运输机运行过程中&#xff0c;可能会混入各种异物&#xff0c;这些异物的存在可能会对运输过程和设备本身造成损害。为了解决这一问题&#xff0c;本文将介绍一…
阅读更多...
c++装饰器模式

c++装饰器模式

前言 装饰器模式&#xff0c;就是可以对一个对象无限装饰一些东西&#xff0c;而且可以没有顺序。比如一个人可能只会说出他的名字&#xff0c;但是可以让他再说哈哈&#xff0c;可以说完哈哈之后再说哇哇。如何后面又不想装饰了&#xff0c;不需要改类原来的代码&#xff0c;…
阅读更多...
基于深度学习的人脸性别年龄识别 - 图像识别 opencv 计算机竞赛

基于深度学习的人脸性别年龄识别 - 图像识别 opencv 计算机竞赛

文章目录 0 前言1 课题描述2 实现效果3 算法实现原理3.1 数据集3.2 深度学习识别算法3.3 特征提取主干网络3.4 总体实现流程 4 具体实现4.1 预训练数据格式4.2 部分实现代码 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 毕业设计…
阅读更多...
智慧校园地下管线三维可视化管控平台减少人力和物力资源的浪费

智慧校园地下管线三维可视化管控平台减少人力和物力资源的浪费

随着科技的不断发展&#xff0c;三维可视化管理平台在各个领域得到了广泛的应用。三维可视化管理平台通过将数据以三维形式呈现&#xff0c;使得用户能够更直观地理解和分析数据&#xff0c;从而提高工作效率和决策质量。 VR数字孪生园区系统是通过将实际园区的各种数据和信息进…
阅读更多...
RabbitMQ入门到实战教程，消息队列实战，改造配置MQ

RabbitMQ入门到实战教程，消息队列实战，改造配置MQ

RabbitMQ入门到实战教程&#xff0c;MQ消息中间件&#xff0c;消息队列实战-CSDN博客 3.7.Topic交换机 3.7.1.说明 Topic类型的Exchange与Direct相比&#xff0c;都是可以根据RoutingKey把消息路由到不同的队列。 只不过Topic类型Exchange可以让队列在绑定BindingKey 的时候…
阅读更多...
如何优雅地单元测试 Kotlin/Java 中的 private 方法？

如何优雅地单元测试 Kotlin/Java 中的 private 方法？

翻译自 https://medium.com/mindorks/how-to-unit-test-private-methods-in-java-and-kotlin-d3cae49dccd ❓如何单元测试 Kotlin/Java 中的 private 方法❓ 首先&#xff0c;开发者应该测试代码里的 private 私有方法吗&#xff1f; 直接信任这些私有方法&#xff0c;测试到…
阅读更多...
系列四、全局配置mybatis-config.xml

系列四、全局配置mybatis-config.xml

一、全局配置文件中的属性 mybatis全局配置中的文件非常多&#xff0c;主要有如下几个&#xff1a; properties&#xff08;属性&#xff09;settings&#xff08;全局配置参数&#xff09;typeAliases&#xff08;类型别名&#xff09;typeHandlers&#xff08;类型处理器&am…
阅读更多...
用前端框架Bootstrap和Django实现用户注册页面

用前端框架Bootstrap和Django实现用户注册页面

01-新建一个名为“mall_backend”的Project 命令如下&#xff1a; CD E:\Python_project\P_001\myshop-test E: django-admin startproject mall_backend02-新建应用并注册应用 执行下面条命令依次创建需要的应用&#xff1a; CD E:\Python_project\P_001\myshop-test\mall…
阅读更多...
模型应用系实习生-模型训练笔记(更新至线性回归、Ridge回归、Lasso回归、Elastic Net回归、决策树回归、梯度提升树回归和随机森林回归)

模型应用系实习生-模型训练笔记(更新至线性回归、Ridge回归、Lasso回归、Elastic Net回归、决策树回归、梯度提升树回归和随机森林回归)

sklearn机械学习模型步骤以及模型 一、训练准备&#xff08;x_train, x_test, y_train, y_test&#xff09;1.1 导包1.2 数据要求1.21 导入数据1.22 数据类型查看检测以及转换1.22 划分数据 二、回归2.1 线性回归2.2 随机森林回归2.3 GradientBoostingRegressor梯度提升树回归2…
阅读更多...
如何创建一个react项目

如何创建一个react项目

文章目录 前言前言打开小黑窗口npm init vite后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;react.js &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误&am…
阅读更多...
84.在排序数组中查找元素的第一个和最后一个位置（力扣）

84.在排序数组中查找元素的第一个和最后一个位置（力扣）

目录 问题描述 代码解决以及思想 知识点 问题描述 代码解决以及思想 class Solution { public:vector<int> searchRange(vector<int>& nums, int target) {int left 0; // 定义左边界int right nums.size() - 1; // 定义右…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023