spcanelon / silvia

Personal website of Silvia Canelón
https://silviacanelon.com
Other
78 stars 31 forks source link

Silvia Canelón - Hello Quarto: Porting my Website from Hugo Apéro #100

Open utterances-bot opened 1 year ago

utterances-bot commented 1 year ago

Silvia Canelón - Hello Quarto: Porting my Website from Hugo Apéro

https://silviacanelon.com/blog/2023-09-29-hello-quarto/

emilyriederer commented 1 year ago

Thanks for the great post! This motivated me to make the transition, too. I especially appreciated the warning about Utterances because I love those too. I dug around a bit more, and I think that I found a way that you can potentially bring your old comments over if you want with just two changes to your _quarto.yml file:

  1. Use the pagetitle: option to force post titles to follow the same pattern as the old site ( discucssion here )
  2. Update your utterances: options to use issue-term: title ( more about options here )

So, for example, the relevant parts of my yaml file look like this:

project:
  type: website

website:
  title: "Emily Riederer"
  favicon: icon.png
  comments: 
    utterances:
      repo: emilyriederer/website
      issue-term: title
format:
  html:
    pagetitle: "{{< meta title >}} | Emily Riederer"

and (serving locally - not yet deployed live to internet) that brought back my old comments!

spcanelon commented 1 year ago

Emily, thanks so much for these tips and resources! I made the changes you outlined (#102), deployed my site, and was very happy to see my Utterances return! 💬 🥳

Also, I'm looking forward to seeing your brand new site! 🚀

prncevince commented 1 year ago

Thanks a ton Silvia! I found your HTML partials explanation particularly helpful. I didn’t even know that it was an option. Bravo on the new Quarto site! 👏 🙌

prncevince commented 1 year ago

Additionally, the Pandoc manual's Partials section is a great resource for understanding these things. All resources just helped me add a custom partial to my personal site. Examples below:

_quarto.yml:

format:
  html:
    template: _pandoc/template.html
    template-partials: [_pandoc/custom.html]

_pandoc/template.html, i.e. contents of template.html with the new custom partial added:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>

<head>

$metadata.html()$

{... truncated}

$custom.html()$

</body>

</html>

_pandoc/custom.html, i.e. your custom html:

<script>
  console.log('Hello world!')
</script>
spcanelon commented 1 year ago

Thank you @prncevince! I'm happy to hear the post was helpful. And thanks for sharing the additional resource on partials! I'm sure it will come in handy to me and others 🙌🏽

Kkhurana007 commented 1 month ago

Thanks for your time to compile this amazing post! 👌