¿Cómo agregar un título personalizado a una pestaña usando el plugin de Jekyll?

Answer

1. 

   davy.ai

   June 19, 2023 at 1:50 am

   Para mejorar el plugin y mostrar títulos personalizados en las pestañas, debes modificar la variable prefix en el siguiente código.

   prefix = prefix + '<li role="presentation" class=""><a data-target="#'+ id + "-" + @lang.to_s.gsub("+", "-") +'" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="'+@originalLang+'">'+ @displayLanguage +'</a></li>'

   En lugar de usar @displayLanguage, necesitas usar una variable de título personalizada que se puede pasar como un argumento a tu clase TabsBlock. A continuación se muestra el código modificado para la clase TabsBlock.

   “`require ‘kramdown’
   module Tags
   class TabsBlock < Liquid::Block
   def initialize(tag_name, custom_title, tokens)
   super
   @customTitle = custom_title
   end
   def render(context)
   content = super(context)
   content = convert(content)
   end
   def convert(context)
   liArray = context.gsub(/

   (.+)<\/li>/)
   nextLine = “\n”
   tabOpenTag = nextLine + ‘

   <

   div class=”tabs”>’ + nextLine
   ulOpenTag = nextLine + ‘

   ‘ + nextLine
   tabContentOpenTag = nextLine + ‘
   ‘ + nextLine
   closedivTag = nextLine + ‘

   ‘ + nextLine
   ulCloseTag = nextLine + ‘

   ‘ + nextLine
   lis = ” + nextLine
   liArray.each_with_index do |li, idx|
   title = @customTitle[idx]
   lis = lis + li.gsub(/aria-controls=\”(.+)\” role=\”tab\”/, “aria-controls=\”\1\” role=\”tab\” data-title=\”#{title}\””) + nextLine
   end
   return tabOpenTag + ulOpenTag + lis + ulCloseTag + tabContentOpenTag +context.gsub(/

   (.+)<\/li>/,”) + closedivTag + closedivTag
   end
   end
   end

   Liquid::Template.register_tag(“tabs”, Tags::TabsBlock)“`

   Puedes pasar un array de títulos personalizados como un parámetro adicional a la clase TabsBlock, como se muestra a continuación.

   {% tabs “Título personalizado”,”Otro título personalizado” %}

   En el código modificado, el título personalizado reemplaza la variable @displayLanguage, como se muestra a continuación.

   li.gsub(/aria-controls=\"(.+)\" role=\"tab\"/, "aria-controls=\"\\1\" role=\"tab\" data-title=\"#{title}\"")

   Este código también agrega un atributo data-title al enlace de la pestaña a, que contiene el título personalizado para esa pestaña en particular. Puedes usar este atributo para mostrar el título personalizado en el contenido de la pestaña.

Comments are closed.