November 5, 2017
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
To perform a redirect this file needs to be named
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
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.
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
Leave a reply
Part of the Let's Build: A Consultancy Website collection