Widget mechanism

[lebarde]

Hello,

I have used an existing theme for my new website. But I have to modify it to add (for instance) VCards or other beautiful stuff. If ever I want to update my theme or switch to another one, I will lose the code parts.

It would be great if there was a wordpress-like, reusable widget mechanism. I think we would have to:

• create a widget (as a piece of template? with more extensionability?);
• insert a widget area inside the theme;
• instantiate widgets inside config.toml or config.yaml.

For now I understand that there is no normalization for that process, which IMO prevents well-meaning people to publish finely tuned (and customizable) site blocks, just like in any content management system.

Do you think like me that it would be a good enhancement?

[bep]

This has been discussed before, but noone has really taken it any further.

We need someone to write down some kind proposal/spec of how this should work.

A start would be to list some common widgets and how they should work and then sketch a solution based on that.

[lebarde]

Okay!

So below is the proposition.

Widget examples

With a short brainstorm, I imagined the following widgets:

1. VCard: a widget that displays a hcard (it is parsed and used by google)
2. List categories
3. List the n last posts (with options for excerpts, thumbnails, author, date, …)
4. Display an arbitrary text (with options allowing markdown, html, exec -- see #796)
5. Showcase/slider to display slides for a homepage, for instance
6. Links. Display arbitrary links.
7. Displaying menus!

Specifications / capacities

• The widgets would live in layouts/widgets/
• They could be git repositories or maybe (I don't know how it works) with go get. One another (big but nice IMO) solution would be a hosting centralization, as for every CMS. The widgets.gohugo.io or extensions.gohugo.io website would host a bunch of registered plugins. That would enable creating a hugo install routine. But that would be for (much) later.
• The themes would declare widget areas in a way like {{ widget_area "footer" }}, {{ widget_area "content_bottom" }} or {{ widget_area "sidebar" }}.
• The main config file would declare a widgets collection, describing what is in each widget area. Each widget would be called with its name (identifier given by the widget's creator), and the user would set some other options. These options are variables specified by the widget's creator. The widgets' declaration would be possible in two ways:
  1. declaring the widgets as a collection inside the config.toml or config.yaml file. Example (for YAML mode):

widgets:
  main-sidebar:
    - type: vcard
      name: "King Arthur"
      phone: (++123)456789
      photo: "https://upload.wikimedia.org/wikipedia/commons/a/ad/Boys_King_Arthur_-_N._C._Wyeth_-_title_page.jpg"
    - type: plain-text
      content: "Website generated by **[Hugo static site generator](https://gohugo.io/ "Which is so beautiful")** on *{{ exec date }}*."
      options: allow-html, allow-markdown, allow-exec     # wink at issue https://github.com/spf13/hugo/issues/796
    - type: list-categories
  content-bottom:
    - type: disqus
      id: bstewiawzpoljzuisaei
  post3-widgets:
    - type: showcase-bigflat
      slides:
        - title: "Meet us at the point"
          text: Lorem ipsum dolor sit amet […]
          picture: https://discuss.gohugo.io/uploads/default/original/2X/3/3999949154d616b767f5984f74f89fb4cea50535.png
        - title: "Hugo is so nice!"
          text: Lorem 2 ipsum 3 dolor 4 sit amet 5 […]
          picture: public/some-other-picture.jpg

The bonus would be (see the upper code, last section) the ability to declare a widget area inside a post content. This would need to have a param.allow-custom-widget-areas (or like), and IMO to add a custom-widget-area: true inside the post header. Then, inside your markdown post you add a {{% widget-area post3-widgets %}} shortcode.

In my opinion, such a functionality would help the massive adoption of Hugo. Indeed, that would enable people to use Hugo without writing code, as it would decrease the need to dive into theme development.

That would also enable professionals (i.e. web developers) to take more Hugo into account. We don't have to reinvent the wheel, and IMO the themes don't have to manage blocks like widgets.

[lebarde]

I am currently working on it and will submit a first PR asap.

[lebarde]

Official discussion is here: https://discuss.gohugo.io/t/widget-mechanism/4428

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help. If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open. If this is a feature request, and you feel that it is still relevant and valuable, please tell us why. This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.