nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-07-18 05:12:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

deploy: 5617ca2359

Browse source
This commit is contained in:
McShelby 2022-05-29 21:00:53 +00:00
parent 3fc5d08df3
commit aa7da12549
317 changed files with 8879 additions and 7281 deletions
shortcodes/button
index.html

267
shortcodes/button/index.html
View file

@ -5,23 +5,23 @@
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="generator" content="Hugo 0.99.1" />
<meta name="generator" content="Relearn 3.4.1&#43;tip">
<meta name="description" content="Nice buttons on your page">
<meta name="description" content="Clickable buttons">
<meta name="author" content="Sören Weber">
<title>Button :: Hugo Relearn Theme</title>
<link rel="alternate" type="application/rss&#43;xml" href="/hugo-theme-relearn/shortcodes/button/index.xml" title="Hugo Relearn Theme" />
<link rel="alternate" type="text/html" href="/hugo-theme-relearn/_print/shortcodes/button/" title="Hugo Relearn Theme" />
<link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1653811475" type="image/svg+xml">
<link href="/hugo-theme-relearn/css/nucleus.css?1653811475" rel="stylesheet">
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1653811475" rel="stylesheet">
<link href="/hugo-theme-relearn/css/featherlight.min.css?1653811475" rel="stylesheet">
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1653811475" rel="stylesheet">
<link href="/hugo-theme-relearn/css/auto-complete.css?1653811475" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme.css?1653811475" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme-relearn-light.css?1653811475" rel="stylesheet" id="variant-style">
<link href="/hugo-theme-relearn/css/ie.css?1653811475" rel="stylesheet">
<link href="/hugo-theme-relearn/css/variant.css?1653811475" rel="stylesheet">
<link href="/hugo-theme-relearn/css/print.css?1653811475" rel="stylesheet" media="print">
<script src="/hugo-theme-relearn/js/variant.js?1653811475"></script>
<link rel="icon" href="/hugo-theme-relearn/images/logo.svg?1653858047" type="image/svg+xml">
<link href="/hugo-theme-relearn/css/nucleus.css?1653858047" rel="stylesheet">
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1653858047" rel="stylesheet">
<link href="/hugo-theme-relearn/css/featherlight.min.css?1653858047" rel="stylesheet">
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1653858047" rel="stylesheet">
<link href="/hugo-theme-relearn/css/auto-complete.css?1653858047" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme.css?1653858047" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme-relearn-light.css?1653858047" rel="stylesheet" id="variant-style">
<link href="/hugo-theme-relearn/css/ie.css?1653858047" rel="stylesheet">
<link href="/hugo-theme-relearn/css/variant.css?1653858047" rel="stylesheet">
<link href="/hugo-theme-relearn/css/print.css?1653858047" rel="stylesheet" media="print">
<script src="/hugo-theme-relearn/js/variant.js?1653858047"></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
@ -37,7 +37,7 @@
var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
variants.init( [ 'relearn-light', 'relearn-dark', 'learn', 'neon', 'blue', 'green', 'red' ] );
</script>
<script src="/hugo-theme-relearn/js/jquery.min.js?1653811475"></script>
<script src="/hugo-theme-relearn/js/jquery.min.js?1653858047"></script>
</head>
<body class="mobile-support" data-url="/hugo-theme-relearn/shortcodes/button/">
<div id="body" class="default-animation">
@ -65,6 +65,7 @@
<span id="sidebar-toggle-span">
<a href="#" id="sidebar-toggle" title='Menu'><i class="fas fa-bars fa-fw"></i></a>
</span>
<span id="toc-menu" title='Table of Contents'><i class="fas fa-list-alt fa-fw"></i></span>
<ol class="links" itemscope itemtype="http://schema.org/BreadcrumbList">
<meta itemprop="itemListOrder" content="Descending" />
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><meta itemprop="position" content="3" /><a itemprop="item" href="/hugo-theme-relearn/"><span itemprop="name">Hugo Relearn Theme</span></a> > </li>
@ -72,6 +73,26 @@
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><meta itemprop="position" content="1" /><a itemprop="item" href="/hugo-theme-relearn/shortcodes/button/" aria-disabled="true"><span itemprop="name">Button</span></a></li>
</ol>
</div>
<div class="default-animation progress">
<div class="wrapper">
<nav id="TableOfContents">
<ul>
<li><a href="#usage">Usage</a>
<ul>
<li><a href="#parameter">Parameter</a></li>
</ul>
</li>
<li><a href="#examples">Examples</a>
<ul>
<li><a href="#style">Style</a></li>
<li><a href="#icon">Icon</a></li>
<li><a href="#other">Other</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</nav>
<main id="body-inner" class="highlightable">
@ -81,27 +102,195 @@
<article>
<h1>Button</h1>
<p>A button is a just a clickable button with optional icon.</p>
<div class="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="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;fas fa-download&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Hugo</span> <span class="nx">with</span> <span class="nx">icon</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;fas fa-download&#34;</span> <span class="nx">icon</span><span class="o">-</span><span class="nx">position</span><span class="p">=</span><span class="s">&#34;right&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Hugo</span> <span class="nx">with</span> <span class="nx">icon</span> <span class="nx">right</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
</span></span></code></pre></div><p>
<a href="https://gohugo.io/" target="_blank" class="btn btn-default">
Get Hugo
</a>
<p>The <code>button</code> shortcode displays a clickable button with adjustable color, title and icon.</p>
<p>
<span class="btn cstyle transparent">
<a href="https://gohugo.io/" target="_blank">
Get Hugo
<i class="fa-fw fas fa-download"></i>
</a>
</span>
<span class="btn cstyle default">
<a href="https://gohugo.io/" target="_blank">
Get Hugo
</a>
</span>
<a href="https://gohugo.io/" target="_blank" class="btn btn-default">
<i class="fas fa-download"></i>
Get Hugo with icon
</a>
<span class="btn cstyle warning">
<a href="https://gohugo.io/" target="_blank">
<i class="fa-fw fas fa-dragon"></i>
Get Hugo
</a>
</span></p>
<h2 id="usage">Usage</h2>
<p>Once the button is clicked, it opens another browser tab for the given URL.</p>
<div class="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="o">%</span> <span class="nx">button</span> <span class="nx">href</span><span class="p">=</span><span class="s">&#34;https://gohugo.io/&#34;</span> <span class="nx">icon</span><span class="p">=</span><span class="s">&#34;download&#34;</span> <span class="o">%</span><span class="p">}}</span><span class="nx">Get</span> <span class="nx">Hugo</span><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">button</span> <span class="o">%</span><span class="p">}}</span>
</span></span></code></pre></div><h3 id="parameter">Parameter</h3>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Optional</th>
<th style="text-align:left">Default</th>
<th style="text-align:left">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><strong>href</strong></td>
<td style="text-align:left">yes</td>
<td style="text-align:left"><em>&lt;empty&gt;</em></td>
<td style="text-align:left">The destination URL for the button. If this parameter is not set, the button will do nothing but is still displayed as clickable.</td>
</tr>
<tr>
<td style="text-align:left"><strong>style</strong></td>
<td style="text-align:left">yes</td>
<td style="text-align:left"><code>transparent</code></td>
<td style="text-align:left">The color scheme used to paint the button.<br/><br/>- by severity: <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br/>- by brand color: <code>primary</code>, <code>secondary</code><br/>- by color: <code>blue</code>, <code>green</code>, <code>grey</code>, <code>orange</code>, <code>red</code><br/>- by special color: <code>default</code>, <code>transparent</code></td>
</tr>
<tr>
<td style="text-align:left"><strong>icon</strong></td>
<td style="text-align:left">yes</td>
<td style="text-align:left">see notes</td>
<td style="text-align:left"><a href="/hugo-theme-relearn/cont/icons/#finding-an-icon">Font Awesome icon name</a> set to the left of the title. Depending on the <strong>style</strong> there may be a default icon. Any given value will overwrite the default.<br/><br/>- for severity styles: a nice matching icon for the severity<br/>- for all other colors: <em>&lt;empty&gt;</em><br/><br/>If you want no icon for a severity style, you have to set this parameter to <code>&quot; &quot;</code> (a non empty string filled with spaces)</td>
</tr>
<tr>
<td style="text-align:left"><strong>iconposition</strong></td>
<td style="text-align:left">yes</td>
<td style="text-align:left"><code>left</code></td>
<td style="text-align:left">Places the icon to the <code>left</code> or <code>right</code> of the title.</td>
</tr>
<tr>
<td style="text-align:left"><em><strong>&lt;content&gt;</strong></em></td>
<td style="text-align:left">yes</td>
<td style="text-align:left">see notes</td>
<td style="text-align:left">Arbitray text for the button title. Depending on the <strong>style</strong> there may be a default title. Any given value will overwrite the default.<br/><br/>- for severity styles: the matching title for the severity<br/>- for all other colors: <em>&lt;empty&gt;</em><br/><br/>If you want no title for a severity style, you have to set this parameter to <code>&quot; &quot;</code> (a non empty string filled with spaces)</td>
</tr>
</tbody>
</table>
<h2 id="examples">Examples</h2>
<h3 id="style">Style</h3>
<h4 id="by-severity">by Severity</h4>
<p>
<span class="btn cstyle info">
<a href="https://gohugo.io/" target="_blank">
<i class="fa-fw fas fa-info-circle"></i>
Get Hugo
</a>
</span>
<span class="btn cstyle note">
<a href="https://gohugo.io/" target="_blank">
<i class="fa-fw fas fa-exclamation-circle"></i>
Get Hugo
</a>
</span>
<a href="https://gohugo.io/" target="_blank" class="btn btn-default">
Get Hugo with icon right
<i class="fas fa-download"></i>
</a>
</p>
<span class="btn cstyle tip">
<a href="https://gohugo.io/" target="_blank">
<i class="fa-fw fas fa-lightbulb"></i>
Get Hugo
</a>
</span>
<span class="btn cstyle warning">
<a href="https://gohugo.io/" target="_blank">
<i class="fa-fw fas fa-exclamation-triangle"></i>
Get Hugo
</a>
</span></p>
<h4 id="by-brand-colors">by Brand Colors</h4>
<p>
<span class="btn cstyle primary">
<a href="https://gohugo.io/" target="_blank">
Get Hugo
</a>
</span>
<span class="btn cstyle secondary">
<a href="https://gohugo.io/" target="_blank">
Get Hugo
</a>
</span></p>
<h4 id="by-color">by Color</h4>
<p>
<span class="btn cstyle blue">
<a href="https://gohugo.io/" target="_blank">
Get Hugo
</a>
</span>
<span class="btn cstyle green">
<a href="https://gohugo.io/" target="_blank">
Get Hugo
</a>
</span>
<span class="btn cstyle grey">
<a href="https://gohugo.io/" target="_blank">
Get Hugo
</a>
</span>
<span class="btn cstyle orange">
<a href="https://gohugo.io/" target="_blank">
Get Hugo
</a>
</span>
<span class="btn cstyle red">
<a href="https://gohugo.io/" target="_blank">
Get Hugo
</a>
</span></p>
<h4 id="by-special-color">by Special Color</h4>
<p>
<span class="btn cstyle default">
<a href="https://gohugo.io/" target="_blank">
Get Hugo
</a>
</span>
<span class="btn cstyle transparent">
<a href="https://gohugo.io/" target="_blank">
Get Hugo
</a>
</span></p>
<h3 id="icon">Icon</h3>
<h4 id="to-the-left">to the left</h4>
<span class="btn cstyle transparent">
<a href="https://gohugo.io/" target="_blank">
<i class="fa-fw fas fa-download"></i>
Get Hugo
</a>
</span>
<h4 id="to-the-right">to the right</h4>
<span class="btn cstyle transparent">
<a href="https://gohugo.io/" target="_blank">
Get Hugo
<i class="fa-fw fas fa-download"></i>
</a>
</span>
<h4 id="override-for-severity">Override for Severity</h4>
<span class="btn cstyle warning">
<a href="https://gohugo.io/" target="_blank">
<i class="fa-fw fas fa-dragon"></i>
Get Hugo
</a>
</span>
<h3 id="other">Other</h3>
<h4 id="severity-style-with-all-defaults">Severity Style with all Defaults</h4>
<span class="btn cstyle tip">
<a href="https://gohugo.io/" target="_blank">
<i class="fa-fw fas fa-lightbulb"></i>
Tip
</a>
</span>
<footer class="footline">
</footer>
@ -177,9 +366,9 @@
<input data-search-input id="search-by" type="search" placeholder="Search...">
<span data-search-clear=""><i class="fas fa-times"></i></span>
</div>
<script src="/hugo-theme-relearn/js/lunr.min.js?1653811475"></script>
<script src="/hugo-theme-relearn/js/auto-complete.js?1653811475"></script>
<script src="/hugo-theme-relearn/js/search.js?1653811475"></script>
<script src="/hugo-theme-relearn/js/lunr.min.js?1653858047"></script>
<script src="/hugo-theme-relearn/js/auto-complete.js?1653858047"></script>
<script src="/hugo-theme-relearn/js/search.js?1653858047"></script>
</div>
<div id="content-wrapper" class="highlightable">
<ul class="topics collapsible-menu">
@ -291,13 +480,13 @@
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
<p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
<script async defer src="/hugo-theme-relearn/js/buttons.js?1653811475"></script>
<script async defer src="/hugo-theme-relearn/js/buttons.js?1653858047"></script>
</div>
</div>
</aside>
<script src="/hugo-theme-relearn/js/clipboard.min.js?1653811475"></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1653811475"></script>
<script src="/hugo-theme-relearn/js/featherlight.min.js?1653811475"></script>
<script src="/hugo-theme-relearn/js/theme.js?1653811475"></script>
<script src="/hugo-theme-relearn/js/clipboard.min.js?1653858047"></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1653858047"></script>
<script src="/hugo-theme-relearn/js/featherlight.min.js?1653858047"></script>
<script src="/hugo-theme-relearn/js/theme.js?1653858047"></script>
</body>
</html>