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

news2025/2/22 21:20:08

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 Path


def printSingleDir(item, path, max_depth, this_depth, last_symb=("    ", "├---")):
    newpath = path / item
    if 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 None


def 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_template

app = 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 app

server = 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.coloradmin.cn/o/1159404.html

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

相关文章

@reduxjs/toolkit配置react-redux解决createStore或将在未来被淘汰警告

@reduxjs/toolkit配置react-redux解决createStore或将在未来被淘汰警告

通常 我们用redux都需要通过 createStore 但目前 你去用它 基本都会被划线 甚至有点厉害的的编辑器 他会直接告诉你这个东西基本快被弃用了 这个应该大家都知道 最好不要用已经被明确未来或弃用的语法 因为一旦弃用这个系统就需要维护 而且说 一般会被淘汰的语法 本身也就是有…
阅读更多...
编程怎么学才高效？初学编程怎么样才容易入门？

编程怎么学才高效？初学编程怎么样才容易入门？

学习编程并提高编程能力需要一种结构化的方法&#xff0c;其中包括理解基础概念、实践、反馈和持续学习。以下是一些高效学习编程的策略&#xff1a; 理解基础概念&#xff1a;在学习编程的初期&#xff0c;理解基础概念非常重要。这包括学习编程语言的基本语法、数据类型、控…
阅读更多...
嵌入式与单片机之间的关系是什么？

嵌入式与单片机之间的关系是什么？

今日话题&#xff0c;嵌入式与单片机之间的关系是什么&#xff1f;可以这样理解&#xff1a;嵌入式系统是一个大的范畴&#xff0c;而单片机则是嵌入式系统中的一个重要子类。通常情况下&#xff0c;制造商出厂的通用单片机内并没有预装应用程序&#xff0c;因此无法直接运行。…
阅读更多...
799. 最长连续不重复子序列 java

799. 最长连续不重复子序列 java

目录 算法描述 输入格式 输出格式 数据范围 输入样例&#xff1a; 输出样例&#xff1a; 代码 算法分析 算法描述 给定一个长度为 n&#xfffd; 的整数序列&#xff0c;请找出最长的不包含重复的数的连续区间&#xff0c;输出它的长度。 输入格式 第一行包含整数 n&…
阅读更多...
成集云 | 英克ERP对接批发销售门店 | 解决方案

成集云 | 英克ERP对接批发销售门店 | 解决方案

方案介绍 批发连锁门店是一种以批发销售为主&#xff0c;通过连锁经营方式进行管理的商业组织形态。它通常由一个总店或总公司负责管理和运营&#xff0c;下面拥有多个分店或加盟店&#xff0c;形成一个连锁经营网络。主要业务是向下游零售商或消费者销售商品&#xff0c;因此…
阅读更多...
华为ICT——第五章语音处理理论与实践

华为ICT——第五章语音处理理论与实践

目录 语言学&#xff1a; 主要应用场景&#xff1a; 语言学&#xff1a; 语言学&#xff1a; 语音学&#xff08;1&#xff09; 语音学&#xff08;2&#xff09; 语音处理介绍&#xff1a; 人类语音的来源&#xff1a; 语言数据&#xff1a; 语言信号预处理&#xff1a; …
阅读更多...
如何开始开发一个跑腿App系统？

如何开始开发一个跑腿App系统？

1. 确定需求和功能规划 开始开发之前&#xff0c;需明确系统所需的基本功能&#xff0c;包括用户注册、登录、下单、配送员匹配、订单跟踪等。这些功能需要在系统设计之初明确。 2. 技术选型 选择适合的技术栈。前端可以使用框架如React、Vue.js&#xff0c;后端可选择Node…
阅读更多...
HD.047 | 水文数据——全球植被数据集[V: VCI]

HD.047 | 水文数据——全球植被数据集[V: VCI]

写在前面 植被作为影响联系土壤、大气、水分等地气要素的重要因素，其准确估算不仅对研究植被动态变化、植被物候过程具有重要意义，而且对于流域生态水文等方面具有十分重要的应用价值。目前已有大量全球植被数据产品，本期选取植被条件指数Vegetation Condition Index（VCI）…
阅读更多...
利用两个栈s1，s2模拟一个队列时，如何用栈的运算来实现该队列的运算？写出模拟队列插入和删除的函数。一个栈s1用于插入元素，另一个栈s2用于删除元素

利用两个栈s1，s2模拟一个队列时，如何用栈的运算来实现该队列的运算？写出模拟队列插入和删除的函数。一个栈s1用于插入元素，另一个栈s2用于删除元素

利用两个栈s1&#xff0c;s2模拟一个队列时&#xff0c;如何用栈的运算来实现该队列的运算&#xff1f;写出模拟队列插入和删除的函数。一个栈s1用于插入元素&#xff0c;另一个栈s2用于删除元素。 前置知识点&#xff08;栈定义&#xff0c;及出栈入栈函数&#xff09; #def…
阅读更多...
目标检测 图像处理 计算机视觉 工业视觉

目标检测 图像处理 计算机视觉 工业视觉

