Sign in

Custom css and JS per template

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #3717
    joker

    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

    #3718
    BobBob
    Support

    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}}
    
    

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #3719
    joker

    thanks for quick reply, will check soon

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.