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/.

6.1 Prerequisites

Before you proceed, complete the following prerequisites:

  1. (optional) Discover your style
  2. Generate your website
  3. (optional) Fine tune the look and feel
  4. 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.

  • config.yaml
  • config/_default/menus.en.toml
  • config/_default/languages.toml
  • config/_default/params.toml
  • content/english/about.md
  • themes/anatole/layouts/_default/list.html
  • themes/anatole/layouts/partials/contact.html
  • themes/anatole/i18n/en.toml

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 singleDateFormat, indexDateFormat, and listDateFormat parameters.

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:

  1. Delete the file config/_default/menus.TRANSLATION.toml.

  2. Edit the file config/_default/languages.toml by removing all references to the appropriate language parameters. </> Code

  3. 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:

  1. Sign in to Formspree.

  2. Click “New Project” to create a new project for your website. Image

  3. Click “New Form” to create a new contact form. Image

  4. Copy the form’s “endpoint” beginning with https://. Image

  5. Open config/_default/params.toml in the main website folder, uncomment the contactFormAction parameter, 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/layouts/partials/contact.html and 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.