Stella Nova · componentes
Espécimen de primitivos del skin. Cada bloque documenta los tokens en juego y muestra el componente con texto simulado.
Colofón tipográfico
Cabeceras
== Sección principal == === Sub-sección === ==== Agrupación menor ==== ===== Apostilla ===== ====== Referencia inline ======
Heading 1 · display editorial
Heading 2 · sección principal
Heading 3 · sub-sección
Heading 4 · agrupación menor
Heading 5 · apostilla
Heading 6 · referencia inline
El H1 del artículo se genera automáticamente desde
el título de la página — no se escribe en el cuerpo. La jerarquía
editable empieza en == (dos signos igual a cada lado).
Sumá un signo por cada nivel. No saltes niveles (no pongas
==== después de == sin un ===
intermedio).
Con tres o más cabeceras, MediaWiki inserta automáticamente la
tabla de contenidos. Se puede forzar con __TOC__ o
desactivar con __NOTOC__.
Cuerpo de texto
Texto corrido con '''negrita''', ''cursiva'' y '''''ambas'''''. Enlace interno: [[Página]] o [[Página|texto a mostrar]]. Enlace externo: [https://wiki.ead.pucv.cl texto] o simplemente https://wiki.ead.pucv.cl. Salto de párrafo: una línea en blanco. Filete horizontal: cuatro guiones al inicio: ----
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Enlaces: interno (carmín · azul en oscuro) · externo (con ícono
--sn-ext-icon) · rojo (página inexistente, clase
.new automática que MediaWiki añade al detectar el
enlace muerto).
Para citar texto inline usá <cite>…</cite>
(no hay sintaxis wiki dedicada). Para énfasis semántico fuerte,
<strong> y <em> equivalen a
''' y '' pero son más explícitas.
Listas
* Ítem de lista no ordenada * Otro ítem ** Sub-ítem (dos asteriscos) *** Sub-sub-ítem # Ítem de lista ordenada # Segundo ## Sub-ítem ordenado ; Término primario : Definición del término ; Término secundario : Definición. : Texto sangrado (sin término) :: Doble sangría
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Sub-ítem (dos asteriscos)
- Otro sub-ítem
- Ut enim ad minim veniam
- Primer ítem de la secuencia
- Segundo ítem
- Tercero
- Término primario
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Término secundario
- Sed do eiusmod tempor incididunt ut labore.
Cada ítem ocupa una línea. La sangría se controla repitiendo el
marcador (**, ##). Las listas se cortan al
encontrar una línea en blanco o un marcador distinto.
Las listas de definición (; y :)
también sirven para sangrar texto suelto: una línea iniciada con
: sin ; previo produce sólo la sangría.
Tablas
{| class="wikitable"
|+ Título descriptivo de la tabla
! Token !! Rol !! Familia
|-
| --sn-fs-display || H1 display || text
|-
| --sn-fs-xl || H2 || text
|-
| --sn-fs-lg || H3 || text
|-
| --sn-fs-base || Cuerpo || text
|}
| Token | Rol | Familia |
|---|---|---|
--sn-fs-display | H1 display | text |
--sn-fs-xl | H2 | text |
--sn-fs-lg | H3 | text |
--sn-fs-base | Cuerpo | text |
Estructura: {| abre la tabla y va con la clase
wikitable para heredar los estilos del skin.
|+ es el título (<caption>).
! son celdas de encabezado, | son celdas
de datos. |- separa filas. |} cierra.
Atajos: !! y || permiten poner varias
celdas en una sola línea. Modificador
class="wikitable plantilla" retira los bordes internos
para fichas (perfil, ficha técnica).
Cita y poema
<blockquote>
Texto de la cita en uno o más párrafos.
— Autoría, <cite>Obra</cite> (año)
</blockquote>
<poem>
no fue
el hallazgo
ajeno a los descubrimientos
¡oh marinos!
sus pájaras salvajes
el mar incierto
las gentes desnudas entre sus dioses
</poem>
el descubrimiento no nos descubre nuestro propio continente, sino que nos da el continente propio.
no fue el hallazgo ajeno a los descubrimientos ¡oh marinos! sus pájaras salvajes el mar incierto las gentes desnudas entre sus dioses
Para la cita: <blockquote>…</blockquote>
envuelve uno o varios párrafos. La atribución va como texto al final
(no hay marcado específico).
Para el poema: cada línea del wikitexto produce una línea visual
y los espacios al inicio se preservan literalmente
— así se reconstruye la espacialidad del verso. La extensión Poem
inserta un <br> tras cada línea, pero el skin lo
suprime visualmente porque el \n con
white-space: pre-wrap ya produce el salto (de no hacerlo
quedaría un espacio doble entre líneas).
Código
Código inline: <code>const x = 1</code>.
Bloque indentado (lo más simple): empezar
la línea con un espacio.
function ejemplo() {
return 42;
}
Bloque preformateado explícito:
<pre>
texto monoespaciado, conserva
saltos de línea y espacios.
</pre>
Inline: const lorem = ipsum(dolor) dentro de un párrafo.
// Bloque pre > code
function loremIpsum(dolor, sit) {
const amet = consectetur(dolor);
return amet + sit;
}
Para citar nombres de variables, comandos o identificadores en
medio de un párrafo, usá <code>. Para mostrar
fragmentos largos, <pre> + <code>
es el patrón estándar (lo que aquí se renderiza).
El bloque preformateado por sangrado (línea iniciada con un
espacio) es el más rápido pero no permite resaltado ni metadatos.
La wiki no carga SyntaxHighlight en producción.
Botones
Los botones son parte de la interfaz del skin, no se escriben en el wikitexto del artículo. Aparecen automáticamente en formularios (editar, mover, subir archivo), en diálogos de extensiones (PageForms, ReplaceText) y en barras de acción. Los botones de ícono pueblan el cluster a la derecha del título cuando la usuaria tiene permisos sobre la página.
Si una plantilla necesita un botón propio, lo mejor es envolver
un enlace con la clase sn-btn:
<span class="sn-btn">[[Página|Texto]]</span>.
Formularios
Los formularios estándar de MediaWiki (preferencias, búsqueda
avanzada, mover página) los provee el core y heredan estos estilos
automáticamente. Para crear formularios editoriales (fichas de
proyecto, observaciones, etapas, travesías) la wiki usa la
extensión PageForms: el formulario se define en
una página Plantilla:Formulario/Nombre con la sintaxis
de PageForms ({{{field|nombre|input type=…}}}) y el
skin lo renderiza con estos primitivos.
Pestañas de página
Las pestañas las genera el skin a partir de los namespaces y
permisos: Artículo · Discusión · Editar · Historial · Más.
No se escriben en el wikitexto. Para añadir pestañas propias, las
extensiones usan el hook SkinTemplateNavigation; el
skin las recibe y las renderiza en la misma bandeja.
Avisos (washes)
<div class="sn-wash sn-wash-ok"> '''Confirmación.''' Texto del aviso. </div> <div class="sn-wash sn-wash-info"> '''Información.''' Aviso neutro. </div> <div class="sn-wash sn-wash-warn"> '''Advertencia.''' Precaución. </div> <div class="sn-wash sn-wash-danger"> '''Error.''' Bloqueo o falla. </div>
Variantes: sn-wash-ok (confirmación) ·
sn-wash-info (aviso neutro) ·
sn-wash-warn (precaución) ·
sn-wash-danger (error o bloqueo). Estos avisos los
inserta el skin en respuesta a acciones del sistema, pero también
se pueden emitir desde una plantilla envolviendo el contenido en
un <div> con la clase correspondiente.
Badges y contadores
<span class="sn-badge">Neutro</span> <span class="sn-badge sn-badge-nova">Nova</span> <span class="sn-badge sn-badge-ok">Activo</span> <span class="sn-badge sn-badge-warn">En revisión</span> <span class="sn-badge sn-badge-danger">Bloqueado</span> <span class="sn-pill">42 ítems</span>
Badges para estados cortos (palabras); pills para contadores
numéricos (familia mono). Variantes:
sn-badge-nova · -ok · -warn
· -danger. Útiles para marcar el estado de una etapa,
un proyecto o una observación dentro de fichas y plantillas.
Tabla de contenidos
== Sección uno == == Sección dos == === Sub-sección 2.1 === === Sub-sección 2.2 === == Sección tres == Palabras mágicas (control fino): __TOC__ inserta el índice en este punto. __NOTOC__ suprime el índice de la página. __FORCETOC__ fuerza el índice aun con < 4 cabeceras.
Por defecto la tabla aparece automáticamente cuando hay 4 o más
cabeceras (==, ===, etc.), justo antes de
la primera. Las palabras mágicas con doble guión bajo a cada lado
la sobrescriben (sensibles a mayúsculas).
El skin la renderiza en la posición donde la coloque
MediaWiki — respeta la ubicación de __TOC__.
Solo cambia su vestimenta (numeración monoespaciada, filete
izquierdo carmín marcando la sección activa).
Nota al margen
<aside class="sn-notice" role="note"> '''Nota.''' Texto del aviso, con [[enlaces]] si hace falta. </aside>
El cuerpo del artículo continúa debajo del aviso, manteniendo el flujo de lectura sin saltos visuales bruscos.
A diferencia de los washes (que codifican una severidad), la
nota al margen es información meta del artículo: redirecciones,
banners de plantilla, advertencias editoriales. Va dentro del
cuerpo y rompe sutilmente el flujo sin alarmar. Se usa también
para el fragmento administrable
Stella-Nova:Aviso que se inyecta al tope del paper.
Imágenes a sangre completa (.full-width)
[[Archivo:foo.jpg|class=full-width]] [[Archivo:foo.jpg|frameless|class=full-width]] <div class="full-width">[[Archivo:foo.jpg]]</div>
Párrafo del cuerpo, con el ancho de lectura normal de la hoja.
El párrafo siguiente regresa al ancho de lectura.
El truco: margin-inline: calc(-1 * var(--sn-paper-px)), el
mismo padding lateral que la hoja expone como contrato. Sólo funciona
dentro de .sn-paper / .sn-canvas. También casa el
token con apóstrofes 'full-width' que MediaWiki preserva en
[[Imagen:…|class='full-width']].
Botón de contenido (.wiki-btn)
<span class="wiki-btn">[[Página|Etiqueta]]</span> <span class="wiki-btn red">[[…|Rojo]]</span> <span class="wiki-btn green">[[…|Verde]]</span>
Color 100 % tokenizado: por defecto → --sn-ink-soft;
red → --sn-nova; green →
--sn-ok. El enlace interno hereda el color; al hover/foco el
botón se rellena y el texto pasa a --sn-nova-ink (voltea:
blanco en claro, casi-negro en oscuro). La variante blue se
retiró (sin token equivalente, sin uso). Debe vivir dentro de
.sn-body (la regla está acotada a ese contenedor).
Grid / grilla — framework de layout
cols-2
<div class="grid cols-2"> Celda 1 Celda 2 </div>
cols-3
<div class="grid cols-3"> …tres hijos directos… </div>
cols-auto + gap-l (tarjetas auto-fit, gap amplio)
<div class="grid cols-auto gap-l"> …tantas columnas (≥ 16 rem) como quepan… </div>
cols2-1 (tercios asimétricos) + align-center
<div class="grid cols2-1 align-center"> Bloque amplio (dos tercios) Bloque angosto (un tercio) </div>
con dos líneas
stack (flujo vertical) + gap-s
<div class="grid stack gap-s"> …celdas apiladas en columna… </div>
gap-0 (sin separación)
<div class="grid cols-3 gap-0"> …sin separación entre celdas… </div>
alias en español (grilla)
<div class="grilla cols-2"> …equivalente a class="grid cols-2"… </div>
full / completa (a todo el campo)
<div class="grid cols-3 full"> …ocupa todo el campo… </div>
Cada hijo directo de .grid es una celda; URLs
largas o bloques de código no desbordan
(minmax(0, 1fr)). El gap por defecto es
--sn-s-4 (1 rem) y ahora se ajusta con
.gap-0/s/m/l.
Funciona en chrome normal y en __PANTALLACOMPLETA__:
ambos contenedores llevan .sn-body, que es donde el
skin define la regla. En pantalla completa el contenido es libre
(sin columna central), así que .grid es la herramienta
recomendada para maquetar ahí. Si la grilla aparece "rota" (en una
sola columna), revisar que esté dentro de .sn-body.