一个组件，一整张网页：隆重推出 TsgcHTMLComponent_Site

2026年7月6日 · 组件

sgcHTML 已经为 Delphi、C++ Builder 和 .NET 开发者提供了 60 多个可渲染 Bootstrap 5 标记的服务端组件 — 表格、图表、表单、聊天，凡是你要放进页面的东西一应俱全。但仍然有一样东西需要在每个项目里手工拼装：页面本身。顶部栏。侧边菜单。页脚。也就是框住每一屏内容的那部分。今天，这些样板代码终于有了自己的组件。

TsgcHTMLComponent_Site 用单个组件构建出一整张网页 — 页眉、导航菜单、主内容和页脚 —。你设置好品牌信息，添加几个菜单项，放入你的内容，然后读取 HTML 属性即可。而且由于整个布局都由一个 Layout 属性驱动，你只需改动一行代码，就能在六种不同的页面排布之间切换。

外壳就是那些样板

看看任何一个真实的 Web 应用，大部分像素都是外框：带有徽标和用户菜单的页眉、一列导航链接的侧边栏、内容区、页脚。这套外框在每个页面上都一样，而在此之前，每个 sgcHTML 项目都要重新造它 — 手写的导航栏 HTML 字符串、用自定义 CSS 定位的 TsgcHTMLComponent_Sidebar、最后再拼上去的页脚。它能用，但正是那个谁都不想写第二遍的部分。

TsgcHTMLComponent_Site 就是把这层外壳做成了一等公民组件。它组合了已有的 TsgcHTMLComponent_NavBar 和 TsgcHTMLComponent_Sidebar，把它们包进 Bootstrap 模板，再通过少量属性把整体暴露出来。下面是一个完整的页面：

uses
  sgcHTML_Component_Site;

var
  oSite: TsgcHTMLComponent_Site;
begin
  oSite := TsgcHTMLComponent_Site.Create(nil);
  try
    oSite.Title       := 'Acme Admin';
    oSite.Layout      := slTopNavSidebarLeft;
    oSite.Theme.Preset := stpBlue;

    oSite.Brand.Text  := 'Acme';
    oSite.Brand.Href  := '/';

    // one menu drives the sidebar (and the mobile off-canvas)
    oSite.AddMenu('Dashboard', '/',          'bi-speedometer2').Active := True;
    oSite.AddMenu('Customers', '/customers',  'bi-people');
    oSite.AddMenu('Invoices',  '/invoices',   'bi-receipt');

    oSite.AddContent('<h1 class="h3">Welcome back</h1>');
    oSite.Footer.Text := '(c) 2026 Acme';

    Response := oSite.HTML;   // a complete <!DOCTYPE html> page
  finally
    oSite.Free;
  end;
end;

这就是整张页面：一条带品牌信息的顶部导航栏、一个由菜单生成的左侧边栏、放在中间的你的内容、底部的页脚，Bootstrap 5 已加载，在移动端具有响应式。

六种布局，一个属性

把外壳做成组件的理由是：外壳恰恰是你想在不触碰内容的前提下重新造型的那部分。设置 Layout，同样的品牌、菜单和内容就会重排成一个完全不同的页面：

slTopNavSidebarLeft — 经典的管理后台布局：顶部栏加一个固定的左侧边栏。
slSidebarLeft / slSidebarRight — 文档或应用风格的侧边栏，没有顶部栏，可置于任意一侧。
slTopNav — 营销 / 门户布局：顶部导航、居中内容、无侧边栏。
slIconRail — 紧凑的仪表盘，配一条仅含图标的窄导航条。
slOffcanvas — 移动优先：菜单隐藏在汉堡按钮后面，滑出显示。

改动一行 — oSite.Layout := slIconRail; — 页眉、菜单和内容便随之重排。你代码里的其他部分都不用变。

预设与主题

如果你更愿意直接挑一套外观，而不是逐项配置，Preset 属性就把布局和主题打包进一次赋值 — spAdmin、spDashboard、spPortal、spDocs、spLanding 或 spApp。若要更精细的控制，Theme 子对象携带一个颜色预设（stpBlue、stpViolet、stpEmerald、stpSlate、stpDark）、一个可选浅色、深色或跟随系统的 Mode，以及一个可选的自定义主色。

oSite.Preset      := spDashboard;   // icon rail + violet + dark
oSite.Theme.Mode  := stmSystem;     // follow the OS colour scheme
oSite.Theme.Primary := '#0057B8';   // or override the accent directly

开箱即用

页眉承载了每个应用都要重新实现的那些部件。用一个开关把它们打开，组件就会输出标记、CSS 以及少量 JavaScript：

一个响应式侧边栏，在小屏幕上自动折叠为 off-canvas 菜单；
Header.ShowThemeSwitcher 和 Header.ShowLanguageSwitcher 下拉菜单；
一个带用户名的 Header.ShowUser 头像，以及一个 Header.ShowLogout 控件；
一个同时供给侧边栏和移动端菜单的单一 Menu 集合，因此导航只需定义一次。

内容区依旧是纯粹的 sgcHTML：AddContent 接受任意标记，而 AddSection 会包裹一张带标题的卡片 — 因此其余 60 多个组件中的任何一个（表格、图表、表单）都能直接落进页面。

Delphi、C++ Builder 和 .NET

和 sgcHTML 的其余部分一样，该组件在三种语言中都提供完全一致的 API。Delphi 和 C++ Builder 版本读取继承而来的 HTML 属性；.NET 版本暴露 GetHTML()。渲染出的页面逐字节相同。Bootstrap 默认从 CDN 加载，因此无需额外部署任何东西。

如何获取

TsgcHTMLComponent_Site 是 sgcHTML 的一部分，安装后会以自带图标出现在组件面板上。完整的操作演练请见组件页面，完整的组件清单请见功能矩阵，完整的参考手册请见在线帮助。你可以用免费试用版体验全部功能。

对另一套布局模板有疑问、反馈或想法吗？联系我们 — 你会收到编写这些代码的人的回复。