Is it possible to read file yaml properties inside HTML tags

Help
, ,
1

What I’m trying to do

I want to take my YAML properties and fill them into a notes HTML.

---
Object: Community
RecordType: Client
Name: Test Community
Email: [email protected]
---
`=this.Email`         %% works %%
<p>`=this.Email`</p>  %% does not work %%

Things I have tried

I have tried searching in both Home - Obsidian Help and this forum here and was unable to find the syntax that would make this work.

I can achieve what I am looking for with Templaters plugin, but as soon as I want to update a property of a file, the text in the HTML is no longer linked to the frontmatter.

Does this have something to do with the <script> sanitizing that the help docs reference?

Hope I am just missing something simple.

Thanks!

2

Check the Templater documentation too, since that’s what you’re using.

I’d guess it doesn’t and won’t work because Markdown doesn’t render inside HTML blocks and the Templater code is in a Markdown code span.

3

Thank you @CawlinTeffid

Okay, so I found that in Templater you can use Dynamic Commands.

So I could do:
<%+ tp.frontmatter.Email %>

Which will render on Preview Mode the way I want!

However… How do I print a Dynamic Command from a template with out it trying to resolve itself?

So my Template will print our my HTML with Dynamic tp Commands in it. Is there a way to “escape” a tp command?

template.md

<% tp.file.include(tp.file.find_tfile("Community.html")) %>

Community.html

<div>
	<sub><%+ tp.frontmatter.Object %> - <%+ tp.frontmatter.RecordType %></sub>
	<h1><%+ tp.frontmatter.rTitle %></h1>
</div>

newCommunityFile.md

Editor Mode

<div>
	<sub>Nan - NaN</sub>
	<h1>NaN</h1>
</div>

Preview Mode

NaN - NaN
NaN
4

I figured it out!

PageLayouts/Community.html

<body>
	<header>
		<div class="record-block record-header">
			<div>
				<sub><%+ tp.frontmatter.Object %> - <%+ tp.frontmatter.RecordType %></sub>
				<h1><%+ tp.frontmatter.rTitle %></h1>
			</div>
			<div class="flex-container">
				<div class="record-data">
					<sub>Website</sub>
					<p><%+ tp.frontmatter.Website %></p>
				</div>
				<div class="record-data">
					<sub>Phone</sub>
					<p><%+ tp.frontmatter.Phone %></p>
				</div>
				<div>
					<sub>Email</sub>
					<p><%+ tp.frontmatter.Email %></p>
				</div>
			</div>
		</div>
	</header>
</body>

Templates/Community.md

<%*
let recordType = await tp.system.suggester(
	["Main", "Client", "Vendor"],
	["Main", "Client", "Vendor"],
	true,
	"Main",
	10
);
let name = await tp.system.prompt("Community Name", "", true, false);
const record = await tp.user.newRecord("Community", recordType, name);
await tp.file.move(record.objRelitivePath());
const pageLayoutFile = tp.file.find_tfile("Community.html");
const pageLayout = await app.vault.read(pageLayoutFile);
_%>
<% await record.toYaml() %>
<% pageLayout %>
1 Like
5

I’m a little late to the party, but if you wanted to use dataview you’d need to enclose it all within dataview. Especially note that markdown doesn’t work within html tags, but you can use dataview to produce html.

So a simplistic example using an url property, could look like:

`= "<a href='" + this.url + "'>" + this.url + "</a>" `

If you switched to dataviewjs, you could use more advanced stuff as well, and it would kind of resemble the templater variant, but using javascript string interpolation instead.

1 Like
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.