Quarto Blog

Quick start for quarto

Prerequisite:

To avoid the light-box filter error, install the lightbox extension inside the project folder itself. It is required for function of lightbox. (see Complete Lightbox Example post for more details)

quarto add quarto-ext/lightbox

To create a blog page in Quarto:

1. Add the menu in the navbar section of the _quarto.yml file

         - href: blog.qmd
           text: "Blog"

2. Create blog.qmd file and a posts folder.

   touch blog.qmd  
   mkdir posts 

3. In the blog.qmd file add the head yml code:

   title: "Blog"
   listing:
     contents: posts # Contents will be taken from the posts folder
     sort: "date desc"
     type: default
     categories: true
   page-layout: full
   #margin-header: signup.html
   title-block-banner: "#EDF3F9"
   title-block-banner-color: body
   search: false

   This file is the the “main page” or “landing page” for the blogs.

   All subsequent blog files need to be saved in the posts folder.The yml in this file will direct to the folder and the way is displayed.　 In other words, the yml section, the listing for this page comes from the contents in the folder posts…“contents: posts”

   Q: For organization convenience… Can I place this landing page file directly into the posts folder? No, the posts will be displayed in this page.

4. Each blog post should have the proper yaml heading:

   1. Create a .qmd file within the /posts folders.

      cd posts
      touch file_name.qmd

   2. Minimal example:

      title: "Minimal post"
      description: "Post description"
      author: "Marcelo Rosales"
      date: "2023/03/13"
      date-modified: last-modified
      categories:
        - news
        - code
        - analysis

   3. Example with lightbox filters, and html format

      title: "Complete Lightbox Example"
      description: "How to use Lightbox"
      author: "Marcelo Rosales"
      date: "2023/07/26"  # Publication date, also can use: today, but changes when updated
      date-meta: "2023/07/20"  # Date of document creation or last modification. It is not shown in render
      date-modified: last-modified
      categories:
        - photos
        - lightbox
        - gallelry
      filters:
        - lightbox
      lightbox:
        match: auto
        effect: fade
        desc-position: right
        loop: true
      #  css-class: "my-css-class" #only if custom css file exists. 
      format: 
        html: 
          code-fold: true
          code-copy: true
          code-overflow: wrap
      Editor: Source 

   4. There are also specific templates, ex. Jolla template:

      title: "Jolla template"
      description: "quarto templates"
      author: "Marcelo Rosales"
      date: "2023/07/26"  # Publication date, also can use: today, but changes when updated
      date-meta: "2023/07/20"  # Date of document creation or last modification. It is not shown in render
      date-modified: last-modified
      categories:
        - quarto
        - code
        - templates
      
      about:
        id: hero-heading
        template: jolla
        # image: images/img01.png
        links:
          - icon: twitter
            text: twitter
            href: https://twitter.com
          - icon: github
            text: Github
            href: https://github.com

5. Add content