diff options
| author | Jimmy Cai <jimmehcai@gmail.com> | 2020-12-22 21:43:14 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-12-22 21:43:14 +0300 |
| commit | e606dca404d5bf1d8e29555b7e89b553b0508e0f (patch) | |
| tree | 435f1ede461873b344e9c6d351b50a845b152741 | |
| parent | 31c42bcfe7e93ab30843b000f4094b618ebf3e7a (diff) | |
refactor(article): remove color tag & add custom category color (#75)
closes: https://github.com/CaiJimmy/hugo-theme-stack/issues/71
| -rw-r--r-- | assets/ts/main.ts | 14 | ||||
| -rw-r--r-- | exampleSite/content/categories/Test/_index.md | 3 | ||||
| -rw-r--r-- | layouts/partials/article/components/details.html | 18 |
3 files changed, 6 insertions, 29 deletions
diff --git a/assets/ts/main.ts b/assets/ts/main.ts index e48f4d2..4d07631 100644 --- a/assets/ts/main.ts +++ b/assets/ts/main.ts @@ -23,20 +23,6 @@ let Stack = { } /** - * 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 */ const articleTile = document.querySelector('.article-list--tile'); diff --git a/exampleSite/content/categories/Test/_index.md b/exampleSite/content/categories/Test/_index.md index 547b3b7..0b3cfa9 100644 --- a/exampleSite/content/categories/Test/_index.md +++ b/exampleSite/content/categories/Test/_index.md @@ -3,4 +3,7 @@ title: "Test" description: "This is a example category" slug: "test" image: "hutomo-abrianto-l2jk-uxb1BY-unsplash.jpg" +style: + background: "#2a9d8f" + color: "#fff" ---
\ No newline at end of file diff --git a/layouts/partials/article/components/details.html b/layouts/partials/article/components/details.html index 7650704..5c5397b 100644 --- a/layouts/partials/article/components/details.html +++ b/layouts/partials/article/components/details.html @@ -1,22 +1,10 @@ -{{ $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" }} -{{- $context := . -}} <div class="article-details"> {{ if .Params.categories }} <header class="article-category"> {{ range (.GetTerms "categories") }} - {{ if and $image.exists $image.resource }} - {{- $imageRaw := $image.resource | resources.Fingerprint "md5" -}} - {{- $20x := $imageRaw.Fill "20x20 smart" -}} - <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 }} + <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}> + {{ .LinkTitle }} + </a> {{ end }} </header> {{ end }} |