We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Custom css and JS per template

September 5, 2020 at 1:38 pm #3717
[anonymous]
Hello,

First of all thank you for your work with Publii, you are awsome! Also the idea and the execution is brilliant!

My question is basically about theme development, especially about templates: I’ve created more templates that are working fine, but I have some custom JS and CSS content that I need to use for these templates, but particular content only for particular template (bc of SEO optimization).

Is there any way for that, or if more then what is the most optimized way?

Example:
- My templates:
  - company-template
  - about-template
- js files:
  - company.js
  - about.js
- css
  - company.css
  - about.css
- I want to achive:
  - load company.css and company.js ONLY for company-template
  - load about.css and about.js ONLY for about-template
What I’ve tried:
- conditionally import css and js files in header.hbs, but it seems it do not reach {{template}} Handlebar tag
- import css and js in post-MYTEMPLATE.hbs, but {{CSS}} and {{JS}} helper not working in post.hbs, only in header.hbs
Thank you in advance
September 5, 2020 at 1:47 pm #3718
Bob
You can load your script/CSS for any post template by using the following condition:
```
{{#checkIf template '==' "MYTEMPLATE"}}    
    <script defer src="{{js "your-scripts.js"}}"></script>
or 
    <link rel="stylesheet" href="{{css "your-css.css" }}">
{{/checkIf}}
```
September 5, 2020 at 1:57 pm #3719

[anonymous]

thanks for quick reply, will check soon