Structure of the Website

The main page

The main page is what you land on when you load the website and includes everything that you see when you scroll down the page. It is divided into sections each of which is managed through a separate file in the _includes/2023_data/ folder. The contents of the main page are managed in the _layouts/2023_home.html file. At the top of the file you can manage the text of the landing area:

 <div class="intro-heading">TaCoS conference<br></div>
                <div class="intro-lead-in">Dates: TBA</div>
                <div class="intro-lead-in">Saarland University</div>

Below that you can arrange the order of the sections on the main page:

{% include 2023_data/newIntro.html %}
{% include 2023_data/team_members.html %}
{% include 2023_data/team_members_info.html %}
...

Please note that this only changes the order of the files, NOT the content of the sections. The content of the sections is managed in the corresponding files in the _includes/2023_data/ folder.

Sections

Each section of the main page is managed in a separate file in _includes/2023_data/ (altough that folder also includes other files). A file is not automatically included in the main page if it exists in that folder. A section must be referenced in the _layouts/2023_home.html file to be included in the main page using sass syntax:

{% include 2023_data/newIntro.html %}

At the top of each section file, there is a parameter called id that can be used for linking to the specific section using an href html tag or oder linking mechanisms:

<section id="locations" class="bg-light-gray">

Some subsections draw from data files in the _includes/2023_data/ folder. In this case, the html file is a template that is filled with data from the .yml file. This means that in order to make a change in a section, it needs to be done in the corresponding yaml file in the _data/twenty_23/ folder (more on that below in the section on Data Files).

For example _includes/2023_data/team_members.html draws from _data/twenty_23/team_members.yml, as can be seen in the first line below. The rest of the loop uses html and css/scss to format the data:

{% for team in site.data.twenty_23.teams %}
    <div class="col-md-4 col-sm-4 speakers-item">
        <a href="#{{ team.name }}" class="speakers-link" data-toggle="modal">
            <div class="speakers-hover">
                <div class="speakers-hover-content">
                </div>
            </div>
            <img src="../css/2023_style/img/team/{{ team.thumbnail }}" class="img-responsive img-centered" alt="">
        </a>
        <div class="speakers-caption">
            <h4>{{ team.title }}</h4>
            <p class="text-muted">{{ team.subtitle }}</p>
        </div>
    </div>
{% endfor %}

Some of the sections in _includes/2023_data/ also belong together, like team_members.html and team_members_info.html, where the latter file is the information that is shown when you click on a team member on the main page. This information is also drawn from the same yaml file using sass syntax:

{% for team in site.data.twenty_23.teams %}
...

Data Files

All files in _data/twenty_23 are yaml files. See the section above for how html and yaml files work together. The files are arranged in key:value pairs, similar to a dictionary in Python. In order to change the information in a yaml file, change the value behind the colon, NOT the key. For example, to change the name of a team member, change the value behind name: in the yaml file, NOT the key itself:

- title: "Website Wizard"
  name: Anna Sophia Stein
  subtitle: MA Linguistics student
  img: anna.jpg
  thumbnail: anna.jpg
  alt: picture of anna
  topic: TBD
  description: TBD

Subpages

Some pages have separate urls instead of being sections on the main page. These are subpages, as opposed to sections, which are managed in the _2023_pages/ folder. They include, for example, the subpages of the 'More Info' section or some additional pages that we made for the 'Call for papers'.

In contrast to the sections, the subpages are always reachable via url once the file exists in _2023_pages/. For example, the faq page is reachable via https://tacos2023.github.io/faq, even if it is not linked/referenced anywhere explicitly. The only way to make a page unreachable is to change the status of the published parameter in the corresponding file to false as shown below.

---
layout: 2023_default
permalink: /cfp
title: Call for Papers
published: true
---

The layout parameter refers to the design of the page, which is managed in the _layouts/ folder (we reccommend keeping the default as it is easy to work with and plain). The permalink parameter is the url of the page that gets added onto the base url (tacosconference.github.io + <PERMALINK> = tacosconference.github.io/faqs). The title parameter is the title of the page, which is shown in the browser tab. The published parameter determines whether the page is reachable via url or not.

Anything else below the yaml header is the content of the page, which is written in html (or anything else that you want).