目标检测 图像处理 计算机视觉 工业视觉 工业表盘自动识别&#xff08;指针型和数值型&#xff09;智能水尺识别电梯中电动车识别&#xff0c;人数统计缺陷检测&#xff08;半导体&#xff0c;电子元器件等&#xff09;没带头盔检测基于dlib的人脸识别抽烟检测和睡岗检测/驾驶疲…
阅读更多...
【Python语言速回顾】——数据可视化基础

【Python语言速回顾】——数据可视化基础

目录 引入 一、Matplotlib模块&#xff08;常用&#xff09; 1、绘图流程&常用图 ​编辑 2、绘制子图&添加标注 ​编辑 3、面向对象画图 4、Pylab模块应用 二、Seaborn模块&#xff08;常用&#xff09; 1、常用图 2、代码示例 ​编辑 ​编辑 ​编辑 ​…
阅读更多...
.net 5 发布后swagger页面不显示问题

.net 5 发布后swagger页面不显示问题

1&#xff1a;项目右键属性-》生成xml--用于swagger文件读取 2&#xff1a;开启文件配饰swagger读取指定文件
阅读更多...
AD9371 官方例程HDL JESD204B相关IP端口信号

AD9371 官方例程HDL JESD204B相关IP端口信号

AD9371 系列快速入口 AD9371ZCU102 移植到 ZCU106 &#xff1a; AD9371 官方例程构建及单音信号收发 ad9371_tx_jesd -->util_ad9371_xcvr接口映射&#xff1a; AD9371 官方例程之 tx_jesd 与 xcvr接口映射 AD9371 官方例程 时钟间的关系与生成 &#xff1a; AD9371 官方…
阅读更多...
AI文章扩写：从1百字到1万字

AI文章扩写：从1百字到1万字

人工智能&#xff08;AI&#xff09;作为一项前沿技术&#xff0c;正逐渐渗透到各个领域中。在写作领域&#xff0c;AI的应用已经取得了显著进展。本文将重点探讨如何利用人工智能扩写文章&#xff0c;为写作者提供一种快速、高效的创作辅助工具。 01 — AI文章扩写原理 人工…
阅读更多...
跨境电商的新引擎：崛起的网红经济

跨境电商的新引擎：崛起的网红经济

随着全球数字化时代的崛起&#xff0c;跨境电商成为了国际贸易的新引擎&#xff0c;而在这个巨大的变革浪潮中&#xff0c;网红经济正在崭露头角&#xff0c;成为这一引擎的有力推动者。在这篇文章中&#xff0c;我们将深入探讨网红经济如何催生跨境电商的新动力&#xff0c;以…
阅读更多...
手机端运维管理系统——图扑 HT for Web

手机端运维管理系统——图扑 HT for Web

随着信息技术的快速发展&#xff0c;网络技术的应用涉及到人们生活的方方面面。其中&#xff0c;手机运维管理系统可提供数字化、智能化的方式&#xff0c;帮助企业和组织管理监控企业的 IT 环境&#xff0c;提高运维效率、降低维护成本、增强安全性、提升服务质量&#xff0c;…
阅读更多...
vue 自己捣鼓周日程日历组件

vue 自己捣鼓周日程日历组件

需求：想要一个周日程表，记录每天的计划，点击可查看详情。可自定义时间段通过后台获取时间段显示 分析： 通过需求，超级课程表app这款软件其中课表和这个需求很像，只不过这个需求第一列的时间段是自定义的，不是上午下午两个，但是原理都差不多 原本想找一些第三方插件使…
阅读更多...
【23真题】千万别考这所！题目太格路了！

【23真题】千万别考这所！题目太格路了！

今天分享的是23年宁波大学912的信号与系统试题及解析。 本套试卷难度分析&#xff1a;22年宁波大学912考研真题&#xff0c;我也发布过&#xff0c;若有需要戳这里自取&#xff01;22年题目还很正常&#xff0c;23年突然剑走偏锋&#xff0c;24年能不能恢复我不知道。但是你难…
阅读更多...
安卓现代化开发系列——从生命周期到Lifecycle

安卓现代化开发系列——从生命周期到Lifecycle

由于安卓已经诞生快二十载&#xff0c;其最初的开发思想与现代的开发思想已经大相径庭&#xff0c;特别是Jetpack库诞生之后&#xff0c;项目中存在着新老思想混杂的情况&#xff0c;让许多的新手老手都措手不及&#xff0c;项目大步向屎山迈进。为了解决这个问题&#xff0c;开…
阅读更多...
jenkins实践篇(2)—— 自动打tag的可回滚发布模式

jenkins实践篇(2)—— 自动打tag的可回滚发布模式

大家好&#xff0c;我是蓝胖子&#xff0c;在上一篇我简单介绍了如何基于特定分支做自动编译和发布&#xff0c;在生产环境中&#xff0c;为了更加安全和快速回滚&#xff0c;我采取的是通过对代码打tag的方式来进行部署&#xff0c;下面我将详细介绍整个发布过程的逻辑。 发布…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023