Let's Build: A Consultancy Website - Part 37

Kirby Redirects and Adding Animations

Part 37 teaches you how to perform redirects in Kirby. Alyssa's blog is hosted elsewhere so we chose to redirect the "blog" link in the navigation menu.

Redirects in Kirby

Performing a redirect is fairly simple inside Kirby. You need to start by creating a new page from the panel admin area.

Once a new page is created go inside that pages folder inside of content/yourpage. This path will vary based on what your page is named. From there you should notice a .txt the file inside the folder. In my case, I created a new page called Blog. The .txt file was called blog.txt.

To perform a redirect this file needs to be named link.txt.

This file will then look to a file in your site/templates directory called link.php. You will need to create this file and inside it enter this one-liner:

<?php go($page->link()) ?>

This method actually performs the redirection action. We still need to define where exactly our page will redirect to.

in my case, I'll head back to the link.txt file located in the content/blog directory. Within this file I'll add the following markdown:

Title: Blog
----
Link: https://medium.com/endlyss-designs
----

This bit of content sets the title and link the redirection will go to. In the screencast, I opted to use the starter kit supplied by Kirby. If you happen to do the same you'll likely want to edit your blueprint for the page you are planning to redirect. In my case, I edited the blog.yml file inside the site/blueprints directory to just contain this bit of yaml

title: Blog

files: false
pages: false

fields:
  title:
    label: Title
    type: title
    required: true

Here I declare the page title as a field that is required. I also disable the files and pages parameters for this specific page since a user doesn't need to add files or pages to a redirected page.

Adding animations

For some flare, I sought to add some animations to elements around the site. Areas of the home page now enter and leave as a user scrolls to give a bit more interactivity and stimulate the user.

Out of the box, we could have just used a library called animate.css but I actually prefer to use it combined with a library called WOW.js. WOW.js actually depends on animate.css so you'll want to always use them in unison. WOW.js is responsible for queuing in animations as your users scroll through a page. Rather than just have everything element you want to animate fire at the same time, WOW.js waits until those elements are in view before actually animating. You can also adjust other parameters like animation delays, animation offsets, animation iterations, and if you want animations to occur on mobile devices.

Use with caution

Animations can be a great way to bring some life to a web page but it's VERY easy to overuse them. When you overuse animations they can actually hinder performance and sometimes effect user experience in a bad way. I'd recommend using these with caution and to just sprinkle them in tastefully.

We are in the home stretch

We're only one episode away to completing this series. If you've followed along this far I can't thank you enough for seeing it through. This project has been a big undertaking and I've loved documenting my process. I plan to do more like it involving new technologies to both learn and teach as we go. I'm excited about the future of the series and I hope you are as well!

Download the Source Code for this Project

Source Code

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15
• Part 16
• Part 17
• Part 18
• Part 19
• Part 20
• Part 21
• Part 22
• Part 23
• Part 24
• Part 25
• Part 26
• Part 27
• Part 28
• Part 29
• Part 30
• Part 31
• Part 32
• Part 33
• Part 34
• Part 35
• Part 36