Edit "Read more" and "Add new comment" links in teaser

Question

I'd like to add a couple classes to the "Read more" and "Add new comment" links in my article teasers in Drupal 8.

I'd do this in Drupal 7 by doing something like this in my theme file.

function mytheme_preprocess_node(&$variables) {
  $variables['content']['links']['node']['#links']['node-readmore']['attributes']['class'][] = 'btn btn-primary';
  $variables['content']['links']['node']['#links']['comment-add']['attributes']['class'][] = 'btn btn-primary';
}

But this doesn't work in Drupal 8. I dumped the contents of $variables['content']['links'] and all I got was this:

$variables['...']['...'] array(2)
    '#lazy_builder' => array(2)
        string(40) "Drupal\node\NodeViewBuilder::renderLinks"
        array(4)
            string(1) "4"
            string(6) "teaser"
            string(2) "en"
            boolFALSE
    '#weight' => integer100

So how would I go about adding classes to these links in Drupal 8?

Answer 1

You can do this in a couple of different ways. By looking up the Drupal\node\NodeViewBuilder::renderLinks method, you can see how it works.

1. Implement hook_node_links_alter()

This should work for a module.

function mymodule_node_links_alter(array &$links, NodeInterface $entity, array &$context) {
  $links['node']['#links']['node-readmore']['#attributes']['class'][] = 'btn btn-primary';
}

2. Implement template_preprocess_links()

And I think this should work for the theme...

function mytheme_preprocess_links(&$variables) {
  // some logic enclosing this block
  $variables['node']['#links']['node-readmore']['#attributes']['class'][] = 'btn btn-primary';
}

Answer 2

After playing around with kint and the preprocessor function in mradcliffe's answer, here's what I used in my theme file to get this working:

function mytheme_preprocess_links(&$variables) {
    if ( isset($variables['links']['node-readmore']['attributes']) && method_exists($variables['links']['node-readmore']['attributes'], 'addClass') ) {
        $variables['links']['node-readmore']['attributes']->addClass('btn btn-primary');
    }
    if ( isset($variables['links']['comment-add']['attributes']) && method_exists($variables['links']['comment-add']['attributes'], 'addClass') ) {
        $variables['links']['comment-add']['attributes']->addClass('btn btn-info');
    }
}

Not pretty, but it works. If anyone has a better optimized solution, let me know, thanks!

Update

I noticed my answer above actually applied the classes to the <li> that surrounds the link instead of the <a> tag itself. Upon playing with it a little more, I figured out it needs to be done like this to actually add the classes to the <a> tag:

function cabootstrap_preprocess_links(&$variables) {
    $variables['links']['node-readmore']['link']['#options']['attributes']['class'][] = 'btn btn-primary';
    $variables['links']['comment-add']['link']['#options']['attributes']['class'][] = 'btn btn-info';
}

Answer 3

If you want to modify the text of the link, use the following snippet.

function theme_preprocess_links(&$variables) {
  if (isset($variables['links']['node-readmore'])) {
    $variables['links']['node-readmore']['link']['#title'] = t('LEARN MORE');
  }
}