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

  • #3717
    Avatar photo[anonymous]


    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?


    • 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

    Avatar photoBob

    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>
        <link rel="stylesheet" href="{{css "your-css.css" }}">
    Avatar photo[anonymous]

    thanks for quick reply, will check soon