Delphi 12.2 新增的 WebStencils 尝鲜

这个有本文上述的 github 链接里面的例子代码。1. 使用一个框架页面，在需要装正式内容的地方，写上：@RenderBody;2. 页面内容文件比如 index.html，不需要有页面框架代码诸如 <html> 等等，仅仅只需要提供页面显示内容。然后在文件开头把要使用的框架文件的名字写上去：@LayoutPage 框架.html；3. 页面的其它地方的代码，需要引入其它外部文件的内容，使用 @

pcplayer

2730人浏览 · 2024-09-23 01:50:59

pcplayer · 2024-09-23 01:50:59 发布

WebStencils 是 Delphi 新增的服务器端 WEB 控件

这个玩意怎么用，用起来有意义吗？

试试才知道。以下测试的描述都是基于 Delphi WebBroker 这个 WEB 服务器端框架。

最新出来的，各方面资料很少，官方也没有详细文档，只能自己摸索。

WebStencils - RAD Studio (embarcadero.com)

初步试探总结

在页面 HTML 代码里面可以嵌入 Delphi 的对象或者 DataSet

这个有本文上述的 github 链接里面的例子代码。

如何让页面代码组件化

这个是我最关心的问题。

比如，有 10 个页面。假设 10 个页面分为两组，每一组的页面的 <head></head> 部分是相同的。如果 10 个页面文件都复制粘贴上相同页面代码，就很土气。应该把相同的部分，单独写在一个文件里面，需要使用的页面，仅仅只需要引用这个文件就好了。

另外，页面的页头，抬头的 Banner 部分，菜单部分，可能也是多个页面是相同的。

另外，页面的页脚部分，可能也是很多页面相同。

都有类似的情况。

写 Delphi 代码的人，当然想把相同的代码抽离出来，放到一个函数里面。如果函数太复杂，那就搞一个类。其它需要这个代码的地方，调用这个函数，或者这个类就好了。

使用传统的 PageProducer 的方法

解决上述问题，在 12.2 之前的 Delphi 版本中，在页面代码需要嵌入一个外部文件的地方，写上一个 Tag 字符串，比如：<#MyPageHead>。然后在 Delphi 的代码里面，使用一个 PageProducer 来加载这个页面，在 PageProducer.OnTag 事件方法里面，写代码，根据对应的 Tag 字符串，把内容换成需要的字符串（比如，这个字符串是加载的一个外部 HTML 或者 TXT 文件，也就是一个页面组件）。

这样做的问题是：如果有很多页面，页面里面有很多组件需要用 Tag 方式替换，服务器端的 Delphi 代码就要写很多。没什么技术含量，就是代码多，很累。

PageProducer 把页面的各个组件都装配好以后，程序使用：

Response.Content := PageProducer1.Content;

就可以把服务器端渲染好的页面代码发送给浏览器。

使用 WebStencils 的方法

类似 PageProducer ，设计期拖一个 TWebStencilsProcessor 到 WebModule1 里面，就可以开始使用它了。注意：这里必须还要有一个【引擎】控件，TWebStencilsEngine

假设我要输出 index.html 页面给浏览器，只需要：

WebStencilsProcessor1.InputFileName := 'index.html';
Response.Content := WebStencilsProcessor1.Content;

到这里，服务器端的 Delphi 代码就写完了。

至于在 Index.html 里面，组装其它页面代码，方法很简单：

页面模板和页面内容

首先，有一个所有页面都要使用的页面模板，大概就是一个框架页面，比如：

<html>
<head>
  <style>xxxxxx</style>
  <link xxxxx />
</head>

<body>

@RenderBody

</body>

</html>

这个框架页面代码保存为 Temp.html;

然后我们的 index.html 页面这样使用框架页面，以下是 index.html 的代码：

@LayoutPage Temp.html
<div>
我的页面内容，显示给用户看的部分
</div>

这里的逻辑是：

1. WebStencilsProcessor1 的 InputFileName 是 index.html，它加载这个文件；

2. 它发现 index.html 里面有一个 @LayoutPage Temp.html，去加载 temp.html 这个框架页面。

3. 框架页面里面，有个 @RenderBody ，它在这里，把 Index.html 的内容放进去，最终形成一个完整的页面代码，作为 WebStencilsProcessor1.Content 输出。

其它页面组件怎么办

上面那个逻辑把我误导了。以为在其它地方要引入一个页面组件，也是类似的画个圈（@）的方式。尤其是本文前面提到的那个官方文档里面有说：

@ExtraHeader { ... }: Used within the specific HTML page to indicate a block of code to be added as extra header information.
@RenderHeader: Indicates in the template file (generally in the HTML head section) where to add the extra header of the page, if available

浪费我一个小时来回测试这个 RenderHeader，就是没效果。我怕是我打错字导致的，逐个字母用眼睛反复检查。怕我理解有错误，把这个 RenderHeader 和 ExtraHeader 反复在不同页面文件之间来回测试，不管哪个放到框架文件里面，都不行。

简单说，我的测试结果，上述玩意没有预期的输出结果。也查不到更多使用细节和方式。

最后发现文档里面还提到一个 @Import ，这个试试，发现，用它就对了。

注意：@Import 后面的文件名，必须是 .html 不能是 .txt 或者其它。

1. 把需要重复使用的页面 HTML 代码，抽出来单独保存为一个文件，我把它叫做一个 HTML 片段，一个 HTML 组件。

2. 在一个页面，需要这个组件的地方，使用 @Import 文件名.html 的方式。

以下是我测试成功的框架页面的代码：

<!DOCTYPE html>
<html lang="en">

@Import HTMLHeader.html


  <body>
    <!-- Header -->
    @Import PageHeader.html
    <!-- ./ Header -->

    <!-- Main -->
<main class="container">
    
       @RenderBody

  <!-- ./ Main -->
 </main>

    <!-- Footer -->

         @Import PageFooter.html

    <!-- ./ Footer -->
    
  </body>
</html>

One more thing

简单总结一下：

1. 使用一个框架页面，在需要装正式内容的地方，写上：@RenderBody;

2. 页面内容文件比如 index.html，不需要有页面框架代码诸如 <html> 等等，仅仅只需要提供页面显示内容。然后在文件开头把要使用的框架文件的名字写上去：@LayoutPage 框架.html；

3. 页面的其它地方的代码，需要引入其它外部文件的内容，使用 @Import 文件名.html 的方式。

问题来了：

我的页面组装正确了，也正确显示了。但我在页头里引用的 HTMX 的 javascript 没有起作用。用浏览器的开发者工具查看，发现提示是，这个 javascript 文件不存在。

把开发工具里面显示的这个 JavaScript 的 URL 拷贝出来，放到文本编辑器里面，和能够正常工作的页面里面的 URL 上下排在一起，逐个字母用眼睛对比看，发现了问题。原来那个 URL 里面有一个圈（@）符号。经过 WebStencilsProcessor1 处理后，那个圈没有了。

那个 HTMX 的引用如下：

<script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>

这才想起官方文档里面有提到，如果需要一个圈，就来两个圈。

于是，把代码修改为：

<script src="https://unpkg.com/htmx.org@@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>

我靠，通过了。问题解决。