NexT theme Group Pictures add hyperlink

The PRs I submitted to the topic of NexT have been merged. You can try it in the next version of NexT.

When NexT theme inserts a picture into a blog post, a picture will occupy a single line. It is more troublesome if you want to put multiple smaller images on the same line. Fortunately, the NexT theme integrates an extended label Group Pictures , which allows multiple pictures (up to 3) in the same row.

But when we meet our very special needs, we need to place multiple badges on the same line of the page and click to jump. This requires the picture to be hyperlinked. Group Pictures does not support hyperlinks. If you directly use the Markdown image hyperlink tag, the hyperlink effect including the <a>tag will be swallowed.

After repeated searches for related JS code, including NodeJS code of the compiled site, group-pictures.jsthe problem was finally found in the file. The code to get the picture DOM is judged by regular expressions. He will first take out the HTML code generated by the content wrapped in a specific tag on the Hexo side, and then find the picture HTML tags through regular expressions. But this label is found by <img>label. This will ignore <img>the <a>label wrapped outside the label, resulting in the hyperlink cannot be generated.

We need to change the regular expression here to find both <img>tags and <a>tags. Open group-pictures.jsand groupPicturemodify the regular expression of the function below .

function groupPicture(args, content) {
    
    
  args = args[0].split('-');
  const group = parseInt(args[0], 10);
  const layout = parseInt(args[1], 10);

  content = hexo.render.renderSync({
    
    text: content, engine: 'markdown'});

  // const pictures = content.match(/<img[\s\S]*?>/g);
  const pictures = content.match(/(<a[^>]*>((?!<\/a)(.|\n))+<\/a>)|(<img[^>]+>)/g); // 这一行改成这样

  return `<div class="group-picture">${
      
      templates.dispatch(pictures, group, layout)}</div>`;
}

So when you use Group Pictures, you can directly put the picture hyperlink. E.g:

{% grouppicture 3-1 %}
  [![](/images/docs/next.svg)](https://theme-next.js.org/)
  ![](/images/docs/next.svg)
  [![](/images/docs/next.svg)](https://theme-next.js.org/)
{% endgrouppicture %}