Enlaces de encabezado personalizados

Esto es generalmente cierto, CSS no es una forma segura de ocultar nada porque una persona astuta podría mirar el código fuente de la página por cualquier motivo… pero sí ofrecemos una vista sin JavaScript a los rastreadores, por lo que en ese caso el contenido agregado por los temas generalmente no se indexa de todos modos.

3 Me gusta

La vista previa no funciona

3 Me gusta

¡He actualizado el enlace de vista previa, debería funcionar ahora!

3 Me gusta

¿Es posible usar este componente para llamar a un javascript con
javascript:script('function');
en lugar de una URL real?

(Parece que casi funciona, pero estoy recibiendo violaciones de CSP).


Editado para añadir:
Conseguí que funcionara. Si a alguien más le surge la duda, usé # en la interfaz de usuario del componente en lugar de una URL, y luego usé un detector de eventos para llamar a la función javascript.

Es probable que otros conozcan una forma mejor, ¡y espero que compartan ese conocimiento si lo hacen!

2 Me gusta

Hola, me gustaría ajustar el estilo y el tamaño de fuente de los enlaces del encabezado. ¿Alguien podría indicarme la CSS correcta que me permite hacer esto? ¡Gracias!

2 Me gusta

Hola @brentoshiro, las propiedades variarán según lo que necesites estilizar, pero la forma de seleccionar los enlaces sería así:

Para estilizar todos los enlaces del encabezado:


.custom-header-links .headerLink a {
    font-size: 1rem; // reemplaza con el tamaño de fuente de tu elección
    color: #96b67b; // también se pueden usar variables como var(--tertiary);
    font-style: italic; // opciones: normal, italic, oblique
}

Para estilizar un enlace específico
Puedes acceder al enlace usando el título del enlace (separado por guiones y en minúsculas) así para “Privacidad”:

.custom-header-links .headerLink.privacy-custom-header-links a:hover {
    color: red;
}

o usando el atributo title e introduciendo el título del enlace:

.custom-header-links .headerLink a[title='Our Privacy Policy'] {
    color: purple;
}

Para añadir estilos al pasar el ratón por encima, simplemente añade :hover después de la etiqueta a:


.custom-header-links .headerLink a:hover {
    color: var(--primary-low);
}
2 Me gusta

Hola, ¿sería posible centrar los enlaces en lugar de solo alinearlos a la izquierda/derecha?

1 me gusta

Esto es genial. Me pregunto cuánto trabajo adicional implicaría permitir diferentes listas de enlaces de encabezado por grupo. Tenemos personal y estudiantes en nuestro sitio y nos encantaría poder proporcionar diferentes enlaces principales en el encabezado para cada grupo.

3 Me gusta

Podrías lograr eso teniendo cada grupo en un Tema diferente, con cada tema usando su propia copia de este Componente de Tema.

Esto funcionaría bien si uno de tus dos grupos fuera bastante estático (o al menos más pequeño); tu grupo de personal parece ideal para eso. O al menos si solo tuvieras un grupo dinámico.

Luego, haces que los enlaces de estudiantes sean el Tema predeterminado del sitio, y haces que tus miembros del personal tengan los enlaces del personal manualmente (ya sea a través de la interfaz de usuario o de la Consola de Rails).

6 Me gusta

Acababa de venir aquí a preguntar esto, ya que finalmente me di cuenta de que aparecen en la pantalla de inicio de sesión.

En mi caso, uno de los enlaces cambia cada mes (mientras que el nombre del encabezado permanece igual). ¿Es posible ocultar el encabezado con un código sin tener que editar para ocultar el enlace? Por ejemplo, usando tu ejemplo tendría

Atención al cliente
2022-customer-support/26903 es mi enlace, luego customer-support-july, etc.

Así que, como puedes ver, ocultar customer-support-june funcionaría bien, pero tiene que actualizarse mensualmente en lugar de si solo estuviera ocultando “FAQ” (y tampoco puedo añadir el /26903 del tema al código CSS, por lo que no puedo ocultar este enlace específico, aunque posiblemente pueda sortear esto publicando la página?). Si no hay otra manera de hacerlo, esto no es un gran problema en absoluto, no es ningún esfuerzo, es más que la garantía de que lo olvidaré.

2 Me gusta

Hola, tenía curiosidad por saber si era posible obtener traducciones para el texto. ¿Quizás incluyendo claves de traducción, si el componente las incluye? :slight_smile:

2 Me gusta

¿Alguna razón por la que por defecto no se muestra a los usuarios que no han iniciado sesión?

Ignorar, por alguna razón, cuando aplico un componente al Tema, no aparece. Tengo que añadir el componente al Tema en su lugar.

1 me gusta

Usar iconos UTF-8

Ten en cuenta que puedes usar iconos UTF-8 como anclas de enlace.

En este caso, podrías probar este CSS para que coincida con otros iconos desplegables de encabezado:

.custom-header-links .headerLink {
    margin-top: -1px;
}
.custom-header-links .headerLink a {
    padding: 3px 10px;
    color: var(--primary-low-mid);
    font-size: var(--font-up-5);
    font-weight: bold;
}
.custom-header-links .headerLink:hover {
    background-color: var(--primary-low);
}
.custom-header-links .headerLink:hover a {
    color: var(--primary-medium);
}

Hace algo como esto:

image

image

1 me gusta

Acabo de instalar este componente y añadí algunos enlaces, pero no se mostraron.

Descubrí que al introducir un idioma, los enlaces no se muestran en mi sitio. Originalmente había añadido ‘blank’ por completitud, aunque no fuera necesario. Todavía no se mostraban cuando cambié ‘blank’ a ‘en’. Eliminar el valor por completo solucionó el problema en mi caso. No tengo ni idea de por qué, pero pensé en mencionarlo por si alguien más tiene un problema similar.

2 Me gusta

Yo mismo caí en eso el otro día:\n\nCannot get the Custom Header Links to display? - #10 by JammyDodger si podemos cambiar los ejemplos predeterminados para que sean más intuitivos.

2 Me gusta

He eliminado la configuración regional de la configuración predeterminada aquí: UX: remove locale from default settings by awesomerobot · Pull Request #38 · discourse/discourse-custom-header-links · GitHub

Por lo tanto, los valores predeterminados ahora deberían aparecer sin importar la configuración regional del sitio. ¡Gracias @packman y @JammyDodger!

2 Me gusta

Mis enlaces desaparecieron después de la última actualización (PC, Ubuntu, Brave)
¿Podrías revisar esto?

@cmdntd – mira el tema derivado. Probablemente tengas una actualización de Discourse disponible en Admin | Actualizar que resolverá esto.

1 me gusta

Recientemente, mi enlace personalizado ha sido reemplazado por los tres enlaces predeterminados. En la vista previa, funciona.

Este es un sitio alojado. Se me acaba de ocurrir que algo puede haber cambiado en el tema, de modo que no sea reconocido por los enlaces de encabezado personalizados. Lo comprobaré y volveré a informar.

¡Cuac! Previsualicé el plugin en diferentes temas y todos funcionaron. Cerré sesión y funcionó. Cambié de navegador y funcionó. Aquí hay un fuerte olor a gato de Schrödinger.

1 me gusta