How to conditionally use reusable paragraph/snippet/shortcode within reusable content/page?

support
1

I am working on a documentation site, that I would to have a re-usable content page in markdown file. This “re-useable” markdown file also has several shortcodes.

I am able to create this reusable markdown file, and I can use it for any URL and I also can use shortcodes within that markdown file, and it will be rendered properly.

The challenge is, the shortcodes are fixed, and I am not able to conditionally use/ignore the shortcode within that markdown file. If I have 4 shortcodes within reusable-content.md, all these 4 shortcodes will be rendered on both .com/one/content.html and .com/two/content.html, thus these 2 pages are exactly the same. I don’t wan this, --for example – I want only 3 shortcodes displayed on one page and 4 shortcodes displayed on the other page, is this possible?

How to do this, or how to create a logic for this?

2

Hi, I’m not sure that’s the best way to do it, but I’d try to add the conditional logic to the shortcodes (or create a separate shortcode that includes the logic, and nest the other shortcodes into this one on the page), and add some parameters to the frontmatter of the page that triggers the conditions as needed.

3

Adding my solution back then for this, I end-up using inline javascript for conditional logic within the shortcode file to achieve it

./layouts/shortcodes/snippet.html

{{ $filename := .Get 0 }}
{{ $render_only_on := .Get 1 }}
{{ $file := path.Join "headless-snippets/" $filename }}
<script>
  document.addEventListener("DOMContentLoaded", function(){
    const pathUrlArr = window.location.pathname.split("/");
    const firstPathUrl = pathUrlArr[1]
    if ( {{ $render_only_on }} === "" || {{ $render_only_on }} === "both" ){
      return;
    } else if (firstPathUrl === "cloud" && {{ $render_only_on }} !== "cloud" ){
      document.getElementById({{ $filename }}).style.display = "none";
    } else if (firstPathUrl !== "cloud" && {{ $render_only_on }} !== "software" ){
      document.getElementById({{ $filename }}).style.display = "none";
    }
  });</script>
<div id="{{ $filename }}">
  {{ $file  | readFile | markdownify }}
</div>
4

Slightly related post: How to put the content of a page into another

5

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