🚚 How to migrate to Kirby Tips & tutorials
Skip to content
    Search by Algolia

    Art-directed pages

    When you are looking for a way to create individual, art-directed subpages for your site, one way would be to create new templates for each new page. But this can get very redundant. Especially if the HTML structure doesn't really change, but you just want to make some adjustments via CSS or maybe add some JavaScript.

    With Kirby's folder system it's possible to add additional CSS and JavaScript files directly to each page and load them on demand. This can be a far more effective way to add art direction to individual pages.

    In your content folder for your page or article, add a css file and/or a javascript file. It's totally up to you how you name them. Let's use styles.css and scripts.js here.

    • blog
      • 20180101_hello-world
      • 20180201_my-second-article
      • 20180301_and-another-one
        • article.txt
        • scripts.js
        • styles.css

    You can even add multiple css and javascript files if you want, but let's keep it simple for this example.

    Afterwards go to the header snippet for your site
    (by default this is /site/snippets/header.php)

    What we want to do is to include our stylesheet and script files in the head section of our html.

    <head>

...
<!-- custom css -->
<?= css($page->files()->filterBy('extension', 'css')->pluck('url')) ?>

<!-- custom javascript -->
<?= js($page->files()->filterBy('extension', 'js')->pluck('url')) ?>
...

</head>

    What we are doing here is to get all files in our content folder and filter them by extension. Afterwards we are using the ->pluck('url') method to get an array with the Url of each file.

    The css() and js() helpers handle the rest. As soon as they get an array of Urls, they will create individual link and script tags for us. The best part is that they don't create any tags at all, if the array of css or js files is empty.

    <link rel="stylesheet" type="text/css" href="http://theurltothestylesheet.com" />
    <script type="text/javascript" src="http://theurltothejavascript.com"></script>

    And that's it. Now you can create art-directed posts or custom styles for individual pages.

    Author