Changing the style of a parameter depending on the content

support
1

Hi,

I am trying to change the styles in my index.html depending on the content of a parameter that I set in my posts.

For example, if I tag a post as code (type: code) I want to color the text code as yellow in the index.html. If I tag a post as other (type: other) I want to color the text high in the index.html in orange.

33%20PM
Screen Shot 2019-01-08 at 11.43.33 PM.png1546×104 5.38 KB

I have tried to include a jquery snippet to change the colors dynamically but it is not working. My code looks like this:

STYLE

.red { color: red; } .orange { color: orange; } .yellow { color:yellow; }

JS

<script>
    $(".content:contains('code')").addClass("yellow");
    $(".content:contains('other')").addClass("orange");
    $(".content:contains('stuff')").addClass("red");
</script>

HTML

<div class="content col-xs-2">
                      {{.Type}}
</div>

Do you hav any advice or any other method to obtain the result I want?

2

This can be accomplished without JS, if you wish.

In your templates, do something like:

{{ $class := "" }}

{{ if eq .Type "code" }}
  {{ $class = "yellow" }}
{{ else if eq .Type "other" }}
  {{ $class = "orange" }}
{{ else if eq .Type "stuff" }}
  {{ $class = "red" }}
{{ end }}

<div class="content col-xs-2 {{ $class }}">
  {{.Type}}
</div>
2 Likes
3

Thanks so much! It is working smoothly.

Two more questions:

-Why it was not working with JS? Is it better to avoid JS in Hugo?

-I’d like to create a tag with each of these types. For example, if I click on ‘code’ I want to see all the articles tagged as ‘code’. Do you have any recommendation or advice about how to accomplish that?

4

I like doing things with Hugo when I can, so it was a matter of preference. JS should work fine too.

You’ll need to create a list template for that. For example, here’s the list template I use for my vanilla theme.

1 Like
5

It is better to avoid JS if something else does the job. Reach for JS last. :slight_smile:

3 Likes
6

Following your example, I created this list template.

<!-- layouts/taxonomy/list.html -->

<ul>
  {{ range .Data.Pages }}
    <li>
      <a href="{{.RelPermalink}}">{{ .Title }}</a>
    </li>
  {{ end }}
</ul>

Unfortunately, when I click in the different tags, the tag page is blank.

7

Would need to see your code in order to troubleshoot. Can you share a git repo?

1 Like
8

Sorry for the delay. Here it is the repo.
I took yinyang template as my starting point and I was trying to create a list when clicking in the tags and another list when clicking in the main category (the colored one).

9

You haven’t created a list template. So you need to create one at:

layouts/_default/list.html
1 Like
10

Thanks! It was an error with the commit. Submitted now but still showing a blank page when I click in the tags.

Didn’t try yet to create an interior page for the categories as I cannot solve the first issue. Anyway, should I create another .html in _default for the categories?

Thank you

11

You’ve defined a main block, {{ define "main" }}, which is never declared in your baseof.html (because you don’t have that file).

So either (1) create baseof.html and declare the main block, or (2) remove the main block definition from list.html

1 Like
12

Thanks so much! Solved that.
I guess my last question is why I am getting the names of the tags when using .Title in the interior tag pages instead of the titles of the articles. Here it is the link . Sorry, the code is a bit messy after trying different options from the documentation and your Vanilla template.

13

I think it has to do with the terms that have octothorps in them. The other terms render as expected. I don’t have a solution, but giving a secondary report. :slight_smile:

1 Like
14

Thanks for your feedback Maiki!
I am confused, .Title should not show the title of the post?