Search code examples
apostrophe-cms

How to wrap apostrophe widgets in html tags inside 'apos.area'?

I want to wrap widgets generated by apos.area with custom tags to improve SEO.

<ul>
  {{ apos.area(data.page, 'links', {
    widgets: {
      'internal-link': {},
      'external-link': {}
    }
  }) }}
</ul>

in this example I've wrapped apos.area with ul tag, but widgets that I passed doesn't have li tag in their template.

Is there any way to force every single widget be wrapped in custom html tag?

Solution

  • Apostrophe is going to wrap markup around each of these widgets that at best you don't care about and at worst breaks your semantics.

    To have full control over this markup I would make a more generic link widget that included schema options for both internal and external link types. Then in your widget.html you can print out your semantically correct list of links with their various properties.

    If your internal-link and external-link widgets are already in wide use across your site, you could just make a wrapper widget that has their singletons in the schema.