# How to display the html-tag through the condition if hugo?

**URL:** <https://discourse.gohugo.io/t/how-to-display-the-html-tag-through-the-condition-if-hugo/28831>\
**Category:** support\
**Created:** [October 15, 2020, 1:19pm UTC](https://discourse.gohugo.io/t/how-to-display-the-html-tag-through-the-condition-if-hugo/28831 "2020-10-15T13:19:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Oleksii\_Binetskyi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/oleksii_binetskyi/32/12563_2.png) [@Oleksii\_Binetskyi](https://discourse.gohugo.io/u/Oleksii_Binetskyi)\
**Post date:** [October 15, 2020, 1:19pm UTC](https://discourse.gohugo.io/t/how-to-display-the-html-tag-through-the-condition-if-hugo/28831/1 "2020-10-15T13:19:37Z")

</div>

Hi. I have a code in the hugo template engine that should add a script if the parameter in the article is equal to the desired value.

Front Matter articles. Here I need the header\_class parameter

```auto
---
title: "Replaced header"
header_class: "replaced-header"
---

```

If header\_class = “replaces-header” output the code. I tried to implement it like this:

```auto
{{ if isset .Params.header_class "replaced-header" }}
<script>
    let replacedHeader = document.querySelector('.replaced-header');
    window.onscroll = function() {
        let breakPoint = 100;
        let scroll = window.pageYOffset || document.documentElement.scrollTop;
        if(scroll > breakPoint) {
            replacedHeader.classList.add('replaced-header--scrolled');
        }
    };
</script>
{{ end }}

```

The code doesn’t work. How should a condition be set in this case?

---

<div class="post-metadata">

**Author:** ![gethugothemes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/gethugothemes/32/13287_2.png) [@gethugothemes](https://discourse.gohugo.io/u/gethugothemes)\
**Post date:** [October 15, 2020, 1:30pm UTC](https://discourse.gohugo.io/t/how-to-display-the-html-tag-through-the-condition-if-hugo/28831/2 "2020-10-15T13:30:42Z")

</div>

```auto
{{ with $.Param "replaced-header" }}

```

should work for you. Please note that the param INSIDE the `with` the parameter is a dot `{{ . }}`.

```auto
{{ with $.Param "replaced-header" }}
{{ . }}
{{ end }}

```

> **[with](https://gohugo.io/functions/with#readout)**
>
> Rebinds the context (\`.\`) within its scope and skips the block if the variable is absent.

---

<div class="post-metadata">

**Author:** ![Oleksii\_Binetskyi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/oleksii_binetskyi/32/12563_2.png) [@Oleksii\_Binetskyi](https://discourse.gohugo.io/u/Oleksii_Binetskyi)\
**Post date:** [October 15, 2020, 1:42pm UTC](https://discourse.gohugo.io/t/how-to-display-the-html-tag-through-the-condition-if-hugo/28831/3 "2020-10-15T13:42:10Z")

</div>

This code does not work

```
{{ with $.Param "replaced-header" }}
    {{ . }}
    <script>
        let replacedHeader = document.querySelector('.replaced-header');
        window.onscroll = function() {
            let breakPoint = 100;
            let scroll = window.pageYOffset || document.documentElement.scrollTop;
            if(scroll > breakPoint) {
                replacedHeader.classList.add('replaced-header--scrolled');
            }
        };
    </script>
    {{ end }}

```

And this one doesn’t work either

```
{{ with $.Param "replaced-header" }}
    <script>
        let replacedHeader = document.querySelector('.replaced-header');
        window.onscroll = function() {
            let breakPoint = 100;
            let scroll = window.pageYOffset || document.documentElement.scrollTop;
            if(scroll > breakPoint) {
                replacedHeader.classList.add('replaced-header--scrolled');
            }
        };
    </script>
    {{ . }}
    {{ end }}

```

I check in my browser in incognito mode.  
Perhaps I am missing something?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [October 15, 2020, 1:48pm UTC](https://discourse.gohugo.io/t/how-to-display-the-html-tag-through-the-condition-if-hugo/28831/4 "2020-10-15T13:48:50Z")

</div>

Any of these three methods:

```auto
  {{ if isset .Params "header_class" }}
    {{ .Params.header_class }}
  {{ end }}

  {{ with .Params.header_class }}
    {{ . }}
  {{ end }}

  {{ with .Param "header_class" }}
    {{ . }}
  {{ end }}

```

Note that the last one will first look for the parameter in front matter, then in the site configuration. The second is the preferred method.

---

<div class="post-metadata">

**Author:** ![gethugothemes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/gethugothemes/32/13287_2.png) [@gethugothemes](https://discourse.gohugo.io/u/gethugothemes)\
**Post date:** [October 15, 2020, 1:49pm UTC](https://discourse.gohugo.io/t/how-to-display-the-html-tag-through-the-condition-if-hugo/28831/5 "2020-10-15T13:49:13Z")

</div>

> [@Oleksii\_Binetskyi](#):
>
> `header_class`

Your param is `header_class`, not the value of it.

```auto
{{ with $.Param "header_class" }}
{{ if ( eq . "replaced-header") }}
your header
{{ end }}
{{ end }}
```

---

<div class="post-metadata">

**Author:** ![Oleksii\_Binetskyi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/oleksii_binetskyi/32/12563_2.png) [@Oleksii\_Binetskyi](https://discourse.gohugo.io/u/Oleksii_Binetskyi)\
**Post date:** [October 15, 2020, 1:53pm UTC](https://discourse.gohugo.io/t/how-to-display-the-html-tag-through-the-condition-if-hugo/28831/6 "2020-10-15T13:53:00Z")

</div>

This works, thanks a lot!

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [October 17, 2020, 1:53pm UTC](https://discourse.gohugo.io/t/how-to-display-the-html-tag-through-the-condition-if-hugo/28831/7 "2020-10-17T13:53:07Z")

</div>

Closed on October 17, 2020, 1:53pm UTC

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.