Flask website decoration, easy template replacement

For this blog post, find a good-looking web page template, and simply change it into a flask template and display it.
Main blog directory: “Notes on learning to build a quantitative platform from scratch”

Article directory

Flask website decoration, easy template replacement
- Download template
- Python automatically generates directories
- Modify directory structure
- Rewrite template file
- Rewrite Flask related functions
- Template web page preview
- Pitfalls encountered
- - A white box appears

The main project plan requires Flask to display visual data. The website needs a good-looking homepage.
Task: Find a good-looking template and change it to a Flask template.

Download template

I found a website where I can download free templates. (Chinese website)

Find one you like and click download.

I use a template called “Helios”.

After downloading, his directory looks like this:

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 automatically generates directories

Here I simply wrote a small python script to automatically generate a directory for blogging:

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

__author__ = "Varalpha"

import os
importos.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("Input traverse directory")
    depth = int(input("Input traversal depth"))
    printdir4blog(path, depth)

Modify directory structure

Create a file

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

Modify it into your own project directory and rearrange the structure:

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

Here, put all images and other template files into the static/ folder.

Rewrite template file

First copy the html header file and make a reservation for subsequent additions {% 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>

A title parameter is reserved here.

Copy a footer again and make a reservation for later additions {% 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> & amp;copy; 2023 - <a href="http://www.varalpha.com">VarAlpha Co.</a>
All rights reserved.
\t\t\t\t\t\t</li>
<li>Design: <a href="http://html5up.net">HTML5 UP</a>
\t\t\t\t\t\t</li>
\t\t\t\t\t</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Footer End -->

Copy the Scripts and reserve them for future additions{% 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 %}

Finally, write the Body and make reservations for future additions {% 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>
\t\t\t\t</ul>
</nav>
</div>
</div>
{% block content %}{% endblock %}
</body>

A page_type parameter is reserved here to facilitate modification of subsequent page templates (the home page and sub-pages are different).

Synthetic layout.html




{<!-- -->{ title }} - Flask






{% block head %}{% endblock %}








{% block header %}

Flask

{% endblock %}



Home
\t\t\t\t



{% block content %}{% endblock %}




{% block footer %}{% endblock %}







& amp;copy; 2023 - VarAlpha Co.
All rights reserved.
\t\t\t\t\t\t\t

Design: HTML5 UP
\t\t\t\t\t\t\t
\t\t\t\t\t\t







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

Use layout.html to write 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
\t\t</p>
</header>
</section>
{% endblock %}

Rewrite Flask related functions

Create a file

touch __init__.py
touch views.py

Rewrite the app from the previous blog’s runserver.py into the flask generated file 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")

__init__.py imports app parameters

from .views import app

Modify the startup file runserver.py in the previous blog post

cd ..
vim runserver.py

Import app parameters

from gevent import pywsgi
from VarFlask import app

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

After completing the modification, restart flask docker to view the new web page:

Command line input:

sudo docker restart flask

Template web page preview

Flask_web1
Flask_web2

Pitfalls encountered

A white box appears

After uploading to the server, all displayed pages will have a white frame each time.
After debugging the network, I checked the TCP transmission fields and found that there were fields that could not be parsed. It was found that the problem was caused by an error in the transmission format.
Since the file format previously configured on the computer is UTF8 with signature, this is a problem caused by the signature of the file format.
Therefore, you need to change the uploaded file format to UTF8 without signature to solve this problem.
You can use the following command to remove the signature:

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