how i hide elements on my bearblog

11 Mar, 2025

This is a post about my process on how I implemented the following:

The latest posts section of my home page
The text on the on my mind section of my now page

summary

I do not update these manually. I used Bear's custom embedded lists feature¹ and CSS to hide the other elements of a custom post list and retain only what I want.

Table of Contents

displaying only the link of a post (latest posts)
displaying only the content of a post (on my mind)
wrap-up

displaying only the link of a post

Goal: Display a link to the latest post in each tag.

Previously, without involving custom embedded lists, this was how I did it:

- ☕ [#life](url-to-tag): [life is really something](url-to-latest-post)

The problem: Whenever I publish anything new under the #life tag, I will have to go to the home page and update this list again. This takes some seconds, but what if you have a lot of tags? Or you publish more frequently? This approach adds an additional step in publishing and I wanted to eliminate that.

My solution: use custom embedded lists feature to fetch the link to the latest post on every tag.

Markdown on the home page:

- ☕ <span class="latest-tag">[#life](url-to-tag): {{ posts | tag:life | limit:1 }} </span>

Added lines to theme CSS:

.latest-tag a:first-child {
  text-decoration: none;
}
.latest-tag ul.blog-posts {
  display: inline-block;
}
.latest-tag ul.blog-posts li {
  margin-bottom: 0;
}
.latest-tag ul.blog-posts span {
  display: none;
}

💡 Markdown works inside <span> tags.

CSS breakdown

The latest-tag class allows for the custom embedded list to be designed in CSS. We also isolate the custom embedded post list from all its other instances in the blog because of this class. I put this class for every tag that I add under latest posts.

.latest-tag a:first-child {
  text-decoration: none;
}

This line says that the link in the #life tag should not be underlined. Only add this if you intend to put another link before the actual post link.

.latest-tag ul.blog-posts {
  display: inline-block;
}

With this code, the embedded list is now side-by-side with the #life tag and doesn't start a new line.

.latest-tag ul.blog-posts li {
  margin-bottom: 0;
}
.latest-tag ul.blog-posts span {
  display: none;
}

These rules remove the unnecessary 12px bottom margin and the date of the post respectively.

With that, all I have to update in the home page is what tags I want to put on the home page and add the link to the tag respectively.

displaying only the content of a post

Goal: Display the content of a single post in another page.

Previously, I updated my now page at every update on what's currently on my mind. Previous entries are not saved anywhere.

My solution: Each update under the "on my mind" section will be through a new post on the blog. In this way, my entries are archived but it comes with extra information such as the title and date. I only want to show the content as if I'd updated the page on its own.

So I did the following:

Assign a tag for posts that should be under the on my mind section (snaps)
Assign a class for the now page so I can target and design the embedded list
- I could also use the <span> tag to wrap the custom embedded list code again then assign the class on that but I preferred put it on the page itself using the class_name attribute².
- On the now page, make sure you have class_name: now under the title so the now class can be used and referenced in CSS.

Markdown code:

## on my mind

{{ posts | tag:snaps | limit:1 | content:True }}

After setting up the page and markdown, at this point you will see the content but it's not as seamless because of the title and the dates. CSS will do the trick here.

Edit the CSS Theme using the now page class_name

.now ul.embedded.blog-posts {
  margin: -14px 0;
}
.now ul.embedded.blog-posts li {
  display: flex;
  flex-flow: row wrap;
}
.now ul.embedded.blog-posts li > a,
.now ul.embedded.blog-posts li > span {
  display: none;
}

CSS breakdown

.now ul.embedded.blog-posts {
  margin: -14px 0;
}

This eliminates the space on the top and bottom of the embed.

.now ul.embedded.blog-posts li {
  display: flex;
  flex-flow: row wrap;
}

Referenced from the Docs, this line rearranges the elements of the custom post list with a better placement for the actual content.

.now ul.embedded.blog-posts li > a,
.now ul.embedded.blog-posts li > span {
  display: none;
}

This hides the title of the post and the timestamp.

wrap-up

This was all possible after tinkering a lot with the dev tools and inspecting elements. It was also for use cases that are also my own personal preferences on what I want to show on my blog.

Also: I updated my theme and the code looks prettier than the default. I've referenced from this post by Sylvia. Thank you!

Please let me know if this helped you on anything or there are more efficient ways to do these ^^

💌 reply via email
11 Mar, 2025