Question

我正在从头开始创建一个管理面板，我想知道我可以使用哪些技术来最小化重复代码的需要（特别是对于HTML）。

回过头来我只是在每个文件中重写了所有HTML。虽然这为单页提供了最终的可修改性，但工作和维护的数量使其成为最糟糕的方式。

许多年前，我开始通过以下功能将PHP合并到HTML中：

PrintMenu();
PrintHeader();
PrintLeftBox();

虽然这缩短了对代码的需求，但它使得页面的未来变更过于复杂。如果我想更改整个布局并从HTML中删除左框怎么办？现在我有数百页的PrintLeftBox（）;

这两种简单的方式几乎只是我创建网站布局的方式。

现在我正在寻找一种更加动态和有效的方式来生成可以逐页修改并轻松重做的布局。

我的大多数网页看起来都一样;顶部的菜单，中间的巨大内容和底部的页脚。有些网站需要不同类型的设置;顶部的菜单，左侧的某种导航，中间的项目列表以及右侧的“编辑视图”。

如何创建可以处理不同页面的“布局系统”？

我不需要任何代码，我需要有人指出我正确的方向。

Answer 1

嗯，在我看来，使用PrintMenu（）有一百页是一件好事，因为你只需要更改该函数的内容来更新数百页的外观，至少与你一样长确保所有页面都使用菜单。现在也许如果你传递了一个参数，让我们说一个数组（以便你以后可以更新它的属性），其中包含例如页面特征，那么这将使一个更灵活的模型。或者，如果你愿意，也可以传递一个物体。

pageConfig = new oPageConfig

PrintMenu (pageConfig);
PrintHeader (pageConfig);
PrintLeftBox (pageConfig);

同样将变量传递给您的函数，您可以选择不显示菜单（例如，对于没有菜单的特殊页面）。

Answer 2

在这种情况下，使用模板引擎非常有用。根据需要选择以下两种解决方案之一。

在后端，尝试Jade（Node.js），TWIG（PHP）......

您可以在此处找到更多资讯：http://en.wikipedia.org/wiki/Comparison_of_web_template_engines;

Menu，Header，Footer将分隔在不同的文件中，并且可以包含在其他html文件中，这些文件将由模板引擎呈现在服务器部分。
在前端，尝试Angular.js或其他Web MVC框架，

此解决方案的缺点是您可能需要花费更多时间来提供稳定的restful api，因为所有渲染工作都由客户端部分的Angular.js完成。

HTML布局技术（用于管理面板）

2 个答案: