Widget mechanism #2535
Labels
Comments
|
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. |
|
Okay! So below is the proposition. Widget examplesWith a short brainstorm, I imagined the following widgets:
Specifications / capacities
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.jpgThe 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 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. |
Closed
|
I am currently working on it and will submit a first PR asap. |
|
Official discussion is here: https://discuss.gohugo.io/t/widget-mechanism/4428 |
lebarde
added a commit
to lebarde/hugo
that referenced
this issue
Nov 13, 2016
lebarde
added a commit
to lebarde/hugo
that referenced
this issue
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.
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
added a commit
to lebarde/hugo
that referenced
this issue
May 2, 2017
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
added a commit
to lebarde/hugo
that referenced
this issue
May 13, 2017
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
added a commit
to lebarde/hugo
that referenced
this issue
Nov 26, 2017
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
|
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. |
|
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. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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:
config.tomlorconfig.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?
The text was updated successfully, but these errors were encountered: