在没有代码重复的情况下将 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 以及为 body 和其他设置的块。

我目前的方法是在最低级别剥离所有内容并在最高通用级别重新组装，这使得编码非常慢。例如，我有那个投票游戏，现在它位于一个名为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 的三个遥远位置，则需要在包含您的游戏的每个模板中复制一些模板代码。