Advanced Tips and Tricks for your Obsidian Digital Garden

These are some advanced tips you can use for your Obsidian Digital Garden.

Note: This should only be viewed if you are remotely knowledgeable at development/programming. This will require more advanced knowledge on GitHub and programming. You have been warned.

Pass through YAML/Properties to view them on your Digital Garden

I will be referring to YAML/Frontmatter as “Properties” throughout this.

I have the following properties on a file that I want to show on my Digital Garden:

---
isOpenSource: false
isFree: false
isPaid: true
paidAmount: 5.00
urlToPricing: <https://google.com>
---

This is just an example of some of the YAML cause I have a lot lol
Anyway, I have that at the top of my file. You will want to publish any file you have properties you want to pass through. Once they are published, visit your digitalgarden repository.

You will want specifically go to the src/site/_includes/components directory in GitHub like so:

You will want to click “add file” at the top right and create a new file. When you name the file type the following user/notes/header/frontmatter.njk as this will be where the file will be located as well as the name for it.

Now this file will contain a language that looks similar to JavaScript (to me at least). Anything you place in this file will go below your title and possible creation/updated time and date.
For every block you will want to include an “if” statement. These statements state that if the property exists then it will display, otherwise, it will be hidden. That looks like this:

{%- if isOpenSource == true -%}
<p>This item is open source! You can put emojis in here or anything else that can be displayed on an HTML/CSS website!</p>
{%- endif -%}

{%- if isOpenSource == false -%}
<p>This item is closed source.</p>
{%- endif -%}

{%- if isFree == true -%}
<p>This item is free!</p>
{%- endif -%}

{%- if isFree == false -%}
<p>This item is <strong>not</strong> free!</p>
{%- endif -%}

{%- if isPaid == false -%}
<p>This item is <strong>not</strong> paid!</p>
{%- endif -%}

{%- if isPaid == true -%}
<p>This item is paid {%- if paidAmount -%}and it is {{paidAmount}}${%- endif -%}</p>
{%- endif -%}

{%- if urlToPricing -%}
<p>You can find the pricing <a href="{{urlToPricing}}" target="_blank">here</a>!</p>
{%- endif -%}

Just copy and paste the above to your frontmatter.njk file and publish it to your repository.

Once you do that, visit your plugin settings and then click on “Manage note settings” under “Features” and check the boxes of what you would like to show but especially make sure to check Let all frontmatter through.
Once you do that give it a few minutes to apply to your site and when you visit the page that you have frontmatter that you are passing through you should see it on the page.

If you want to read about more files that you can create, check out the official documentation. If you have more questions you can post them below and I’d be happy to guide you through adding some additional features to your digital garden!

As I find new things I will be updating this file with new tutorials. Right now it is pretty basic but I hope to include tons of different things in the future!