Componentes do HyperCode

Entenda os componentes prontos em HyperCode

O HyperCode possui alguns blocos prontos para uso para facilitar a criação de páginas e templates. Veja quis são

O HyperFluxCMS possui alguns blocos especiais para montar o site. Esse blocos já possuem algumas propriedades padrão para exibição e os scripts adequados para seu funcionamento, poupando tempo de quem está criando o design do site ou escrevendo as postagens.

Tag [pagination]

A Tag pagination é usada para mostrar e navegar a lista de páginas em uma página de busca ou na página inicial do site se ele estiver configurado como "Página dinâmica".

A Tag pagination normalmente é usada dentro de templates top-level; raramente é usada dentro de páginas de conteúdo.

A tag pagination é auto-contida, ou seja, ela NÃO PRECISA e NEM DEVE ser usada em pares "abrir/fechar". Deve ser usada simplesmente a tag e pronto.

A tag pagination somente deve ser usada em páginas que sejam listagens de postagens, como a página de busca ou a página inicial do site. Em outras páginas não faz sentido o uso dela.

Para a tag pagination funcionar, é obrigatório que a página em que ele é exibida tenha UM, e SOMENTE UM, postlist (descrito a seguir) com a propriedade pagination="true".

Para a tag pagination poder exibir números de páginas, é obrigatório que o postlist da página tenha a propriedade countpages="true". No entanto isso consome recursos do servidor, tornando o acesso à página mais lento em sites com muitos milhares de páginas.

Sintaxe:

Propriedades

type - indica é uma sequência de caracteres que indica as características da paginação.

Propriedades opcionais

Como quase todas as tags de HyperCode, pagination pode levar como propriedades opcionais as propriedades id, class e style. Elas são exatamente iguais às propriedades id, class e style do HTML, inclusive sendo compiladas/renderizadas como tal e podendo ser acessadas e manipuladas por javascript.

Type

A sequência de caracteres descrita em type da paginação é uma combinação de zero ou mais dos seguintes caracteres. Eles podem tanto ser informados em letras maiúsculas como minúsculas, e não precisam seguir uma ordem. Cada caractere, se fizer parte da sequência, indica um comportamentou ou característica da paginação.

• f - first: Sempre mostra na paginação um link para a primeira página do site ou da listagem ou da busca.
• p - previous: Sempre mostra na paginação um link para a página anterior da listagem
• n - next: Sempre mostra na paginação um link para a próxima página da listagem
• l - last: Sempre mostra na paginação um link para a última página da listagem
• # - números: Mostra número das páginas
• v - verbose: se for especificado, os links para "primeira", "anterior", "próxima" e "última" são mostradas de forma textual, usando a linguagem configurada pelo site. Se não for informadas, esses links aparecem como << < > >>.
• a - autohide: só mostra a paginação se ela for necessária. Em caso contrário - que é quando a toda a listagem cabe em possui uma única página - a paginação não é mostrada.
• 1 até 9 - indica o número máximo de páginas anteriores e seguintes em relação à página atualmente mostrada devem aparecer na paginação. Se não for informado, se assume 4. Ou seja, se você estiver na página 8 da listagem, a paginação exibe os até 4 números antes e 4 números depois: número 4,5,6,7, a 8 e 9,10,11,12;
• 0 - indica que deve mostrar um número grande páginas antes e depois da página atual; o maior número suportado pela versão corrente do HyperFluxCMS, que na versão atual é 100.

Exemplo:

Gera um objeto de paginação que tem "<<", "<", uma lista de páginas com até 3 páginas e 3 páginas depois da que está sendo exibida, ">" e ">>".

Tag [postlist]

A Tag postlist é usada para mostrar uma lista de postagens que atendam determinado critério. Ela pode ser usada em vários casos:

• Resultado da página de busca do site;
• Página principal dinâmica mostrando as postagens em destaque;
• Quadros laterais com lista de postagens relacionadas com a postagem sendo lida.

A tag postlist é auto-contida, ou seja, ela NÃO PRECISA e NEM DEVE ser usada em pares "abrir/fechar". Deve ser usada simplesmente a tag e pronto.

Sintaxe:

Propriedades

As únicas propriedades obrigatórias são container-template e item-template. Além disso, pelo menos UM dos critério de seleção deve ser informado: category, tag ou select.

title - Informa um texto a ser exibido no título da listagem, caso o template suporte.

title-class - Permite assimilar uma classe ao título, caso se deseje ajuste fino da aparência do texto.

title-style - Permite ajustar as propriedades do título usando estilos CSS, caso se deseje ajuste fino da aparência do texto.

container-template - Obrigatório: - Informa qual o template que será usado como container para a listagem.

container-class - Permite assimilar uma classe ao container, caso se deseje ajuste fino da aparência.

container-style - Permite ajustar as propriedades do container usando estilos CSS, caso se deseje ajuste fino da aparência do texto.

item-template - Obrigatório: - Informa qual o template que será usado para descrever cada postagem listada.

