How to use custom listings derived from Quarto's default ones?

[netw0rkf10w]

Description

I'm trying to build a "List of publications" page for my personal website, using Quarto's listing feature. However, the default templates do not suit very well my need, so I tried creating customs templates based on the default ones.

What I did is to download this folder: https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/projects/website/listing and copy its content to the root folder of my project.

At the root I also have publications.qmd with the following content:

---
title: "Publications"
listing:
  template: item-default.ejs.md
  contents: publications
  fields: [image, title, author, resources]
---

However this resulted in an error: "ReferenceError: listing is not defined".

My question is how to use the dowloaded templates for my website.

Thank you in advance for your help!

[dragonstyle]

Quarto's listing templates can be challenging to use since they actually import other templates.

For example, the template listing-default.ejs then imports and uses item-default.ejs.md to render each item. You can try to follow the importing stack if you'd like or you might find it easier to start with some examples here:

https://quarto.org/docs/websites/website-listings-custom.html

and build those up to be what you'd like.

HTH!

(edited to correct file name)

[ehudkr]

I just tried it too (copying the listing directory locally in order to later tweak it).
Unfortunately, I can say that pointing to listing-default.ejs.md (instead of item) does not in fact clear it up.
I still get ERROR: ReferenceError: listing is not defined

Any other ideas how can this be achieved? (I also saw #7089 (reply in thread) but I too am looking to replicate the style of the default listing)
Many thanks

Full trace stack

ERROR: ReferenceError: listing is not defined

ReferenceError: listing is not defined
    at eval (eval at <anonymous> (file:///C:/Users/204048756/AppData/Local/Programs/Quarto/bin/quarto.js:4547:16), <anonymous>:13:34)
    at renderEjs (file:///C:/Users/204048756/AppData/Local/Programs/Quarto/bin/quarto.js:90994:18)
    at templateMarkdownHandler (file:///C:/Users/204048756/AppData/Local/Programs/Quarto/bin/quarto.js:96428:30)      
    at markdownHandler (file:///C:/Users/204048756/AppData/Local/Programs/Quarto/bin/quarto.js:97366:24)
    at file:///C:/Users/204048756/AppData/Local/Programs/Quarto/bin/quarto.js:97271:31
    at Array.forEach (<anonymous>)
    at listingHtmlDependencies (file:///C:/Users/204048756/AppData/Local/Programs/Quarto/bin/quarto.js:97270:24)      
    at async Object.formatExtras (file:///C:/Users/204048756/AppData/Local/Programs/Quarto/bin/quarto.js:97791:49)    
    at async runPandoc (file:///C:/Users/204048756/AppData/Local/Programs/Quarto/bin/quarto.js:79981:63)
    at async renderPandoc (file:///C:/Users/204048756/AppData/Local/Programs/Quarto/bin/quarto.js:81044:26)

[tong-zeng]

It seems "listing" is a variable passed to the ejs template when it compiles. However, when the custom ejs template compiles, there is no such listing object passed in.

[ehudkr]

That's maybe a good hint. Do you think it has to do with listing key from the yml used to specify the content or is something else entirely? The ejs code in item-default makes it look like some utility object (but I do not know js).

[tong-zeng]

I think the listing key is some internal variable of Quarto, and it was passed to ESJ template during the compilation. However, for custom EJS template, that listing variable is not passed into the customized EJS template.

I solved the problem by simply removing all the variables associated with the listing key. You probably don't need those variables, just use your own data. Please see the documentations here: https://quarto.org/docs/websites/website-listings-custom.html

[gaardhus]

why wouldn't I need to pass the listing variable? It contains "important" information for ie. sorting and pagination.