mirror of
https://github.com/foo-dogsquared/hugo-theme-more-contentful.git
synced 2025-01-31 10:58:19 +00:00
350 lines
10 KiB
HTML
350 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-us"><title>Recipes | More Contentful</title>
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://example.com/css/main.min.5d090a66d48ba0fbc708c638ff5378c00764130d0d5b2c89505d249cd84d663b.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="Extending a Hugo theme is nothing new and a few places provide a place for the most common extensions. In this section, I’ll be listing a few personal recipes I’ve always used for extending a Hugo theme. Though this only applies specifically to Contentful and may need some tweaking when applying it other themes.
|
||
" /><meta name="twitter:card" content="summary"/>
|
||
<meta name="twitter:title" content="Recipes"/>
|
||
<meta name="twitter:description" content=""/>
|
||
<meta property="og:title" content="Recipes" />
|
||
<meta property="og:description" content="" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:url" content="https://example.com/recipes/" />
|
||
|
||
<link rel="canonical" type="text/html" href="https://example.com/recipes/" /><link rel="alternate" type="application/feed+json" href="https://example.com/recipes/feed.json" /><link rel="alternate" type="application/rss+xml" href="https://example.com/recipes/feed.rss" /><link rel="alternate" type="application/atom+xml" href="https://example.com/recipes/feed.atom" />
|
||
|
||
<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://example.com/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://example.com">More Contentful</a>
|
||
<div class="list site__links">
|
||
|
||
<a href="https://example.com/about/">About</a>
|
||
<a href="https://example.com/categories/">Categories</a>
|
||
<a href="https://example.com/recipes/">Recipes</a>
|
||
<a href="https://example.com/tags/">Tags</a>
|
||
|
||
|
||
</div>
|
||
</nav>
|
||
<hr>
|
||
<section>
|
||
<div class="paragraph">
|
||
<p>Extending a Hugo theme is nothing new and a <a href="https://gohugo.io/content-management/sections/">few</a> <a href="http://hugocodex.org/add-ons/">places</a> provide a place for the most common extensions.
|
||
In this section, I’ll be listing a few personal recipes I’ve always used for extending a Hugo theme.
|
||
Though this only applies specifically to Contentful and may need some tweaking when applying it other themes.</p>
|
||
</div>
|
||
|
||
</section>
|
||
<article class="post">
|
||
<h1><a href="https://example.com/recipes/configurable-list-of-contacts/" aria-label="Configurable list of contacts">Configurable list of contacts</a></h1>
|
||
<div class="list post__meta"><time datetime="2020-10-20 20:38:24 +0800 +0800">
|
||
|
||
<svg class="icon">
|
||
<use href="https://example.com/icons/generic/calendar.svg#calendar"></use>
|
||
</svg>
|
||
|
||
<span style="margin-left: 0.5em;">2020-10-20</span>
|
||
</time>
|
||
<time datetime="2022-04-30 20:40:56 +0800 +0800">
|
||
|
||
<svg class="icon">
|
||
<use href="https://example.com/icons/generic/refresh.svg#refresh"></use>
|
||
</svg>
|
||
|
||
<span style="margin-left: 0.5em;">2022-04-30</span>
|
||
</time>
|
||
</div>
|
||
|
||
</article>
|
||
<article class="post">
|
||
<h1><a href="https://example.com/recipes/creating-an-archive-page/" aria-label="Creating an archive page">Creating an archive page</a></h1>
|
||
<div class="list post__meta"><time datetime="2020-10-20 20:36:55 +0800 +0800">
|
||
|
||
<svg class="icon">
|
||
<use href="https://example.com/icons/generic/calendar.svg#calendar"></use>
|
||
</svg>
|
||
|
||
<span style="margin-left: 0.5em;">2020-10-20</span>
|
||
</time>
|
||
<time datetime="2022-04-30 20:40:56 +0800 +0800">
|
||
|
||
<svg class="icon">
|
||
<use href="https://example.com/icons/generic/refresh.svg#refresh"></use>
|
||
</svg>
|
||
|
||
<span style="margin-left: 0.5em;">2022-04-30</span>
|
||
</time>
|
||
</div>
|
||
|
||
</article>
|
||
<article class="post">
|
||
<h1><a href="https://example.com/recipes/open-graph-protocol/" aria-label="Open graph protocol">Open graph protocol</a></h1>
|
||
<div class="list post__meta"><time datetime="2020-10-20 20:35:39 +0800 +0800">
|
||
|
||
<svg class="icon">
|
||
<use href="https://example.com/icons/generic/calendar.svg#calendar"></use>
|
||
</svg>
|
||
|
||
<span style="margin-left: 0.5em;">2020-10-20</span>
|
||
</time>
|
||
<time datetime="2022-04-30 20:40:56 +0800 +0800">
|
||
|
||
<svg class="icon">
|
||
<use href="https://example.com/icons/generic/refresh.svg#refresh"></use>
|
||
</svg>
|
||
|
||
<span style="margin-left: 0.5em;">2022-04-30</span>
|
||
</time>
|
||
</div>
|
||
|
||
</article>
|
||
<article class="post">
|
||
<h1><a href="https://example.com/recipes/twitter-cards/" aria-label="Twitter cards">Twitter cards</a></h1>
|
||
<div class="list post__meta"><time datetime="2020-10-20 20:31:32 +0800 +0800">
|
||
|
||
<svg class="icon">
|
||
<use href="https://example.com/icons/generic/calendar.svg#calendar"></use>
|
||
</svg>
|
||
|
||
<span style="margin-left: 0.5em;">2020-10-20</span>
|
||
</time>
|
||
<time datetime="2022-04-30 20:40:56 +0800 +0800">
|
||
|
||
<svg class="icon">
|
||
<use href="https://example.com/icons/generic/refresh.svg#refresh"></use>
|
||
</svg>
|
||
|
||
<span style="margin-left: 0.5em;">2022-04-30</span>
|
||
</time>
|
||
</div>
|
||
|
||
</article>
|
||
<article class="post">
|
||
<h1><a href="https://example.com/recipes/customizing-your-head/" aria-label="Customizing your head">Customizing your head</a></h1>
|
||
<div class="list post__meta"><time datetime="2020-10-20 20:29:42 +0800 +0800">
|
||
|
||
<svg class="icon">
|
||
<use href="https://example.com/icons/generic/calendar.svg#calendar"></use>
|
||
</svg>
|
||
|
||
<span style="margin-left: 0.5em;">2020-10-20</span>
|
||
</time>
|
||
<time datetime="2022-04-30 20:40:56 +0800 +0800">
|
||
|
||
<svg class="icon">
|
||
<use href="https://example.com/icons/generic/refresh.svg#refresh"></use>
|
||
</svg>
|
||
|
||
<span style="margin-left: 0.5em;">2022-04-30</span>
|
||
</time>
|
||
</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="/en" hreflang="en">English</a>
|
||
|
||
<a href="/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://example.com/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://example.com/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://example.com/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://example.com/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://example.com/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://example.com/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://example.com/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://example.com/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://example.com/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://example.com/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://example.com/icons/brand/youtube.svg#youtube"></use>
|
||
</svg>
|
||
</a>
|
||
</li></ul>
|
||
|
||
|
||
|
||
|
||
<p>© 2022 More Contentful</p>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|