婚庆一条龙包含哪些项目,seo关键词优化工具,网站建设基础问题,淘宝客怎么做网站管理Flask 网站装潢#xff0c;简易更换模板 本博文找个好看的网页模板#xff0c;并简单改一改变成flask模板#xff0c;并展示 主博客目录#xff1a;《从零开始学习搭建量化平台笔记》 文章目录 Flask 网站装潢#xff0c;简易更换模板下载模板Python 自动生成目录修改目录…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.htmlPython 自动生成目录
这里为了写博客简单地写了个自动生成目录的python小脚本
#!/usr/bin/env python3
# -*- coding: utf-8 -*-__author__ Varalphaimport 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_depth0):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 langen
headtitle{{ title }} - Flask/titlemeta charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1, user-scalableno /meta namedescription contentmeta nameauthor contentXiuchuan Zhang!-- CSS FILES --link relstylesheet typetext/css href/static/css/main.css /{% block head %}{% endblock %}!-- end --
/head
/html这里预留了个 title 参数。
再抄个页脚并为之后增加补充做好预留{% block footer %}{% endblock %}
!-- Footer --
div idfooterdiv classcontainer{% block footer %}{% endblock %}hr /div classrowdiv classcol-12!-- Copyright --div classcopyrightul classmenulicopy; 2023 - a hrefhttp://www.varalpha.comVarAlpha Co./a All rights reserved./liliDesign: a hrefhttp://html5up.netHTML5 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-preloaddiv idpage-wrapper!-- Header --div idheader{% block header %}div classinnerh1a href{{ url_for(home) }} idlogoFlask/a/h1/div{% endblock %}!-- Nav --nav idnavullia href{{ url_for(home) }}Home/a/li/ul/nav/div/div{% block content %}{% endblock %}
/body这里预留了个 page_type 参数, 为了方便修改后续页面模板主页与子页不同。
合成layout.html
!DOCTYPE html
html langen
headtitle{{ title }} - Flask/titlemeta charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1, user-scalableno /meta namedescription contentmeta nameauthor contentXiuchuan Zhang!-- CSS FILES --link relstylesheet typetext/css href/static/css/main.css /{% block head %}{% endblock %}!-- end --
/headbody class{{page_type}} is-preloaddiv idpage-wrapper!-- Header --div idheader{% block header %}div classinnerh1a href{{ url_for(home) }} idlogoFlask/a/h1/div{% endblock %}!-- Nav --nav idnavullia href{{ url_for(home) }}Home/a/li/ul/nav/div/div{% block content %}{% endblock %}!-- Footer --div idfooterdiv classcontainer{% block footer %}{% endblock %}hr /div classrowdiv classcol-12!-- Copyright --div classcopyrightul classmenulicopy; 2023 - a hrefhttp://www.varalpha.comVarAlpha Co./aAll rights reserved./liliDesign: a hrefhttp://html5up.netHTML5 UP/a/li/ul/div/div/div/div/div!-- Footer End --!-- JAVASCRIPT FILES --script src/static/js/jquery.min.js/scriptscript src/static/js/jquery.dropotron.min.js/scriptscript src/static/js/jquery.scrolly.min.js/scriptscript src/static/js/jquery.scrollex.min.js/scriptscript src/static/js/browser.min.js/scriptscript src/static/js/breakpoints.min.js/scriptscript src/static/js/util.js/scriptscript 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 classinnerheaderh1a href{{ url_for(home) }} idlogoFlask/a/h1hr /pA Quantitative Stock Analysis Platform/p/headerfootera href#banner classbutton circled scrollyStart/a/footer
/div
{% endblock %}{% block content %}
!-- Banner --
section idbannerheaderh2Hi. Youre looking at strongFlask/strong./h2pA 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, titleHome Page, page_typehomepage)__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模板网页预览 遇到的坑
出现白色框
上传至服务器后所有显示的页面每次都有一段白色的框。 网络调试后查看TCP传输字段发现有未能解析的字段发现是传输格式错误导致的。 由于电脑之前配置的文件格式为UTF8带签名这是文件格式所带的签名导致的问题。 因此需要把上传的文件格式改为UTF8不带签名就可以解决此问题。 可使用以下命令把签名去除
find . -type f -name * -print | xargs -i sed -i s/\xE F\xBB\xBF// {}
