Usando a versão estável mais recente do Discourse (3.2.x) mais a versão atualizada dos componentes Landing Pages (plugin, páginas de blog e tema de blog), consegui reproduzir apenas os problemas de fundo da imagem e tamanho do contêiner de postagem. Farei uma pequena atualização no tema assim que puder, mas eles são facilmente corrigíveis se você quiser fazer isso em seu fork.
Usando as configurações padrão em uma instalação limpa, os botões Posts/Subscribe estão na parte inferior da página e ambos funcionais, os caminhos na versão mobile se comportam da mesma forma que no desktop e não consigo verificar nenhum problema com as datas das postagens, exceto pela “última atualização” que muda assim que você define a categoria do blog (todas as postagens nessa categoria recebem uma tag de “postagem de blog”).
O menu hambúrguer na versão mobile ficará vazio, desde que você não tenha nada configurado nas configurações de “Menu” da configuração das landing pages. Posso atualizar o código para ocultá-lo completamente nessa situação para simplificar a interface.
Acabei de acessar seu blog e pude depurar rapidamente algumas coisas:
Em relação ao botão que não funciona, parece que você tem algumas configurações rígidas de Política de Segurança de Conteúdo (Content-Security Policy) ativadas e os scripts necessários não estão sendo carregados.
Em relação aos links, acessei seu site usando o Firefox em um celular Android e não tive nenhum problema. Talvez alguma configuração específica do seu navegador ou instalação do Discourse?
Em relação às correções de CSS, existem muitas opções. Por exemplo, para a imagem de fundo, você pode definir background: no-repeat center/cover fixed; na classe .title-container dentro de common.scss, e para o “pequeno contêiner” nas postagens, você pode adicionar min-width: 100%; à classe .post-content dentro do mesmo arquivo.
Em relação à configuração do menu, atualmente a única maneira de adicionar um é no arquivo global pages.json, como mencionado na documentação, mas não há muitas informações a respeito. No entanto, você pode ver um exemplo no repositório pavilion-landing-pages.
Olá! Então, no vídeo que você gravou, os URLs diretos funcionam bem. Mas se eu for para a página inicial do blog e então clicar no título do blog, ele dá um erro de página não encontrada. URLs diretos funcionam bem, mas ninguém os teria à mão e obviamente não é viável.
Vou tentar essas correções de CSS rapidamente e editar isto ou responder novamente com minhas descobertas, obrigado!
Achado muitooo interessante sobre a questão da Política de Segurança de Conteúdo… nem me lembro de eu ter feito algo com isso. Hmmm. Como eu consertaria isso?
EDIT: Botão de Inscrição corrigido desativando content security policy nas configurações. Mas há uma maneira de manter isso habilitado e fazer o botão funcionar? Talvez fazer o botão funcionar de forma diferente para que ele não acione isso?
Sem ideia sobre as configurações de CSP, desculpe quanto a isso. No vídeo, por volta de 26s-27s eu faço exatamente isso (clico no título do post do blog principal) e ainda funcionou bem, então não tenho certeza de como testar mais isso do meu lado.
Editei minha postagem acima para dizer: “Botão de Inscrição corrigido desabilitando a política de segurança de conteúdo nas configurações. Mas há alguma maneira de mantê-la habilitada e fazer o botão funcionar? Talvez fazer o botão funcionar de forma diferente para que não a acione?”
E ah, minha culpa! Hm, isso é realmente estranho então. Tentei vários navegadores e até alguns telefones e o mesmo problema…
A propósito, há alguma maneira de tornar o botão/texto de inscrição maior para corresponder ao tamanho do ícone “Posts” que flutua na tela no celular? O ícone tem o tamanho adequado quando conectado a uma conta, mas não quando desconectado, como convidado, o que você pode ver no seu vídeo.
Além disso, minha única outra coisa é fazer a foto de perfil/nome do autor, data e a área “Tópico do Fórum” ficarem horizontais no celular, já que parece ruim empilhado verticalmente assim (ou pelo menos a data e a área do Tópico uma ao lado da outra, centralizadas sob a foto de perfil ou algo assim)…
Além da minha resposta acima, @cabidop, minha parceira revisou completamente as coisas de blog/tema por algumas horas, porque eu queria a opinião de uma pessoa geral e não técnica sobre a configuração padrão. Achei que mencionaria aqui se você quisesse incorporar alguma delas nas coisas do blog:
Quando deslogado, faça o botão Inscrever-se na página de destino do Blog levar o usuário de volta à página de destino do Blog depois que ele clicar em Inscrever-se e criar uma conta no site.
Eu pessoalmente nem percebi que funcionava assim, mas se um convidado clica em Inscrever-se, ele é levado para a página de Registro do fórum e, em seguida, quando cria uma conta, fica se perguntando onde está a página do Blog, já que ele te mantém nos Fóruns. No entanto, quando ele volta para a página de destino do Blog enquanto está logado, ele nem está inscrito e tem que clicar no botão novamente enquanto está logado.
Receba um e-mail de confirmação de que você realmente se Inscreveu.
Como está agora, não há confirmação real de que você realmente se inscreveu por e-mail, apenas o pequeno pop-up na caixa pop-up de Inscrever-se.
Uma vez Inscrito, remova o botão completamente enquanto estiver logado, ou faça com que ele diga “Inscrito”, não “Inscrever-se” no Desktop. Além disso, faça com que os botões não fiquem flutuando na tela ao rolar, ou seja, desapareçam ao rolar.
A grande foto de cabeçalho na página de posts do Blog não é transferida para o celular. Mal mostra ou às vezes não mostra nada (fotos abaixo mostrando Desktop VS celular para isso):
Obrigado pelo feedback, @45thj5ej, posso implementar algumas das sugestões como padrão no futuro. Não tenho certeza se você já resolveu o problema de CSP, mas parece que há uma opção content security policy script src que pode funcionar para o seu caso sem desativar totalmente o recurso (embora não tenha total certeza sobre isso).
Quanto ao tema não funcionar em outras páginas, esse é o comportamento esperado devido ao uso das classes .blog e .blog-post nos estilos. Cada página de destino adiciona seu próprio slug como uma classe HTML ao seu corpo, portanto, desde que os estilos CSS sejam aplicados apenas a essas classes, eles afetarão apenas as páginas “Blog” e “Postagem do Blog”, respectivamente.
Quanto ao restante dos comentários/problemas, eu apenas reiteraria o que mencionei no outro tópico sobre ser específico para o seu caso de uso, pois são perguntas mais gerais de CSS do que problemas reais no componente. Dito isso, posso dar uma olhada neles eventualmente (mas não conte com isso).
Olá, uma coisa meio séria…
Configurei meu Nginx para redirecionar mysite.com para https://forums.mysite.com/home e configurei o registro A do DNS do meu provedor de domínio (já que quero que esta seja a página principal do meu site).
Notei algo estranho. Se eu acesso um post do blog a partir do redirecionamento (ou seja, qualquer pessoa que acesse meu site terá isso acontecendo), ele adiciona um segundo /home ao URL. No entanto, se eu acesso a página inicial do blog pelo URL direto, https://forums.mysite.com/home, então isso não acontece.
Alguma maneira de consertar isso o mais rápido possível, ou se você me disser como, eu posso fazer isso. Isso é separado do problema semelhante que estava acontecendo apenas no celular outro dia. E, claro, o link aparece duplicado ao passar o mouse sobre ele na página inicial do blog, como: https://forums.mysite.com/home/home/blog-test-one-million
Mas novamente, se acessar o URL diretamente, não do redirecionamento, funciona bem.
Você pode verificar se o problema de "caminho duplo" ocorre apenas com a página do blog, com qualquer página de destino ou com qualquer página do Discourse (por exemplo, /latest)?
Apenas a página inicial/de destino do blog, onde você clica nos títulos das postagens do blog.
.
EDITAR: IGNORAR O ABAIXO. A CORREÇÃO FOI:
Comentar a única linha abaixo em common.scss no
tema do blog, por volta da linha 172:
body.blog {
/* padding-top: 8em; */
Além disso, como edito o cabeçalho do site? Parece que não importa o quê, o cabeçalho é sempre colocado lá e não consigo editá-lo. A área superior da barra de navegação/menu/logotipo.
Exemplo: Fiz um cabeçalho personalizado para encurtar o padrão. E mesmo usando
.landing-header {
display:none
}
ainda faz um grande espaço no topo. Como posso remover esse espaço?
