nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 09:43:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

attachments: support for brand colors #252

Browse source
This commit is contained in:
Sören Weber 2022-05-25 23:30:30 +02:00
parent 85b6abb4b8
commit 2271ff4611
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
2 changed files with 37 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
exampleSite/content/shortcodes/attachments.en.md
View file

@ -1,15 +1,21 @@
+++ +++
description = "The Attachments shortcode displays a list of files attached to a page" description = "List of files attached to a page"
title = "Attachments" title = "Attachments"
+++ +++
The Attachments shortcode displays a list of files attached to a page. The `attachments` shortcode displays a list of files attached to a page with adjustable color, title and icon.
{{% attachments /%}} {{% attachments /%}}
## Usage ## Usage
The shortcurt lists files found in a **specific folder**. The shortcurt lists files found in a **specific folder**.
````go
{{%/* attachments /*/%}}
````
Currently, it support two implementations for pages Currently, it support two implementations for pages
1. If your page is a Markdown file, attachements must be placed in a **folder** named like your page and ending with **.files**. 1. If your page is a Markdown file, attachements must be placed in a **folder** named like your page and ending with **.files**.
@ -31,65 +37,43 @@ Currently, it support two implementations for pages
Be aware that if you use a multilingual website, you will need to have as many folders as languages. Be aware that if you use a multilingual website, you will need to have as many folders as languages.
That's all!
### Parameters ### Parameter
| Parameter | Default | Description | | Name | Optional | Default | Notes |
|:--|:--|:--| |:------------|:----------|:--------------|:------------|
| title | "Attachments" | List's title | | **style** | yes | `transparent` | The color scheme used to highlight the box content.<br/><br/>- by severity: `info`, `note`, `tip`, `warning`<br/>- by brand color: `primary`, `secondary`<br/>- by color: `blue`, `green`, `grey`, `orange`, `red`<br/>- by special color: `default`, `transparent` |
| icon | "paperclip" | Sets the icon near the title; if you want no icon at all, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **title** | yes | see notes | Arbitray text for the box title. Depending on the **style** 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: `Attachments`<br/><br/>If you want no title, you have to set this parameter to `" "` (a non empty string filled with spaces) |
| sort | "asc" | Sorting the output in `asc`ending or `desc`ending order | | **icon** | yes | see notes | [Font Awesome icon name]({{%relref "cont/icons#finding-an-icon" %}}) set to the left of the title. Depending on the **style** 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: `paperclip`<br/><br/>If you want no icon, you have to set this parameter to `" "` (a non empty string filled with spaces) |
| style | "" | Choose between `orange`, `grey`, `blue` and `green` for nice style | | **sort** | yes | `asc` | Sorting the output in `asc`ending or `desc`ending order. |
| pattern | ".*" | A regular expressions, used to filter the attachments by file name. <br/><br/>The **pattern** parameter value must be [regular expressions](https://en.wikipedia.org/wiki/Regular_expression). | **pattern** | yes | `.*` | A [regular expressions](https://en.wikipedia.org/wiki/Regular_expression), used to filter the attachments by file name. For example:<br/><br/>- to match a file suffix of 'jpg', use `.*jpg` (not `*.jpg`)<br/>- to match file names ending in `jpg` or `png`, use `.*(jpg\|png)` |
For example: ## Examples
* To match a file suffix of 'jpg', use **.*jpg** (not *.jpg). ### Custom title, list of attachments ending in pdf or mp4
* To match file names ending in 'jpg' or 'png', use **.*(jpg|png)**
### Examples {{% attachments title="Related files" pattern=".*(pdf|mp4)" /%}}
#### List of attachments ending in pdf or mp4 {{% expand "Show markup" %}}
````go ````go
{{%/* attachments title="Related files" pattern=".*(pdf|mp4)" /*/%}} {{%/* attachments title="Related files" pattern=".*(pdf|mp4)" /*/%}}
```` ````
renders as {{% /expand %}}
{{%attachments title="Related files" pattern=".*(pdf|mp4)"/%}} ### Colored styled box, descending sort order
#### Colored styled box {{% attachments style="orange" sort="desc" /%}}
{{% expand "Show markup" %}}
````go ````go
{{%/*attachments style="orange" /*/%}} {{%/* attachments style="orange" sort="desc" /*/%}}
```` ````
renders as {{% /expand %}}
{{% attachments style="orange" /%}} ### Style and icons
````go For further examples for **style**, **title** and **icon**, see the [`notice` shortcode]({{% relref "shortcodes/notice" %}}) documentation. The parameter are working the same way for both shortcodes, besides having different defaults.
{{%/*attachments style="grey" /*/%}}
````
renders as
{{% attachments style="grey" /%}}
````go
{{%/*attachments style="blue" /*/%}}
````
renders as
{{% attachments style="blue" /%}}
````go
{{%/*attachments style="green" /*/%}}
````
renders as
{{% attachments style="green" /%}}

7
layouts/shortcodes/attachments.html
View file

@ -1,12 +1,16 @@
{{- $_hugo_config := `{ "version": 1 }` }} {{- $_hugo_config := `{ "version": 1 }` }}
{{- $style := .Get "style" | default "transparent" }} {{- $style := .Get "style" | default "transparent" }}
{{- $title := .Get "title" | default ("Attachments-label" | T) }} {{- $title := .Get "title" | default ("Attachments-label" | T) }}
{{- $sort := .Get "sort" | default "asc" }}
{{- $icon := .Get "icon" | default "" }} {{- $icon := .Get "icon" | default "" }}
{{- if and (not $icon) (eq (len $icon) 0) }} {{- if and (not $icon) (eq (len $icon) 0) }}
{{- $icon = "paperclip" }} {{- $icon = "paperclip" }}
{{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
{{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
{{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
{{- if eq $style "tip" }}{{ $icon = default "lightbulb " }}{{ end }}
{{- end }} {{- end }}
{{- $icon = trim $icon " " }} {{- $icon = trim $icon " " }}
{{- $sort := .Get "sort" | default "asc" }}
<div class="box attachments {{ $style }}"> <div class="box attachments {{ $style }}">
<div class="box-label">{{ if $icon }}<i class="fas fa-{{ $icon }} fa-fw"></i> {{ end }}{{ $title }}</div> <div class="box-label">{{ if $icon }}<i class="fas fa-{{ $icon }} fa-fw"></i> {{ end }}{{ $title }}</div>
<ul class="box-content attachments-files"> <ul class="box-content attachments-files">
@ -14,7 +18,6 @@
{{- if ne .Page.File.BaseFileName "index" }} {{- if ne .Page.File.BaseFileName "index" }}
{{- $filesName = printf "%s.files" .Page.File.BaseFileName }} {{- $filesName = printf "%s.files" .Page.File.BaseFileName }}
{{- end }} {{- end }}
{{- $fileLink := printf "%s/%s" (.Page.Language.ContentDir | default "content") .Page.File.Dir }} {{- $fileLink := printf "%s/%s" (.Page.Language.ContentDir | default "content") .Page.File.Dir }}
{{- $fileLink = replace (replace $fileLink "\\" "/") "content/" "" }} {{- $fileLink = replace (replace $fileLink "\\" "/") "content/" "" }}
{{- $fileDir := printf "%s/%s" (.Page.Language.ContentDir | default "content") .Page.File.Dir }} {{- $fileDir := printf "%s/%s" (.Page.Language.ContentDir | default "content") .Page.File.Dir }}