mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-10-27 18:53:18 +00:00
396 lines
26 KiB
HTML
396 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" itemscope itemtype="http://schema.org/Article">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
|
<meta name="generator" content="Hugo 0.132.1">
|
|
<meta name="generator" content="Relearn 6.1.1+tip">
|
|
<meta name="description" content="The theme supports non-standard image effects.
|
|
Name Description border Draws a light thin border around the image lazy Lets the image be lazy loaded lightbox The image will be clickable to show it enlarged shadow Draws a shadow around the image to make it appear hovered/glowing As described, you can add this to the URL query parameter, but this may be cumbersome to be done consistently for the whole page.">
|
|
<meta name="author" content="Sören Weber">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta name="twitter:title" content="Image Effects :: Hugo Relearn Theme">
|
|
<meta name="twitter:description" content="The theme supports non-standard image effects.
|
|
Name Description border Draws a light thin border around the image lazy Lets the image be lazy loaded lightbox The image will be clickable to show it enlarged shadow Draws a shadow around the image to make it appear hovered/glowing As described, you can add this to the URL query parameter, but this may be cumbersome to be done consistently for the whole page.">
|
|
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/cont/imageeffects/index.html">
|
|
<meta property="og:site_name" content="Hugo Relearn Theme">
|
|
<meta property="og:title" content="Image Effects :: Hugo Relearn Theme">
|
|
<meta property="og:description" content="The theme supports non-standard image effects.
|
|
Name Description border Draws a light thin border around the image lazy Lets the image be lazy loaded lightbox The image will be clickable to show it enlarged shadow Draws a shadow around the image to make it appear hovered/glowing As described, you can add this to the URL query parameter, but this may be cumbersome to be done consistently for the whole page.">
|
|
<meta property="og:locale" content="en">
|
|
<meta property="og:type" content="article">
|
|
<meta property="article:section" content="Content">
|
|
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta itemprop="name" content="Image Effects :: Hugo Relearn Theme">
|
|
<meta itemprop="description" content="The theme supports non-standard image effects.
|
|
Name Description border Draws a light thin border around the image lazy Lets the image be lazy loaded lightbox The image will be clickable to show it enlarged shadow Draws a shadow around the image to make it appear hovered/glowing As described, you can add this to the URL query parameter, but this may be cumbersome to be done consistently for the whole page.">
|
|
<meta itemprop="wordCount" content="359">
|
|
<meta itemprop="image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<title>Image Effects :: Hugo Relearn Theme</title>
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/cont/imageeffects/index.html" rel="alternate" hreflang="x-default">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/cont/imageeffects/index.html" rel="alternate" hreflang="en">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/cont/imageeffects/index.html" rel="alternate" hreflang="art-x-pir">
|
|
<link href="https://mcshelby.github.io/hugo-theme-relearn/cont/imageeffects/index.html" rel="canonical" type="text/html" title="Image Effects :: Hugo Relearn Theme">
|
|
<link href="/hugo-theme-relearn/cont/imageeffects/index.xml" rel="alternate" type="application/rss+xml" title="Image Effects :: Hugo Relearn Theme">
|
|
<link href="/hugo-theme-relearn/images/logo.svg?1723567892" rel="icon" type="image/svg+xml">
|
|
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1723567892" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1723567892" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/nucleus.css?1723567892" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/auto-complete.css?1723567892" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1723567892" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1723567892" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/fonts.css?1723567892" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1723567892" rel="stylesheet"></noscript>
|
|
<link href="/hugo-theme-relearn/css/theme.css?1723567892" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1723567892" rel="stylesheet" id="R-variant-style">
|
|
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1723567892" rel="stylesheet" id="R-variant-chroma-style">
|
|
<link href="/hugo-theme-relearn/css/variant.css?1723567892" rel="stylesheet">
|
|
<link href="/hugo-theme-relearn/css/print.css?1723567892" rel="stylesheet" media="print">
|
|
<link href="/hugo-theme-relearn/css/format-print.css?1723567892" rel="stylesheet">
|
|
<script src="/hugo-theme-relearn/js/variant.js?1723567892"></script>
|
|
<script>
|
|
window.relearn = window.relearn || {};
|
|
window.relearn.relBasePath='..\/..';
|
|
window.relearn.relBaseUri='..\/..\/..';
|
|
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
|
|
window.index_js_url="/hugo-theme-relearn/index.search.js?1723567892";
|
|
// variant stuff
|
|
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'retro-auto', 'neon', 'learn', 'blue', 'green', 'red' ] );
|
|
// translations
|
|
window.T_Copy_to_clipboard = `Copy to clipboard`;
|
|
window.T_Copied_to_clipboard = `Copied to clipboard!`;
|
|
window.T_Copy_link_to_clipboard = `Copy link to clipboard`;
|
|
window.T_Link_copied_to_clipboard = `Copied link to clipboard!`;
|
|
window.T_Reset_view = `Reset view`;
|
|
window.T_View_reset = `View reset!`;
|
|
window.T_No_results_found = `No results found for "{0}"`;
|
|
window.T_N_results_found = `{1} results found for "{0}"`;
|
|
</script>
|
|
<style>
|
|
#R-body img.bg-white {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="mobile-support print disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/cont/imageeffects/index.html">
|
|
<div id="R-body" class="default-animation">
|
|
<div id="R-body-overlay"></div>
|
|
<nav id="R-topbar">
|
|
<div class="topbar-wrapper">
|
|
<div class="topbar-sidebar-divider"></div>
|
|
<div class="topbar-area topbar-area-start" data-area="start">
|
|
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide"><button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL+ALT+n)"><i class="fa-fw fas fa-bars"></i></button>
|
|
</div>
|
|
</div>
|
|
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="/hugo-theme-relearn/cont/index.html"><span itemprop="name">Content</span></a><meta itemprop="position" content="1"> > </li><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Image Effects</span><meta itemprop="position" content="2"></li>
|
|
</ol>
|
|
<div class="topbar-area topbar-area-end" data-area="end">
|
|
<div class="topbar-button topbar-button-prev" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/cont/markdown/index.html" title="Markdown Syntax (🡐)"><i class="fa-fw fas fa-chevron-left"></i></a>
|
|
</div>
|
|
<div class="topbar-button topbar-button-next" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/cont/menushortcuts/index.html" title="Menu extra shortcuts (🡒)"><i class="fa-fw fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div id="R-main-overlay"></div>
|
|
<main id="R-body-inner" class="highlightable default" tabindex="-1">
|
|
<div class="flex-block-wrapper">
|
|
<article class="default">
|
|
<header class="headline">
|
|
</header>
|
|
|
|
<h1 id="image-effects">Image Effects</h1>
|
|
|
|
<p>The theme supports non-standard <a href="/hugo-theme-relearn/cont/markdown/index.html#image-effects">image effects</a>.</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>border</td>
|
|
<td>Draws a light thin border around the image</td>
|
|
</tr>
|
|
<tr>
|
|
<td>lazy</td>
|
|
<td>Lets the image be lazy loaded</td>
|
|
</tr>
|
|
<tr>
|
|
<td>lightbox</td>
|
|
<td>The image will be clickable to show it enlarged</td>
|
|
</tr>
|
|
<tr>
|
|
<td>shadow</td>
|
|
<td>Draws a shadow around the image to make it appear hovered/glowing</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>As <a href="/hugo-theme-relearn/cont/markdown/index.html#image-effects">described</a>, you can add this to the URL query parameter, but this may be cumbersome to be done consistently for the whole page.</p>
|
|
<p>Instead, you can configure the defaults in your <code>hugo.toml</code> as well as overriding these default in the pages frontmatter.</p>
|
|
<p>Explicitly set URL query parameter will override the defaults in effect for a page.</p>
|
|
<p>Without any settings in your <code>hugo.toml</code> this defaults to</p>
|
|
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">hugo.</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">imageEffects</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">false</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">lazy</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div></div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">imageEffects</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">border</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lazy</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">lightbox</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">shadow</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div></div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"params"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"imageEffects"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"border"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"lazy"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"lightbox"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"shadow"</span><span class="p">:</span> <span class="kc">false</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>This can be overridden in a pages frontmatter by eg.</p>
|
|
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="err">+++</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">imageEffects</span><span class="p">]</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nx">border</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"><span class="err">+++</span></span></span></code></pre></div></div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">imageEffects</span><span class="p">:</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">border</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nn">---</span></span></span></code></pre></div></div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"imageEffects"</span><span class="p">:</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"border"</span><span class="p">:</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>Or by explicitly override settings by URL query parameter</p>
|
|
|
|
<div class="tab-panel" data-tab-group="d4bf7620263ccd438de09b146cd1f088">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="url"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('d4bf7620263ccd438de09b146cd1f088','url')"
|
|
>
|
|
<span class="tab-nav-text">URL</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="url"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">![<span class="nt">Minion</span>](<span class="na">https://octodex.github.com/images/minion.png?lightbox=false&bg-white=true</span>)</span></span></code></pre></div></div>
|
|
</div>
|
|
</div>
|
|
</div><p>The settings applied to the above image would be</p>
|
|
|
|
<div class="tab-panel" data-tab-group="config-code">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="toml"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('config-code','toml')"
|
|
>
|
|
<span class="tab-nav-text">toml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="yaml"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','yaml')"
|
|
>
|
|
<span class="tab-nav-text">yaml</span>
|
|
</button>
|
|
<button
|
|
data-tab-item="json"
|
|
class="tab-nav-button tab-panel-style cstyle initial"
|
|
onclick="switchTab('config-code','json')"
|
|
>
|
|
<span class="tab-nav-text">json</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="toml"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">bg-white</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">border</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">lazy</span> <span class="p">=</span> <span class="kc">true</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">lightbox</span> <span class="p">=</span> <span class="kc">false</span>
|
|
</span></span><span class="line"><span class="cl"><span class="nx">shadow</span> <span class="p">=</span> <span class="kc">false</span></span></span></code></pre></div></div>
|
|
</div>
|
|
<div
|
|
data-tab-item="yaml"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">bg-white</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">border</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">lazy</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">lightbox</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
|
|
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">shadow</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span></span></span></code></pre></div></div>
|
|
</div>
|
|
<div
|
|
data-tab-item="json"
|
|
class="tab-content tab-panel-style cstyle initial">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"bg-white"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"border"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"lazy"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"lightbox"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">"shadow"</span><span class="p">:</span> <span class="kc">false</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>This ends up in the following HTML where the parameter are converted to CSS classes.</p>
|
|
|
|
<div class="tab-panel" data-tab-group="662154db42b9bf3faeb4384e53c8721f">
|
|
<div class="tab-nav">
|
|
<div class="tab-nav-title">​</div>
|
|
<button
|
|
data-tab-item="html"
|
|
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
|
|
onclick="switchTab('662154db42b9bf3faeb4384e53c8721f','html')"
|
|
>
|
|
<span class="tab-nav-text">HTML</span>
|
|
</button>
|
|
</div>
|
|
<div class="tab-content-container">
|
|
<div
|
|
data-tab-item="html"
|
|
class="tab-content tab-panel-style cstyle initial active">
|
|
<div class="tab-content-text">
|
|
|
|
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://octodex.github.com/images/minion.png?lightbox=false&bg-white=true"</span> <span class="na">loading</span><span class="o">=</span><span class="s">"lazy"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Minion"</span> <span class="na">class</span><span class="o">=</span><span class="s">"bg-white border lazy nolightbox noshadow"</span><span class="p">></span></span></span></code></pre></div></div>
|
|
</div>
|
|
</div>
|
|
</div><h2 id="extending">Extending</h2>
|
|
<p>As you can see in the above example, the <code>bg-white</code> parameter is not initially supported in the themes default settings. Nevertheless you are free to define arbitrary parameter by just adding them to the URL query parameter or set them in your <code>hugo.toml</code> or pages frontmatter.</p>
|
|
|
|
<div class="box notices cstyle note">
|
|
<div class="box-label"><i class="fa-fw fas fa-exclamation-circle"></i> Note</div>
|
|
<div class="box-content">
|
|
|
|
<p>If no extended parameter like <code>bg-white</code> in the example is set on the URL, a <code>class="nobg-white"</code> in the HTML will only be generated if a default value was set in the <code>hugo.toml</code> or pages frontmatter.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footline">
|
|
</footer>
|
|
</article>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="/hugo-theme-relearn/js/clipboard.min.js?1723567892" defer></script>
|
|
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1723567892" defer></script>
|
|
<script src="/hugo-theme-relearn/js/theme.js?1723567892" defer></script>
|
|
</body>
|
|
</html>
|