html - texto - primera letra en mayuscula en css

¿Poner en mayúscula la primera letra de cada palabra con sintaxis líquida?

Question

Estoy tratando de configurar SEO en una instalación de LocomotiveCMS usando sintaxis líquida. Estoy tratando de codificarlo para que el título de la página se extraiga dinámicamente utilizando {{page.title}} y luego lo fuerce a escribir en mayúscula la primera letra de cada palabra.

Intenté esto:

<title>
      {{ page.title | camelcase }} | {{ site.name }}
</title>

Basado en la documentación de la sintaxis líquida aquí: http://docs.shopify.com/themes/liquid-basics/output#camelize

Pero no está funcionando. Usar capitalize funciona, pero solo usa mayúsculas en la primera letra de la primera palabra.

¡Gracias!

Answer 1

¿Qué hay de configurar esto con CSS?

title {
    text-transform:capitalize;
}

edición: hice un error tipográfico sobre la transformación de texto, ahora está arreglado;

Answer 2

Con respecto al enlace que ha publicado, el caso de camello funciona de la siguiente manera:

{{ ''coming-soon'' | camelcase }}

Toma una cuerda con sus palabras separadas con ''-'' y la transmite. Solo tengo una pregunta: ¿Cómo va a venir tu ''page.title''? ¿Están sus palabras separadas con ''-''? o tienes un texto como este: "este es el título de mi página"? si ese es el caso, deberías reemplazarlo con: "este es el título de mi página"

Espero que esto ayude.

Answer 3

Esta serie de filtros ha estado funcionando para mí. Sin embargo, tendría problemas si su título tuviera 5 guiones consecutivos o guiones en los que no quisiera que la siguiente letra se escribiera con mayúscula, sin embargo.

{% assign headerTitle = page.title | split: " " | join: "-----" | camelcase | split: "-----" | join: " " %}

Answer 4

Esto funciona para mí: {{page.title | capitalizar}}

Capitaliza solo la primera palabra en la oración.

Mi primer instinto fue que esto capitalizaría cada palabra pero no lo hace.

Fuente: https://docs.shopify.com/themes/liquid-documentation/filters/string-filters#capitalize

Answer 5

Gracias por las respuestas, encontré una solución inmediatamente después de publicar esto. En lugar de llamar a page.title , ahora estoy tirando de page.seo_title que se puede ingresar manualmente a través del backend LocomotiveCMS con el uso de mayúsculas correcto.

Answer 6

Hay una manera de lograr esto usando solo la sintaxis líquida. No hay necesidad de ningún plugin.

Divida su cadena de palabras en una matriz y use un bucle for combinado con el filtro de mayúsculas para poner en mayúscula la primera letra de cada palabra. Si encapsula esto apropiadamente dentro de una declaración de captura, se le deja el primer carácter en cada palabra en mayúscula.

{% assign words = "Hi, how are you today?" | split: '' '' %}

{% capture titlecase %}{% for word in words %}{{ word | capitalize }} {% endfor %}{% endcapture %}

{{ titlecase }}

Salida:

¿Hola, cómo estas hoy?

¡Tenga en cuenta que todo esto está en una sola línea y que solo hay una aparición de espacios en blanco en toda la declaración de captura!

Answer 7

Yo sugeriría usar un plugin para obtener este comportamiento

_plugins/_capitalize_all.rb :

require ''liquid''
require ''uri''

# Capitalize all words of the input
module CapitalizeAll
  def capitalize_all(words)
    return words.split('' '').map(&:capitalize).join('' '')
  end
end

Liquid::Template.register_filter(CapitalizeAll)

Uso:

{{ "mein text" | capitalize_all }}