Actualmente, la página principal de suscripción /s simplemente muestra las opciones de suscripción/pago. Y cada opción de suscripción/pago tiene solo una cantidad limitada de caracteres de texto que puedes incluir.
Para mis propósitos, me gustaría hacer que la página de destino /s sea un poco más acogedora e informativa en lugar de solo “solo para negocios”.
¿Es posible agregar algún tipo de texto introductorio o informativo a la página /s por encima de las opciones de suscripción/pago? ¿O es esto algo que podría implementarse (algún día) como una opción o está fuera del alcance?
Básicamente, solo un cuadro de texto editable por el usuario con opciones de formato estándar por encima de las opciones actuales.
No estoy del todo familiarizado con las opciones de edición de CSS de Discourse todavía, así que no estoy seguro de lo que es posible cuando se trata de editar páginas o complementos o componentes. Así que, por favor, disculpen cualquier ignorancia de mi parte.
Antes/Después. Nota, tuve que cambiar el texto predeterminado de “Suscripciones” a “realizar un pago” porque ofrecemos más que suscripciones. Aunque parece que el texto también está vinculado al título de la página. Así que en mi caso, tendría más sentido añadir un bloque de texto encima del título de la página existente en lugar de debajo.
¿Es algo que puedo aprovechar si estoy alojado? Es un poco escaso en instrucciones para nuevos usuarios de Discourse, así que probablemente no soy el candidato ideal para usarlo en este momento, pero estoy tratando de ponerme al día lo más rápido posible y esto parece que sería muy útil.
Tuve que ir a la página de Github para encontrar la referencia a esto:
Para encontrar plugin outlets, ejecuta enableDevTools() en la consola de javascript.
Sí. Es un componente de tema. (Al menos la mayoría de los planes te permiten instalar los componentes de tema que desees). ¿Intentaste hacer clic en el gran botón azul que dice “Instalar este componente de tema”?
¡Incluso agregué ese enlace antes de leer esta parte de tu mensaje!
Oh, pero mirando las salidas de complemento en /s no parece que haya ninguna salida de complemento. Si quieres poner texto encima del encabezado “Realizar un pago”, ¡estás de suerte!
(Imagina que “Pagar por servicios” es “Realizar un pago”) Puedes ponerlo en top-notices o en above-main-container, pero me temo que eso añadirá el contenido en cada página, no solo en la página de pago a menos que puedas encontrar algo de CSS para ocultarlo en todas las demás páginas. Si eres paciente, hay una probabilidad razonable de que puedas conseguir que https://ask.discourse.com/ te diga cómo hacerlo.
POR OTRO LADO, sería una solicitud justa pedir que se agregue una salida de complemento en esa página, pero eso es otra cosa que aprender.
Sí. Estoy en un nivel en el que puedo instalar componentes de tema sin problemas.
No pretendía ser una crítica en absoluto. Mis disculpas si se percibió de esa manera. Era solo una observación como nuevo usuario.
Sí, había descubierto ese enlace antes en mis búsquedas. El problema es que todavía no sé cómo ejecutar Discourse en un entorno de desarrollo (o acceder a él a través de la consola del navegador).
Así que mi pregunta sobre poder aprovechar tu componente era sobre eso y la necesidad de acceder a la barra de herramientas de desarrollo para usarlo, no sobre la instalación del componente en sí. Siento la confusión.
No estaba al tanto de este recurso, gracias.
En cuanto a la ubicación, me conformo con colocar el texto de introducción en cualquier lugar donde quepa fácilmente encima del contenido real de “suscripción” siempre y cuando no aparezca en todas las páginas.
No, no. Quería dar a entender, sí. Tienes razón. La documentación debería mejorarse. ¡Por eso dije que era “justo”!
No tienes que hacerlo. Simplemente abre las herramientas de desarrollador en tu navegador (F12 funciona a menos que estés en un Mac; y tengo que buscarlo cada vez que uso un Mac aunque haya uno a 8 pies de mí, luego busco en Google “mac open dev tools browser” o algo así) y escribe enableDevTools() en el indicador de la consola. Puedes hacerlo aquí mismo, ahora mismo, en este sitio.
Ahhh. La consola de desarrollador del navegador, no alguna consola dependiente de Discourse. Las cosas comienzan a tener más sentido. Gracias.
Habilitó Componentes Personalizados. Y habilitó las herramientas de desarrollador en la consola del navegador. Y activó la barra de herramientas de desarrollador para ver los componentes de complemento (plugin-components).
Y ahora entiendo, usted está diciendo que no hay un componente de complemento para Suscripciones, por lo que no hay una forma *fácil de colocar texto en esa página de destino específica. Entendido.
*fácil como en Paso 1. Paso 2. Paso 3. ¡Éxito! Y no requiere horas de investigación y educación en CSS, etc.
Leí en algún lugar en mis búsquedas recientes de Suscripciones (disculpe que no tenga el enlace en este momento) que estaba programado para una revisión de todos modos. Espero que mi sugerencia para un área de introducción/texto sea considerada en cualquier desarrollo futuro.
Debería haber una clase de cuerpo que esté solo en la página de suscripción, para que luego puedas usar CSS para ocultar la cosa que añades en todas las páginas excepto en la de suscripción.
Sí, suscripciones tiene class="above-main-container-outlet subscriptions-campaign ember-view", así que haces algo como ocultar la clase de la cosa que añades y luego la vuelves a mostrar si está en una subscriptions-campaign. Algo así.
Después de investigar un poco en Google y SO, armé una versión puramente CSS:
.above-main-container-outlet.subscriptions-campaign::after {
content: "¡Cualquier texto que quiera poner aquí! \A ¡Esta es una nueva línea! \A";
white-space: pre;
}
Solo lo conseguí hacer funcionar en la página de suscripciones y con un formato casi correcto con esto:
/* PARTE 1: El Encabezado (Estilizado como un H1 nativo) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::before {
content: "Este es el Título";
display: block;
/* Estilo para coincidir con los encabezados 'title-wrapper' */
font-family: var(--heading-font-family);
font-size: var(--font-up-5);
font-weight: bold;
line-height: var(--line-height-small);
color: #DDDDDD;
/* Espacio entre este encabezado y el texto debajo */
margin-bottom: 8px;
}
/* PARTE 2: El Texto del Cuerpo (Con espacio debajo) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::after {
content: "Este es el texto plano que va debajo del encabezado. \A Todavía puedes usar barra invertida-A para nuevas líneas aquí.";
display: block;
/* Estilo para coincidir con el texto del cuerpo estándar */
font-family: var(--font-family);
font-size: var(--font-0);
line-height: var(--line-height-medium);
color: #DDDDDD;
white-space: pre-wrap;
/* Esto crea el espacio vacío (retorno de carro) debajo de tu texto */
margin-bottom: 40px;
}
: