Quarto Academic Website Examples and Tips
Example Quarto academic websites I reference occasionally
Template I adapt you may find useful
| Template | Web | GitHub |
|---|---|---|
| Academic | https://drganghe.github.io/quarto-academic-website-template/ | https://github.com/drganghe/quarto-academic-website-template |
Website examples of the template
Note: If you’d like to use the template, please avoid forking my actual websites directly, as you will receive notifications whenever I update it. If you choose to do so, please be sure to remove my personal Google Analytics ID and MS Clarity ID from your site. Instead, I recommend forking the Quarto Academic website template to build your own website.
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 specific categories
To display a subset of items, use the include and exclude options. Below is an example of listing publications by category:
content:
- publications.yml
include:
categories: "supply-chain"Here, publications.yml is a YAML file containing a list of publications with predfined categories, and categories is the key used for filtering. The result will display only publications that match the specified category.
Here is an example, and source code.
Listing external items
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"For efficiency, store multiple items in a YAML(.yml) file and reference it in Quarto.
Here is an example, and source code.
Exporting Quarto Revealjs slides to PDF
Revealjs’s default PDF Export omits footnotes, which is not acceptable if citations and sources are used. A workaround is to use decktape:
decktape automatic lecture1.html lecture1.pdfIf you encounter font error when opening the PDF:
“Cannot extract the embedded font ‘BAAAAA+SourceSansPro-Regular’. Some characters may not display or print correctly.”
Use Adobe Acrobat tools to fix it:
- Open the PDF in Adobe Acrobat.
- Go to
Use print production>Preflight>Analyze and fix it(default options). - Apply the necessary font correction.
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.