Load JS (jquery ) only on certain pages like the gallery css

[hubyhuby]

I want to do the same thing as the function HasGallery to load in the head file jquery only when I have my simulator ressource.

[bobmitro]

You can use the "is" helper as documented here: https://getpublii.com/dev/is-helper/, which allows for basic conditional checks.

For more granular control, such as specifying the type of page and checking post IDs, you can use the "checkIf" helper, as described here: https://getpublii.com/dev/checkif-helper/
This method allows you to specify conditions where certain content is displayed only on pages with certain post IDs.

[hubyhuby]

[HowToMeetLadies]

You'll need to write a plugin that inserts the script tag when needed.

Implement a handler for the postText or htmlOutput modifier.

Check if your element exists and insert your script tag.

[HowToMeetLadies]

Add thumbnail.svg, front-assets/jquery.js and front-assets/app.js.

config.json

{
  "name": "Simulator",
  "description": "Integrate simulator script automatically",
  "license": "GPL-3",
  "author": "Your Name Here",
  "version": "0.1.0",
  "scope": "site",
  "minimumPubliiVersion": "0.42.2",
  "assets": {
    "front": [ "jquery.js", "app.js" ]
  },
  "messageInOptions": {
    "type": "info",
    "text": "Simulator v0.1.0 (insert url)"
  }
}

main.js

class Simulator {
  constructor(API, name, config) {
    this.API = API;
    this.name = name;
    this.config = config;
  }
  addModifiers() {
    this.API.addModifier("postText", this.insertSimulator, 1, this);
  }
  insertSimulator(ctx, state) {
    if (state.indexOf(`class="simulator`) !== -1) {
      const baseUrl = `${ctx.siteConfig.domain}/media/plugins/simulatorPlugin`; // plugin frontend assets
      const jq = `<script type="text/javascript" src="${baseUrl}/jquery.js" defer></script>`;
      const app = `<script type="text/javascript" src="${baseUrl}/app.js" defer></script>`;
      return state + jq + app;
    }
    return state;
  }
}
module.exports = Simulator;

[HowToMeetLadies]

Or if you really just need to remove jQuery:

Replace the script tag in the htmlOutput.

const regex = /think-of-something/gi;
if (...) return state.replace(regex, "");

---

If you are writing the theme yourself, it would also be possible to use a post configuration option for it.

[hubyhuby]

Thks for your answer, this looks really great... but much more advanced than what I had hoped ;)
For now I have find a workaround... I have put my jquery. js inside the "hasGallery" !!!
And I put the class "class="gallery" when I need my jquery :D Very hacly and bad ... but it works and my google is happy with the speeeed :D

I belive it would be nice to have this code out of the app , or at least a way to create new handlers easily and documented :

I am also installing google ads , which requires a LOT of tags JS everywhere... Things like in a SPECIFIC goal page Header :

<script> gtag('event', 'conversion', {'send_to': 'AW-'}); </script>

By the way is there a way to execute handlebar code / partials inside a post ???

[HowToMeetLadies]

Thks for your answer, this looks really great... but much more advanced than what I had hoped ;)
For now I have find a workaround... I have put my jquery. js inside the "hasGallery" !!!
And I put the class "class="gallery" when I need my jquery :D Very hacly and bad ... but it works and my google is happy with the speeeed :D

Brilliant. 🤣

Please have a look at the following in the manual: Post config options

Creating helpers is also described there.

By the way is there a way to execute handlebar code / partials inside a post ???

No, this is not possible.

[candidexmedia]

+1 for Post configs!!

By the way is there a way to execute handlebar code / partials inside a post ???

Not quite, but the Replacer plugin, experimental WYSIWYG editor extensions, or modifiedPostText theme helper might be able to do the trick depending on what you need @hubyhuby.

In case the modifiedPostText theme helper forum post disappears, here's the breakdown:

1. Create a helpers.js file ‎⁨(in this location: Documents ▸ ⁨Publii⁩ ▸ ⁨sites⁩ ▸ ⁨YOUR_SITE ▸ ⁨input⁩ ▸ ⁨themes⁩ ▸ ⁨YOUR_THEME) with a code snippet along these lines:

let themeHelpers = {
  replaceContent: function(postText) {
      let modifiedPostText = postText;

         modifiedPostText = modifiedPostText.replace('Text-that-user-will-type-in-Post-Editor', 'Text-it-will-be-replaced-by-in-live-site');            
     
      return modifiedPostText;
  }
};

module.exports = themeHelpers;

Here's an example from the original post forum:

let themeHelpers = {
  replaceContent: function(postText) {
      let modifiedPostText = postText;

         modifiedPostText = modifiedPostText.replace('Project Manager', 'PM');     
         modifiedPostText = modifiedPostText.replace('Webdesigner', '<button class="buy-now-btn">Buy Now</button>');           
     
      return modifiedPostText;
  }
};

module.exports = themeHelpers;

3. Edit the post.hbs file as follows: Replace the following part of the code: {{{text}}} with {{{replaceContent text}}}

4. That’s it. Now, you can add multiple variables in the helpers.js file by adding a new line starting with “modifiedPostText = …“