A cheet sheet for building homepage based on al-folio

Building one’s own academic homepage is interesting and useful (e.g. when applying for a graduate research assistant position) and al-folio is a well-known, easy-to-use and elegant homepage template. In this blog post I will briefly describe some things that are not covered in detail in the official documentation but may be helpful, such as changing the icon size and the image rendering size in the profile, and how to change the teaching module to a project-like format.

Change the size of blog tag and category icons

The default icon size may not be suitable for all application scenarios, so you may need to adjust the icon rendering size.

The icon rendering of the blog interface is controlled by h1 in .header-bar. If you need to change it, open _sass/_base.scss and find the following code

.header-bar {
  border-bottom: 1px solid var(--global-divider-color);
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 3rem;

  h1 {
    color: var(--global-theme-color);
    font-size: 3rem;
  }
}

Then change the font-size in h1. Note that rem is different from px which is based on certain pixels. It is a unit that changes based on the size of the root element(such as HTML default font size). If you need to control the size accurately to the pixel, you can set it to a value in px. Here, recommends setting it to rem for the stability of the interface.

Change picture size in peoples

When I modified the content in the people column, I found that the original image rendering size was too large, which caused the interface to lose its compactness (it varies from person to person), so I modified the size of the image rendering here.

The format in peoples is affected by _base.css and _layout.css. Here, the file path of the image rendering size is changed to _sass/_layout.css and you can focus on following code.

// Profile
.profile {
  img {
    width: 60%;
  }
}

Therefore, change the width here.

build teaching column

The official documentation only mentions that teaching can be changed from markdown to a column like projects, but it does not clearly point out the method. The author provides a cheetsheet here for easy configuration.

Firstly, add teaching to _config.yml as following

collections:
  news:
    defaults:
      layout: post
    output: true
    permalink: /:collection/:title/
  projects:
    output: true
    permalink: /:collection/:title/
  teaching:
    output: true
    permalink: /:collection/:title/

Then write the following code into _page/_teaching.md

---
layout: page
permalink: /teaching/
title: this is an example
description: this is an example
nav: true
nav_order: 6
---
<!-- pages/teaching.md -->
<div class="teaching">


<!-- Display teaching without categories -->



  <!-- Generate cards for each teaching -->


  <div class="row row-cols-1 row-cols-md-3">
    
      <div class="col">
  <a href="/teaching/infosec_1/">
    <div class="card h-100 hoverable">
      
      <div class="card-body">
        <h2 class="card-title">Information Security Design and Analysis</h2>
        <p class="card-text">Misc, Advisor - Me and Crabtux</p>
        <div class="row ml-1 mr-1 p-0">
          
        </div>
      </div>
    </div>
  </a>
</div>

    
      <div class="col">
  <a href="/teaching/dsa/">
    <div class="card h-100 hoverable">
      
      <div class="card-body">
        <h2 class="card-title">Data Structure and Algorithm</h2>
        <p class="card-text">advisor - Prof. Dong Liu</p>
        <div class="row ml-1 mr-1 p-0">
          
        </div>
      </div>
    </div>
  </a>
</div>

    
  </div>
  

</div>

Next, in order for Jekyll to render successfully, we also need to add the liquid file in _includes.

teaching.liquid

<div class="col">
  <a href="">
    <div class="card h-100 hoverable">
      
      <div class="card-body">
        <h2 class="card-title"></h2>
        <p class="card-text"></p>
        <div class="row ml-1 mr-1 p-0">
          
        </div>
      </div>
    </div>
  </a>
</div>

teaching_horizontal.liquid

<div class="col mb-4">
  <a href="">
    <div class="card h-100 hoverable">
      <div class="row no-gutters">
        
        <div class="col-md-12">
          <div class="card-body">
            <h3 class="card-title"></h3>
            <p class="card-text"></p>
            <div class="row ml-1 mr-1 p-0">
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>

Since teaching is modified based on the projects type, please find a method yourself if other types are required.

The above is the full content of this blog. If I find any problems later, I will continue to update this article.