Adding rel=sponsored to buttons in action buttons from YAML front matter

[mkruisbrink]

Hello there,

I've been Googling for quite a long time on how to add a rel="sponsored" elements to external links in action buttons generated in the YAML front matter but I can't find any resources related to this. How can I add any rel="" element to the button I generate with the YAML front matter as per below??

---
title: "title"
excerpt: "excerpt."
header:
  overlay_color: "#b93545" # brand colour
  teaser: assets/images/teaser.png
  actions:
  - label: "Visit X"
    url: "https://external-site.com"
sidebar:
    nav: "stack"
---

The only way I think this is possible is to modify the _includes for page__hero.html as per below. However, I reckon I don't wanna mess with the theme files and I'm better off creating my own copy of the includes where I add this rel="" element to the actions and use it when required. How do I achieve this?

{% if page.header.actions %}
        <p>
        {% for action in page.header.actions %}
          <a href="{{ action.url | relative_url }}" class="btn btn--light-outline btn--large">{{ action.label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a>
        {% endfor %}
      {% endif %}

For external sponsored links generated inside inline content I can achieve this easily as I've been doing it like this:

[link text](https://your-link.com){:target="_blank"}{:rel="sponsored"}

For buttons it is the same but I just add a button helper class {: .btn .btn--success} to the inline text.

Any pointer in the right direction/best practice for the button on the hero image is very much appreciated!