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 and Doodles pages.

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 }}

If you already have a blog page, go to Advanced settings and update your Blog path to archive (or something else).

This approach also creates separate, tag-specific feeds — one feed for #blog posts and another for #status posts. See how Robert implemented this at Bear Micro Blog.

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;
}

Please note that depending on your theme, more adjustments may be needed if there are other .blog-posts li styles defined.

bearblog-css

  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. ↩