Other things to do
Last updated
Last updated
By this stage you have a fully-functioning and full-featured Frontity site with a custom theme, and your knowledge of working with Frontity has progressed by leaps and bounds.
You're undoubtedly keen to try out your new Frontity dev skills, so here are some ideas for other features that can be added to the theme that we've been working on. Try some of them out on your own and see how you get on.
At the moment the listing pages just show the title of the post as a clickable link. Why not show the excerpt below each post title and style it to suit the rest of the site. How about adding a 'Read more...' link after each excerpt.
Currently the destination CPT lists posts in the same way as the normal posts. Since it's a different type of content it would be nice if the listing displayed differently. Bear in mind that this list will always be limited so you don't need the pagination.
You will recall that during the tutorial we created separate <Post>
and <Page>
components in separate post.js
and page.js
files so that posts and pages can be displayed differently. This was useful for learning purposes, but is not optimal. A single component can handle both cases.
Refactor that part of the project to dispense with the <Page>
component, and so that the <Post>
component handles both posts and pages.
The destination CPT currently uses the <Page>
component to render its content. Create a new component that displays destinations differently.
<Header>
in its own componentThe <Header>
component is currently part of the main <Root>
component in index.js
. This makes the index.js
file rather long.
Separate the <Header>
component into its own file along with the related CSS-in-JS styling.
At the moment we're not showing any featured images in our site, so our site lacks some visual interest. Try showing the featured image on the single post page or even on the listing page.
The destinations CPT has a custom taxonomy called 'regions'. Display the destinations by region using this custom taxonomy. Currently the values available are 'Africa', 'Americas' and 'Europe'.
HINT — You will need to add the configuration for the custom taxonomy to frontity.settings.js
- see . You should then update list.js
, or at least the part of it that you implemented in 2 above.