hugo-theme-more-contentful/recipes/twitter-cards/index.html

306 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-us"><title>Twitter cards | More Contentful</title>
<link rel="stylesheet" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/css/main.min.ca00a0e2e1a042039a0ed5d0926695311d47d90329bdcc3b5728b3564d2c80c1.css" /><meta name="generator" content="Hugo 0.96.0" />
<meta charset="utf-8">
<meta name="author" content="John Doe" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="referrer" content="no-referrer" />
<meta name="description" content="This will add Twitter cards for your webpages. (Be sure to copy the head partial first in your own layout folder.)
Thankfully, Hugo already has an internal template for Twitter cards. Simply add {{- template &#34;_internal/twitter_cards.html&#34; . -}} somewhere in your own copy. (For reference, heres the source code for the internal template.)
You could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs." /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Twitter cards"/>
<meta name="twitter:description" content="This will add Twitter cards for your webpages. (Be sure to copy the head partial first in your own layout folder.)
Thankfully, Hugo already has an internal template for Twitter cards. Simply add {{- template &#34;_internal/twitter_cards.html&#34; . -}} somewhere in your own copy. (For reference, heres the source code for the internal template.)
You could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs."/>
<meta property="og:title" content="Twitter cards" />
<meta property="og:description" content="This will add Twitter cards for your webpages. (Be sure to copy the head partial first in your own layout folder.)
Thankfully, Hugo already has an internal template for Twitter cards. Simply add {{- template &#34;_internal/twitter_cards.html&#34; . -}} somewhere in your own copy. (For reference, heres the source code for the internal template.)
You could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/twitter-cards/" /><meta property="article:section" content="recipes" />
<meta property="article:published_time" content="2020-10-20T20:31:32+08:00" />
<meta property="article:modified_time" content="2022-05-09T20:15:52+08:00" />
<meta itemprop="name" content="Twitter cards">
<meta itemprop="description" content="This will add Twitter cards for your webpages. (Be sure to copy the head partial first in your own layout folder.)
Thankfully, Hugo already has an internal template for Twitter cards. Simply add {{- template &#34;_internal/twitter_cards.html&#34; . -}} somewhere in your own copy. (For reference, heres the source code for the internal template.)
You could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs."><meta itemprop="datePublished" content="2020-10-20T20:31:32+08:00" />
<meta itemprop="dateModified" content="2022-05-09T20:15:52+08:00" />
<meta itemprop="wordCount" content="100">
<meta itemprop="keywords" content="twitter,social media," /><link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/twitter-cards/" />
<script>
let theme = window.localStorage.getItem('theme');
if (theme) {
document.documentElement.dataset.theme = theme;
}
</script>
<body>
<div class="site__theme-btn" aria-label="Theme toggle">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/color-swatch.svg#color-swatch"></use>
</svg>
<div class="site__theme-dropdown">
<div class="site__theme-dropdown-list">
<div class="site__theme-item"
data-theme="Default Dark"
data-theme-dark
>Dark</div>
<div class="site__theme-item"
data-theme="Default Light"
data-theme-light
>Light</div>
<div class="site__theme-item"
data-theme="Dracula"
>Dracula</div>
<div class="site__theme-item"
data-theme="Nord"
>Nord</div>
<div class="site__theme-item"
data-theme="Solarized Dark"
>Solarized Dark</div>
<div class="site__theme-item"
data-theme="Solarized Light"
>Solarized Light</div>
<div class="site__theme-item" data-theme-system>
OS default
</div>
</div>
</div>
</div>
<script defer>
const themeDropdown = document.querySelector('.site__theme-btn');
themeDropdown.addEventListener('click', (event) => {
const { target } = event;
if (target.classList.contains("site__theme-item")) {
if (target.dataset.theme) {
theme = target.dataset.theme;
window.localStorage.setItem("theme", theme);
document.documentElement.dataset.theme = theme;
} else {
window.localStorage.removeItem("theme");
delete document.documentElement.dataset.theme;
}
}
});
</script>
<nav aria-label="Site header">
<a class="site__title" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful">More Contentful</a>
<div class="list site__links">
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/about/">About</a>
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/categories/">Categories</a>
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/">Recipes</a>
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/tags/">Tags</a>
</div>
</nav>
<hr>
<article class="post--single">
<header>
<h1>Twitter cards</h1>
</header>
<div class="list post__meta"><time datetime="2020-10-20 20:31:32 &#43;0800 &#43;0800" title="Created">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/calendar.svg#calendar"></use>
</svg>
<span style="margin-left: 0.5em;">2020-10-20</span>
</time>
<time datetime="2022-05-09 20:15:52 &#43;0800 &#43;0800" title="Updated">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/refresh.svg#refresh"></use>
</svg>
<span style="margin-left: 0.5em;">2022-05-09</span>
</time>
</div>
<main>
<div class="paragraph">
<p>This will add <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started">Twitter cards</a> for your webpages.
(Be sure to copy the <code>head</code> partial first in your own layout folder.)</p>
</div>
<div class="paragraph">
<p>Thankfully, Hugo already has <a href="https://gohugo.io/templates/internal/#twitter-cards">an internal template for Twitter cards</a>.
Simply add <code>{{- template &#34;_internal/twitter_cards.html&#34; . -}}</code> somewhere in your own copy.
(For reference, <a href="https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/twitter_cards.html">heres the source code for the internal template</a>.)</p>
</div>
<div class="paragraph">
<p>You could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs.
(Copy the internal template from the given link, create it as a partial in <code>layouts/partials/twitter_cards.html</code>, modify it, and insert the template with <code>{{- partial &#34;twitter_cards.html&#34; -}}</code>.)</p>
</div>
</main>
<hr>
<div class="post__meta--single">
<p data-content-publication-date="2020-10-20 20:31:32 &#43;0800 &#43;0800">Created: <time datetime="2020-10-20">2020-10-20</time></p>
<p data-content-modification-date="2022-05-09 20:15:52 &#43;0800 &#43;0800">Updated: <time datetime="2022-05-09">2022-05-09</time></p>
</div>
</article>
<hr><footer aria-label="Site footer">
<p><a href="#top">Back to top</a></p>
<p>Available in other languages:
<span class="list site__languages">
<a href="/hugo-theme-more-contentful/en" hreflang="en">English</a>
<a href="/hugo-theme-more-contentful/tl" hreflang="tl">Tagalog</a>
</span>
</p>
<ul class="list site__socials">
<li>
<a class="site__social-icon" rel="me" href="https://example.org/gmail" aria-label="E-mail">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gmail.svg#gmail"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/keybase" aria-label="Keybase">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/keybase.svg#keybase"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/devdotto" aria-label="Dev.to">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/devdotto.svg#devdotto"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/github/" aria-label="GitHub">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/github.svg#github"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/gitlab" aria-label="GitLab">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gitlab.svg#gitlab"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/lichess" aria-label="Lichess">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/lichess.svg#lichess"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/picartodottv" aria-label="Picarto.tv">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/picartodottv.svg#picartodottv"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/pixiv" aria-label="Pixiv">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/pixiv.svg#pixiv"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/twitch" aria-label="Twitch">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitch.svg#twitch"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/twitter" aria-label="Twitter">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitter.svg#twitter"></use>
</svg>
</a>
</li><li>
<a class="site__social-icon" rel="me" href="https://example.org/youtube" aria-label="YouTube">
<svg class="icon">
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/youtube.svg#youtube"></use>
</svg>
</a>
</li></ul>
<p>© 2022 More Contentful</p>
</footer>
</body>
</html>