将Flask页面嵌入另一个没有代码重复的页面？

Question

我有一个页面(位于/ games/compare /),这是一个迷你图像比较游戏.向用户显示两个图像,并要求他们在回答问题时进行选择.此页面可以从数据库中获取图像,使用javascript和css在内部呈现模板,并使用AJAX与数据库进行通信.

现在如果我想将这个投票游戏嵌入主页而不重复任何代码呢？理想情况下,我会更新游戏,所有"功能"游戏的页面也会反映出这些变化.

我对如何以连贯有序的方式管理整个网站的资产感到困惑.有些页面有css,javascript,我也使用bootstrap和GIS框架等框架.

我会将游戏设置为蓝图吗？我如何组织资产(Javascript和CSS),以便没有重复？

目前,我有一个页面呈现模板(main.html),它扩展了另一个(base.html).Base.html包含header.html,nav.html和footer.html,其中包含为正文和其他人设置的块.

我目前的方法是在最低级别剥离所有内容并在最高级别重新组装,这使得编码非常慢.例如,我有投票游戏,现在它位于一个名为voting_game.html的页面中,并且其中包含玩游戏所需的一切(包括整页html,样式和javascript).现在,如果我想将该游戏包含在另一个页面上,比如根索引,我所知道的唯一解决方案是从voting_game.html中删除样式,js和整页html,只留下游戏运行所需的html .当我现在创建索引时,我将从voting_game.html导入html,但我将另外导入样式和javascript.这意味着我必须将每个页面构建两次,这是我需要做的工作的两倍.这个过程也会在整个地方留下很少的文件,因为我不断进行重构,这使得开发只是一个记账的噩梦.

必须有一种方法来做到这一点,并保持井井有条,但我需要你的帮助,了解最好的方法来做到这一点.

谢谢,

菲尔

编辑:嵌入页面也应该能够与其父页面(正在嵌入的页面)或同一父级内的其他嵌入页面进行通信(父级的子级应该能够通话.所以当有人播放时嵌入式游戏,他们获得积分,这些积分应显示在另一部分的其他部分,这将更新反映用户当前积分.

这个"记分板"也可以是一个单独的小部件/页面/蓝图,可以嵌入,并查找某些数据以便运行.

Answer 1

要重新使用 HTML 块，您可以使用 Jinja 的{% include %}标签。如果这太有限，Jinja 宏也很适合。您可以在单独的文件中定义宏并使用{% import "path/to/macros.html" as my_macros %}.

Flask-Assets 可以帮助您组织资产。

至于使用蓝图，是的，你应该使用它们。但它们主要适用于 Python 代码，而 HTML 模板是在不同的领域中组织的，因此它们的使用可能与这里无关。

但您不能总是删除所有重复项。如果您的游戏需要影响服务器生成的 HTML 的三个远程位置，则需要在包含您的游戏的每个模板中复制一些模板代码。