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

这篇具有很好参考价值的文章主要介绍了Flask 网站装潢, 简易更换模板。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

本博文找个好看的网页模板,并简单改一改变成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 网站装潢, 简易更换模板,flask,python
Flask 网站装潢, 简易更换模板,flask,python

遇到的坑

出现白色框

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

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

到了这里,关于Flask 网站装潢, 简易更换模板的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Python】Web学习笔记_flask(7)——Jinja2模板(1)

    Jinja2是基于python的模板引擎,功能类似于PHP的amarty、J2ee的Freemarker和velocity,完全支持Unicode,并具有集成的沙箱执行环境,Jinja2使用的事BSD协议,允许使用者修改和重新发布代码,也允许使用或在BSD代码上开发商业软件发布和销售。 渲染模板: 执行关键代码: 执行结果:  

    2024年02月11日
    浏览(44)
  • 【GPT,Flask】用Python Flask结合OpenAI的GPT API构建一个可自主搭建的内容生成应用网站

    自己构建模型并进行训练需要很高的知识,技能和资源门槛。如今,通过OpenAI提供的API,则可以快速通过GPT能力构建可以提供内容生成服务的在线网站。这套框架可以提供给用户,用户可以利用该框架在自己的环境(比如自己的公司内)构建内容生成服务。你也可以自己上线

    2024年02月11日
    浏览(58)
  • python+django电子资源类学习资料分享网站flask

    本设计是电子资源类的网站设计与实现,。系统前台实现了首页,分享资源,交流论坛,公告信息,个人中心,后台管理等功能。系统的后台实现了首页,个人中心,用户管理,分享资源管理,资源分类管理,交流论坛,系统管理等功能的添加、删除和修改。本文首先介绍了

    2024年04月15日
    浏览(45)
  • python轻量级web框架flask初探,搭建网站原来这么简单

    ✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN新星创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开

    2024年03月19日
    浏览(111)
  • 【python】flask模板渲染引擎Jinja2,通过后端数据渲染前端页面

    ✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN新星创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开

    2024年04月11日
    浏览(53)
  • 基于 Python 的 Flask 框架开发的在线电影网站系统(附完整源码)

    今天我给大家分享的是基于Python的Flask框架开发的在线电影网站系统,大家平时需要哪个方面的项目都可以在每篇文章的下面留言,我后续会在公众号分享出来。 该项目为基于Python的Flask框架搭建的在线电影网站 项目介绍:网站前端采用HTML5编写,使用Bootstrap前端开发框架,后

    2024年02月07日
    浏览(53)
  • 基于Python flask 的某招聘网站爬虫,招聘岗位可视化系统

    一、介绍 原文地址 今天为大家带来的是Python基于Flask的招聘信息爬取,招聘岗位分析、招聘可视化系统。 此系统是一个实时分析招聘信息的系统,应用Python爬虫、Flask框架、Echarts、VUE等技术实现。 本项目利用 Python 从某招聘网站抓取海量招聘数据,进行数据清洗和格式化后

    2024年02月07日
    浏览(54)
  • Windows系统使用Python Flask制作Web网站并结合内网穿透公网访问

    Flask是一个Python编写的Web微框架,让我们可以使用Python语言快速实现一个网站或Web服务,本期教程我们使用Python Flask搭建一个web问答应用程序框架,并结合cpolar内网穿透工具将我们的应用程序发布到公共网络上,实现可多人远程进入到该web应用程序访问。 在操作上我们将使用

    2024年03月23日
    浏览(34)
  • Python-web开发学习笔记(3):Flask Demo,一个网站开发小案例

    ☕️ 推荐关注我的另一个专栏系列:大道至简,该系列收录了许多优质的人工智能算法博文,包括机器学习和自然语言处理等,持续更新中,欢迎各位关注~   介绍完Python-web开发学习笔记(2)--- HTML基础_尚拙谨言的博客-CSDN博客,我们来搞一个简单的网站小案例,带大家更进

    2024年02月06日
    浏览(41)
  • 【python】flask模板渲染引擎Jinja2,流程控制语句与过滤器的用法剖析与实战应用

    ✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN新星创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开

    2024年04月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包