Adicionando uma classe de categoria a uma Página Publicada

Dev
1

Se não pudermos usar type="text/discourse-plugin" em uma tag de script, existe alguma maneira de obter o slug da categoria atual de uma página publicada?
O objetivo é adicionar uma nova classe contendo o slug em uma tag HTML da página.

2 curtidas
2

Olá,

Não tenho certeza se entendi completamente, mas a categoria está disponível no corpo, então você pode direcioná-la.

Por exemplo:

Screenshot 2022-11-01 at 17.42.55
Screenshot 2022-11-01 at 17.42.55598×127 17.1 KB

Você pode direcionar todos os tópicos da categoria lounge com:

.published-page.lounge {
  ...
}
2 curtidas
3

Desculpe, não fui claro o suficiente e deveria ter explicado melhor o propósito.

Atualmente, a publicação de páginas não usa o plano de fundo da categoria.

Configuração:

image
image636×743 82.3 KB

Visualização do Tópico:

image
image1432×772 71.6 KB

Visualização da Página Publicada:

image
image898×330 19 KB

O plano de fundo da categoria é definido em color_definitions.scss:

body.category-test-category {
    background-image: url(/uploads/default/original/1X/1851d5e9eb66a9ecf49f0dc747dfbad1a0fd220b.jpeg)
}

A página publicada não tem a classe category-test-category e, portanto, não herda a imagem de fundo.

Minha ideia é usar javascript para obter o slug da categoria e adicionar uma classe category-[slug da categoria] à tag body, qualquer que seja o nome da categoria, para que os planos de fundo das categorias sejam aplicados automaticamente, em vez de escrever CSS personalizado para as categorias de cada página publicada, como:

.published-page {
    &.test-category {
        background-image: url("/uploads/default/original/1X/1851d5e9eb66a9ecf49f0dc747dfbad1a0fd220b.jpeg");
    }
}
4 curtidas
4

Concordo, muito boa ideia :+1:

2 curtidas
5

Entendo… Sim, é uma boa ideia, mas infelizmente acho que não é possível modificar uma página publicada com um componente de tema (javascript)… Provavelmente com um plugin ou adicionando category- ao núcleo antes do nome da categoria.

Acho que, por enquanto, a maneira manual funciona. Crie um componente de tema com o SCSS relevante para as categorias de páginas publicadas e adicione configurações para isso.

Quero dizer algo como isto, talvez: GitHub - VaperinaDEV/published-page-category-background-image

Mas talvez haja uma solução melhor, não tenho certeza. :slightly_smiling_face:

3 curtidas
6

Essa é uma solução muito inteligente, mas concordo que ter algo assim por padrão (ou personalizável) no núcleo poderia ser bom. A intenção atual é ter explicitamente um plano de fundo padrão usando as cores do tema, como podemos ver em publish.scss:

.published-page {
  background-color: var(--secondary);
  color: var(--primary);

E se os URLs das imagens de fundo das categorias personalizadas fossem armazenados em variáveis CSS, poderíamos acessá-los facilmente em nosso CSS personalizado? Pelo menos, não nos incomodaríamos em usar o URL completo da imagem em nosso CSS.

Fiz uma solicitação de recurso aqui: Published pages could inherit categories' background image setting

4 curtidas