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

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

本博文找个好看的网页模板，并简单改一改变成flask模板，并展示

主博客目录：《从零开始学习搭建量化平台笔记》

文章目录

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

主项目计划需要Flask展示可视化数据网站需要一个好看的主页。

任务：找一个好看的模板并改成Flask模板。

下载模板

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

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

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

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

txt 复制代码

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小脚本：

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)

修改目录结构

创建文件

bash 复制代码

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

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

txt 复制代码

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/ 文件夹中。

改写模板文件

先把html的头文件抄好，并为之后增加补充做好预留{% block head %}{% endblock %}：

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>
</html>

这里预留了个 title 参数。

再抄个页脚，并为之后增加补充做好预留{% block footer %}{% endblock %}：

html 复制代码

<!-- 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 -->

把Scripts抄上，并为之后增加补充做好预留{% block scripts %}{% endblock %}

html 复制代码

<!-- 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, 并为之后增加补充做好预留{% block content %}{% endblock %}

html 复制代码

<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 参数, 为了方便修改后续页面模板（主页与子页不同）。

合成layout.html

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>

使用layout.html编写index.html

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 相关函数

创建文件

bash 复制代码

touch __init__.py
touch views.py

把之前博客的runserver.py的app改写入flask生成文件views.py

python 复制代码

"""
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")

__init__.py 导入app参数

python 复制代码

from .views import app

修改上篇博文中的启动文件runserver.py

bash 复制代码

cd ..
vim runserver.py

导入app参数

python 复制代码

from gevent import pywsgi
from VarFlask import app

server = pywsgi.WSGIServer(("0.0.0.0", 5000), app)
server.serve_forever()

完成修改，重启flask docker 即可查看新的网页：

命令行输入：

bash 复制代码

sudo docker restart flask

模板网页预览

遇到的坑

出现白色框

上传至服务器后，所有显示的页面每次都有一段白色的框。

网络调试后，查看TCP传输字段，发现有未能解析的字段，发现是传输格式错误导致的。

由于电脑之前配置的文件格式为UTF8带签名，这是文件格式所带的签名导致的问题。

因此需要把上传的文件格式改为UTF8不带签名，就可以解决此问题。

可使用以下命令把签名去除：

bash 复制代码

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