I want to enable links written in properties in Obdisian Publish

[Cacapon]

What I’m trying to do

Hi there! I have question.
I would like to see the links listed on the property in Obsidian Publish as well.

I want it to look like this.

I was able to display it in Publish with the solution I will describe later, but there was no link.

The goal is to display the property in the Publish with the link.

Things I have tried

I have tried two solutions from this forum.

Show properties of a note in the published pages

Looks like frontmatter is already published on pages. They’re just not displayed, and are only rendered as a YAML code block, e.g.: [image] You can expose it for your site by adding this to your publish.css .frontmatter { display: block !important; } or you can make it page-specific by tucking it behind a cssclass like: .my-css-class-to-display-frontmatter .frontmatter { display: block !important; } Probably doesn’t match anyone’s intended UX, but I figure not a bad utility trad…

Solution 1 Change css to a setting that shows front matter

I learned that the front matter is already public and hidden according to this.

Show properties of a note in the published pages

Looks like frontmatter is already published on pages. They’re just not displayed, and are only rendered as a YAML code block, e.g.: [image] You can expose it for your site by adding this to your publish.css .frontmatter { display: block !important; } or you can make it page-specific by tucking it behind a cssclass like: .my-css-class-to-display-frontmatter .frontmatter { display: block !important; } Probably doesn’t match anyone’s intended UX, but I figure not a bad utility trad…

So I added the following to publish.css

.frontmatter {
    display: block !important; 
}

Then I got the following on all pages

I couldn’t follow the link this way😭

Solution 2 Customize and display publish.js

Then I tried his solution.

Show properties of a note in the published pages

I completely agree! For your reference, here is my workaround. publish.js let id; function insertMetaDates() { const frontmatter = app.site.cache.cache[app.currentFilepath].frontmatter; if (!frontmatter) { return; } const created = frontmatter["created"]?.replaceAll("-", "/"); const updated = frontmatter["updated"]?.replaceAll("-", "/"); if (!created && !updated) { return; } const frontmatterEl = document.querySelector(".frontmatter"); if (!frontmatterEl) { re…

His solution showed update and creation dates separately.
I wrote a code that is limited to the up link

let id;

function insertMetaData() {
  const frontmatter = app.site.cache.cache[app.currentFilepath].frontmatter;
  if (!frontmatter) {
    return;
  }

  const up = frontmatter["up"]
  if (!up) {
    return;
  }

  const frontmatterEl = document.querySelector(".frontmatter");
  if (!frontmatterEl){
    return;
  }

  frontmatterEl.insertAdjacentHTML(
    "afterend",
    `
    <div class="properties">
      <div class="up">UP:${up}</div>
    `
  );

  clearInterval(id);
}

const onChangeDOM = (mutationsList, observer) => {
  for (let mutation of mutationsList) {
    if (
      mutation.type === "childList" &&
      mutation.addedNodes[0]?.className === "page-header"
    ) {
      clearInterval(id);
      id = setInterval(insertMetaData, 50);
    }
  }
};

const targetNode = document.querySelector(
  ".markdown-preview-sizer.markdown-preview-section"
);
const showMetaDataObserver = new MutationObserver(onChangeDOM);
showMetaDataObserver.observe(targetNode, { childList: true, subtree: true });
id = setInterval(insertMetaData, 50);

The results were as follows

The text here is now displayed as is, not as a link.

I don’t know much about Javascript or web related programming.
So maybe there is a way to display the link, but I don’t know.
I asked this question at this stage.

Thanks for looking😄

[tadashi-aikawa]

Hi, @Cacapon

This page is written in Japanese, so machine translation may be necessary, but it might help you