Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a widget mechanism to Hugo #2687

Closed
wants to merge 2 commits into from
Closed

Conversation

lebarde
Copy link
Contributor

@lebarde lebarde commented Nov 13, 2016

Here is a first attempt to get widgets into Hugo. General tests are ok on my dev environment, but I have not already written tests for widgets, nor documentation.

Discussion is most welcome!

  1. Create a site
  2. Create a widget directory inside /widgets. It should look like this:
widgets/
└── text
    ├── layouts
    │   └── widget.html
    └── README.md

Note that the name widget.html is mandatory. Currently the context is the content of the config parameter widgets.[mywidgetarea].[mywidget].options. Variables are accessible with .content for a text widget like the following and as described in the config below.

{{- if isset . "content" -}}
  {{- .content | safeHTML -}}
{{- else -}}<pre>Here is a text widget, but there is nothing to print. Please define options.content inside every text widget in your config.</pre>
{{- end -}}
  1. Configure your site with a widgets variable describing widgets inside widget areas:
widgets:
  sidebar:
    - type: text
      options:
        content: "<h1>IT WORKS from config</h1>"
        parser: html
  showcase:
    - type: text
      options:
        content: "Here lies a showcase."
  footer:
    - type: text
      options:
        content: "Powered by Hugo with widgets."
        foo: bar
  1. Create a template using the widgets call. This can be done like this: {{ widgets "sidebar" . }}.
  2. Create content. You can also use the widget's shortcode: {{% widgets "showcase" %}}
  3. Build and enjoy.
  • Currently the widgets' context is only the content of the config variable. We should add a wider context (easy).
  • I have not studied the impact on performances.
  • Else?

Fixes #2683
See #2535

Here is a first attempt to get widgets into Hugo. General tests are ok on my dev environment, but I have not already written tests for widgets.

1. Create a site
2. Create a widget directory inside `/widgets`. It should look like this:
```
widgets/
└── text
    ├── layouts
    │   └── widget.html
    └── README.md
```
Note that the name `widget.html` is mandatory. *Currently the context is the content of the config parameter `widgets.[mywidgetarea].[mywidget].options`*. Variables are accessible with `.content` for a text widget like the following and as described in the config below.
```
{{- if isset . "content" -}}
  {{- .content | safeHTML -}}
{{- else -}}<pre>Here is a text widget, but there is nothing to print. Please define options.content inside every text widget in your config.</pre>
{{- end -}}
```

3. Configure your site with a `widgets` variable describing widgets inside widget areas:
```
widgets:
  sidebar:
    - type: text
      options:
        content: "<h1>IT WORKS from config</h1>"
        parser: html
  showcase:
    - type: text
      options:
        content: "Here lies a showcase."
  footer:
    - type: text
      options:
        content: "Powered by Hugo with widgets."
        foo: bar
```

4. Create a template using the `widgets` call. This can be done like this: `{{ widgets "sidebar" . }}`.
5. Create content. You can also use the widget's shortcode: `{{% widgets "showcase" %}}`
6. Build and enjoy.

- Currently the widgets' context is only the content of the config variable. We should add a wider context (easy).
- I have not studied the impact on performances.
- Else?

Fixes gohugoio#2683
See gohugoio#2535
@lebarde
Copy link
Contributor Author

lebarde commented Nov 13, 2016

This last commit defines the variables that can be accessed in the widget's template. The context is:

  • .$ is the general context
  • .wa is the widget area name
  • .w is the widget name
  • .Params is the widget's configuration variable

@bep
Copy link
Member

bep commented Nov 13, 2016

When #2649 is done, it may be more clear what a widget is or isn't. But it is not a new special thing with special code. If everything is a page, then a widget is also a kind of page which can contain other widgets -- and should fit into Hugo's model, not create another on the side.

And please don't ask me how do we do that? I have plenty on my plate at the moment, and this isn't priority.

@lebarde
Copy link
Contributor Author

lebarde commented Nov 14, 2016

This is nice. Thank you for explaining this about widgets as nodes.

BTW, when I ask something in the forum, please consider that I am asking it to the whole community, not especially to you in particular. I will be happy if we discuss together (indeed !), but will not be offended if it happens that you do not answer to me. We are with you, and all together here!

Anyway I know you are doing a hard work on Hugo nodes and this is extraordinary! I am looking forward how all this will become.

@bep
Copy link
Member

bep commented Nov 14, 2016

BTW, when I ask something in the forum, please consider that I am asking it to the whole community, not especially to you in particular

Good, let us keep the discussion there.

@bep bep closed this Nov 14, 2016
@github-actions
Copy link

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

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 19, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dynamic call to template: partial call with prefix
2 participants