如何将样式应用于flask中生成的html页面

Question

我有一个图书搜索页面。当用户搜索书籍时，页面中会显示相关书籍列表。所有行都有一个超链接，当用户点击它进入详细信息页面时。我使用isbns（例如/ search / 1236BCD2）生成详细页面作为搜索的扩展。因此，对于每本书，此页面地址都不同。这是问题，我用于所有页面的styles.css都不能应用于这些页面。我认为这是因为Flask的结构。当它试图打开它寻找/search/static/styles/styles.css而不是/search/1236BCD2/static/styles/styles.css的页面时。我该怎么做才能解决这个问题？

Answer 1

使用template inheritance

模板继承允许您构建一个基础“骨架”模板，其中包含站点的所有常用元素，并定义子模板可以覆盖的块。

然后，如果您在数据库中有书籍，请创建详细信息视图。

@app.route('/details/<bookid>')
def details(id):
    # search for a book with that id in the database

Answer 2

不幸的是，你的问题有点模糊，所以我的回答也会有些模糊。

1. 这是Flask应用程序如何设置为提供静态文件的问题吗？您的目录结构是否与Flask应用程序配置匹配，以便Flask可以找到您想要的静态文件？通常，Flask希望在应用程序的根目录中存在一个名为“static”的文件夹。应用程序的根目录是实例化包含Flask应用程序的文件的目录。例如，您可能有一个名为“app.py”的文件，其中包含一行app = Flask(__name__)。在这种情况下，默认情况下，“app.py”所在的目录将是应用程序的根目录。默认情况下，Flask希望名为“static”的文件夹与该文件位于同一目录中。但是，静态文件夹的名称可以更改为您想要的任何名称。您可以通过执行类似app = Flask(__name__, static_folder="search")的操作将静态文件夹更改为“搜索”而不是“静态”。有关应用配置参数，请参阅here。因此，Flask应该在/static/styles/styles.css或/search/styles/styles.css中查找您的静态文件，具体取决于您的应用程序配置。如果您希望Flask在/static/1236BCD2/styles/styles.css或/search/1236BCD2/styles/styles.css这样的目录中找到“styles.css”，那么您要么不明白您的目录结构必须与Flask应用程序的配置方式相匹配，要么您正在生成不同的目录和不同的样式.css为每本书（我希望你没有这样做）。
2. 我假设您没有为每本书动态生成文件夹和CSS文件。假设您现在已确保将Flask应用程序配置为与项目目录结构相匹配，则可以使用url_for()函数确保Flask可以将静态资源链接到HTML页面。你可以链接你的资产，如<link rel="stylesheet" href='/static/styles/styles.css'>，如果你想硬编码值（我不推荐），或者你可以像url_for()一样使用<link rel="stylesheet" href='url_for("static", filename="styles/styles.css)'>。 “filename”参数值始终相对于静态目录。
3. 我的直觉是您拥有静态文件的默认Flask应用程序配置，但您不了解如何使用Jinja2模板引擎链接HTML页面中的这些静态资产。有关在Flask中提供静态文件的一般信息，请参阅here。如果我错了，你有一些复杂的CSS生成和使用，你需要配置你的应用程序来处理它，你需要查看Flask蓝图。 Flask蓝图允许您为每个蓝图设置不同的静态目录，然后您可以根据需要创建任意数量的蓝图来处理各种书籍。