Quarto Academic Site Examples and Tips
Example Quarto academic websites I reference regularly
Templates I adapt you may find useful
Useful tips for building an academic Quarto site
Using “Includes” for reusable content
To streamline updates across your site, use Quarto’s includes feature for reusable elements like syllabus statements, social sharing options, academic badges, and other reuseable materials. By doing this, you only need to update a single source file, and then rerender the site to reflect changes across all pages.
{{include _statement.qmd}}Prefixing include file names with an underscore (“_“) ensures they won’t be rendered directly by Quarto.
Here is an example course description, and reuse it in mainpage and syllabus.
Academic badges
Display academic badges like the Dimension Citation badge and Altmetric badge.
Here’s an example for embedding them:
<span class="__dimensions_badge_embed__" data-doi="10.1038/s41586-022-05316-6" data-style="large_rectangle"></span> <div data-badge-popover="right" data-badge-type="1" data-doi="10.1038/s41586-022-05316-6" data-hide-no-mentions="true" class="altmetric-embed"></div>Replace the doi with your own.
Make sure to include below scripts in the same page to enable the badges:
<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
<script async src="https://badge.dimensions.ai/badge.js" charset="utf-8"></script>You can also showcase your highly cited and hot papers using custom badges.
{width=20 fig-alt="Highly cited paper"} {width=20 fig-alt="Hot paper"}Here is an example, and the source code.
The art of listing
Listings are a powerful tool in Quarto, offering flexibility for creating visually appealing and organized pages. By adjusting listing options, you can control how content is presented.
Type: default, grid, table
Options: grid-columns, image-height, grid-item-align
Display: fields and field-display-names
By mastering these options, you can easily create pages that fit your content needs while maintaining a clean, user-friendly design.
Here is an example, and source code; another example, and source code.
Listing external items
If you need to list external resources with key metadata, you can use this format to create clear, linked listings.
- path: https://www.nature.com/articles/s41586-022-05316-6
image: /files/images/journal/nature.avif
title: "Quantifying the cost savings of global solar photovoltaic supply chains"
subtitle: "*Nature*"
description: "Globalized supply chain has saved solar installers in the U.S., Germany, and China $67B 2008-2020, and solar prices will be 20-30% higher in 2030 if countries move to produce domestically."
date: "2022-10-26"If you have many items to list, it’s efficient to store them in a YAML(.yml) file. You can then reference this YAML file in Quarto.
Here is an example, and source code.
Social sharing
For easy setup of social sharing buttons, AddToAny is a simple solution.
Using includes files here will make it easier to manage updates, as any changes to social buttons need only be made once.
Here is an example.