refactor(article): remove color tag & add custom category color (#75)

closes: https://github.com/CaiJimmy/hugo-theme-stack/issues/71
This commit is contained in:
Jimmy Cai 2020-12-22 19:43:14 +01:00 committed by GitHub
parent 31c42bcfe7
commit e606dca404
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 29 deletions

View File

@ -22,20 +22,6 @@ let Stack = {
new StackGallery(articleContent); new StackGallery(articleContent);
} }
/**
* Add color to tags
*/
document.querySelectorAll('.color-tag').forEach(async (tag: HTMLLinkElement) => {
const imageURL = tag.getAttribute('data-image'),
key = tag.getAttribute('data-key'),
hash = tag.getAttribute('data-hash');
const colors = await getColor(key, hash, imageURL);
tag.style.color = colors.Vibrant.bodyTextColor;
tag.style.background = colors.Vibrant.hex;
})
/** /**
* Add linear gradient background to tile style article * Add linear gradient background to tile style article
*/ */

View File

@ -3,4 +3,7 @@ title: "Test"
description: "This is a example category" description: "This is a example category"
slug: "test" slug: "test"
image: "hutomo-abrianto-l2jk-uxb1BY-unsplash.jpg" image: "hutomo-abrianto-l2jk-uxb1BY-unsplash.jpg"
style:
background: "#2a9d8f"
color: "#fff"
--- ---

View File

@ -1,22 +1,10 @@
{{ $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" }}
{{- $context := . -}}
<div class="article-details"> <div class="article-details">
{{ if .Params.categories }} {{ if .Params.categories }}
<header class="article-category"> <header class="article-category">
{{ range (.GetTerms "categories") }} {{ range (.GetTerms "categories") }}
{{ if and $image.exists $image.resource }} <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
{{- $imageRaw := $image.resource | resources.Fingerprint "md5" -}} {{ .LinkTitle }}
{{- $20x := $imageRaw.Fill "20x20 smart" -}} </a>
<a href="{{ .RelPermalink }}"
class="color-tag"
data-image="{{ $20x.RelPermalink }}"
data-key="{{ $context.Slug }}"
data-hash="{{ $imageRaw.Data.Integrity }}">
{{ .LinkTitle }}
</a>
{{ else }}
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
{{ end }}
{{ end }} {{ end }}
</header> </header>
{{ end }} {{ end }}