Ghost CMS is a popular platform for creating and managing content-rich websites and blogs. With its easy interface and powerful features, it offers great flexibility in managing the visibility of your posts.

Ghost themes typically display the most recent posts on the home page as a default setting. However, there are several valid reasons why you may wish to conceal specific posts. Whether you intend to use certain posts exclusively for newsletters, have an alternative layout in mind for the home page, or simply do not require a post to be prominently featured, you have the ability to hide it.

Today we will learn how to hide a post from the Ghost CMS home page. After this setting, you can easily manage your site than the previous time.

Hide posts using the routes file

To simplify the task, you can add a filter to the routes.yaml file, specifically within the main collection.

collections:
  /:
    permalink: /{slug}/
    template: index
    filter: tags:-hash-hide

The key aspect to note is the filter property. In this scenario, we are excluding all posts with the internal tag #hide from the main collection, resulting in their absence from the home page.

Remember, this is just an example, and you have the flexibility to employ any tag, such as #newsletter or #hidden, based on your specific requirements.

You can also utilize the same filter technique for channels. Here's an example to illustrate this:

channels:
  /blog/:
    permalink: /blog/{slug}/
    template: blog
    filter: tags:-hash-hide
  /portfolio/:
    permalink: /portfolio/{slug}/
    template: portfolio
    filter: tags:-hash-hide

By implementing these filter settings, posts with the tag "-hash-hide" will be excluded from both the "/blog/" and "/portfolio/" channels.

Hide posts modifying the theme files

An alternative approach to hiding posts is by modifying your theme files. This can be done specifically for the home page, typically found in the index.hbs file. Within this file, you'll typically encounter a section where posts are looped over, providing an opportunity to check for a specific tag and hide posts accordingly.

{{#foreach posts}}
  {{^has tag="#hide"}}
    {{!-- Your post card or content --}}
  {{/has}}
{{/foreach}}

The {{#has}} helper is used to check if a post has the #hide tag. Similar to {{#if}}, {{#has}} provides additional capabilities beyond simple boolean tests, allowing theme developers to inquire about the current context and achieve greater flexibility in designing various layouts.

Just like other block helpers, {{#has}}** supports the addition of an {{else}} block or utilizing ^ instead of # for negation.

If necessary, you can also apply this modification to the author.hbs and tag.hbs templates to ensure consistent hiding of posts with the #hide tag across different sections of your theme.

Hide posts using CSS

Another approach, as a third option, involves utilizing CSS, which may vary depending on your theme structure. Typically, within a {{#foreach}} loop, there is a .post-card element, and the{{post\_class}} outputs all the tags assigned to the post.

To hide posts with the #hide tag, you can implement the following code injection:

collections:
  /:
    permalink: /{slug}/
    template: index
    filter: tags:-hash-hide

By injecting this CSS code, any post card element that has the #hide tag assigned will be hidden through the display: none; property. This method provides a way to selectively hide posts using CSS based on their assigned tags.

To Sum Up

In conclusion, hiding posts from the home page in Ghost CMS can be achieved through various methods. Whether you choose to use filters in the routes.yaml file, modify theme files, leverage CSS techniques, or a combination of these approaches, you have the power to control the visibility of your content. By implementing these techniques, you can tailor your home page to showcase the posts you desire, creating a personalized and optimized user experience. Besides this, if you need more information about ghost cms then visit our blog here- themeix.com