mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-24 00:03:10 +00:00
434 lines
26 KiB
HTML
434 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<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.120.4">
|
|
<meta name="generator" content="Relearn 5.23.2+tip">
|
|
<meta name="description" content="Documentation for Hugo Relearn Theme">
|
|
<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="Topbar Modification :: Hugo Relearn Theme">
|
|
<meta name="twitter:description" content="Documentation for Hugo Relearn Theme">
|
|
<meta property="og:title" content="Topbar Modification :: Hugo Relearn Theme">
|
|
<meta property="og:description" content="Documentation for Hugo Relearn Theme">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://McShelby.github.io/hugo-theme-relearn/basics/topbar/index.html">
|
|
<meta property="og:image" content="https://McShelby.github.io/hugo-theme-relearn/images/hero.png">
|
|
<meta property="og:site_name" content="Hugo Relearn Theme">
|
|
<title>Topbar Modification :: Hugo Relearn Theme</title>
|
|
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/topbar/index.html" rel="alternate" hreflang="x-default">
|
|
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/topbar/index.html" rel="alternate" hreflang="en">
|
|
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/topbar/index.html" rel="alternate" hreflang="art-pir">
|
|
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/topbar/index.html" rel="canonical" type="text/html" title="Topbar Modification :: Hugo Relearn Theme">
|
|
<link href="../../basics/topbar/index.xml" rel="alternate" type="application/rss+xml" title="Topbar Modification :: Hugo Relearn Theme">
|
|
<link href="../../images/logo.svg?1701206005" rel="icon" type="image/svg+xml">
|
|
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
|
|
<link href="../../css/fontawesome-all.min.css?1701206006" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fontawesome-all.min.css?1701206006" rel="stylesheet"></noscript>
|
|
<link href="../../css/nucleus.css?1701206006" rel="stylesheet">
|
|
<link href="../../css/auto-complete.css?1701206006" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/auto-complete.css?1701206006" rel="stylesheet"></noscript>
|
|
<link href="../../css/perfect-scrollbar.min.css?1701206006" rel="stylesheet">
|
|
<link href="../../css/fonts.css?1701206006" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../css/fonts.css?1701206006" rel="stylesheet"></noscript>
|
|
<link href="../../css/theme.css?1701206006" rel="stylesheet">
|
|
<link href="../../css/theme-relearn-auto.css?1701206006" rel="stylesheet" id="R-variant-style">
|
|
<link href="../../css/chroma-relearn-auto.css?1701206006" rel="stylesheet" id="R-variant-chroma-style">
|
|
<link href="../../css/variant.css?1701206006" rel="stylesheet">
|
|
<link href="../../css/print.css?1701206006" rel="stylesheet" media="print">
|
|
<link href="../../css/format-print.css?1701206006" rel="stylesheet">
|
|
<link href="../../css/ie.css?1701206006" rel="stylesheet">
|
|
<script src="../../js/url.js?1701206006"></script>
|
|
<script src="../../js/variant.js?1701206006"></script>
|
|
<script>
|
|
// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
|
|
// https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
|
|
window.index_js_url="../../index.search.js";
|
|
var root_url="../../";
|
|
var baseUri=root_url.replace(/\/$/, '');
|
|
window.relearn = window.relearn || {};
|
|
window.relearn.baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
|
|
// variant stuff
|
|
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', '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="../../basics/topbar/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="../../basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="1"> > </li><li
|
|
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Topbar Modification</span><meta itemprop="position" content="2"></li>
|
|
</ol>
|
|
<div class="topbar-area topbar-area-end" data-area="end">
|
|
</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="topbar-modification">Topbar Modification</h1>
|
|
|
|
<p>The theme comes with a reasonably configured topbar.</p>
|
|
<p><a href="#R-image-70d6d3a1430b8cb1d07711eb954655f8" class="lightbox-link"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
|
<a href="javascript:history.back();" class="lightbox-back" id="R-image-70d6d3a1430b8cb1d07711eb954655f8"><img src="../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
|
<p>Nevertheless, your requirements may differ from this configuration. Luckily the theme got you covered as the themebar, its buttons and the functionality behind these buttons is fully configurable by you.</p>
|
|
|
|
<div class="box notices cstyle tip">
|
|
<div class="box-label"><i class="fa-fw fas fa-lightbulb"></i> Tip</div>
|
|
<div class="box-content">
|
|
|
|
<p>All mentioned file names below can be clicked and show you the implementation for a better understanding.</p>
|
|
</div>
|
|
</div>
|
|
<h2 id="areas">Areas</h2>
|
|
<p>The default configuration comes with three predefined areas that may contain an arbitrary set of buttons.</p>
|
|
<p><a href="#R-image-b992cecf57a0bf51d07eb814730e7b89" class="lightbox-link"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
|
|
<a href="javascript:history.back();" class="lightbox-back" id="R-image-b992cecf57a0bf51d07eb814730e7b89"><img src="../../basics/topbar/topbar-areas.png" alt="Topbar with default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
|
|
<ul>
|
|
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/start.html" target="_blank"><strong>start</strong></a>: shown between menu and breadcrumb</li>
|
|
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><strong>end</strong></a>: shown on the opposite breadcrumb side in comparison to the <em>start</em> area</li>
|
|
<li><a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/more.html" target="_blank"><strong>more</strong></a>: shown when pressing the
|
|
<span class="btn cstyle transparent">
|
|
<button type="button">
|
|
<i class="fa-fw fas fa-ellipsis-v"></i>
|
|
|
|
</button>
|
|
</span> <em>more</em> button in the topbar</li>
|
|
</ul>
|
|
<p>While you can not add additional areas in the topbar, you are free to configure addtional buttons that behave like the <em>more</em> button, providing further user defined areas.</p>
|
|
<h2 id="buttons">Buttons</h2>
|
|
<p>The theme ships with the following predefined buttons (from left to right in the screenshot)</p>
|
|
<ul>
|
|
<li>
|
|
<span class="btn cstyle transparent">
|
|
<button type="button">
|
|
<i class="fa-fw fas fa-bars"></i>
|
|
|
|
</button>
|
|
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/sidebar.html" target="_blank"><strong>sidebar</strong></a>: opens the sidebar flyout if in mobile layout</li>
|
|
<li>
|
|
<span class="btn cstyle transparent">
|
|
<button type="button">
|
|
<i class="fa-fw fas fa-list-alt"></i>
|
|
|
|
</button>
|
|
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html" target="_blank"><strong>toc</strong></a>: opens the table of contents in an overlay</li>
|
|
<li>
|
|
<span class="btn cstyle transparent">
|
|
<button type="button">
|
|
<i class="fa-fw fas fa-pen"></i>
|
|
|
|
</button>
|
|
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/edit.html" target="_blank"><strong>edit</strong></a>: browses to the editable page if the <code>editURL</code> <a href="../../basics/configuration/index.html">parameter is set</a></li>
|
|
<li>
|
|
<span class="btn cstyle transparent">
|
|
<button type="button">
|
|
<i class="fa-fw fas fa-print"></i>
|
|
|
|
</button>
|
|
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" target="_blank"><strong>print</strong></a>: browses to the chapters printable page if <a href="../../basics/customization/index.html#activate-print-support">print support</a> was activated</li>
|
|
<li>
|
|
<span class="btn cstyle transparent">
|
|
<button type="button">
|
|
<i class="fa-fw fas fa-chevron-left"></i>
|
|
|
|
</button>
|
|
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/prev.html" target="_blank"><strong>prev</strong></a>: browses to the previous page if there is one</li>
|
|
<li>
|
|
<span class="btn cstyle transparent">
|
|
<button type="button">
|
|
<i class="fa-fw fas fa-chevron-right"></i>
|
|
|
|
</button>
|
|
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/next.html" target="_blank"><strong>next</strong></a>: browses to the next page if there is one</li>
|
|
<li>
|
|
<span class="btn cstyle transparent">
|
|
<button type="button">
|
|
<i class="fa-fw fas fa-ellipsis-v"></i>
|
|
|
|
</button>
|
|
</span> <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html" target="_blank"><strong>more</strong></a>: opens the overlay for the <em>more</em> area</li>
|
|
</ul>
|
|
<p>Not all buttons are displayed at every given time. This is configurable (see below if interested).</p>
|
|
<h2 id="redefining-areas">Redefining Areas</h2>
|
|
<p>Each predefined area and button comes in their own file. By that it is easy for you to overwrite an area file in your installation reusing only the buttons you like.</p>
|
|
<p>Eg. you can redefine the predefined <em>end</em> area by adding the file <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/area/end.html" target="_blank"><code>layouts/partials/topbar/area/end.html</code></a> in your installation (not in the theme itself) to remove all but the <em>more</em> button.</p>
|
|
<p>The below example sets an explicit value for the <code>onempty</code> parameter, overriding the specific default value for this button (these defaults vary depending on the button). The parameter causes the <em>more</em> button to always be displayed instead of hiding once its content is empty.</p>
|
|
<div class="wrap-code highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">"topbar/button/more.html"</span> <span class="p">(</span><span class="nx">dict</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s">"page"</span> <span class="p">.</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="s">"onempty"</span> <span class="s">"disable"</span>
|
|
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div><h2 id="defining-own-buttons">Defining own Buttons</h2>
|
|
<h3 id="button-types">Button Types</h3>
|
|
<p>The theme distingushies between two types of buttons:</p>
|
|
<ul>
|
|
<li><a href="#button"><strong>button</strong></a>: a clickable button that either browses to another site, triggers a user defined script or opens an overlay containing user defined content</li>
|
|
<li><a href="#area-button"><strong>area-button</strong></a>: the template for the
|
|
<span class="btn cstyle transparent">
|
|
<button type="button">
|
|
<i class="fa-fw fas fa-ellipsis-v"></i>
|
|
|
|
</button>
|
|
</span> <em>more</em> button, to define your own area overlay buttons</li>
|
|
</ul>
|
|
<h3 id="button-parameter">Button Parameter</h3>
|
|
<h4 id="screen-widths-and-actions">Screen Widths and Actions</h4>
|
|
<p>Depending on the screen width you can configure how the button should behave. Screen width is divided into three classes:</p>
|
|
<ul>
|
|
<li><strong>s</strong>: (controlled by the <code>onwidths</code> parameter) mobile layout where the menu sidebar is hidden</li>
|
|
<li><strong>m</strong>: (controlled by the <code>onwidthm</code> parameter) desktop layout with visible sidebar while the content area width still resizes</li>
|
|
<li><strong>l</strong>: (controlled by the <code>onwidthl</code> parameter) desktop layout with visible sidebar once the content area reached its maximum width</li>
|
|
</ul>
|
|
<p>For each width class, you can configure one of the following actions:</p>
|
|
<ul>
|
|
<li><code>show</code>: the button is displayed in its given area</li>
|
|
<li><code>hide</code>: the button is removed</li>
|
|
<li><code>area-XXX</code>: the button is moved from its given area into the area <code>XXX</code>; eg. this is used to move buttons to the <em>more</em> area overlay in the mobile layout</li>
|
|
</ul>
|
|
<h4 id="hiding-and-disabling-stuff">Hiding and Disabling Stuff</h4>
|
|
<p>While hiding a button dependend on the screen size can be configured with the above described <em>hide</em> action, you may want to hide the button on certain other conditions aswell.</p>
|
|
<p>For example, the <em>print</em> button in its default configuration should only be displayed if print support was configured. This is done in your button template by checking the conditions first before displaying the button (see <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" target="_blank"><code>layouts/partials/topbar/button/print.html</code></a>).</p>
|
|
<p>Another prefered condition for hiding a button is, if the displayed overlay is empty. This is the case for the <em>toc</em> (see <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html" target="_blank"><code>layouts/partials/topbar/button/toc.html</code></a>) aswell as the <em>more</em> button (see <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html" target="_blank"><code>layouts/partials/topbar/button/more.html</code></a>) and controlled by the parameter <code>onempty</code>.</p>
|
|
<p>This parameter can have one of the following values:</p>
|
|
<ul>
|
|
<li><code>disable</code>: the button displayed in disabled state if the overlay is empty</li>
|
|
<li><code>hide</code>: the button is removed if the overlay is empty</li>
|
|
</ul>
|
|
<p>If you want to disable a button containing <em>no overlay</em>, this can be achieved by an empty <code>href</code> parameter. An example can be seen in the <em>prev</em> button (see <code>layouts/partials/topbar/button/prev.html</code>) where the URL for the previous site may be empty.</p>
|
|
<h2 id="reference">Reference</h2>
|
|
<h3 id="button">Button</h3>
|
|
<p>Contains the basic button functionality and is used as a base implementation for all other buttons (<a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/func/button.html" target="_blank"><code>layouts/partials/topbar/func/button.html</code></a>).</p>
|
|
<p>Call this from your own button templates if you want to implement a button without an overlay like the <em>print</em> button (<a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/print.html" target="_blank"><code>layouts/partials/topbar/button/print.html</code></a>) or with an overlay containing arbitrary content like the <em>toc</em> button (<a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/toc.html" target="_blank"><code>layouts/partials/topbar/button/toc.html</code></a>).</p>
|
|
<p>For displaying an area in the button’s overlay, see <a href="#area-button">Area-Button</a>.</p>
|
|
<h4 id="parameter">Parameter</h4>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Default</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>page</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory reference to the page.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>class</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory unique class name for this button. Displaying two buttons with the same value for <strong>class</strong> is undefined.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>href</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Either the destination URL for the button or JavaScript code to be executed on click.<br><br>- if starting with <code>javascript:</code> all following text will be executed in your browser<br>- every other string will be interpreted as URL<br>- if empty the button will be displayed in disabled state regardless of its <strong>content</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>icon</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory <a href="../../shortcodes/icon/index.html#finding-an-icon">Font Awesome icon name</a>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onempty</strong></td>
|
|
<td><code>disable</code></td>
|
|
<td>Defines what to do with the button if <strong>href</strong> is not empty but the content overlay is empty:<br><br>- <code>disable</code>: The button is displayed in disabled state.<br>- <code>hide</code>: The button is removed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidths</strong></td>
|
|
<td><code>show</code></td>
|
|
<td>The action, that should be executed if the site is displayed in the given width:<br><br>- <code>show</code>: The button is displayed in its given area<br>- <code>hide</code>: The button is removed.<br>- <code>area-XXX</code>: The button is moved from its given area into the area <code>XXX</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthm</strong></td>
|
|
<td><code>show</code></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthl</strong></td>
|
|
<td><code>show</code></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>title</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Arbitrary text for title, displayed in the tooltip.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>content</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Arbitrary HTML to put into the content overlay. This parameter may be empty. In this case no overlay will be generated.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h3 id="area-button">Area-Button</h3>
|
|
<p>Contains the basic functionality to display area overlay buttons (<a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/func/area-button.html" target="_blank"><code>layouts/partials/topbar/func/area-button.html</code></a>).</p>
|
|
<p>Call this from your own button templates if you want to implement a button with an area overlay like the <em>more</em> button (<a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button/more.html" target="_blank"><code>layouts/partials/topbar/button/more.html</code></a>).</p>
|
|
<h4 id="parameter-1">Parameter</h4>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Default</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>page</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory reference to the page.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>area</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory unique area name for this area. Displaying two areas with the same value for <strong>area</strong> is undefined.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>icon</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory <a href="../../shortcodes/icon/index.html#finding-an-icon">Font Awesome icon name</a>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onempty</strong></td>
|
|
<td><code>disable</code></td>
|
|
<td>Defines what to do with the button if the content overlay is empty:<br><br>- <code>disable</code>: The button is displayed in disabled state.<br>- <code>hide</code>: The button is removed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidths</strong></td>
|
|
<td><code>show</code></td>
|
|
<td>The action, that should be executed if the site is displayed in the given width:<br><br>- <code>show</code>: The button is displayed in its given area<br>- <code>hide</code>: The button is removed.<br>- <code>area-XXX</code>: The button is moved from its given area into the area <code>XXX</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthm</strong></td>
|
|
<td><code>show</code></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthl</strong></td>
|
|
<td><code>show</code></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>title</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Arbitrary text for title, displayed in the tooltip.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h3 id="predefined-buttons">Predefined Buttons</h3>
|
|
<p>The predefined buttons by the theme (all other buttons besides the <em>more</em> and <em>toc</em> button in <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button" target="_blank"><code>layouts/partials/topbar/button</code></a>).</p>
|
|
<p>Call these from your own redefined area templates if you want to use default button behavior.</p>
|
|
<p>The <code><varying></code> parameter values are different for each button and configured for standard behavior as seen on this page.</p>
|
|
<h4 id="parameter-2">Parameter</h4>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Default</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>page</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory reference to the page.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidths</strong></td>
|
|
<td><em><varying></em></td>
|
|
<td>The action, that should be executed if the site is displayed in the given width:<br><br>- <code>show</code>: The button is displayed in its given area<br>- <code>hide</code>: The button is removed.<br>- <code>area-XXX</code>: The button is moved from its given area into the area <code>XXX</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthm</strong></td>
|
|
<td><em><varying></em></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthl</strong></td>
|
|
<td><em><varying></em></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h3 id="predefined-overlay-buttons">Predefined Overlay-Buttons</h3>
|
|
<p>The predefined buttons by the theme that open an overlay (the <em>more</em> and <em>toc</em> button in <a href="https://github.com/McShelby/hugo-theme-relearn/blob/main/layouts/partials/topbar/button" target="_blank"><code>layouts/partials/topbar/button</code></a>).</p>
|
|
<p>Call these from your own redefined area templates if you want to use default button behavior utilizing overlay functionality.</p>
|
|
<p>The <code><varying></code> parameter values are different for each button and configured for standard behavior as seen on this page.</p>
|
|
<h4 id="parameter-3">Parameter</h4>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Default</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>page</strong></td>
|
|
<td><em><empty></em></td>
|
|
<td>Mandatory reference to the page.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onempty</strong></td>
|
|
<td><code>disable</code></td>
|
|
<td>Defines what to do with the button if the content overlay is empty:<br><br>- <code>disable</code>: The button is displayed in disabled state.<br>- <code>hide</code>: The button is removed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidths</strong></td>
|
|
<td><em><varying></em></td>
|
|
<td>The action, that should be executed if the site is displayed in the given width:<br><br>- <code>show</code>: The button is displayed in its given area<br>- <code>hide</code>: The button is removed.<br>- <code>area-XXX</code>: The button is moved from its given area into the area <code>XXX</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthm</strong></td>
|
|
<td><em><varying></em></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>onwidthl</strong></td>
|
|
<td><em><varying></em></td>
|
|
<td>See above.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<footer class="footline">
|
|
</footer>
|
|
</article>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="../../js/clipboard.min.js?1701206006" defer></script>
|
|
<script src="../../js/perfect-scrollbar.min.js?1701206006" defer></script>
|
|
<script src="../../js/theme.js?1701206006" defer></script>
|
|
</body>
|
|
</html>
|