Content Examples

If you’ve been reading the documentation in order, you should now be familiar with all the features and configuration options available in Blowfish. This page aims to bring everything together and provide some examples of what you might use in your Hugo projects.

The examples on this page can be adapted for different scenarios, and we hope they inspire you to think about specific content formatting for your own projects.

Branch Pages

#

Branch pages in Hugo include content like the homepage, section list pages, and taxonomy pages. Remember that these branch pages are always named _index.md.

Blowfish supports setting front matter parameters in branch pages, and parameters set in the front matter will override the default values set in the configuration files. For example, the title parameter in a branch page will override the default page title.

Homepage

#

The homepage in Blowfish is special, and its overall design is controlled by the homepage layout parameters. You can learn more in Homepage Layout.

If you want to customize the homepage content, you simply need to create a content/_index.md file. Any content in this file will be included on your homepage.

Example:

---
title: "Welcome to Blowfish!"
description: "This is an example of adding content to the homepage."
---
Welcome to my website! I'm glad you're here.

This example sets a custom title and adds some additional content to the page body. Any Markdown is acceptable, including shortcodes, images, and links.

List Pages

#

List pages aggregate all pages in a directory and provide visitors with a way to browse pages. Blogs or portfolios are typical examples, as both types of websites consolidate posts or projects into a list page.

Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a “Projects” section, you would create content/projects/. Then create a Markdown file for each of your projects.

List pages are automatically generated by default. If you want to add some custom content to the list, you need to create an _index.md file in that directory.

.
└── content
    └── projects
        ├── _index.md          # /projects
        ├── first-project.md   # /projects/first-project
        └── another-project
            ├── index.md       # /projects/another-project
            └── project.jpg

Hugo will automatically generate URLs for the corresponding project pages in the directory.

Similar to the homepage, list pages can also add custom content through the _index.md file. Blowfish will display all sub-pages contained in this list below the custom content.

Example:

---
title: "My Projects"
description: "A collection of my work and side projects."
---

Here are some of the projects I've been working on. Each project represents a different challenge and learning opportunity.

Feel free to explore and reach out if you have any questions!

Taxonomy Pages

#

Taxonomy pages are automatically generated for each taxonomy term. For example, if you have tags in your content, Hugo will create a page for each tag that lists all content with that tag.

You can customize taxonomy pages by creating an _index.md file in the corresponding taxonomy directory.

Example for tags:

---
title: "Tags"
description: "Browse content by tags"
---

Explore content organized by topics and themes.

Leaf Pages

#

Leaf pages are individual content pages like blog posts, articles, or project pages. These are the pages that contain your main content.

Blog Posts

#

Blog posts are typically stored in a posts directory and represent individual articles or entries.

Example:

---
title: "My First Blog Post"
date: 2024-01-15
draft: false
description: "This is my first blog post using Blowfish"
tags: ["hugo", "blowfish", "blogging"]
categories: ["Technology"]
author: "Your Name"
showAuthor: true
showDate: true
showReadingTime: true
---

# Welcome to My Blog

This is the content of my first blog post. I can use all Markdown features here, including:

- Lists
- **Bold text**
- *Italic text*
- [Links](https://example.com)
- Images
- Code blocks

## Code Example

```python
def hello_world():
    print("Hello, World!")

Using Shortcodes

#

I can also use Blowfish shortcodes:

### Project Pages

Project pages are great for showcasing your work, whether it's software projects, design work, or any other type of project.

**Example:**

```yaml
---
title: "My Awesome Project"
date: 2024-01-10
draft: false
description: "A detailed look at my latest project"
tags: ["project", "web-development", "react"]
categories: ["Projects"]
externalUrl: "https://github.com/username/project"
showAuthor: true
showDate: true
showReadingTime: false
---

# Project Overview

This project demonstrates my skills in web development using modern technologies.

## Technologies Used

- React
- TypeScript
- Tailwind CSS
- Node.js

## Features

- Responsive design
- Dark mode support
- Fast performance
- Accessible UI

## Screenshots



      
  
  
  

## Live Demo


  
View Live Demo

Page Bundles

#

Hugo supports page bundles, which allow you to group related files together. This is particularly useful for pages that have associated images, documents, or other resources.

Leaf Bundle

#

content/
└── posts/
    └── my-post/
        ├── index.md        # The main content
        ├── image1.jpg      # Page resource
        ├── image2.png      # Page resource
        └── document.pdf    # Page resource

Branch Bundle

#

content/
└── projects/
    ├── _index.md          # Section page
    ├── project-1/
    │   ├── index.md       # Project page
    │   └── screenshot.png # Project image
    └── project-2/
        ├── index.md       # Project page
        └── demo.gif       # Project demo

Best Practices

#

1. Consistent Structure - Keep your content organized with a consistent directory structure
2. Meaningful URLs - Use descriptive slugs and organize content logically
3. Front Matter - Use front matter consistently to provide metadata
4. Images - Optimize images and use appropriate formats
5. SEO - Include descriptions and relevant tags for better search engine optimization
6. Navigation - Ensure your content is easily discoverable through menus and links

Advanced Examples

#

Multi-language Content

#

content/
├── _index.md          # Default language
├── _index.zh-cn.md    # Chinese (Simplified)
├── _index.zh-tw.md    # Chinese (Traditional)
└── posts/
    ├── my-post.md
    ├── my-post.zh-cn.md
    └── my-post.zh-tw.md

Series and Collections

#

You can organize related content into series:

---
title: "Hugo Tutorial Part 1"
series: ["Hugo Tutorial"]
series_order: 1
---

This creates a navigation system between related posts, making it easy for readers to follow a sequence of content.

For more detailed information about content organization and Hugo’s content management features, refer to the Hugo documentation.