themes/hugo-coder/exampleSite/content/posts/emoji-support.pt-br.md

8555cf72dec9321fa010296ce6988cf7b7cf602b · 1.9 KB · 46 lines raw

1 +++
2 author = "Hugo Authors"
3 title = "Suporte a Emojis"
4 date = "2019-03-05"
5 description = "Um guia de utilização de emojis com Hugo"
6 tags = [
7 "emoji",
8 ]
9 +++
10
11 Emojis podem ser ativados em um projeto Hugo de diversar formas.
12 <!--more-->
13 A função [`emojify`](https://gohugo.io/functions/emojify/) pode ser chamada diretamente nos templates ou com [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
14
15 Para ativar os emojis globalmente, aplique `enableEmoji` com o valor `true` na [configuração](https://gohugo.io/getting-started/configuration/) do seu site e então você poderá adicionar códigos de emoji diretamente nos arquivos de conteúdo. Por exemplo:
16
17 <p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
18 <br>
19
20 O [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) é uma referência útil para identificar códigos de emojis.
21
22 ***
23
24 **Nota:** Os passos anteriores ativam os caractéres e sequências de emoji do Padrão Unicode no Hugo, porém a renderização desses glifos depende do navegador e plataforma utilizada. Para escolher o estilo dos emojis você pode tanto usar um font de emoji de terceiros ou uma lista de fontes. Por exemplo:
25
26 {{< highlight html >}}
27 .emoji {
28 font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
29 }
30 {{< /highlight >}}
31
32 {{< css.inline >}}
33 <style>
34 .emojify {
35 font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
36 font-size: 2rem;
37 vertical-align: middle;
38 }
39 @media screen and (max-width:650px) {
40 .nowrap {
41 display: block;
42 margin: 25px 0;
43 }
44 }
45 </style>
46 {{< /css.inline >}}