Summary page shows the content of shortcode <script/> html element

support
1

The goal is to create a shortcode that has an html button and javascipt

Clean install and setup, using ananke theme.
I create layouts/shortcodes/foo.html with

<script>function foo() { console.log("foo")}</script>
<button onclick="foo">Click me</button>

I add this to a post on the first line (so it is included in the summary)
{{< foo >}}

In the post display this works as expected: it shows a button and clicking the button prints “foo” on the console. In the summary page however it displays whatever resides between the tags as text, “function foo() …”. Same for the button as well, it displays just text “Click me”.

Is there a way to fix this? A “No summary” tag for a shortcode or could I go about this another way?

I can put this in a gist if that is worthwhile.

2

Can you share your project code?

3

Yes. hugo_demo

I pretty much followed the quickstart, and I put some text in README.md

I don’t use github that much so if there is something that I can fix pls. let me know.

4

In summary-with-image.html of ananke theme. your post is rendered like below

<div class="f6 f5-l lh-copy nested-copy-line-height nested-links">
          {{ .Summary }}
</div>

I think .Summary return first few lines of your post without html tag such as <p> <h1> <h2>. it is proper behavior if there is no <script> tag. I think you have to check break point of summary with<!--more-->or create summary in front matter. another info is here https://gohugo.io/content-management/summaries/

5

What @ghfkddorl said ^

If you add <!--more--> below your shortcode in your test post then your button will display