Feature Request: Add Support for Blog Post Series HTML #5

New issue

Open

opened 2024-07-04 20:44:47 +00:00 by Aroy · 0 comments

Aroy commented

2024-07-04 20:44:47 +00:00

Owner

Description:
I would like to request the addition of support for blog post series in the Hugo theme. This feature will allow users to group related blog posts into series, enhancing the reading experience by providing clear navigation through related content.

Rationale:
Integrating support for blog post series directly into the Hugo theme will greatly benefit users who publish multi-part articles or related content. This feature will improve user engagement by making it easier for readers to follow a series of posts, thus increasing the time spent on the site and the likelihood of returning for future installments.

Use Cases:

Technical Tutorials: Users who write multi-part technical tutorials can group them into a series, making it easier for readers to navigate through the sequence.
Storytelling: Authors who publish serialized stories can keep their content organized and easily accessible to readers.
Thematic Posts: Bloggers who write on specific themes or topics over multiple posts can use this feature to link related content.

Implementation Ideas:

Configurable Template:
- Create a new partial template (e.g., series.html) in the theme.
- Allow users to configure the series template via a YAML configuration file.
Series Metadata:
- Add support for series metadata in the front matter of blog posts (e.g., series name, part number).
- Example front matter:
```
series:
  name: "My Series Name"
  part: 1
```
Series Navigation:
- Display a navigation section at the beginning or end of each post in a series, showing links to previous and next parts.
- Optionally, display a list of all posts in the series.
Styling and Customization:
- Ensure compatibility with Bootstrap for consistent styling.
- Allow users to customize the appearance of the series navigation via custom CSS.
Documentation:
- Include clear documentation on how to configure and use the blog post series feature.
- Provide examples and configuration options for different use cases.

Additional Context:
Many Hugo theme users are bloggers and content creators who can benefit from better organizing their posts into series. Adding this feature will enhance their websites by providing an organized and user-friendly way to present related content.

Example configuration in config.yaml:

params:
  series:
    enabled: true
    show_navigation: true
    show_complete_list: true

Example usage in a Hugo template:

{{ if .Site.Params.series.enabled }}
  {{ partial "series.html" . }}
{{ end }}

Example series.html partial template:

{{ if .Params.series }}
  <div class="series-navigation">
    <h4>Part of the series: {{ .Params.series.name }}</h4>
    {{ if .Site.Params.series.show_navigation }}
      <div class="series-links">
        {{ with .PrevInSeries }}
          <a href="{{ .Permalink }}">Previous: {{ .Title }}</a>
        {{ end }}
        {{ with .NextInSeries }}
          <a href="{{ .Permalink }}">Next: {{ .Title }}</a>
        {{ end }}
      </div>
    {{ end }}
    {{ if .Site.Params.series.show_complete_list }}
      <ul class="series-list">
        {{ range where .Site.Pages "Params.series.name" .Params.series.name }}
          <li>
            <a href="{{ .Permalink }}">{{ .Params.series.part }}. {{ .Title }}</a>
          </li>
        {{ end }}
      </ul>
    {{ end }}
  </div>
{{ end }}

Additional Notes:

Ensure that the logic to determine the previous and next posts in a series is correctly implemented.
Customize the template and styles to fit the overall design of the theme.

**Description**: I would like to request the addition of support for blog post series in the Hugo theme. This feature will allow users to group related blog posts into series, enhancing the reading experience by providing clear navigation through related content. **Rationale**: Integrating support for blog post series directly into the Hugo theme will greatly benefit users who publish multi-part articles or related content. This feature will improve user engagement by making it easier for readers to follow a series of posts, thus increasing the time spent on the site and the likelihood of returning for future installments. **Use Cases**: 1. **Technical Tutorials**: Users who write multi-part technical tutorials can group them into a series, making it easier for readers to navigate through the sequence. 2. **Storytelling**: Authors who publish serialized stories can keep their content organized and easily accessible to readers. 3. **Thematic Posts**: Bloggers who write on specific themes or topics over multiple posts can use this feature to link related content. **Implementation Ideas**: 1. **Configurable Template**: - Create a new partial template (e.g., `series.html`) in the theme. - Allow users to configure the series template via a YAML configuration file. 2. **Series Metadata**: - Add support for series metadata in the front matter of blog posts (e.g., series name, part number). - Example front matter: ```yaml series: name: "My Series Name" part: 1 ``` 3. **Series Navigation**: - Display a navigation section at the beginning or end of each post in a series, showing links to previous and next parts. - Optionally, display a list of all posts in the series. 4. **Styling and Customization**: - Ensure compatibility with Bootstrap for consistent styling. - Allow users to customize the appearance of the series navigation via custom CSS. 5. **Documentation**: - Include clear documentation on how to configure and use the blog post series feature. - Provide examples and configuration options for different use cases. **Additional Context**: Many Hugo theme users are bloggers and content creators who can benefit from better organizing their posts into series. Adding this feature will enhance their websites by providing an organized and user-friendly way to present related content. Example configuration in `config.yaml`: ```yaml params: series: enabled: true show_navigation: true show_complete_list: true ``` Example usage in a Hugo template: ```html {{ if .Site.Params.series.enabled }} {{ partial "series.html" . }} {{ end }} ``` Example `series.html` partial template: ```html {{ if .Params.series }} <div class="series-navigation"> <h4>Part of the series: {{ .Params.series.name }}</h4> {{ if .Site.Params.series.show_navigation }} <div class="series-links"> {{ with .PrevInSeries }} <a href="{{ .Permalink }}">Previous: {{ .Title }}</a> {{ end }} {{ with .NextInSeries }} <a href="{{ .Permalink }}">Next: {{ .Title }}</a> {{ end }} </div> {{ end }} {{ if .Site.Params.series.show_complete_list }} <ul class="series-list"> {{ range where .Site.Pages "Params.series.name" .Params.series.name }} <li> <a href="{{ .Permalink }}">{{ .Params.series.part }}. {{ .Title }}</a> </li> {{ end }} </ul> {{ end }} </div> {{ end }} ``` **Additional Notes**: - Ensure that the logic to determine the previous and next posts in a series is correctly implemented. - Customize the template and styles to fit the overall design of the theme.