Help:Shortcode Download
Let users download a file.
On this page
On this page
Shortcode | |
Description | |
---|---|
Type | HTML Shortcode |
Nested? | false |
Shortcode | download |
Return Type | HTML |
Short Description Display a download box with metadata information, such as as a title, the file size and checksums in md5, sha1 and sha256. | |
Development | |
Maintainer | Michael Sasser |
To allow a user to download a file, you need to create a file either the
directory, your page is located (make sure you create a page bundle) or
anywhere else in project, relative to the project root. If you create the
file in the static
directory, for example ./static/favicon.svg
, the
path parameter must be prefixed with an /
, followed by relative path from
there, and the file name. The path in this case would be
/static/favicon.svg
. If the file your_file.py
is in your page bundle,
which might look like this one, where your page is index.md
:
# tree of ./content/en/docs/contributing/
...
├── contributing/
│ ├── shortcodes/
│ │ ├── index.md
│ │ └── hello_world.py
│ └── _index.md
└── _index.md
you would use the path your_file.py
. To give the file a title, use the
title
parameter.
The file size and checksums are created automatically for you.
Filetypes
git-lfs
instead of git
. To do that, use git lfs track "*.ytd"
.To see, which file extensions are currently tracked by
git-lfs
run
git lfs track
.Parameters
The download shortcode has the following parameters:
Parameter | Optional | Description |
---|---|---|
path | No | The path to the file, either relative from your page bundle or with the / -prefix relative to the project root |
title | Yes | An optional title for the file |
Examples
<!-- Without title and a path relative to the project roots static directory -->
{{< download path="/static/favicon.svg" >}}
<!-- Same as the first, but with a title -->
{{< download title="Our Favicon" path="/static/favicon.svg" >}}
<!-- With a title and relative to the page-bundle -->
{{< download title="Page-Bundle Example" path="hello_world.py" >}}
- favicon.svg ❘ 3.10 KB
- md5 c6bacfc3903ea1e93f16cc29b025faa9
- sha1 6fd247916a0f11ebe062adcb621d5d42fa5bc1a7
- sha256 0bf3b2a1f379a2612f47c7d367b6f2fdbe06193bb17a0d0e49c57d75099c1f68
- favicon.svg ❘ 3.10 KB
- md5 c6bacfc3903ea1e93f16cc29b025faa9
- sha1 6fd247916a0f11ebe062adcb621d5d42fa5bc1a7
- sha256 0bf3b2a1f379a2612f47c7d367b6f2fdbe06193bb17a0d0e49c57d75099c1f68
- hello_world.py ❘ 140.00 Bytes
- md5 73f5000f64fd2b9ed0b8f54abc597962
- sha1 694588cf1ad9ff1d4f54612494d0cb00c921a1d9
- sha256 062431dde51ef71353dd6a01f7f63410680ed063044a5299c469afea74ef37c4
Code
Below you find the implementation of the shortcode.
HTML
Defined in: /layouts/shortcodes/download.html
<!--
Download Shortcode
==================
Contributors: Michael Sasser
Maintainer: Michael Sasser
License: MIT
Version: 1
Child Shortcodes: None
Parent Shortcodes: None
LAYOUT: /layouts/shortcodes/download.html
STYLE: /assets/scss/components/_shortcode_download.scss
DOCS: /content/<language>/wiki/Help:Shortcode_Download/index.md
Description
-----------
Use the download shortcode to display a download box with metadata
information, such as as a title, the file size and checksums in md5, sha1
and sha256.
Changelog
=========
Version 1
---------
Initial release
-->
{{ $path := .Get "path"}} <!-- Mandatory parameter -->
{{ $title := .Get "title" }} <!-- Optional parameter -->
<!-- The quantities used to calculate the value and quantity of the file size
The quantitis are starting with Bytes (which is already in quantity).
-->
{{ $quantities := slice "KB" "MB" "GB" "TB" "PB" "EB" "ZB" }}
{{ $quantity := "Bytes" }}
<!-- Check if resource is in <project_root>/static/.
Resources, by definition, are in <project_root>/ when their path
starts with /
-->
{{ $static := false }}
{{ if hasPrefix $path "/" }}
{{ $static = true }}
{{ end }}
<!-- Create the full_path.
The full_path is the path to the resource before compiling the project.
This means, it is the path, used by the compiler, and not the rendered
website.
-->
{{ $full_path := "" }}
{{ if $path }}
{{ if $static }}
{{ $full_path = $path }}
{{ else }}
{{ $full_path = (path.Join (path.Dir .Page.File.Path) $path) }}
{{ end }}
{{ else }}
{{ end }}
{{ with os.FileExists $full_path }}
<!--
Download static files from GitLab directly, as they don't exist in
the compiled version of the website.
-->
{{- $vcs_path := $path -}}
{{- $parts := slice $.Site.Params.docsRepo -}}
<!-- TODO: Add other VCS providers -->
{{- if (eq $.Site.Params.repoHost "GitLab") -}}
{{- $parts = $parts | append "-/raw" $.Site.Params.docsRepoBranch -}}
{{- end -}}
{{- if isset $.Site.Params "docsreposubpath" -}}
{{- if not (eq $.Site.Params.docsRepoSubPath "") -}}
{{- $parts = $parts | append $.Site.Params.docsRepoSubPath -}}
{{- end -}}
{{- end -}}
{{- $parts = $parts | append $vcs_path "?inline=false" -}}
{{- $url := delimit $parts "/" -}}
{{ $url := replace $url "//" "/" }}
{{ $url := replace $url "https:/" "https://" }}
<!-- --- -->
{{ $file_stats := os.Stat $full_path }}
{{ $file_size := float $file_stats.Size }}
{{ $file_content := readFile $full_path }}
<ul class="download list-group py-4">
<!-- Download "button" -->
<li class="list-group-item d-flex justify-content-between align-items-center active" aria-current="true">
<div class="align-middle mb-1 py-2">
<i class="px-2 fa fa-download fa-lg" aria-hidden="true"></i>
<!-- Use title if title exists, else use file name -->
{{ if $title }}
{{ $title }}
{{ else }}
{{ $file_stats.Name }}
{{ end }}
<a href="{{ if $static }}{{ $url | relURL }}{{ else }}{{ $full_path | relURL }}{{ end }}" target="_blank" rel="noopener" class="stretched-link"></a>
</div>
<small>
<!-- Calculate the value and quantity of the file size -->
{{ range $quantities }}
{{ if lt (float $file_size) 1000.0 }}
{{ break }}
{{ else }}
{{ $file_size = div (float $file_size) 1000.0 }}
{{ end }}
{{ $quantity = . }}
{{ end }}
<!-- print file name and file size with quantity -->
<span class="px-1">{{ $file_stats.Name }}</span> ❘ <span class="px-1">{{ printf "%.2f %s" (float (string $file_size)) $quantity }}</span>
</small>
</li>
<!-- Checksums -->
<li class="download-data list-group-item d-flex justify-content-between align-items-center">
<small><span class="badge bg-primary rounded-pill">md5</span></small>
<small class="text-break">{{ md5 $file_content }}</small>
</li>
<li class="download-data list-group-item d-flex justify-content-between align-items-center">
<small><span class="badge bg-primary rounded-pill">sha1</span></small>
<small class="text-break">{{ sha1 $file_content }}</small>
</li>
<li class="download-data list-group-item d-flex justify-content-between align-items-center">
<small><span class="badge bg-primary rounded-pill">sha256</span></small>
<small class="text-break">{{ sha256 $file_content }}</small>
</li>
</ul>
{{ else }}
{{ errorf "Failed to process download shortcode: %s. %s does not exist in \"%s\"." $.Position $path . }}
{{ end }}
Download
Copy the source code above or use the download link below to use this file on your website according to the license.
- download.html ❘ 4.74 KB
- md5 eb3040f0b9ffe9567e9340698ecd2d53
- sha1 36f68b0208b8c273a0e41827a2204feee1cd9b82
- sha256 951e54afc0f8a02fa78adbff95072f5b2ced44d9c71602371f76973dca37fcb9
SASS
Defined in: /assets/scss/components/_shortcode_download.scss
/*
Download Shortcode
==================
Contributors: Michael Sasser
Maintainer: Michael Sasser
License: MIT
Version: 1
Child Shortcodes: None
Parent Shortcodes: None
LAYOUT: /layouts/shortcodes/download.html
STYLE: /assets/scss/components/_shortcode_download.scss
DOCS: /content/<language>/wiki/Help:Shortcode_Download/index.md
*/
@include color-mode(dark) {
.download .download-data {
background-color: $body-bg-dark;
color: $body-color-dark;
border-color: $border-dark;
}
}
Download
Copy the source code above or use the download link below to use this file on your website according to the license.
- _shortcode_download.scss ❘ 524.00 Bytes
- md5 b6ef02be7184727d7f102dea8596367f
- sha1 f407feb6c121edff872cfa1242ae4176dd2c3e18
- sha256 e0a134779c3a71f95fc70d4165095ad7074223abd2e760974d859eee39f09e07
Categories | Contributors |
---|---|
Help, Contribute and Shortcode | Michael Sasser |