Como nuevo en Discourse, estoy tratando de entender qué se puede personalizar y cómo. Sé que hay diferentes temas y componentes de tema disponibles, y también entiendo que, en teoría, puedo editar HTML, CSS y JavaScript si voy a admin -> personalizar -> Temas -> [hacer clic en el tema seleccionado] -> editar CSS/HTML.
Estoy tratando de entender cómo usar el panel de control que aparece al intentar “editar CSS/HTML”. Muestra <head> Encabezado Después del Encabezado <body> Pie de página CSS incrustado.
¿Existe alguna guía con ejemplos sobre cómo editar realmente el HTML? Entiendo que en Meta hay sugerencias, pero, por lo que he visto, están dispersas en varios temas a lo largo del foro.
Como ejemplo de algo que me resulta confuso: este post pregunta si es posible cambiar el orden de las columnas de la lista de temas, lo cual es un cambio de HTML bastante básico. Pero la respuesta es, básicamente, que no puedes hacerlo sin recurrir a algunas sobrescrituras profundas.
Así que estoy tratando de aclarar qué puedo hacer con esa opción “editar CSS/HTML” para personalizar mi foro.
Gracias. Ya había visto esto, pero me alejé porque parecía que el enfoque estaba en crear un tema, no simplemente en editar mi único foro.
Sí, veo que hay algunas indicaciones sobre cómo usar el panel de control “Editar CSS/HTML”. Pero, para confirmar, ¿puedo cambiar el HTML, CSS y JS sin crear un nuevo tema, correcto?
Tampoco está claro dónde ni cómo puedo mover los componentes, no solo agregarlos o eliminarlos (por ejemplo, cambiar el orden de las columnas para que el grupo de usuarios aparezca como la columna más a la izquierda en la página).
Definitivamente te sugiero que también revises esa guía; no dejes que el aspecto de tema te desaliente, ya que profundiza en múltiples aspectos de personalización que encontrarás útiles.
El enlace proporcionado por Simon lo explica todo, pero es bastante largo de leer.
Básicamente, si quieres editar el HTML de Discourse, esto se puede hacer de varias formas:
A través de algunas pestañas HTML predefinidas en tu tema o componente: Header, After Header, </body>, Footer.
Apuntando a un espacio HTML “libre” (outlet) que puedes rellenar con tu propio HTML. Esto se puede hacer mediante una etiqueta <script> que puedes agregar en la pestaña <head>.
Aquí tienes un ejemplo de los outlets disponibles en una vista de tema:
Sobrescribiendo una plantilla HTML existente. Las plantillas a veces contienen mucho código HTML y tendrás que copiar y pegar todo para hacer tus modificaciones. Esto también se puede hacer en una etiqueta <script> agregada en tu <head>.
Crear un tema, un componente de tema o “simplemente editar mi único foro” es básicamente lo mismo en este caso. Los tres se hacen más o menos de la misma manera.
Sí, depende exactamente de lo que quieras hacer, pero por lo general, la forma correcta es crear un nuevo componente de tema y escribir el HTML/CSS allí.
Gracias por esta buena información. Puedo entender cómo agregar HTML a un espacio abierto y también cómo ocultar HTML existente con CSS (es decir, display: none en la clase del div relevante, que supongo que solo tengo que encontrar usando el inspector).
Pero, ¿cómo se sobrescribiría el HTML, como mover un componente de lugar? ¿Tendrías un ejemplo breve?
Estoy citando parcialmente el enlace compartido por simon:
Ejemplo rápido de rellenar un outlet con un cuadrado rojo grande; aquí el outlet está ubicado encima de la lista de publicaciones en una vista de tema:
Ejemplo rápido de sobrescribir la plantilla de la barra de navegación:
<script type="text/x-handlebars" data-template-name="components/navigation-bar">
{{#each navItems as |navItem|}}
{{navigation-item content=navItem filterMode=filterMode category=category}}
{{/each}}
<div style="background: red; padding: 10px; float: left;">He añadido este bloque en la plantilla de la barra de navegación</div>
{{custom-html name="extraNavItem" tagName="li"}}
{{!- esto se hace para evitar DIV dentro de UL, originalmente {{plugin-outlet name="extra-nav-item"}}
{{#each connectors as |c|}}
{{plugin-connector connector=c class=c.classNames tagName="li" args=(hash category=category filterMode=filterMode)}}
{{/each}}
</script>
Vale. Ahora empiezo a entenderlo. Esto es realmente útil.
1. ¿De dónde viene lo de: type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name? (es decir, ¿cómo sé qué debo poner allí)?
Y con el ejemplo de código que diste para sobrescribir una plantilla, empiezo a ver cómo es posible, porque puedo tomar el código de la plantilla y moverlo, eliminarlo, añadirle cosas, etc.
2. ¿Así que obtengo el código de la plantilla desde el enlace de GitHub que proporcionaste? Si es así, tiene sentido, pero parece difícil encontrar el código correcto. Por ejemplo, ¿cuál es la plantilla de la página de inicio?
3. Luego, pego ese código relevante en el panel de control de “editar css/html”. Pero ¿dónde, bajo la primera opción (</head>)? Supongo que sí por tu respuesta anterior, pero sería útil confirmarlo.
Para encontrar el nombre y la ubicación de un componente (outlet), creo que la mejor opción es el plugin que enlacé más arriba.
Para encontrar la plantilla que corresponde a la parte de la página que quieres editar… eso es un poco más complicado.
No conozco una forma sencilla. Sería genial contar con un plugin similar.
A veces, busco en el HTML de la página algún código (como una clase CSS, por ejemplo) que parezca único, y luego lo busco en todos los archivos de plantillas. He clonado el repositorio de Discourse en mi ordenador personal y busco entre todos esos archivos usando Sublime Text, pero estoy seguro de que hay otras formas, mejores, de hacerlo.
Otras veces, examino el código de componentes de temas existentes que modifican las ubicaciones de la página que también quiero personalizar.
Sí, es difícil, pero yo no soy un experto y supongo que hay formas más eficientes de hacerlo.
Sí.
Cuando vienes de Wordpress o phpBB y estás acostumbrado a editar directamente los archivos de plantillas en tal o cual directorio, Discourse puede parecer críptico…
Gracias. Sin embargo, al compararlo con WordPress, al menos en mi opinión, una gran ventaja es que Discourse utiliza Ruby y JavaScript en lugar de PHP.
