Pug Templates

This plugin lets you render Pug templates in your Obsidian vault.

Disclaimer

This repository and its author are not affiliated with Pug.

How it works

This plugin registers a Markdown post processor for pug code blocks. The content of each source block is fed to Pug's render() function, and the current note's properties, also known as "front matter", are included in Pug's rendering context as the variable fm.

This plugin makes use of the FileSystemAdapter API to read files in your vault's configuration directory.

Usage

Here is an example page file:

---
title: Simple Test
summary: |
  This test demonstrates using the Pug templating language.
list:
  - one
  - two
  - three
---

```pug
h2= fm.title
p
  | #{fm.summary}
  | Most of this content comes from the page's frontmatter.
ul
  each val in ['one', 'two', 'three']
    li= val
```

Which produces the following:

Simple Test

This test demonstrates using the Pug templating language. Most of this content comes from the page's frontmatter.

• one
• two
• three

Including/Extending Partial Templates

From the Pug documentation:

Includes allow you to insert the contents of one Pug file into another.

If the path is absolute (e.g., include /root.pug), it is resolved by prepending options.basedir. Otherwise, paths are resolved relative to the current file being compiled.

If no file extension is given, .pug is automatically appended to the file name.

This plugin supports include (and extends) with the "Includes folder" setting, which is pug-includes by default. This setting's value is provided as the basedir option for Pug. If you create the folder in your vault's .obsidian/ configuration folder, then you can store your partial templates there.

For example, if you create the following file:

// .obsidian/pug-includes/test.pug
div
  span This text is from an include.

Then you can reference it in a note or another partial like so:

```pug
include /test.pug
```

Dataview Integration

This plugin integrates with the Dataview plugin. If you have installed and enabled Dataview, then its API will be exposed to the Pug rendering context under the dv variable.

However, not all methods from the Dataview JavaScript API that you might use in a dataviewjs code block are supported. Dataview's rendering methods, such as dv.header() or dv.table(), do not work.

A fair bit of discovery and testing remains to be done.

Developer Notes

This is a fork of Obsidian's sample plugin repository. Changes other than implementing this plugin include:

• Various modifications to the release GitHub workflow.
• Adding a custom esbuild plugin to copy this plugin's files into a test vault.

Test Vault

This repository contains an example Obsidian vault to showcase and test the plugin's functionality. You will need to enable this plugin after initially opening the folder in Obsidian.

hot-reload

This repository also declares pjeby's hot-reload plugin as a submodule within the test vault's .obsidian/plugins/ directory. In order to actually download hot-reload, you must run the following commands after cloning this repository:

git submodule init
git submodule update

After that, you should be able to run npm run dev and then open the vault.