Website Options

All available options for website projects are documented below. See Creating a Website for an in-depth guide to creating websites with Quarto.

Project

Options that define the type, render targets, and output of a project. Project options are specified under the project key. For example:

_quarto.yml
project:
  type: website
  output-dir: _site
title
type

Project type (default, website, book, or manuscript)

render

Files to render (defaults to all files)

execute-dir

Control the working directory for computations.

  • file: Use the directory of the file that is currently executing.
  • project: Use the root directory of the project.
output-dir

Output directory

lib-dir

HTML library (JS/CSS/etc.) directory

resources

Additional file resources to be copied to output directory

preview

Options for quarto preview (see Preview)

pre-render

Scripts to run as a pre-render step

post-render

Scripts to run as a post-render step

Preview

Specify options that control the behavior of quarto preview within the preview key. For example:

_quarto.yml
project:
  type: website
  output-dir: _site
  preview:
    port: 4200
    browser: false

Available preview options include:

port

Port to listen on (defaults to random value between 3000 and 8000)

host

Hostname to bind to (defaults to 127.0.0.1)

serve

Options for external preview server (see Serve)

browser

Open a web browser to view the preview (defaults to true)

watch-inputs

Re-render input files when they change (defaults to true)

navigate

Navigate the browser automatically when outputs are updated (defaults to true)

timeout

Time (in seconds) after which to exit if there are no active clients

Serve

If you are creating a project extension for another publishing system that includes its own preview server (for example, Hugo or Docusaurus) then use the preview: serve options to customize the behavior of the preview server.

_quarto.yml
project:
  type: website
    preview:
      serve:
        cmd: "hugo serve --port {port} --bind {host} --navigateToChanged"
        env:
          HUGO_RELATIVEURLS: "true"
        ready: "Web Server is available at"
cmd

Serve project preview using the specified command. Interpolate the --port into the command using {port}.

args

Additional command line arguments for preview command.

env

Environment variables to set for preview command.

ready

Regular expression for detecting when the server is ready.

See the Hugo and Docusaurus extension source code for example usages of preview: serve.

Website

Options that affect website output. Website options are specified under the website key. For example:

_quarto.yml
website:
  title: "My Website"
  image: opengraph.png
  page-navigation: true
title

Website title

description

Website description

favicon

The path to the favicon for this website

site-url

Base URL for published website

site-path

Path to site (defaults to /). Not required if you specify site-url.

repo-url

Base URL for website source code repository

repo-link-target

The value of the target attribute for repo links

repo-link-rel

The value of the rel attribute for repo links

repo-subdir

Subdirectory of repository containing website

repo-branch

Branch of website source code (defaults to main)

issue-url

URL to use for the ‘report an issue’ repository action.

repo-actions

Links to source repository actions (none or one or more of edit, source, issue)

reader-mode

Displays a ‘reader-mode’ tool which allows users to hide the sidebar and table of contents when viewing a page.

google-analytics

Enable Google Analytics for this website

announcement

An announcement displayed at the top of the page. (see Announcement)

cookie-consent

Quarto includes the ability to request cookie consent before enabling scripts that set cookies, using Cookie Consent.

The user’s cookie preferences will automatically control Google Analytics (if enabled) and can be used to control custom scripts you add as well. For more information see Custom Scripts and Cookie Consent.

search

