mirror of
https://github.com/foo-dogsquared/hugo-theme-more-contentful.git
synced 2025-02-07 18:19:31 +00:00
193 lines
7.8 KiB
HTML
193 lines
7.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en-us"><title>Open graph protocol | Contentful</title>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/css/main.min.e06bc29e2cb00a8f461bfefc0ea9543b9bf61688266d3ca51fcb4d2121242b0a.css" /><meta name="generator" content="Hugo 0.76.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="Next up, we’re implementing Open Graph protocol for our webpages. Commonly used for making suitable format when sharing the content on certain sites like Facebook. (Be sure to copy the head partial first in your own layout folder.)
|
|||
|
|
Similar to Twitter cards, Hugo has an internal template for this. Simply add {{- template "_internal/opengraph.html" . -}} somewhere in your own copy. (For reference, here’s the source code for the internal template." /><meta name="twitter:card" content="summary"/>
|
|||
|
|
<meta name="twitter:title" content="Open graph protocol"/>
|
|||
|
|
<meta name="twitter:description" content="Next up, we’re implementing Open Graph protocol for our webpages. Commonly used for making suitable format when sharing the content on certain sites like Facebook. (Be sure to copy the head partial first in your own layout folder.)
|
|||
|
|
Similar to Twitter cards, Hugo has an internal template for this. Simply add {{- template "_internal/opengraph.html" . -}} somewhere in your own copy. (For reference, here’s the source code for the internal template."/>
|
|||
|
|
<meta property="og:title" content="Open graph protocol" />
|
|||
|
|
<meta property="og:description" content="Next up, we’re implementing Open Graph protocol for our webpages. Commonly used for making suitable format when sharing the content on certain sites like Facebook. (Be sure to copy the head partial first in your own layout folder.)
|
|||
|
|
Similar to Twitter cards, Hugo has an internal template for this. Simply add {{- template "_internal/opengraph.html" . -}} somewhere in your own copy. (For reference, here’s the source code for the internal template." />
|
|||
|
|
<meta property="og:type" content="article" />
|
|||
|
|
<meta property="og:url" content="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/open-graph-protocol/" />
|
|||
|
|
<meta property="article:published_time" content="2020-10-20T20:35:39+08:00" />
|
|||
|
|
<meta property="article:modified_time" content="2020-11-02T23:58:07+08:00" />
|
|||
|
|
<link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/open-graph-protocol/" />
|
|||
|
|
|
|||
|
|
<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>
|
|||
|
|
<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-item" >Default Dark (default)</div>
|
|||
|
|
<div class="site__theme-item" data-theme="Dracula">Dracula</div>
|
|||
|
|
<div class="site__theme-item" data-theme="Nord">Nord</div>
|
|||
|
|
</div>
|
|||
|
|
</svg>
|
|||
|
|
</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="Primary navigation">
|
|||
|
|
<a class="site__title" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful">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>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<article class="post--single">
|
|||
|
|
<header>
|
|||
|
|
<h1>Open graph protocol</h1>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="list post__meta"><time datetime="2020-10-20 20:35:39 +0800 +0800">
|
|||
|
|
|
|||
|
|
<svg>
|
|||
|
|
<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="2020-11-02 23:58:07 +0800 +0800">
|
|||
|
|
|
|||
|
|
<svg>
|
|||
|
|
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/refresh.svg#refresh"></use>
|
|||
|
|
</svg>
|
|||
|
|
|
|||
|
|
<span style="margin-left: 0.5em;">2020-11-02</span>
|
|||
|
|
</time>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<main>
|
|||
|
|
<div class="paragraph">
|
|||
|
|
<p>Next up, we’re implementing <a href="https://opengraphprotocol.org/">Open Graph protocol</a> for our webpages.
|
|||
|
|
Commonly used for making suitable format when sharing the content on certain sites like Facebook.
|
|||
|
|
(Be sure to copy the <code>head</code> partial first in your own layout folder.)</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="paragraph">
|
|||
|
|
<p>Similar to Twitter cards, Hugo has <a href="https://gohugo.io/templates/internal/#open-graph">an internal template for this</a>.
|
|||
|
|
Simply add <code>{{- template "_internal/opengraph.html" . -}}</code> somewhere in your own copy.
|
|||
|
|
(For reference, <a href="https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/opengraph.html">here’s the source code for the internal template</a>.)</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="paragraph">
|
|||
|
|
<p>If you want more control and customized version of the output, I recommend to copy the internal template and create a partial (e.g., <code>layouts/partials/opengraph.html</code>) and modify it.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
<div class="post__meta--single">
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<p data-content-publication-date="2020-10-20 20:35:39 +0800 +0800">Created: <time datetime="2020-10-20">2020-10-20</time></p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<p data-content-modification-date="2020-11-02 23:58:07 +0800 +0800">Updated: <time datetime="2020-11-02">2020-11-02</time></p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
<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://keybase.io/foo_dogsquared" aria-label="Keybase">
|
|||
|
|
<svg>
|
|||
|
|
<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://github.com/foo-dogsquared/" aria-label="GitHub">
|
|||
|
|
<svg>
|
|||
|
|
<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://gitlab.com/foo-dogsquared/" aria-label="GitLab">
|
|||
|
|
<svg>
|
|||
|
|
<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://twitter.com/foo_dogsquared" aria-label="Twitter">
|
|||
|
|
<svg>
|
|||
|
|
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitter.svg#twitter"></use>
|
|||
|
|
</svg>
|
|||
|
|
</a>
|
|||
|
|
</li></ul>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<p>© 2021 Contentful</p>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|