Hello.
I apologise for creating another thread for the same issue (original thread here), but, it got locked because I marked it solved. However, I ran into another use case.
I wanted to add a button below images (I create a custom shortcode for images). The button would link to the href parameter supplied in the image shortcode. The button has text ‘Open image link’.
{{ if (isset .Params "href") }}
<a href = "{{ .Get `href` }}" title = "Visit this link" target = "_blank" rel = "nofollow noopener noreferrer">
<button class = "mdc-button mdc-button--unelevated" style = "height: 36px; left: 50%; transform: translateX(-50%);" data-mdc-auto-init = "MDCRipple">
<div class = "mdc-button__ripple"></div>
<span class = "mdc-button__label">Open image link</span>
<i class = "material-icons mdc-button__icon">launch</i>
</button>
</a>
<br>
<br>
{{ end }}
So, that ‘Open image link’ and ‘launch’ is also getting rendered in jsonify and in turn, comes up in my search results. I went through the jsonify documentation and I don’t think it’s possible to exclude shortcode contents as of now.
Moreover, the, solution of the previous thread also won’t work as it’s not a script that I want to run, it’s an element that I want to render.
So, if there’s not a way currently, I hope, it’s considered as a feature request for one of the next releases to exclude shortcode content from the rendered json.
<button>
anything else
</button>
is the proper syntax for a button element. Inside of your button you can do whatever you want with all inline elements. div is not an inline element, span is.
{{ if (isset .Params "href") }}
<button class = "mdc-button mdc-button--unelevated" style = "height: 36px; left: 50%; transform: translateX(-50%);" data-mdc-auto-init = "MDCRipple">
<a href = "{{ .Get `href` }}" title = "Visit this link" target = "_blank" rel = "nofollow noopener noreferrer">
<div class = "mdc-button__ripple"></div>
<span class = "mdc-button__label">Open image link</span>
<i class = "material-icons mdc-button__icon">launch</i>
</a>
</button>
<br>
<br>
{{ end }}
Nothing in your post points me to where json is involved. What is missing? Also: I see a lot of mdc classes. Is that a styling system you are using? Maybe that one breaks something.
First step is to add some clarification about the JSON part and try to put the a tag INSIDE the button tag.
Also there are no spaces allowed between attribute names and their contents:
WRONG:
<a href = "something">
RIGHT
<a href="something">
And last point, but that’s just kicking you while you are down, sorry 
The two br tags at the end point to you trying to have space below the button. This was done in HTML back in the nineties of last century. Today we for instance add a class space-below to the button and then button.space-below {margin-bottom:1rem;} in our css.
Yeah, it’s Material Design CSS that I’m using.
I had it in the original post that I linked, so, I thought, I shouldn’t repeat myself. But, here you go…
{{ $.Scratch.Add "pagesIndex" slice }}
{{ range $index, $page := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ $pageData := (dict "title" $page.Title "href" $page.RelPermalink "tags" (delimit $page.Params.tags " ; ") "content" $page.Plain) }}
{{ $.Scratch.Add "pagesIndex" $pageData }}
{{ end }}
{{ $.Scratch.Get "pagesIndex" | jsonify }}
So, the contents of a div won’t be rendered in json? But, I ended up using span because that’s how the MDC documentation says it’s to be used. See here: Material Design
That’s just me being lazy to type the slightly more characters of CSS than that of <br>.
Let’s concentrate on the jsonify. Why are you doing that?
Hugo has a range command. you range over the pagesIndex variable. jsonify prepares slice for printing it out as JSON. In your template you want the real existing structure you are scratching there and then range through it.
What exactly do you want to be jsonified?
I want the entire text content of my markdown files to be converted to JSON. I’m using Lunr.js as a full text-search engine for my website. It needs JSON to work. So, I am trying to encode all of my text from markdown into JSON.
So, I’m including the post’s URL, Title, Tags and Content. It’s the content from which I wish to exclude the text in shortcodes.
Create two variables? One jsonified and one pure?
Sorry to bother, but how exactly does that work?
{{ $variablename := something | jsonify }}
{{ $variablename2 := something }}
the := assigns something.
So for instance:
{{ $pagesIndex1 := $.Scratch.Get "pagesIndex" | jsonify }}
{{ $pagesIndex2 := $.Scratch.Get "pagesIndex" }}
Not tested though.
I don’t understand how exactly is that going to remove the unwanted content from my generated json. From what I understood from your instance, it’s setting 2 different variables, one jsonified and other one not. But both of them are going to have the same content, right? Except $pagesIndex1 will actually have it converted to JSON as I need it. I don’t see how I can put $pagesIndex2 to use?
From my understanding, if anything needs to be changed it is this line:
{{ $pageData := (dict "title" $page.Title "href" $page.RelPermalink "tags" (delimit $page.Params.tags " ; ") "content" $page.Plain) }}
That should be somehow modified to exclude the unwanted content.
Well, it’s time to show your repo (or a stripped version of it) so we can test the issue. From what I understand you are using $pageData in a JSON layout. If so, don’t jsonify the $pageData but jsonify all variables when you use them in the layout file, except the one part you don’t want encoded. But post your repo
I’m so sorry for killing your time, I thought I had given a link to it, but, I just gave it in another thread I posted. Here’s my repo: https://github.com/Hrishikesh-K/Portfolio
I have an alotment of time to get killed by these things 
I will have a look tomorrow into this. I am pretty sure we will come to a solution. From the looks of it we will have to jsonify all individual elements in the $pageData slices and then work with safeJSON or one of it’s brethren.
1 Like