个性化设计 HTML 段落模板
学习如何调整 bx_Layout 文件夹中的现有页面部分,创建自己的区块和标签模板,并将编辑者的选择限制为自己的 HTML 区块模板。
教程的前提和目标
你需要访问 HTML 编辑器 和 bluetronix CMS 的 文件管理器,以及相应的开发者权限来访问模板文件夹。在本教程中,你将学习如何调整现有的页面部分,创建自己的 HTML 区块模板,并在需要时仅向编辑者提供已批准的模板。
我们使用示例模板 Clients 和 Banner。标准文件保持不变;个性化更改通过标记 _own 进行。
1. 在编辑器中找到页面区块模板
打开一个现有的 CMS 页面,选择 编辑,然后通过 插入 → 页面区块 打开模板选择。上下文菜单中还提供了 文本模块 项目,用于较小的可重用内容。本教程首先讨论页面区块。
在 页面区块 窗口中,显示可用模板及其预览。
作为示例,选择类别 Clients。那里提供了多个布局变体。
2. 模板存储的位置
模板文件位于开发者文件夹 /bx_Layout/ 中。在 文件管理器 中打开该文件夹。你会找到页面区块的文件 (Section*.txt) 和文本模块的文件 (Tag*.txt)。
文件名确定与模板选择的关联。页面区块模板始终以 Section 开头; 之后是其特定名称。自己的变体在文件扩展名前使用附加 _own。
| 文件名 | 在编辑器中的含义 |
|---|---|
SectionClients.txt | 标准模板“Clients” |
SectionBanner.txt | 标准模板“横幅” |
SectionClients_own.txt | 自己的变体,替换“Clients” |
SectionMyTemplate_own.txt | 额外的自定义模板,名称为“MyTemplate” |
你也可以创建一个全新的模板。你为它选择一个自定义名称,在Section后面。如果没有同名的标准文件,新的模板将额外出现,而不是替换现有的模板。
3. 为什么不应该直接编辑标准文件
与CMS一起提供的标准文件来自/bx_Layout/,在系统更新时将被覆盖。因此,直接对SectionClients.txt或SectionBanner.txt的更改不是永久性的。复制所需的标准文件,并用_own标记你自己的版本。相应的_own变体是为你的个性化、更新持久的调整而设计的。
SectionClients.txt
↓ kopieren
SectionClients_own.txt
如果两个文件都存在,CMS将使用适当的SectionClients_own.txt,而不是标准模板SectionClients.txt。你不需要在编辑器中重命名Clients类别。
相反,如果你以新名称创建自己的文件,如SectionMyTemplate_own.txt,那么标准模板Clients仍然可用。
4. HTML 区块模板的结构:分隔符
一个Section文件可以包含多个布局变体的同一类别。为了使CMS编辑器识别出单个变体,它们用以下分隔标记分开:
<!--__SP_SectionTemplate__-->
标记位于开始、变体之间和示例文件的末尾。请准确保留这种写法。如果缺少分隔标记,编辑器无法可靠地将多个变体显示为独立选择。
标准模板SectionBanner.txt展示了这个原则,使用了多个不同的横幅布局。你可以将它作为自己简单构建的Section的基础。
<!--__SP_SectionTemplate__-->
<Section class="section py-5 py-lg-6">
<div class="container py-3">
<div class="row align-items-center g-4">
<div class="col-lg-8 wow fadeInLeft">
<span class="badge text-bg-warning mb-3">­New­</span>
<h2 class="mb-2">­Designed for everyday success­</h2>
<p class="mb-0">­Explore practical solutions created to make everyday work easier, clearer and more effective.­</p>
</div>
<div class="col-lg-4 text-lg-end wow fadeInRight">
<a href="#"><button class="btn btn-light btn-lg">­Learn more­</button></a>
</div>
</div>
</div>
</Section>
<!--__SP_SectionTemplate__-->
这个示例是完整的横幅变体。对于第二个变体,你将其HTML代码放在最后一个分隔标记之后,并用相同的标记结束这个变体。接着你可以根据你的要求设计实际的Section。
你不需要自己添加类sectionAll:bluetronix编辑器在插入页面部分时会自动添加。
5. 复制客户模板并更改标题
在文件管理器中打开现有的SectionClients模板,查看它的HTML代码。在我们的示例中,它包含一个标题、描述和多个合作伙伴方块。
将相应的模板复制为SectionClients_own.txt,并通过编辑打开副本。为我们的测试在标题中添加字符串NEW!!!!。你同样可以个性化文本、卡片数量、图标或CSS。
<!-- Vorher -->
<h2>­Trusted by growing organizations­</h2>
<!-- Nachher in SectionClients_own.txt -->
<h2>­NEW!!!! Trusted by growing organizations­</h2>
点击保存,然后再次打开选择插入 → 页面部分 → Clients。在那里,你可以通过更改的标题识别出自己的版本。第二个Clients变体则可以独立选择和编辑。
6. 以新名称提供自己的模板
你可以创建一个独立的模板,而不是同名的替代文件。为此,复制一个Clients变体,并将其保存为SectionMyTemplate_own.txt。Section之后的部分是你自己的模板名称;这决定了在编辑器中的新选择。原始Clients模板在不同名称下不会被替换。
SectionClients.txt → Standard: Clients
SectionClients_own.txt → eigene Version von Clients
SectionMyTemplate_own.txt → zusätzliche eigene Vorlage MyTemplate
因此,你可以为特定页面类型的客户开发固定部分,而无需更改所有提供的模板内容。
7. 使用 Only_own.txt 仅显示自己的模板
如果最终客户只应使用你发布的模板,请在文件夹/bx_Layout/中创建标志文件Only_own.txt。根据所示的模板配置,将仅提供带有_own后缀的适当自定义文件以供选择。该文件在此功能下不需要HTML代码。
/bx_Layout/Only_own.txt

