Las imágenes grupales de temas NexT agregan hipervínculo

Los PR que envié al tema de NexT se han fusionado. Puede probarlo en la próxima versión de NexT.

Cuando el tema NexT inserta una imagen en una publicación de blog, la imagen ocupará una sola línea. Es más problemático si desea colocar varias imágenes más pequeñas en la misma línea. Afortunadamente, el tema NexT integra una etiqueta ampliada Group Pictures , que permite varias imágenes (hasta 3) en la misma fila.

Pero cuando satisfacemos nuestras necesidades muy especiales, debemos colocar varias insignias en la misma línea de la página y hacer clic para saltar. Esto requiere que la imagen tenga un hipervínculo. Group Pictures no admite hipervínculos. Si usa etiquetas de hipervínculo de imagen de Markdown directamente, los efectos de hipervínculo, incluidas las <a>etiquetas, se absorberán.

Después de repetidas búsquedas de código JS relacionado, incluido el código NodeJS del sitio compilado, finalmente se group-pictures.jsencontró el problema en el archivo. El código para obtener el DOM de la imagen se juzga mediante expresiones regulares. Primero sacará el código HTML generado por el contenido de la etiqueta específica envuelta en el Hexo, y luego encontrará la etiqueta HTML de la imagen a través de la expresión regular. Pero esta etiqueta se encuentra por <img>etiqueta. Esto ignorará <img>la <a>etiqueta envuelta fuera de la etiqueta, lo que provocará que no se pueda generar el hipervínculo.

Necesitamos cambiar la expresión regular aquí para encontrar <img>etiquetas y <a>etiquetas. Abra group-pictures.jsy groupPicturemodifique la expresión regular de la función a continuación .

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>`;
}

Entonces, cuando usa Imágenes de grupo, puede poner directamente el hipervínculo de la imagen. P.ej:

{% 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 %}