November 5, 2017
•Last updated November 5, 2023
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
The Series So Far
Categories
Collection
Part of the Let's Build: A Consultancy Website collection
