Customizing the layout of your site

Introduction

While the Academic Pages is intended to allow you to get a website up and running as quickly and easily as possible, a high degree of customization is also possible. While some of the customization can be completed by editing data files, some of the customization will require modifications to CSS or HTML.

Adjusting Collections Included

In order to remove collections from your website you will need to do the following. First, update the _config.yml in the following setting:

defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      comments: true
      share: true
      related: true

Where the scope tag indicates the start of a new page type, Blog Posts or _posts in the above example. Removing a section from this setting will prevent the given page type from being rendered by the template for inclusion in your website.

Next, if you remove one of the types of content that are included with Academic Pages by default, you will need to edit the _data/navigation.yml file to update the links at the top of the page as well. Followed by removing it from the collections tag in _config.yml.

Finally, you will need to delete the relevant directory and its contents to prevent the data from being returned by the server.

Order of Navigation Bar

The order of the top navigation bar is controlled by the _data/navigation.yml file which is written in standard YAML. When setting up your website you may have deleted the following lines to remove the link markdown hints page:

  - title: "Guide"
    url: /markdown/

However, you can also remove links to other sections by deleting the respective lines from the file. Since the order of the entries in the file determines the order they appear in the navigation bar, changing the order will also adjust their order in the navigation bar.

Adjusting the Sidebar

Much of the CSS for the sidebar can be found in _sass/_sidebar.scss with the variable settings found in _sass/_variables.scss. Generally, if a property is rarely adjusted, the numeric value will be in _sass/_sidebar.scss, but if it is more likely to be changed, it will be stored as a variable in _sass/_variables.scss.

Adjusting the Avatar

The style of the author avatar is controlled by the .author__avatar CSS class which can be found in the _sass/_sidebar.scss file. You can adjust the size of the adjusting the max-width setting which defaults to 175 pixels. Following the max-width is the border-radius which controls the rounding of the corners of the avatar border. The default border-radius of 50% renders as a circle while a setting of 0% renders as a square. Values between 1% and 49% will increase the rounding of the boarder up to a full circle at 50%.

.author__avatar {
  /* Other properties clipped for clarity */
  img {
    max-width: 175px;     /* The size of the avatar in pixels */
    border-radius: 50%;   /* The boarder radius as a percentage, 0% will render a square */
  }
}

Adjusting the Footer

Removing the Sitemap

The Sitemap link in the footer of you site can be removed by editing the file _includes/footer/custom.html and removing the following line:

<a href="/sitemap/">Sitemap</a>