Quarto project files

Templates of Quarto _quarto.yml project configuration files

Quarto
YAML
Author

G.Fraga Gonzalez & E. Furrer

Published

December 16, 2024

When working with more than one dynamic report it will be very convenient to use Quarto project files. Visit the Quarto official documentation site for more details on Quarto projects. In short, Quarto projects allow us to:

The project settings are provided by a _quarto.yml file. If you have such file in a folder and do quarto::quarto_render() in R, it will detect render the files according the settings specified in the _quarto.yml.

Template - Website with a navigation bar on top

Comments preceeded by # suggest alternatives in some fields. Specifying project type and format is required. Most other settings like logos text and content of navigation bar, themes, etc are optional and we encourage trying out different options.

project:
  type: website
  output-dir: your-output-directory # omit this line to use current dir
  
website:
    title: Home #or other website title
    page-navigation: true
    back-to-top-navigation: true
    page-footer: 
        left: |
          Created by the [YOURTEAM](URL to your team's website)
        center: |
            [About Us](about/index.html)
        right: |
           This is a website under the [LICENSE NAME](URL to license web) 
          
           
    favicon:  path-to-your-logo/logo-filename.jpg # or .png, .svg
    
    navbar:        
        logo:  path-to-your-logo/logo-filename.jpg 
                    
        right: # or left                 
          - text: "Page 1-title"            
            href: path-to-page1-contents/index.qmd
          - text: "Page 2-title"            
            href: path-to-page2-contents/index.qmd
          - text: "Page 3-title"            
            href: path-to-page3-contents/index.qmd
           

format:
    html:         
        grid:
          sidebar-width: 350px
        theme: #see how they look inhttps://bootswatch.com/       
            light: cosmo    
            dark:  darkly
        self-contained: true

freeze: auto
 

Template 2 - Website with top nav bar and a side bar

This website has a navigation bar and a sidebar only in one of the subpages Comments preceeded by # suggest alternatives in some fields. Specifying project type and format is required. Most other settings like logos text and content of navigation bar, themes, etc are optional and we encourage trying out different options.

project:
  type: website
  output-dir: your-output-directory # omit this line to use current dir
  
website:
    title: Home #or other website title
    page-navigation: true
    back-to-top-navigation: true
    page-footer: 
        left: |
          Created by the [YOURTEAM](URL to your team's website)
        center: |
            [About Us](about/index.html)
        right: |
           This is a website under the [LICENSE NAME](URL to license web) 
          
           
    favicon:  path-to-your-logo/logo-filename.jpg # or .png, .svg
    
    navbar:        
        logo:  path-to-your-logo/logo-filename.jpg 
                    
        right: # or left                 
          - text: "Page 1-title"            
            href: path-to-page1-contents/index.qmd
          - text: "Page 2-title"            
            href: path-to-page2-contents/index.qmd
          - text: "Page 3-title"            
            href: path-to-page3-contents/index.qmd
           
    sidebar:          
        - id: Page 1-title 
          title: "Enter your page 1 sidebar title"                  
          style: "docked"       
          contents:
            - path-to-page1-contents/index.qmd
            - section: "Contents section 1"              
              contents: 
                - path-to-page1-contents/content1.qmd
                - path-to-page1-contents/content2.qmd
                - path-to-page1-contents/content3.qmd
                
                                
            - section: "Contents section 2"    
              contents: 
                - "...coming soon..."            
                
         
        - id: ""  #This will leave all other pages without a sidebar
          title: ""

format:
    html:         
        grid:
          sidebar-width: 350px
        theme: #see how they look inhttps://bootswatch.com/       
            light: cosmo    
            dark:  darkly
        embed-resources: true

freeze: auto
 

:::

Back to top