Site search (true or false to enable/disable, or provide custom Search Options

navbar

Navbar options (see Navbar)

sidebar

Sidebar options (see Sidebar)

body-header

Markdown to insert at the beginning of each page’s body (below the title and author block).

body-footer

Markdown to insert below each page’s body.

margin-header

Markdown to place above margin content (text or file path)

margin-footer

Markdown to place below margin content (text or file path)

page-navigation

Provide next and previous article links in footer

back-to-top-navigation

Provide a ‘back to top’ navigation button

bread-crumbs

Whether to show navigation breadcrumbs for pages more than 1 level deep

page-footer

Page footer. Text content or page footer definition.

image

Default site thumbnail image for twitter /open-graph

image-alt

Default site thumbnail image alt text for twitter /open-graph

comments
open-graph

Generate Open Graph metadata (see Open Graph options)

twitter-card

Generate Twitter Card metadata (see Twitter Card options)

other-links

A list of other links to appear below the TOC.

code-links

A list of code links to appear with this document.

drafts

A list of input documents that should be treated as drafts. Read more at Website Drafts.

draft-mode

How to handle drafts that are encountered.

visible - the draft will visible and fully available unlinked - the draft will be rendered, but will not appear in navigation, search, or listings. gone - the draft will have no content and will not be linked to (default).

Announcement

An announcement that appears at the top of the site. For example:

---
website:
  announcement: 
    content: "**New** - this is an announcement" 
    position: below-navbar 
---
content

The content of the announcement

dismissable

Whether this announcement may be dismissed by the user.

icon

Name of bootstrap icon (e.g. github, twitter, share) for the announcement. See https://icons.getbootstrap.com/ for a list of available icons

position

The position of the announcement. One of above-navbar (default) or below-navbar.

type

The type of announcement. One of primary, secondary, success, danger, warning, info, light or dark. Affects the appearance of the announcement.

Social

Social metadata is provided as a subkey of website options. You can specify true to generate social metadata using a set of default option, or specify one or more Twitter or Open Graph specific options as enumerated below. For example:

_quarto.yml
website:
  open-graph: true
  twitter-card: 
    site: "@sitehandle"

Twitter Card

Set Twitter options under the twitter-card key:

_quarto.yml
website:
  twitter-card: 
    site: "@sitehandle"
title

The title of the page. Note that by default Quarto will automatically use the title metadata from the page. Specify this field if you’d like to override the title for this provider.

description

A short description of the content. Note that by default Quarto will automatically use the description metadata from the page. Specify this field if you’d like to override the description for this provider.

image

The path to a preview image for the content. By default, Quarto will use the image value from the format metadata. If you provide an image, you may also optionally provide an image-width and image-height.

image-alt

The alt text for the preview image. By default, Quarto will use the image-alt value from the format metadata. If you provide an image, you may also optionally provide an image-width and image-height.

image-width

Image width (pixels)

image-height

Image height (pixels)

card-style

Card style (summary or summary_large_image).

If this is not provided, the best style will automatically selected based upon other metadata. You can learn more about Twitter Card styles here.

creator

@username of the content creator (must be a quoted string)

site

@username of the website (must be a quoted string)

Open Graph

Set Open Graph options under the open-graph key:

_quarto.yml
website:
  open-graph: 
    title: "Title for Open Graph"
title

The title of the page. Note that by default Quarto will automatically use the title metadata from the page. Specify this field if you’d like to override the title for this provider.

description

A short description of the content. Note that by default Quarto will automatically use the description metadata from the page. Specify this field if you’d like to override the description for this provider.

image

The path to a preview image for the content. By default, Quarto will use the image value from the format metadata. If you provide an image, you may also optionally provide an image-width and image-height.

image-alt

The alt text for the preview image. By default, Quarto will use the image-alt value from the format metadata. If you provide an image, you may also optionally provide an image-width and image-height.

image-width

Image width (pixels)

image-height

Image height (pixels)

locale

Locale of open graph metadata

site-name

Name that should be displayed for the overall site. If not explicitly provided in the open-graph metadata, Quarto will use the website or book title by default.

Comments

You can add commenting to your website using either Hypothesis, Utterances, or Giscus.

Hypothesis

Enable and configure Hypothesis commenting via comments key. For example:

_quarto.yml
website:
  comments: 
    hypothesis:
      theme: clean
      openSidebar: false
client-url

Override the default hypothesis client url with a custom client url.

openSidebar

Controls whether the sidebar opens automatically on startup.

showHighlights

Controls whether the in-document highlights are shown by default (always, whenSidebarOpen or never)

theme

Controls the overall look of the sidebar (classic or clean)

enableExperimentalNewNoteButton

Controls whether the experimental New Note button should be shown in the notes tab in the sidebar.

usernameUrl

Specify a URL to direct a user to, in a new tab. when they click on the annotation author link in the header of an annotation.

services

Array of service definitions

branding

Custom branding/colors to apply to UI

externalContainerSelector

A CSS selector specifying the containing element into which the sidebar iframe will be placed.

focus

User focused filter set for the available annotations on a page

requestConfigFromFrame

Specify a host iframe to request configuration from

assetRoot

The root URL from which assets are loaded.

sidebarAppUrl

The URL for the sidebar application which displays annotations.

For additional documentation on the Hypothesis options enumerated above, see the Hypothesis Publisher Config documentation.

Utterances

Enable and configure Utterances commenting via the comments key. For example:

_quarto.yml
website:
  comments: 
    utterances:
      repo: quarto-dev/quarto-web
repo

The Github repo that will be used to store comments.

label

The label that will be assigned to issues created by Utterances.

theme

The Github theme that should be used for Utterances (github-light, github-dark, github-dark-orange, icy-dark, dark-blue, photon-dark, body-light, or gruvbox-dark)

issue-term

How posts should be mapped to Github issues (pathname, url, title or og:title)

Giscus

Enable and configure usage of the Giscus app via the comments key. For example:

_quarto.yml
website:
  comments:
    giscus:
      repo: quarto-dev/quarto-web
repo

The Github repo that will be used to store comments.

In order to work correctly, the repo must be public, with the giscus app installed, and the discussions feature must be enabled.

repo-id

The Github repository identifier.

You can quickly find this by using the configuration tool at https://giscus.app. If this is not provided, Quarto will attempt to discover it at render time.

category

The discussion category where new discussions will be created. It is recommended to use a category with the Announcements type so that new discussions can only be created by maintainers and giscus.

category-id

The Github category identifier.

You can quickly find this by using the configuration tool at https://giscus.app. If this is not provided, Quarto will attempt to discover it at render time.

mapping

The mapping between the page and the embedded discussion.

  • pathname: The discussion title contains the page path
  • url: The discussion title contains the page url
  • title: The discussion title contains the page title
  • og:title: The discussion title contains the og:title metadata value
  • any other string or number: Any other strings will be passed through verbatim and a discussion title containing that value will be used. Numbers will be treated as a discussion number and automatic discussion creation is not supported.
reactions-enabled

Display reactions for the discussion’s main post before the comments.

loading

Specify loading: lazy to defer loading comments until the user scrolls near the comments container.

input-position

Place the comment input box above or below the comments.

theme

The giscus theme to use when displaying comments. Light and dark themes are supported. If a single theme is provided by name, it will be used as light and dark theme. To use different themes, use light and dark key:

website:
  comments:
    giscus:
      theme:
        light: light # giscus theme used for light website theme
        dark: dark_dimmed # giscus theme used for dark website theme
language

The language that should be used when displaying the commenting interface.

Listings

Listings enable you to automatically generate the contents of a page (or region of a page) from a list of Quarto documents or other custom data. You can enable listings on a page using the listing option in the document front matter. For example, setting listing: default will generate a listing of all documents in the directory (with the exception of the current document):

---
title: "Listing Example"
listing: default
---

To customize the listing, specify additional options under the listing key:

---
title: "Listing Example"
listing: 
  contents: posts
  type: grid
  grid-columns: 2
---
id

The id of this listing. When the listing is rendered, it will place the contents into a div with this id. If no such div is defined on the page, a div with this id will be created and appended to the end of the page.

If no id is provided for a listing, Quarto will synthesize one when rendering the page.

type

The type of listing to create. Choose one of:

  • default: A blog style list of items
  • table: A table of items
  • grid: A grid of item cards
  • custom: A custom template, provided by the template field
contents

The files or path globs of Quarto documents or YAML files that should be included in the listing.

sort

Sort items in the listing by these fields. The sort key is made up of a field name followed by a direction asc or desc.

For example: date asc

Use sort:false to use the unsorted original order of items.

max-items

The maximum number of items to include in this listing.

page-size

The number of items to display on a page.

sort-ui

Shows or hides the sorting control for the listing. To control the fields that will be displayed in the sorting control, provide a list of field names.

filter-ui

Shows or hides the filtering control for the listing. To control the fields that will be used to filter the listing, provide a list of field names. By default all fields of the listing will be used when filtering.

categories

Display item categories from this listing in the margin of the page.

  • numbered: Category list with number of items
  • unnumbered: Category list
  • cloud: Word cloud style categories
feed

Create an RSS feed for this page using the items in this listing (see Feed).

date-format

The date format to use when displaying dates (e.g. d-M-yyy). Learn more about supported date formatting values here.

max-description-length

The maximum length (in characters) of the description displayed in the listing. Defaults to 175.

image-placeholder

The default image to use if an item in the listing doesn’t have an image.

image-lazy-loading

If false, images in the listing will be loaded immediately. If true, images will be loaded as they come into view.

image-align

In default type listings, whether to place the image on the right or left side of the post content (left or right).

image-height

The height of the image being displayed (a CSS height string).

The width is automatically determined and the image will fill the rectangle without scaling (cropped to fill).

grid-columns

In grid type listings, the number of columns in the grid display. Defaults to 3.

grid-item-border

In grid type listings, whether to display a border around the item card. Defaults to true.

grid-item-align

In grid type listings, the alignment of the content within the card (left (default), right, or center).

table-striped

In table type listings, display the table rows with alternating background colors. Defaults to false.

table-hover

In table type listings, highlight rows of the table when the user hovers the mouse over them. Defaults to false.

template

The path to a custom listing template.

template-params

Parameters that are passed to the custom template.

fields

The list of fields to include in this listing.

field-display-names

A mapping that provides display names for specific fields. For example, to display the title column as ‘Report’ in a table listing you would write:

listing:
  field-display-names:
  title: "Report"
field-types

Provides the date type for the field of a listing item. Unknown fields are treated as strings unless a type is provided. Valid types are date, number.

field-links

The list of fields to display as hyperlinks to the source document when the listing type is a table. By default, only the title or filename is displayed as a link.

field-required

Fields that items in this listing must have populated. If a listing is rendered and one more items in this listing is missing a required field, an error will occur and the render will.

include

Items with matching field values will be included in the listing.

exclude

Items with matching field values will be excluded from the listing.

Feed

Enable an RSS feed for your listing by including the feed option:

---
title: "Listing Example"
listing:
  contents: posts
  feed:
    items: 10
---
items

The number of items to include in your feed. Defaults to 20.

type

Whether to include full or partial content in the feed.

  • full (default): Include the complete content of the document in the feed.
  • partial: Include only the first paragraph of the document in the feed.
  • metadata: Use only the title, description, and other document metadata in the feed.
title

The title for this feed. Defaults to the site title provided the Quarto project.

image

The path to an image for this feed. If not specified, the image for the page the listing appears on will be used, otherwise an image will be used if specified for the site in the Quarto project.

description

The description of this feed. If not specified, the description for the page the listing appears on will be used, otherwise the description of the site will be used if specified in the Quarto project.

language

The language of the feed. Omitted if not specified. See https://www.rssboard.org/rss-language-codes for a list of valid language codes.

categories

A list of categories for which to create separate RSS feeds containing only posts with that category

xml-stylesheet

The path to an XML stylesheet (XSL file) used to style the RSS feed.

About

Layout a simple about page for an individual or organization. Specify about page options under the about key in the document front matter:

---
title: About
about:
  template: jolla
  image: profile.jpg
  links:
    - icon: twitter
      text: twitter
      href: https://twitter.com
---

For more, see the About Pages documentation.

id

The target id of this about page. When the about page is rendered, it will place read the contents of a div with this id into the about template that you have selected (and replace the contents with the rendered about content).

If no such div is defined on the page, a div with this id will be created and appended to the end of the page.

template

The template to use to layout this about page. Choose from:

  • jolla
  • trestles
  • solana
  • marquee
  • broadside
image

The path to the main image on the about page. If not specified, the image provided for the document itself will be used.

image-alt

The alt text for the main image on the about page.

image-title

The title for the main image on the about page.

image-width

A valid CSS width for the about page image.

image-shape

The shape of the image on the about page.

  • rectangle
  • round
  • rounded
links

Links (as navigation items) to display on the about page.