item-class - Permite assimilar uma classe ao item, caso se deseje ajuste fino da aparência.

item-style - Permite ajustar as propriedades do item usando estilos CSS, caso se deseje ajuste fino da aparência do texto.

min - indica a partir de qual posição na pesquisa serão listadas as postagens. Por exemplo, numa listagem por ordem alfabética, se você quiser descartar os primeiros 10 resultados e mostrar a partir do 11º, min deve ser igual a 11.

max - indica até qual posição, no máximo, na pesquisa serão listados as postagens. Por exemplo, numa listagem por ordem alfabética, se você quiser mostrar somente até o 15º resultado, max deve ser igual a 15.

count - indica quantos postagens, no máximo, serão listadas.

orderby - indica a ordem em que as postagens serão selecionadas e exibidas. Veja abaixo.

reverse - se for true, a seleção e exibição é feita em ordem DECRESCENTE. Por exemplo, se for por ordem de criação, os mais recentes aparecerão PRIMEIRO na lista. Se for false ou omitido, assume-se a ordem natural, crescente, mostrando as mais antigas primeiro.

target - indica em qual janela/aba o link será aberto. Se for omitido, usa-se a janela/aba atual.

category - indica a categoria das postagens que serão buscadas no banco de dados

tag - indica uma tag pela qual as postagens serão buscadas no banco de dados

pagination - se for "true", indica que a tag pagination, se estiver presente na página, se refere a ESTE postlist. Se for false ou omitido, não vincula o objeto pagination da página a este postlist. Em uma página (incluindo templates, e cabeçados) somente pode haver UM postlist com pagination="true"

countpages - se for "true", indica que o hyperFuxCMS deve contar, de antemão, quantas páginas atendem aos requisitos, para que o objeto pagination possa mostrar corretamente os números. Se for habilitaado, consumirá recursos adicionais do servidor e tornará o acesso à página mais lento. Se não for necessário, e um pagination sem numeração for suficiente para atender os propósitos da página, é recomendável desativar e usar um pagination sem o caractere \#.

select - indica um critério adicional de seleção e busca das postagens. Se for "*", a seleção se dará em páginas que usam a mesma categoria e/ou tags da página atual. Por exemplo, em um jornal, um postlist numa a página com categoria "mundo" listará outras postagens nessa categoria. Outros valores são experimentais e reservados para uso futuro.

OrderBy

A propriedade orderby indica qual é a ordem em que as postagens serão buscadas no banco de dados e exibidas no postlist. Os valores válidos são os seguintes:

creationdate - pela data de criação da postagem.

editiondate - pela data de edição mais recente da postagem.

date - equivale a creationdate

title - ordem alfabética do título

score - ordem de pontuação de acordo com o algoritmo de pontuação simples do HyperFluxCMS.

random - ordem aleatória

id - ordem de inserção no banco de dados. Normalmente segue a mesma ordem de creationdate, mas não necessariamente.

Se orderby for omitido, assume-se como se fosse random.

Tag [searchform]

A Tag searchform é usada para inserir um simplificado formulário de busca no site.

A tag postlist é auto-contida, ou seja, ela NÃO PRECISA e NEM DEVE ser usada em pares "abrir/fechar". Deve ser usada simplesmente a tag e pronto.

Sintaxe:

Propriedades

type - Informa o tipo do formulário a ser exibido. Pode ser small ou large. Também pode ser outro, se esse outro tipo estiver definido em uma das folhas de estilo CSS do site.

Propriedades opcionais

placeholder - Indica o texto que deve aparecer no campo de digitação quando o usuário não tiver digitado nada.

width - indica a largura do formulário de busca.

height - indica a altura do formulário de busca.

Como quase todas as tags de HyperCode, searchform pode levar como propriedades opcionais as propriedades id, class e style. Elas são exatamente iguais às propriedades id, class e style do HTML, inclusive sendo compiladas/renderizadas como tal e podendo ser acessadas e manipuladas por javascript.

Tag [socialmediasharebuttons]

A Tag socialmediasharebuttons é usada para uma lista de botões para compartilhar a postagem nas redes sociais mais populares.

A tag socialmediasharebuttons é auto-contida, ou seja, ela NÃO PRECISA e NEM DEVE ser usada em pares "abrir/fechar". Deve ser usada simplesmente a tag e pronto.

Sintaxe:

Propriedades

medias - Informa uma lista de redes sociais, separadas por vírgula. Atualmente são suportadas pelo HyperFluxCMS as redes x, facebook, instagram, whatsapp, linkedin e bluesky. Outras
podem ser adicionadas através de Javascript

Propriedades opcionais

width - indica a largura do formulário de busca.

height - indica a altura do formulário de busca.

Como quase todas as tags de HyperCode, socialmediasharebuttons pode levar como propriedades opcionais id, class e style. Elas são exatamente iguais às propriedades id, class e style do HTML, inclusive sendo compiladas/renderizadas como tal e podendo ser acessadas e manipuladas por javascript.