CSS / JS in Art-directed blog posts

Hi and hello to the forum from a new user,

I have a question in regards of the css / js loading described in the “Art-directed blog posts” which is an awesome Idea and exactly what I was looking for. If I understand it correctly, all css / js of all pages are loaded in the header on top of all the JS / CSS that are loaded globally plus those per template? In case of a lot of different pages this can become a lot of (unused) JS / CSS and I am wondering if there isn´t a solution to only load the page related css / JS in addition to the global stuff. Or am I missing something?

Hey @carstenh and welcom to the forum :slight_smile:!

Have a look at autoloading css and js files. This loads only necessary files for the template.

Many thanks :slight_smile:
I looked into the autoloading, but as far as I understoood these load per template and not per page.
I refer to the method decribed in the ccokbook in the Art directed blogs chapter
Art directed blog posts
I want to create a magazine and this would give a great freedom for designing single pages in combination with globaly designed parts. The only concern I have with the described method in the Tutorial is that I load too muany css JS files that are not necessary each time.

I don’t see why you would load unnecessary files with this method as it only loads the js/css files that is in the current page folder?

Since the function is in the header, doesn´t the foreach -> page load all the css / js in the folder of all the pages? For example in case of 20 different page design with different scripts load 19 unnecessary css / js files?

No, no, the foreach loop only fetches all files in the current page folder.

You might think about putting the JS in the footer instead of in the head, though.

1 Like

Perfect, many thanks! I now understand what I misunderstood. I thought it cycles through the pages but it cycles though the files of a page :grin: Yes I will put them into the footer.