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

改写模板文件

先把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 参数。

再抄个页脚，并为之后增加补充做好预留{% 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 -->

把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 %}

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

合成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>

使用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

把之前博客的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")

__init__.py 导入app参数

from .views import app

修改上篇博文中的启动文件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()

完成修改，重启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.rhkb.cn/news/177360.html

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