mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-14 10:17:56 +00:00
feat(widget): hero: multiple paragraphs, extra cta, note, & image
- Support multiple paragraphs - Icon support for `[cta]` call-to-action button - Add optional alternative call-to-action link `[cta_alt]` - Add optional note underneath cta button - Add optional image - Refresh the demo's instance of the Hero widget Close #935
This commit is contained in:
George Cushen committed
1 parent
26df07a634
commit
d7135a1b88
4 files changed
+124
-32
No files matched your search
@@ -8,28 +8,36 @@ title = "Academic"
|
||||
# Order that this section will appear in.
|
||||
weight = 3
|
||||
|
||||
# Hero image (optional). Enter filename of an image in the `static/img/` folder.
|
||||
hero_media = "hero-academic.png"
|
||||
|
||||
# Overlay a color or image (optional).
|
||||
# Deactivate an option by commenting out the line, prefixing it with `#`.
|
||||
[header]
|
||||
overlay_color = "#666" # An HTML color value.
|
||||
overlay_img = "headers/bubbles-wide.jpg" # Image path relative to your `static/img/` folder.
|
||||
overlay_color = "#4bb4e3" # An HTML color value.
|
||||
overlay_img = "" # Image path relative to your `static/img/` folder.
|
||||
overlay_filter = 0.5 # Darken the image. Value in range 0-1.
|
||||
|
||||
# Call to action button (optional).
|
||||
# Activate the button by specifying a URL and button label below.
|
||||
# Deactivate by commenting out parameters, prefixing lines with `#`.
|
||||
# Call to action links (optional).
|
||||
# Display link(s) by specifying a URL and label below. Icon is optional for `[cta]`.
|
||||
# Remove a link/note by deleting a cta/note block.
|
||||
[cta]
|
||||
url = "./post/getting-started/"
|
||||
label = '<i class="fas fa-download"></i> Install Now'
|
||||
url = "post/getting-started/"
|
||||
label = "Get Started"
|
||||
icon_pack = "fas"
|
||||
icon = "download"
|
||||
|
||||
[cta_alt]
|
||||
url = "https://sourcethemes.com/academic/"
|
||||
label = "View Documentation"
|
||||
|
||||
# Note. An optional note to show underneath the links.
|
||||
[cta_note]
|
||||
label = '<a id="academic-release" href="https://sourcethemes.com/academic/updates" data-repo="gcushen/hugo-academic">Latest release <!-- V --></a>'
|
||||
+++
|
||||
|
||||
The highly flexible website framework for Hugo with an extensible plugin mechanism. Create a beautifully simple site in under 10 minutes :rocket:
|
||||
<div style="margin-top: -0.5rem;">
|
||||
<a id="academic-release" href="https://sourcethemes.com/academic/updates" data-repo="gcushen/hugo-academic">
|
||||
Latest release <!-- V -->
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a class="github-button" href="https://github.com/gcushen/hugo-academic" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star this on GitHub">Star</a>
|
||||
</div>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
**The Best Way to Create the Website You Want from Markdown (or RStudio/Jupyter)**
|
||||
|
||||
Build **Anything** with Widgets
|
||||
|
||||
<span style="text-shadow: none;"><a class="github-button" href="https://github.com/gcushen/hugo-academic" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star this on GitHub">Star</a><script async defer src="https://buttons.github.io/buttons.js"></script></span>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
@@ -559,24 +559,60 @@ a[data-fancybox] img {
|
||||
|
||||
.hero-overlay .hero-title,
|
||||
.hero-overlay .hero-lead,
|
||||
.hero-overlay .btn {
|
||||
.hero-overlay .hero-cta-alt,
|
||||
.hero-overlay .hero-note {
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
|
||||
/*text-shadow: 1px 1px 4px rgba(0,0,0,0.5);*/ /* Uncomment to standout on complicated backgrounds. */
|
||||
}
|
||||
|
||||
.hero-overlay a {
|
||||
.hero-overlay a:not(.hero-overlay .btn) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero-overlay .hero-lead a {
|
||||
color: #fff;
|
||||
text-decoration-line: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hero-overlay .cta-btns {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hero-overlay .btn {
|
||||
color: {{ .Get "primary_dark" }};
|
||||
padding: .6em 2.1em;
|
||||
}
|
||||
|
||||
a.hero-cta-alt {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition-duration: .2s;
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-out;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
a.hero-cta-alt:active,
|
||||
a.hero-cta-alt:focus,
|
||||
a.hero-cta-alt:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.hero-overlay .btn-lg {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.hero-overlay .hero-note {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.hero-media {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* Featurette Widget
|
||||
**************************************************/
|
||||
|
||||
@@ -20,19 +20,67 @@ url('{{ $overlay_img }}')
|
||||
;">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h1 class="hero-title" itemprop="headline">
|
||||
{{ with $page.Title }}{{ . | markdownify }}{{ end }}
|
||||
</h1>
|
||||
|
||||
{{ with $page.Content }}
|
||||
<p class="hero-lead">{{ . | markdownify }}</p>
|
||||
{{ if $page.Params.hero_media }}
|
||||
<div class="row">
|
||||
<div class="col-md-6 order-md-1 text-center text-md-left">
|
||||
{{ end }}
|
||||
|
||||
{{ if $page.Params.cta.url }}
|
||||
<p><a href="{{ $page.Params.cta.url }}" class="btn btn-outline-light btn-lg">{{ $page.Params.cta.label | safeHTML}}</a></p>
|
||||
<h1 class="hero-title" itemprop="headline">
|
||||
{{ with $page.Title }}{{ . | markdownify }}{{ end }}
|
||||
</h1>
|
||||
|
||||
{{ with $page.Content }}
|
||||
<div class="hero-lead">{{ . }}</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* Call-to-action link */}}
|
||||
{{ if $page.Params.cta.url }}
|
||||
{{ $pack := or $page.Params.cta.icon_pack "fas" }}
|
||||
{{ $pack_prefix := $pack }}
|
||||
{{ if in (slice "fab" "fas" "far" "fal") $pack }}
|
||||
{{ $pack_prefix = "fa" }}
|
||||
{{ end }}
|
||||
{{ $link := $page.Params.cta.url }}
|
||||
{{ $scheme := (urls.Parse $link).Scheme }}
|
||||
{{ $target := "" }}
|
||||
{{ if not $scheme }}
|
||||
{{ $link = $link | relLangURL }}
|
||||
{{ else if in (slice "http" "https") $scheme }}
|
||||
{{ $target = "target=\"_blank\" rel=\"noopener\"" }}
|
||||
{{ end }}
|
||||
<p class="cta-btns">
|
||||
<a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="btn btn-light btn-lg">{{ if $page.Params.cta.icon }}<i class="{{ $pack }} {{ $pack_prefix }}-{{ $page.Params.cta.icon }}" aria-hidden="true"></i> {{end}}{{ $page.Params.cta.label | markdownify | emojify | safeHTML }}</a>
|
||||
|
||||
{{/* Alternative Call-to-action link */}}
|
||||
{{ if $page.Params.cta_alt.url }}
|
||||
{{ $link := $page.Params.cta_alt.url }}
|
||||
{{ $scheme := (urls.Parse $link).Scheme }}
|
||||
{{ $target := "" }}
|
||||
{{ if not $scheme }}
|
||||
{{ $link = $link | relLangURL }}
|
||||
{{ else if in (slice "http" "https") $scheme }}
|
||||
{{ $target = "target=\"_blank\" rel=\"noopener\"" }}
|
||||
{{ end }}
|
||||
<a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="hero-cta-alt pl-4">{{ $page.Params.cta_alt.label | markdownify | emojify | safeHTML }} <i class="fas fa-angle-right"></i></a>
|
||||
{{ end }}
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
{{/* Call-to-action note */}}
|
||||
{{ with $page.Params.cta_note }}
|
||||
<p class="hero-note text-muted mb-0">
|
||||
{{ .label | markdownify | emojify | safeHTML }}
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
{{/* Hero image */}}
|
||||
{{ if $page.Params.hero_media }}
|
||||
</div>
|
||||
<div class="col-6 mx-auto col-md-6 order-md-2 hero-media">
|
||||
<img src="{{ printf "img/%s" $page.Params.hero_media | relURL }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
Reference in new issue
Block a user