Chapter 6 Configuring pages and features
This chapter teaches you how to configure website features that are unlikely to change very frequently. These features include page names, the About page text, default posts, language translations, social media links, and contact forms.
Note: This chapter builds upon the website generated in chapter 4 and edited in chapter 5. All subsequent chapters will do the same. The final version can be viewed here - https://r4sites-anatole-custom.netlify.app/.
Before you proceed, complete the following prerequisites:
- (optional) Discover your style
- Generate your website
- (optional) Fine tune the look and feel
- Sign up for Formspree
6.2 Before you begin
For an optimal development experience, consider the following suggestions before you start to configure pages and features:
Serve the site locally
In the R console, run
blogdown::serve_site() to render a live, local copy of the website in the “Viewer” pane. Any time you save an edit, your local copy will update in real-time and provide you with instant feedback on your edits.
Locate important files in RStudio
The files listed below are referenced throughout this chapter. Consider either opening these files in RStudio or, at the very least, locate them ahead of time to gain some experience navigating the website file structure.
6.3 Rename pages
The Hugo Anatole theme comes with the following default pages: Home, Posts, About, and Contact. To rename these pages, open
config/_default/menus.en.toml and edit the
name parameters accordingly. For example, rename the “About” page to “About Me” to clearly communicate that this page contains your personal biography. </> Code
6.4 Delete pages
To delete a page, open
config/_default/menus.en.toml and delete all references to the page you want to delete. For example, to delete the Contact page, delete lines 19-23 in the
menus.en.toml file. </> Code
6.5 Edit the About page
To edit the default About page, open
content/english/about.md. Replace the metadata (i.e. the parameters in between the
--- markers) then replace the body of the document using plain Markdown. </> Code
6.6 Delete default posts
The Hugo Anatole theme comes with several default posts. To delete all default posts, navigate to the
content/english/post folder and delete all files and folders except
_index.md. </> Code
6.7 Edit post date format
By default, the Hugo Anatole theme displays dates of posts in the format of
Day/Month/Year (Image). To alter the date format, open
config/_default/params.toml and edit the
For example, to switch the date format to
Year-Month-Day, update the values for all three parameters to
"2006-01-02" (</> Code). In this example,
2006 requests the 4-digit year,
01 requests the 2-digit month, and
02 requests the 2-digit day.
6.8 Remove dates from Posts page
When viewed on a device with a small, narrow screen (e.g. mobile phone), the dates to the right of the post titles on the Posts page may appear broken (Image). On narrow screen, there is an insufficient amount of screen space to display both the post title and the post date in a side-by-side fashion.
My preference is to remove the post dates from the Posts page altogether. Note this does not affect the post dates on the Home page or on the post itself. To remove post dates from the Posts page, open
themes/anatole/layouts/_default/list.html and comment out (or delete) lines 11-14. </> Code
6.9 Delete language translations
By default, the Anatole theme supports English and Arabic language translations. To remove all content for a given translation, complete the following steps:
Delete the file
Edit the file
config/_default/languages.tomlby removing all references to the appropriate language parameters. </> Code
Delete the folder
content/TRANSLATION/and all of its contents.
6.11 Configure contact forms
Contact forms are a feature of the default Hugo Anatole theme, though they are not a feature of all Hugo themes. Contact forms are handy for collecting user emails and soliciting feedback from your website visitors. The contact form on the Contact page of the default Hugo Anatole theme is powered by Formspree. Formspree is not the only contact form provider, though it seems many Hugo themes integrate Formspree. Formspree’s web app offers a user-friendly interface for creating and managing contact forms, viewing form submissions, and exporting user data in CSV format. If you ever want to do a “subscriber only” email campaign, contact forms are a great option for collecting emails.
Follow the steps below to create a Formspree form “endpoint” and link it to the contact form on your website:
Sign in to Formspree.
Click “New Project” to create a new project for your website. Image
Click “New Form” to create a new contact form. Image
Copy the form’s “endpoint” beginning with
config/_default/params.tomlin the main website folder, uncomment the
contactFormActionparameter, and insert the form endpoint. </> Code
6.12 Customize contact forms
The contact form on the default Hugo Anatole theme includes fields for Name, Email, and Message. These defaults are likely to work for most use cases, however it is possible to create new fields.
To edit the contact form on the Hugo Anatole theme, open
themes/anatole/i18n/en.toml in the RStudio editor.
To add a new field to the contact form, such as an optional “Job Title” field, update the
contact.html file with a new input (</> Code) and update the
i18n/en.toml file with an associated placeholder text value (</> Code)
6.13 View contact form submissions
Once your contact form endpoint is configured, submissions to your contact form can be viewed in your Formspree account. Sign in to Formspree, locate your form, and select “Submissions” to view and (optionally) export your submissions. Image
6.14 Next steps
Proceed with authoring original content such as blog posts, tutorials, research articles, and project write-ups using R Markdown.
Optionally, skip ahead and deploy your website to the internet. Though the steps to deploy your website are covered in a later chapter, readers are welcome to complete these steps at any point following the initial generation of the website.