Javascript JS files

Perhaps the discussion thread at: https://forum.getpublii.com/topic/i-want-to-run-javascript-on-my-pages/ will help.

<span style=”font-weight: 400;”>So basically I want to use custom CSS and javascript on some of the posts only. I don’t want it in the entire theme. I want it specifically for a single post which will then become a page. I am not a web developer and I don’t have a lot of coding skills but if there is a YouTube video or step-by-step instructions, then I can certainly follow that.  So far publii has been great and I love this tool but I am stuck on this issue of custom CSS and JavaScript for specific posts. Please advise.</span>

msn77a: do you have a link to the CSS and Javascript you want to add? This will help with assisting you as we don’t know where the JS and CSS is meant to go (inline vs external).

If you’re not using an existing library, you could use Pastebin or Gist to share your code, since this forum isn’t ideal for code sharing.

Tools & Plugins > File Manager to conveniently upload the files.

Is the custom Javascript always the same? If yes, I’d do it this way:

1. Create overrides for your theme’s config.json and post.hbs files
2. Edit the copied config.json and add a “select” type custom option, call it CustomJS or whatever
3. Edit the copied post.hbs and near the closing body tag add your custom .js like so:

{{#if @config.post.CustomJS}}
   <script src="/yourcustomscript.js"></script>
 {{/if}}

Now when creating posts you’ll have a new toggle under Other options that will enable or disable your custom Javascript for that specific post only:

If each post has to have different custom Javascript, well, it’s very similar except instead of “select” you add a custom “text” field and paste in a link to your .js file for each post.

Sorry for replying so late but got caught up in other work.

This is what I did so far step-by-step

I am using theme – simple

Step 1 – I created “simple-override” folder in input – themes

Step 2 – In the override folder – I copied config.json and made a copy of post.hbs and renamed it as post_rabbit.hbs

Step 3 – Made changes to post_rabbit.hbs and config.json

Step 4 – When I got to publii, I don’t see any post templates and all my post options are gone.

I don’t think you necessarily need a custom post template. If you override post.hbs like I said in my previous post it would just add an option to enable the custom JavaScript or not, while everything else stays the same.

Specifically, you’d put this into the config.json in the override folder, under postConfig:

 {
 "name": "CustomJS",
        "label": "Custom JavaScript",
        "value": "0",
        "type": "select",
  "options": [
  {
    "label": "Enabled",
    "value": 1
  },
  {
    "label": "Disabled",
    "value": 0
  }
]	
}

And this into post.hbs also in the override folder:

{{#if @config.post.CustomJS}}
   <script src="/yourcustomscript.js"></script>
{{/if}}

And if your post options disappeared, you’re likely missing a comma in config.json, perhaps following the previous element under which you added the new one.

(If you do want a custom post template, replace post_rabbit with rabbit in your config.json, and probably the same issue with the comma.)

Thanks privii and candidexmedia for your help. I will try the suggestions given by you and update about the results. Thanks again.

Dear privii and candidexmedia, I implemented your suggestions and it worked!

but facing issues with simple custom css and javacript.

(please note that I am not able to paste actual code as it gives me a wordfence block 403 error)

CSS (I added the css style abc123 to style. css in the override folder), this is code that i used

Javascript

I uploaded this javascript using file manager to media files

my post html

Issues I am facing,

CSS style is not getting applied
Javascript is not working

When I use the above in any online html editor then it works but not in Publii. What am I doing wrong? Pls advise.

Ok, I will put in the main.css and check.

Any input around the javascript issue?

Dear Bob,

I followed your suggestion and placed the script at /simple-override/assets/js/rabbitjs.js,
then copied the footer.hbs file to /simple-override/partials/footer.hbs,
and edited this file as per your comment above.

Now how do I call this javascript in my post?

If I put this syntax

then its not working

[anonymous] wrote:

Looks like you already called the Javascript with the https://getpublii.com/dev/js-helper/ in footer.hbs.

That said, you’re calling the JavaScript for all posts. If you only need to call that script for certain posts, use the #if technique described by privii earlier, or create a new partial similar to footer.hbs in the override that has the script that you need, and invoke it in in your rabbit post emplate instead of footer.hbs. The #if will be easier to maintain and upgrade later, but you’ll have to add more post config options for it, if you haven’t already.

Now I am confused…which option should I follow because both not working for me currently.

[anonymous] wrote:

ok, I made the required changes to the footer.hbs

But still CSS style is not getting applied and Javascript is not working

This is what I am writing in the post html

Ok, Thanks Bob. I will go through all the changes. Thanks a lot!