aside

Displaying a feed of short-form content

Bearblog is built for long-form content, with posts commonly displayed as lists of linked titles.

Sometimes I just want to post a quick thought, save a quote, or share a doodle. This short-form content doesn't need a title or link. I just want this content to display directly on the page, in a feed.

I looked into options on Bear docs and saw that it's possible to list the full content of posts:

## Show full post content
{{ posts | content:True }}

I used this to set up my Status page, and from there adapted it to create my Clippings page.

My Status page is an embedded post list with the following customizations:

When I first approached this, I thought it'd be a heavier lift. I'm pleased that it did not require too many custom attributes or lines of CSS.

Here are the snippets for anyone interested in creating something similar.

Status page

I created a new Status page to house my status feed. I added the attribute class_name: status to give the page a unique CSS class for styling. My embed code filters for posts tagged with status.

title: Status
link: status
is_page: true
class_name: status 
---
# Status

{{ posts | tag:status | content:True | limit:10 }}

Status page CSS styles

I added my CSS styles to Themes > Edit theme CSS.2 The CSS calls on the unique class name .status that I added to the page.

/* Box containing post content */
.status ul.embedded.blog-posts > li {
  border: 1px solid #ddd; /* Change to match your design */
  background-color: ; /* Change to match your design */
  margin-top: 1.25em;
  padding: 1.25em;
  display: flex;
  flex-direction: column-reverse; /* Reverse content order */
}
/* Hide title & link */
.status ul.embedded.blog-posts > li > a {
  display: none;
}
/* Remove extra space above content */
.status ul.embedded.blog-posts > li div p:first-child {
  margin-top: 0;
}
/* Remove extra space to the left of content */
.status ul.embedded.blog-posts {
  padding: unset;
}
/* Remove extra space below content
Applies to most default Bearblog themes (remove otherwise) */
.status ul.blog-posts li span {
  flex: none;
}

==2025-01-09 update: After this initial post, I played around with the design some more and made a few adjustments. There's now a version with text/emoji links and another with (fake) date links.==

New status post

To publish a new status, I create a new post with the status tag.

I include make_discoverable: false so that the status posts don't display in the discovery feed.1

title: Simple title
link: simple-title
tags: status
make_discoverable: false
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Latest status post on homepage

I used the same Status page embed code, with some minor adjustments.

I changed the limit to 1 (to display only 1 post) and added a section with the status class (to apply my .status styles).

## Latest status

<section class="status">
{{ posts | tag:status | content:True | limit:1 }}
</section>

For more

I continue to tinker with this feature at my sandbox.

After seeing Crafting a photo-centric Bear blog with embedded posts, I reached out to Jedda and commented, “I feel like there aren't enough of us using this content:True feature!”

In this spirit, see what’s possible & how other Bearbloggers have used it:

Learn more about the thought & CSS behind the designs above:

FAQ

How do I prevent my status posts from displaying in my main feed?

There isn't a feature to exclude a tag from displaying in the main feed, so the solution is to further filter.

You can apply a blog tag to your non-status posts. From there, you can create a new Blog page and list your #blog posts with the following embed code:

# Blog

{{ posts | tag:blog }}

This approach also creates separate, tag-specific feeds — one feed for #blog posts and another for #status posts.

If you’d like to replace the default blog page, go to Advanced settings and update your Blog path to archive (or something else).

How do I bring back bulleted list styles?

If you plan to use lists, adding the following CSS will restore other visual details for lists.

/* Add space after list */
ul.embedded.blog-posts > li div > ul,
ul.embedded.blog-posts > li div > ol {
  margin-bottom: 1em;
}
/* Display as list
Applies to most default Bearblog themes (remove otherwise) */
ul.embedded.blog-posts > li div > ul li,
ul.embedded.blog-posts > li div > ol li {
  display: list-item;
}
/* Adjust bullet styles */
ul.embedded.blog-posts > li div > ul li {
  list-style-type: disc;
}
ul.embedded.blog-posts > li div > ul li ul li {
  list-style-type: circle;
}

Will this work with my theme?

Depending on your theme, more adjustments may be needed. Check for other .blog-posts li styles.

  1. These short-form posts still display in my Bearblog's RSS & Atom feeds. ↩

  2. Styles can also be embedded directly on the page: Embedded stylesheet. ↩