Distinguishing references to journals and pages at a glance

Hello! For my workflow, I sometimes need to reference blocks located on other pages from a “calling page”, like in the picture.


As you can see, some references come from journal pages and others come from regular pages. Would it be possible to change the pencil on the right to indicate which kind of page the referenced block belongs to?

Maybe adding another symbol next to it?

I suppose this can be done with CSS, but I’m lost. Any ideas would be appreciated.

Many thanks in advance!

1 Like
  • Add the following css rule into file custom.css :
    .ls-block:has(.block-ref[data-reficon="journal"]) .items-center > a:has(> svg):before {
      content: "\1F4F0";
  • Add the following code into file custom.js :
    const blockrefs = document.getElementsByClassName("block-ref");
    const blockrefObserver = new MutationObserver(function onMutated(){
        Array.prototype.map.call(blockrefs, (span)=>{
            const data = span.dataset
            const reficon = data.reficon
            if (reficon) return
            const parent = span.closest(".ls-block")
            const icon = parent.querySelector(".items-center > a > svg")
            if (!icon) {
                data.reficon = "none"
            const uuid = span.querySelector(".block-content").getAttribute("blockid")
            const block = logseq.api.get_block(uuid)
            const isJournal = logseq.api.get_page(block.page.id)["journal?"]
            data.reficon = (isJournal) ? "journal" : "non-journal"
    blockrefObserver.observe(document.getElementById("app-container"), {
        attributes: true,
        subtree: true,
        attributeFilter: ["class"]
  • Should get this:

Worked perfectly, thank you very much, @mentaloid!