Trechos de texto/markdown inseríveis, centralmente mantidos

Eu estava me perguntando se havia alguma maneira de definir um texto em um único local e inseri-lo nos posts com uma única referência curta.

É um pouco como a opção padrão Admin -> Personalizar -> Conteúdo de Texto, mas para minhas próprias variáveis personalizadas que podem ser inseridas nos posts.

Meu caso de uso era adicionar um aviso legal para meus links de afiliado. À medida que o número de links de afiliado crescia em vários posts e Tópicos, notei que meus avisos legais também se proliferavam junto com eles. Ocasionalmente, gosto de fazer melhorias nos avisos legais e isso se torna mais trabalhoso à medida que o número cresce.

Também estou considerando tornar meus links de afiliado mais genéricos, para que eu tenha um link centralmente gerenciado para cada link de produto, por exemplo, que aparece em vários lugares. Se esse link de produto mudar, preciso alterá-lo apenas em um lugar.

Obviamente, eu poderia fazer algum tipo de pesquisa e substituição no Rails, mas isso não é tão limpo/seguro nem ‘online’.

Então, eu queria um local para definir e manter uma string de texto em um único lugar e ter as alterações refletidas imediatamente em todos os lugares onde é usada na próxima visualização da página.

Leia mais para a solução de @Johani!:

3 curtidas

Uma opção possível é usar um componente de tema.

Isso deve ser colocado em header.html

<script type="text/discourse-plugin" version="0.8">
var disclaimer = settings.Disclaimer_text,
  disclaimer_selector = 'div[data-theme="disclaimer"]';

$.fn.disclaimer = function() {
  if (!this.length) {
    return;
  } else {
    this.each(function() {
      $(this).html(disclaimer);
    });
    return this;
  }
};

api.decorateCooked($elem => $elem.children(disclaimer_selector).disclaimer());

// criar botão no compositor
let currentLocale = I18n.currentLocale();

I18n.translations[currentLocale].js.disclaimer_button = "Adicionar aviso";
I18n.translations[currentLocale].js.composer.disclaimer_prompt = ""; // deixar vazio

api.onToolbarCreate(function(toolbar) {
  toolbar.addButton({
    trimLeading: true,
    id: "disclaimer-button",
    group: "insertions",
    icon: "exclamation-circle", // alterar ícone
    title: "disclaimer_button",
    perform: function(e) {
      return e.applySurround(
        '<div data-theme="disclaimer">',
        "</div>",
        "disclaimer_prompt"
      );
    }
  });
});
</script>

e isso deve ser colocado no arquivo settings.yml do seu componente

Disclaimer_text:
  default: "Lorem ipsum dolor sit amet, ei purto complectitur has, per at quas senserit. Et malis libris eos, vix id pericula dissentiet, aliquid apeirian pro eu. Sed ex viderer inciderint, vitae officiis dissentiet eos no. Omnes percipit singulis in has, ne nam nibh tation inciderint. Quas nulla ei sit, ex eam rebum voluptaria. Id eam altera similique. Ex justo assentior persequeris mea, ei hinc paulo ubique mei. <br><br>Cu nam epicurei torquatos, et accusam accommodare vim. Vis sint saperet officiis et. Ad consequat posidonium mea, et duo paulo quidam maluisset, vel an electram expetendis. An vis repudiare tincidunt, mentitum convenire eloquentiam ut vis, summo partiendo pro ad."
  description:
    en: Insira o texto do aviso desejado. Use &lt;br&gt; para quebras de linha.

Assim, você terá um botão no compositor que se parece com isto:

e ao clicar no botão, será adicionado

<div data-theme="disclaimer"></div>

o que será convertido para o que você configurou nas definições do componente

e o resultado final ficará assim

e você pode usar

[data-theme="disclaimer"] {

}

no CSS para estilizar como preferir.

21 curtidas

That’s awesome! Thanks @Johani

Added to Tips’n’Tricks.

2 curtidas

Olá @merefield — curiosamente, eu estava procurando uma funcionalidade semelhante: inserir um trecho de texto padrão. Mas, em vez de um botão, eu queria uma sequência acionadora que se expandisse para um trecho de markdown. (Ok, suponho que alternativamente eu poderia modificar o botão para um menu suspenso com algumas opções.)

Isso provavelmente não é uma funcionalidade central do Discourse, mas sim de um plugin.

Comportamento ideal:

  • Eu digito :stub: (não me importo em usar algo diferente dos caracteres delimitadores :, mas me perguntei se integrar à interface de emojis poderia funcionar, já que ela tem esse tipo de comportamento de ‘completar’ que eu gostaria)

  • O Discourse substitui :stub: por

    > Este artigo é um esboço - por favor, melhore-o **editando**, **adicionando links** e **detalhes** (é uma 'wiki', então qualquer usuário pode editar e adicionar informações) ou **comentando** abaixo.
    
  • o que é renderizado como

    Este artigo é um esboço - por favor, melhore-o editando, adicionando links e detalhes (é uma ‘wiki’, então qualquer usuário pode editar e adicionar informações) ou comentando abaixo

  • e deve haver um lugar na interface para configurar esses trechos, algo como a interface de Emojis Personalizados.

5 curtidas

Ótima ideia para um plugin! Você se importaria se o texto aparecesse apenas na pré-visualização e na visualização final renderizada?

4 curtidas

A sugestão de @pacharanero seria fantástica para nós também. No nosso caso, seria apenas para funcionários, então não gostaríamos que nada fosse exibido na barra de ferramentas do editor, mas inserir um código curto para inserir o bloco de atualização automática seria incrível :+1:

1 curtida

Por enquanto, uma forma não-Discourse e não-gerenciada centralmente de obter esse comportamento hoje é usar um gerenciador de área de transferência multiplataforma como o CopyQ e configurar a seção ‘Comandos/Atalhos Globais’ para que você possa inserir texto arbitrário na área de transferência.

Esses trechos podem então ser gerenciados na interface do CopyQ, atribuídos a uma tecla de atalho ou aparecer no menu de contexto do CopyQ. Não é tão bom quanto um plugin incorporado ao Discourse, mas tem a vantagem de funcionar em todos os aplicativos e já existe!

(Observe que isso teria que ser configurado em cada um dos computadores que você gostaria de usar dessa forma. Você pode exportar e importar esses comandos e atalhos globais para um arquivo, para permitir a configuração das mesmas configurações em várias máquinas ou em uma equipe)

Isso estaria absolutamente bem para mim. Acho que, ao contrário de DiscoTOC e Placeholders, ele precisaria ser renderizado corretamente no painel de visualização, mas no compositor ele poderia simplesmente mostrar qualquer frase de gatilho :slug: que fosse escolhida.

Obrigado pela resposta. A solução do CopyQ não faz o que eu procuro (acho que não, pelo menos).

Por exemplo, eu gostaria de inserir um trecho em uma postagem (por exemplo, :slug:) e, em seguida, sempre que isso for renderizado, ele renderiza o conteúdo atual para este slug (que pode conter markdown). Se eu alterar o conteúdo deste slug, todas as postagens que o utilizam seriam imediatamente atualizadas para ter o novo conteúdo (a postagem em si contém apenas o slug e o conteúdo é inserido na renderização).

Eu ficaria satisfeito se a busca não soubesse que o conteúdo existe também (e apenas mostrar a versão final processada é bom para mim).

Abraços

Aqui está uma abordagem diferente…

1 curtida