congo/blog/emoji-support/index.html

112 lines
5.3 KiB
HTML
Raw Normal View History

<!doctype html><html lang=en-au><head>
<meta charset=utf-8>
<meta http-equiv=content-language content="en-AU">
<meta name=viewport content="width=device-width,initial-scale=1">
<meta http-equiv=x-ua-compatible content="ie=edge">
<title>Emoji Support &#183; Congo</title>
<meta name=title content="Emoji Support &#183; Congo">
<meta name=description content="Guide to emoji usage in Hugo">
<base href=https://jpanther.github.io/Congo/>
<link rel=canonical href=https://jpanther.github.io/Congo/blog/emoji-support/>
<link type=text/css rel=stylesheet href=https://jpanther.github.io/Congo/css/main.css>
<link rel=apple-touch-icon sizes=180x180 href=https://jpanther.github.io/apple-touch-icon.png>
<link rel=icon type=image/png sizes=32x32 href=https://jpanther.github.io/favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=https://jpanther.github.io/favicon-16x16.png>
<link rel=manifest href=https://jpanther.github.io/site.webmanifest>
<meta property="og:title" content="Emoji Support">
<meta property="og:description" content="Guide to emoji usage in Hugo">
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/Congo/blog/emoji-support/"><meta property="article:section" content="blog">
<meta property="article:published_time" content="2019-03-05T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-05T00:00:00+00:00">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Emoji Support">
<meta name=twitter:description content="Guide to emoji usage in Hugo">
<meta name=generator content="Hugo 0.87.0">
<meta name=author content="Freddy Blogger">
<link href=https://twitter.com/ rel=me>
<link href=https://github.com/ rel=me>
<link href=https://linkedin.com/ rel=me>
</head>
<body class="flex flex-col h-screen px-8 text-lg leading-7 text-grey-900 sm:px-14 md:px-24 lg:px-32 dark:bg-gray-800 dark:text-white"><header class="flex justify-between py-10 font-semibold">
<div>
<a class=hover:underline rel=me href=https://jpanther.github.io/Congo/>Congo</a>
</div>
<nav>
<ul class="flex list-none">
<li class="mr-7 last:mr-0">
<a class=hover:underline href=/Congo/blog/ title=Blog>Blog</a>
</li>
<li class="mr-7 last:mr-0">
<a class=hover:underline href=/Congo/about/ title=About>About</a>
</li>
<li class="mr-7 last:mr-0">
<a class=hover:underline href=tags title>Tags</a>
</li>
</ul>
</nav>
</header>
<main class=flex-grow>
<article class=max-w-prose>
<header>
<h1 class="mt-0 text-4xl font-extrabold">Emoji Support</h1>
<div class="mt-8 mb-12 text-base text-gray-400 dark:text-gray-500">
<time datetime="2019-03-05 00:00:00 +0000 UTC">5 March 2019</time>
<span class=px-1>&#183;</span>
<span title="Reading time">
1
min
</span>
</div>
</header>
<section class="prose dark:prose-light">
<p>Emoji can be enabled in a Hugo project in a number of ways.</p>
<p>The <a href=https://gohugo.io/functions/emojify/><code>emojify</code></a> function can be called directly in templates or <a href=https://gohugo.io/templates/shortcode-templates/#inline-shortcodes>Inline Shortcodes</a>.</p>
<p>To enable emoji globally, set <code>enableEmoji</code> to <code>true</code> in your site&rsquo;s <a href=https://gohugo.io/getting-started/configuration/>configuration</a> and then you can type emoji shorthand codes directly in content files; e.g.</p>
<p>The <a href=http://www.emoji-cheat-sheet.com/>Emoji cheat sheet</a> is a useful reference for emoji shorthand codes.</p>
<hr>
<p><strong>N.B.</strong> The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.</p>
<div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-html data-lang=html>.emoji {
font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
}</code></pre></div>
</section>
<footer>
<div class="flex items-center pt-8">
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" src="https://i.pravatar.cc/150?img=11">
<div>
<div class="font-semibold leading-6 text-gray-800 dark:text-gray-300">
Freddy Blogger
</div>
<div class="flex text-lg text-gray-400 dark:text-gray-500">
<a class="mr-2 hover:text-primary-700 dark:hover:text-primary-400" href=https://twitter.com/ target=_blank title=Twitter><span class="relative inline-block align-text-bottom icon">
icons/twitter-brands.svg
</span>
</a>
<a class="mr-2 hover:text-primary-700 dark:hover:text-primary-400" href=https://github.com/ target=_blank title=GitHub><span class="relative inline-block align-text-bottom icon">
icons/github-brands.svg
</span>
</a>
<a class="mr-2 hover:text-primary-700 dark:hover:text-primary-400" href=https://linkedin.com/ target=_blank title=Linkedin><span class="relative inline-block align-text-bottom icon">
icons/linkedin-brands.svg
</span>
</a>
</div>
</div>
</div>
</footer>
</article>
</main><footer class="py-10 text-sm">
<p class="text-gray-400 dark:text-gray-500">
&copy;
2021
Freddy Blogger
</p>
<p class="text-xs text-gray-300 dark:text-gray-600">
Powered by
<a class=hover:underline href=https://gohugo.io/ target=_blank>Hugo</a>
&
<a class=hover:underline href=https://git.io/hugo-congo target=_blank>Congo</a>
</p>
</footer>
</body>
</html>