Flask笔记--如何将网页模板导入Flask

2023年6月21日发(作者：)

Flask笔记--如何将⽹页模板导⼊Flask1.从⽹上下载了⼀个⽐较简单的⽹页模板。这⾥⽬前只有⼀个⽹页最终添加到Flask的结构如下，主要保留的就是,css,js,img,fonts，这⼏个⽂件都是再index中出现的，或者是css需要加载的⽂件，按照如下步骤去修改，如果发现哪些东西没有按照原本的⽅式显⽰，可以查看1.⽂件是否拷贝到static中。2.拷贝之后，对应的路径有没有进⾏修改。2.将整个⽂件夹先拷贝进之前已经写好的简单flask中。注意：是拷贝到templates中，因为是在templates中的。只是将render_template中的html改成你刚才拷贝的这个，名称可以⾃⼰定义⼀个，我这⾥拷贝之后改了⼀下名称。点击运⾏之后，⽹页应该可以打开，但是仅仅只有⽂字部分，格式，图⽚以及动态的部分是没有的。def index(): form=NameForm() if te_on_submit(): old_name=('name') if old_name is not None and old_name!= : print('name changed.') flash('Looks like you have changed your name!') session['name']= return redirect(url_for('index')) return render_template('',current_time=(), form=form,name=('name'))3.修改模板内容。由于下载的模板不是bootscrap的，所以先将模板修改成bootstrap的。{% extends ‘bootstrap/’ %}其他步骤可以参考书本。修改完成后，再次运⾏。顺利的话，应该不会报错。显⽰的内容和上⼀步的相同。4.修改CSS⽂件的路径原先中的CSS连接⽂件如下： 根据其中的地址，找到对应的CSS⽂件，并将他们拷贝到static/CSS⽂件夹下。同时修改引⽤的路径，修改后的内容如下： 点击运⾏后，会看到版式发⽣了变化。但是没有图⽚。注意这⾥的icon。⽹页⾥⾯的icon是通过这个连接去添加的。这个CSS还要去加载对应的字体，打开这个css可以看到如下内容：@font-face { font-family: 'simple-line-icons'; src: url('../fonts/?v=2.4.0'); src: url('../fonts/?v=2.4.0#iefix') format('embedded-opentype'), url('../fonts/2?v=2.4.0') format('woff2'), url('../fonts/?v=2.4.0') format('truetype'), url('../fonts/?v=2.4.0') format('woff'), url('../fonts/?v=2.4.0#simple-line-icons') format('svg'); font-weight: normal; font-style: normal;所以如果icon没有显⽰，对应的，你也要将字体添加到static⽂件夹下⾯。路径这次可以不修改。路径的解释如下：⼀直没有效果，后来才发现是绝对路径，相对路径搞错了。url(images/)表⽰的是当前⽂件夹下的images⽂件夹下的图⽚，因为CSS⽂件位于/Content⽂件夹，所以系统就去/Content/images下寻找图⽚，⽽此时图⽚位于/images中，当然就找不到了。修复⽅法：1. 绝对路径: url(/images/) 表⽰到根⽬录下寻找images⽂件夹⾥⾯的图⽚2 相对路径：url(…/images/) 表⽰从当前⽬录返回到上⼀层⽬录，即/⽬录，然后再查找/⽬录下的images⽬录⾥⾯的图⽚以下是百度的内容：“.” 代表当前所在⽬录，相对路径。“…” 代表上⼀层⽬录，相对路径。“…/…/” 代表的是上⼀层⽬录的上⼀层⽬录，相对路径。5.修改图⽚的路径原先的路径如下： style="background-image: url('img/');">