示例:如果在目录中存在SectionClients.txt、SectionBanner.txt和SectionMyTemplate_own.txt,则在激活该设置后,选择将只包含适当的自定义模板。这样,你可以为客户提供有针对性的、项目相关的选择。
8. 自定义文本模块的标签模板
相同的_own原则适用于较小的文本模块。它们的文件以Tag开头。例如,从TagTemplate.txt变为TagTemplate_own.txt。你可以通过编辑器中的文本模块条目提供此变体。
TagTemplate.txt
↓ kopieren
TagTemplate_own.txt

9. 复制可编辑列与 colAll
如果一个Section包含多个可重复列,则带有类colAll的列可以被识别为独立块。这将在上下文菜单中提供文章列 → 复制功能。
<div class="colAll col-md-6">
<h2>­Hello world­</h2>
<p>­Writing­</p>
</div>
在复制时,相关块将作为第二列插入。对于可重复的卡片或文章列,你必须将colAll放置在正确的容器中。因此,父级的sectionAll类会自动由编辑器提供。
10. 文本标记和多语言模板
提供的标准Sections在示例文本中包含字符串­,例如在标题前后。这些文本标记不是与分隔标记<!--__SP_SectionTemplate__-->混淆的。在复制现有模板时,如果希望保留当前编辑器行为,应首先保留这些CMS标记。
<h2>­Designed for everyday success­</h2>

