Personalizar modelos de seções HTML
Aprenda a adaptar seções de página existentes na pasta bx_Layout, criar suas próprias seções e modelos de tags, e limitar a seleção para editores a seus próprios templates de seção HTML.
Pré-requisitos e objetivo do tutorial
Você precisa de acesso ao Editor HTML e ao Gerenciador de Arquivos do CMS bluetronix, além dos direitos de desenvolvedor para a pasta de templates. Neste tutorial, você aprenderá como ajustar seções de página existentes, criar seus próprios Templates de Seção HTML e, se necessário, oferecer aos seus editores apenas templates liberados.
Trabalhamos com os templates de exemplo Clientes e Banners. Os arquivos padrão permanecem inalterados; alterações individuais são feitas através da marcação _own.
1. Encontrar modelos de seções no editor
Abra uma página existente no CMS, selecione Editar e abra a seleção de templates através de Inserir → Seção da Página. O menu de contexto também oferece a entrada Text Block para pequenos conteúdos reutilizáveis. Este tutorial inicialmente trata das seções de página.
Na janela Seção da Página, os templates disponíveis são exibidos com uma prévia.
Escolha a categoria Clientes como exemplo. Várias variantes de layout estão disponíveis.
2. Onde os modelos estão armazenados
Os arquivos de template estão na pasta de desenvolvedor /bx_Layout/. Abra essa pasta no Gerenciador de Arquivos. Lá você encontrará, entre outros, arquivos para seções de página (Section*.txt) e blocos de texto (Tag*.txt).
O nome do arquivo determina a associação à seleção de templates. Um template de seção sempre começa com Section; em seguida, vem o seu nome individual. Para variantes próprias, o sufixo _own é utilizado antes da extensão do arquivo.
| Nome do arquivo | Significado no editor |
|---|---|
SectionClients.txt | Template padrão "Clientes" |
SectionBanner.txt | Template padrão "Banner" |
SectionClients_own.txt | Variante própria que substitui "Clientes" |
SectionMyTemplate_own.txt | Template adicional com o nome "MyTemplate" |
Você também pode criar um template completamente novo. Para ele, escolha um nome específico após Section. Se não existir um arquivo padrão com o mesmo nome, o novo template será adicionado, em vez de substituir um template existente.
3. Por que você não deve editar arquivos padrão diretamente
Os arquivos padrão fornecidos com o CMS em /bx_Layout/ serão sobrescritos em atualizações do sistema. Alterações diretas em SectionClients.txt ou SectionBanner.txt não são, portanto, permanentes. Copie o arquivo padrão desejado e marque a sua versão como _own. As variantes _own associadas são destinadas às suas personalizações individuais que resistem a atualizações.
SectionClients.txt
↓ kopieren
SectionClients_own.txtSe ambos os arquivos existirem, o CMS usará o correspondente SectionClients_own.txt em vez do template padrão SectionClients.txt. Você não precisa renomear a categoria Clientes no editor.
Por outro lado, se você criar um arquivo próprio com um novo nome, como SectionMyTemplate_own.txt, o template padrão Clientes também permanecerá disponível.
4. Estrutura de um template de seção HTML: a marca de separação
Um arquivo Section pode conter várias variantes de layout da mesma categoria. Para que o editor CMS reconheça as diferentes variantes, elas devem ser separadas pela seguinte marcação de separação:
<!--__SP_SectionTemplate__-->A marca deve estar no início, entre as variantes e no final do arquivo de exemplo. Mantenha a grafia exata. Se a marca de separação estiver ausente, o editor pode não conseguir exibir várias variantes de forma confiável como uma seleção separada.
O template padrão SectionBanner.txt demonstra esse princípio com várias layouts de banner diferentes. Você pode usá-lo como base para criar sua própria seção de estrutura simples.
<!--__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__-->O exemplo é uma variante completa de banner. Para uma segunda variante, você deve adicionar seu código HTML após a última marcação de separação e também fechar essa variante com a mesma marcação. A seção real pode ser então projetada de acordo com seus requisitos.
A classe sectionAll você não precisa adicionar: o editor bluetronix a adiciona automaticamente ao inserir uma seção da página.
5. Copiar o modelo de clientes e mudar o título
Abra o modelo existente SectionClients no gerenciador de arquivos e veja seu código HTML. No nosso exemplo, contém um título, uma descrição e vários blocos de parceiros.
Copie o modelo correspondente como SectionClients_own.txt e abra a cópia através de Editar. Adicione à título do nosso teste a sequência de caracteres NEW!!!!. Você também pode alterar o texto, o número de cartões, os ícones ou o CSS de forma individual.
<!-- Vorher -->
<h2>­Trusted by growing organizations­</h2>
<!-- Nachher in SectionClients_own.txt -->
<h2>­NEW!!!! Trusted by growing organizations­</h2>
Clique em Salvar e novamente abra a seleção Inserir → Seção da Página → Clientes. Lá você reconhecerá a sua própria versão pelo título alterado. A segunda variante de clientes pode ser selecionada e editada independente disso.
6. Oferecer seu próprio modelo com um novo nome
Você pode criar um modelo separado em vez de um arquivo de substituição com o mesmo nome. Para isso, copie por exemplo uma variante de clientes e salve-a como SectionMyTemplate_own.txt. A parte após Section é o nome do seu próprio modelo; isso determina a nova seleção no editor. O modelo original Clients não será substituído com um nome diferente.
SectionClients.txt → Standard: Clients
SectionClients_own.txt → eigene Version von Clients
SectionMyTemplate_own.txt → zusätzliche eigene Vorlage MyTemplateDessa forma, você pode desenvolver seções fixas para tipos de página específicos para um cliente, sem precisar alterar o conteúdo de todos os modelos fornecidos.
7. Mostrar exclusivamente seus próprios modelos com Only_own.txt
Se o cliente final só deve usar seus modelos liberados, crie no diretório /bx_Layout/ o arquivo de bandeira Only_own.txt. De acordo com a configuração dos modelos exibida, assim, apenas arquivos próprios correspondentes com o sufixo _own são oferecidos na seleção de modelos. O arquivo não precisa de código HTML para essa função.
/bx_Layout/Only_own.txt
Exemplo: Se existem no diretório SectionClients.txt, SectionBanner.txt e SectionMyTemplate_own.txt, a seleção, após a ativação dessa configuração, deve conter apenas o modelo próprio correspondente. Isso permite que você forneça ao cliente uma seleção direcionada e específica do projeto.
8. Modelos de tags próprias para blocos de texto
O mesmo princípio _own se aplica aos menores Blocos de Texto. Seus arquivos começam com Tag. De TagTemplate.txt por exemplo, será TagTemplate_own.txt. Esta variante pode ser disponibilizada através da entrada Bloco de Texto no editor.
TagTemplate.txt
↓ kopieren
TagTemplate_own.txt
9. Duplicar colunas editáveis com colAll
Quando uma seção contém várias colunas repetíveis, uma coluna com a classe colAll pode ser reconhecida como um bloco independente. Isso torna disponível no menu contextual a função Coluna de Artigo → Duplicar.
<div class="colAll col-md-6">
<h2>­Hello world­</h2>
<p>­Writing­</p>
</div>Ao duplicar, o bloco em questão é inserido como uma segunda coluna. Para um cartão ou coluna de artigo repetível, você deve, portanto, colocar colAll no contêiner correto. A classe sectionAll é automaticamente fornecida pelo editor.
10. Marcação de texto e modelos multilíngues
As seções padrão fornecidas contêm dentro dos textos de exemplo a sequência de caracteres ­, por exemplo, antes e depois de títulos. Essas marcações de texto não devem ser confundidas com a marca de separação <!--__SP_SectionTemplate__-->. Ao copiar modelos existentes, você deve inicialmente manter essas marcações de CMS, se o comportamento do editor anterior deve continuar.
<h2>­Designed for everyday success­</h2>
Em projetos multilíngues, marcas de tradução adicionais podem ser úteis, para que os editores possam manter conteúdos nos idiomas necessários. O CMS bluetronix é projetado para 24 idiomas. Para um modelo de projeto simples e exclusivamente unilingue, você pode omitir marcas de tradução adicionais não necessárias; as marcas de separação de seções necessárias para o editor devem ser mantidas.
11. Funções próprias e includes necessários
Se você expandir um modelo com funções PHP ou saídas de módulos, use nomes exclusivos para suas próprias funções. Uma função existente não pode ser declarada novamente com o mesmo nome. Você pode proteger a declaração por exemplo com function_exists():
if(!function_exists("MyTestFunction")) {
function MyTestFunction($Test) {
return $Test;
}
}Includes necessários devem ser incluídos pelo menos uma vez por seção. Um marcador de include correspondente pode ser copiado pelo editor:
<!--bxInclude--/bx_Mod/Blog_Detail-->Os arquivos de modelo internos com as extensões .txt ou .bx não estão previstos na configuração do servidor CMS descrita para chamar diretamente por meio de URLs HTTP/HTTPS públicas. Eles são lidos e processados no lado do servidor.
12. Por que modelos restritos para equipes de redação são úteis
Com seções próprias e Only_own.txt você determina quais componentes de layout prontos o cliente final pode escolher. Além disso, funções do editor como mudança de fonte ou cor podem ser restritas nas configurações do usuário. Os editores podem então, principalmente, inserir seções definidas, editar textos e trocar imagens, sem precisar refazer o design da página estabelecido.
Esse modo de trabalho é especialmente adequado para projetos grandes de clientes, portais corporativos e equipes com vários editores. A concepção permanece uniforme, enquanto os conteúdos podem ser mantidos de forma flexível.
13. Resultado e resumo
Você abre /bx_Layout/, copia um arquivo de seção existente, adiciona _own, ajusta o código HTML e verifica a saída em Inserir → Seção da Página. Para novas categorias de seleção, use um nome de arquivo próprio que comece com Section.
SectionClients.txt
↓ kopieren
SectionClients_own.txt
↓ HTML und Texte bearbeiten
<!--__SP_SectionTemplate__-->
↓ Varianten im Editor
Einfügen → Seiten-Abschnitt → ClientsSe você também ativar Only_own.txt e restringir os direitos do editor adequadamente, seus editores poderão trabalhar especificamente com os modelos de seção HTML próprios fornecidos.
FAQ
o que os clientes nos perguntam frequentemente
O que são modelos de seção HTML no CMS bluetronix?
São seções reutilizáveis de páginas HTML que podem ser selecionadas no editor através de Inserir → Seção da Página e inseridas em uma página CMS existente.
Onde posso encontrar os modelos de seção HTML?
Os arquivos de modelo correspondentes estão na pasta de desenvolvedor /bx_Layout/ do gerenciador de arquivos.
Como deve começar o nome de um arquivo de seção?
Um modelo de seção deve começar com Section. O modelo SectionClients.txt, por exemplo, pertence à seleção Clients.
Por que não devo modificar os arquivos de seção fornecidos?
Os arquivos padrão serão sobrescritos durante as atualizações do CMS. Copie o modelo e use um arquivo _own se você quiser que a modificação permaneça.
Como substituo o modelo padrão Clients por uma versão própria?
Copie SectionClients.txt para SectionClients_own.txt e edite a cópia. A variante com o mesmo nome próprio será usada em vez do modelo padrão.
Como crio um modelo adicional com um nome próprio?
Crie, por exemplo, SectionMyTemplate_own.txt. Como esse nome não substitui um modelo padrão existente, pode ser oferecido como uma seleção adicional.
Para que serve a marcação <!--__SP_SectionTemplate__-->?
Com <!--__SP_SectionTemplate__-->, o CMS separa várias variantes de layout dentro de um arquivo de seção. Mantenha a escrita exatamente.
Preciso escrever a classe sectionAll em um modelo próprio?
Não. O editor adiciona sectionAll automaticamente.
O que faz o arquivo Only_own.txt?
Ele é criado em /bx_Layout/ e limita a seleção de modelos de acordo com a configuração mostrada a arquivos próprios com o sufixo _own.
Quais são as diferenças entre arquivos de Seção e de Tag?
Arquivos de Seção descrevem seções completas de páginas. Arquivos de Tag são os modelos para pequenos blocos de texto; ambos suportam o princípio _own.
Como posso duplicar colunas no editor?
Marque o contêiner de colunas repetíveis com colAll. Usando a função Artigo-Coluna → Duplicar, este bloco pode ser multiplicado.
Posso adicionar funções PHP em minhas próprias seções?
Sim, desde que seu ambiente de desenvolvimento permita. Evite nomes de funções duplicados ou assegure declarações de função, por exemplo, com function_exists(). Includes necessários devem estar presentes pelo menos uma vez por seção.
Como evito que editores se desviem do design fornecido?
Ofereça apenas modelos próprios aprovados através de Only_own.txt e limite, se necessário, nas configurações de usuário funções como alteração de fonte e cor.
Meus próprios modelos podem ser multilíngues?
Sim. Em projetos apropriados, você pode usar as marcações de tradução e texto previstas. O termo para a documentação em inglês é HTML Section Templates.