mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-13 14:15:47 +00:00
feat: add support for more complex filters in Portfolio widget
See https://isotope.metafizzy.co/filtering.html E.g. filter on multiple tags: ``` filter_button: - name: All tag: '*' - name: Machine Learning tag: ML - name: Computer Vision tag: CV - name: NLP tag: NLP - name: CV or NLP filter: '.js-id-cv, .js-id-nlp' - name: ML and NLP filter: '.js-id-ml.js-id-nlp' ```
This commit is contained in:
1 parent
d9b6d28562
commit
005e361174
1 file changed
+23
-10
@@ -18,13 +18,20 @@
|
||||
{{ $filter_default := default (int $st.Params.content.filter_default) 0 }}
|
||||
|
||||
{{/* Parse default filter tag from front matter in the form of either tag name or CSS class name. */}}
|
||||
{{ $default_filter_tag_raw := (index $st.Params.content.filter_button ($filter_default)).tag }}
|
||||
{{ $default_filter_tag := printf ".js-id-%s" (replace $default_filter_tag_raw " " "-") }}
|
||||
{{ if or (eq (substr $default_filter_tag_raw 0 1) "*") (eq (substr $default_filter_tag_raw 0 1) ".") }}
|
||||
{{ $default_filter_tag = $default_filter_tag_raw }}
|
||||
{{ end }}
|
||||
{{ $default_filter_item := (index $st.Params.content.filter_button ($filter_default)) }}
|
||||
{{ $default_data_filter := "" }}
|
||||
{{ with $default_filter_item.filter }}
|
||||
{{ $default_data_filter = . }}
|
||||
{{ else }}
|
||||
{{ $default_filter_tag := $default_filter_item.tag }}
|
||||
{{ if or (eq (substr $default_filter_tag 0 1) "*") (eq (substr $default_filter_tag 0 1) ".") }}
|
||||
{{ $default_data_filter = $default_filter_tag }}
|
||||
{{ else }}
|
||||
{{ $default_data_filter = printf ".js-id-%s" (lower (replace $default_filter_tag " " "-")) }}
|
||||
{{ end }}
|
||||
{{end}}
|
||||
|
||||
<span class="d-none default-project-filter">{{ $default_filter_tag }}</span>
|
||||
<span class="d-none default-project-filter">{{ $default_data_filter }}</span>
|
||||
|
||||
{{/* Only show filter buttons if there are multiple filters. */}}
|
||||
{{ if gt (len $st.Params.content.filter_button) 1 }}
|
||||
@@ -34,9 +41,15 @@
|
||||
<div class="btn-group flex-wrap">
|
||||
{{ range $idx, $item := $st.Params.content.filter_button }}
|
||||
{{/* Parse filter tag from front matter in the form of either tag name or CSS class name. */}}
|
||||
{{ $data_filter := printf ".js-id-%s" (replace .tag " " "-") }}
|
||||
{{ if or (eq (substr .tag 0 1) "*") (eq (substr .tag 0 1) ".") }}
|
||||
{{ $data_filter = .tag }}
|
||||
{{ $data_filter := "" }}
|
||||
{{ with .filter }}
|
||||
{{ $data_filter = . }}
|
||||
{{ else }}
|
||||
{{ if or (eq (substr .tag 0 1) "*") (eq (substr .tag 0 1) ".") }}
|
||||
{{ $data_filter = .tag }}
|
||||
{{ else }}
|
||||
{{ $data_filter = printf ".js-id-%s" (lower (replace .tag " " "-")) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<a href="#" data-filter="{{ $data_filter | safeHTMLAttr }}" class="btn btn-primary btn-lg{{ if eq $idx $filter_default }} active{{ end }}">{{ .name }}</a>
|
||||
{{ end }}
|
||||
@@ -77,7 +90,7 @@
|
||||
{{ $query = sort $query $sort_by $sort_order }}
|
||||
|
||||
{{ range $index, $item := $query }}
|
||||
{{ $js_tag_classes := delimit (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") " " }}
|
||||
{{ $js_tag_classes := delimit (apply (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") "lower" ".") " " }}
|
||||
{{ if in (slice "masonry" 3) $view }}
|
||||
<div class="project-card project-item isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
|
||||
{{else}}
|
||||
|
||||
Reference in new issue
Block a user