2021-07-07 07:53:40 +00:00
<!DOCTYPE html>
2022-04-30 12:42:22 +00:00
< html lang = "en-us" > < title > Recipes | More Contentful< / title >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< link rel = "stylesheet" href = "https://example.com/css/main.min.5d090a66d48ba0fbc708c638ff5378c00764130d0d5b2c89505d249cd84d663b.css" / > < meta name = "generator" content = "Hugo 0.96.0" / >
2021-07-07 07:53:40 +00:00
< 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" / >
2022-04-30 12:42:22 +00:00
< 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" / >
2021-07-07 07:53:40 +00:00
< script >
let theme = window.localStorage.getItem('theme');
if (theme) {
document.documentElement.dataset.theme = theme;
}
< / script >
< body >
2022-04-30 12:42:22 +00:00
< 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 >
2021-07-07 07:53:40 +00:00
< / svg >
2022-04-30 12:42:22 +00:00
< 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
2021-07-07 07:53:40 +00:00
< / div >
2022-04-30 12:42:22 +00:00
< / div >
2021-07-07 07:53:40 +00:00
< / div >
2022-04-30 12:42:22 +00:00
< / div >
< script defer >
const themeDropdown = document.querySelector('.site__theme-btn');
2021-07-07 07:53:40 +00:00
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;
}
}
});
2022-04-30 12:42:22 +00:00
< / script >
< nav aria-label = "Site header" >
< a class = "site__title" href = "https://example.com" > More Contentful< / a >
2021-07-07 07:53:40 +00:00
< div class = "list site__links" >
2022-04-30 12:42:22 +00:00
< 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 >
2021-07-07 07:53:40 +00:00
< / div >
< / nav >
< hr >
2022-04-30 12:42:22 +00:00
< section >
2021-07-07 07:53:40 +00:00
< 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’ ’
Though this only applies specifically to Contentful and may need some tweaking when applying it other themes.< / p >
< / div >
2022-04-30 12:42:22 +00:00
< / section >
2021-07-07 07:53:40 +00:00
< article class = "post" >
2022-04-30 12:42:22 +00:00
< 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" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
< use href = "https://example.com/icons/generic/calendar.svg#calendar" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< span style = "margin-left: 0.5em;" > 2020-10-20< / span >
< / time >
2022-04-30 12:42:22 +00:00
< time datetime = "2022-04-30 20:40:56 +0800 +0800" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
< use href = "https://example.com/icons/generic/refresh.svg#refresh" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2022-04-30 12:42:22 +00:00
< span style = "margin-left: 0.5em;" > 2022-04-30< / span >
2021-07-07 07:53:40 +00:00
< / time >
< / div >
< / article >
< article class = "post" >
2022-04-30 12:42:22 +00:00
< 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" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
< use href = "https://example.com/icons/generic/calendar.svg#calendar" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< span style = "margin-left: 0.5em;" > 2020-10-20< / span >
< / time >
2022-04-30 12:42:22 +00:00
< time datetime = "2022-04-30 20:40:56 +0800 +0800" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
< use href = "https://example.com/icons/generic/refresh.svg#refresh" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2022-04-30 12:42:22 +00:00
< span style = "margin-left: 0.5em;" > 2022-04-30< / span >
2021-07-07 07:53:40 +00:00
< / time >
< / div >
2022-04-30 12:42:22 +00:00
2021-07-07 07:53:40 +00:00
< / article >
< article class = "post" >
2022-04-30 12:42:22 +00:00
< 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" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
< use href = "https://example.com/icons/generic/calendar.svg#calendar" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< span style = "margin-left: 0.5em;" > 2020-10-20< / span >
< / time >
2022-04-30 12:42:22 +00:00
< time datetime = "2022-04-30 20:40:56 +0800 +0800" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
< use href = "https://example.com/icons/generic/refresh.svg#refresh" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2022-04-30 12:42:22 +00:00
< span style = "margin-left: 0.5em;" > 2022-04-30< / span >
2021-07-07 07:53:40 +00:00
< / time >
< / div >
2022-04-30 12:42:22 +00:00
2021-07-07 07:53:40 +00:00
< / article >
< article class = "post" >
2022-04-30 12:42:22 +00:00
< 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" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
< use href = "https://example.com/icons/generic/calendar.svg#calendar" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< span style = "margin-left: 0.5em;" > 2020-10-20< / span >
< / time >
2022-04-30 12:42:22 +00:00
< time datetime = "2022-04-30 20:40:56 +0800 +0800" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
< use href = "https://example.com/icons/generic/refresh.svg#refresh" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2022-04-30 12:42:22 +00:00
< span style = "margin-left: 0.5em;" > 2022-04-30< / span >
2021-07-07 07:53:40 +00:00
< / time >
< / div >
2022-04-30 12:42:22 +00:00
2021-07-07 07:53:40 +00:00
< / article >
< article class = "post" >
2022-04-30 12:42:22 +00:00
< 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" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
< use href = "https://example.com/icons/generic/calendar.svg#calendar" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< span style = "margin-left: 0.5em;" > 2020-10-20< / span >
< / time >
2022-04-30 12:42:22 +00:00
< time datetime = "2022-04-30 20:40:56 +0800 +0800" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
< use href = "https://example.com/icons/generic/refresh.svg#refresh" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2022-04-30 12:42:22 +00:00
< span style = "margin-left: 0.5em;" > 2022-04-30< / span >
2021-07-07 07:53:40 +00:00
< / time >
< / div >
2022-04-30 12:42:22 +00:00
2021-07-07 07:53:40 +00:00
< / article >
2022-04-30 12:42:22 +00:00
< hr > < footer aria-label = "Site footer" >
2021-07-07 07:53:40 +00:00
< p > < a href = "#top" > Back to top< / a > < / p >
< p > Available in other languages:
< span class = "list site__languages" >
2022-04-30 12:42:22 +00:00
< a href = "/en" hreflang = "en" > English< / a >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< a href = "/tl" hreflang = "tl" > Tagalog< / a >
2021-07-07 07:53:40 +00:00
< / span >
< / p >
< ul class = "list site__socials" >
< li >
2022-04-30 12:42:22 +00:00
< 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 >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < li >
2022-04-30 12:42:22 +00:00
< 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 >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < li >
2022-04-30 12:42:22 +00:00
< 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 >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < li >
2022-04-30 12:42:22 +00:00
< 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 >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < / ul >
2022-04-30 12:42:22 +00:00
< p > © 2022 More Contentful< / p >
2021-07-07 07:53:40 +00:00
< / footer >
< / body >
< / html >