在多语言项目中,额外的翻译标记可能是有用的,以便编辑者能够维护所需语言的内容。bluetronix CMS设计支持24种语言。对于简单的仅单语言项目模板,可以省略不需要的额外翻译标记;编辑者必需的段落分隔标记必须保留。
11. 自定义功能和所需的包含文件
当你在模板中添加PHP函数或模块输出时,请为自定义函数使用唯一名称。现有的函数不能以相同名称再次声明。你可以通过function_exists()来确保声明的安全性:
if(!function_exists("MyTestFunction")) {
function MyTestFunction($Test) {
return $Test;
}
}
所需的include应至少在每个部分引用一次。相应的include标记可以通过编辑器复制:
<!--bxInclude--/bx_Mod/Blog_Detail-->
带有.txt和.bx后缀的内部模板文件在描述的CMS服务器配置中并不适合通过公共HTTP/HTTPS URL进行直接访问。它们将在服务器端被读取和处理。
12. 为什么对编辑团队而言受限模板是合理的
通过自定义部分和Only_own.txt,你可以指定最终客户能选择哪些完整的布局构件。此外,可以在用户设置中限制编辑器功能,例如字体或颜色的更改。这样编辑者可以插入预定义的部分、编辑文本和更换图片,而无需自由重构设定的页面设计。
这种工作方式特别适合大型客户项目、企业门户和多个编辑者的团队。设计保持一致,同时内容可以灵活维护。
13. 结果和总结
你打开/bx_Layout/,复制一个现有的部分文件,添加_own,调整HTML代码,并在插入 → 页面-部分下检查输出。对于新的选择类别,使用一个以Section开头的自定义文件名。
SectionClients.txt
↓ kopieren
SectionClients_own.txt
↓ HTML und Texte bearbeiten
<!--__SP_SectionTemplate__-->
↓ Varianten im Editor
Einfügen → Seiten-Abschnitt → Clients
如果你还激活Only_own.txt并相应限制编辑权,编辑者可以专注于使用提供的自定义HTML部分模板。
常见问题
客户常问我们的问题
什么是bluetronix CMS中的HTML部分模板?
它们是可重用的HTML页面部分,可以通过编辑器中的插入 → 页面-部分选择并插入到现有的CMS页面中。
我在哪里可以找到HTML部分模板?
相应的模板文件位于文件管理器中的开发者文件夹/bx_Layout/中。
一份部分文件的名称应该如何开始?
部分模板必须以Section开头。例如,模板SectionClients.txt属于选择Clients。
为什么不应该修改提供的部分文件?
标准文件在CMS更新时会被覆盖。如果希望保留调整,请复制模板并使用自己的_own文件。
我如何将标准模板Clients替换为自己的版本?
将SectionClients.txt复制到SectionClients_own.txt并编辑副本。相同名称的自有版本将替代标准模板。
我如何创建一个具有自己名称的额外模板?
例如,创建SectionMyTemplate_own.txt。由于此名称不会替换已有的标准模板,因此可以作为额外选择提供。
标记<!--__SP_SectionTemplate__-->有什么用?
使用<!--__SP_SectionTemplate__-->,CMS在一个部分文件内分隔多个布局变体。准确采用这种书写方式。
我必须在自己的模板中写入类sectionAll吗?
不必。编辑器会自动添加sectionAll。
Only_own.txt文件的作用是什么?
它将位于 /bx_Layout/ 下,并根据所示配置限制模板选择仅为带有 _own 后缀的自定义文件。
Section 文件和 Tag 文件有什么区别?
Section 文件描述完整的页面部分。Tag 文件是较小文本模块的模板;两者均支持 _own 原则。
如何在编辑器中复制列?
通过 colAll 标记可重复列容器。可以使用 文章列 → 复制 功能来复制该区块。
我可以在自定义 Sections 中添加 PHP 函数吗?
可以,只要你的开发环境支持。避免重复的函数名称,或者使用 function_exists() 进行安全函数声明。需要的包含文件应该至少在每个 Section 中存在一次。
我如何防止编辑者偏离给定的设计?
通过 Only_own.txt 只提供已授权的自定义模板,并在用户设置中限制字体和颜色等功能。
我自己的模板可以支持多语言吗?
可以。在相关项目中,你可以使用预定的翻译和文本标记。英文文档中的术语是 HTML Section Templates。