Manual · 3

Páginas y árbol de páginas

Estructura y URL

La página de inicio es la raíz del árbol y tiene la URL /. Cualquier otra página cuelga de una página padre; su URL se compone de los slugs: la página webdesign bajo leistungen → /leistungen/webdesign.

  • Los slugs se componen de a-z, 0-9, ., _, - y empiezan por una letra o un dígito. Bajo la misma página padre, un slug debe ser único.
  • Slugs reservados directamente bajo la página de inicio: cms-admin, api, media, _assets, sitemap.xml, healthz, favicon.ico, robots.txt.

Varios sitios web

Una instalación puede alojar varios sitios web, por ejemplo la web de la empresa y una tienda, o páginas para distintas marcas. Cada página raíz del árbol de páginas es un sitio web propio, con su propio árbol de páginas, menú principal (nav()), página 404, sitemap y caché de páginas.

  • Crear: en el árbol de páginas, + Sitio web → nombre y dominios (uno por línea, p. ej. shop.firma.de y www.shop.firma.de).
  • Icono del sitio web (favicon): en el editor de la página de inicio, en Ajustes → Sitio web → Icono del sitio web, elige una imagen de la gestión de archivos; lo ideal es un SVG o un PNG cuadrado de al menos 180 × 180 px (así sirve también como icono en la pantalla de inicio del iPhone). Todas las páginas del sitio web reciben el <link rel="icon"> correspondiente, y /favicon.ico sirve el icono. Si una página define su propio icono en el campo Head, ese tiene prioridad. En el template, la URL está disponible como {{ site.favicon }}.
  • Los dominios de un sitio web existente se cambian en el editor de su página de inicio, en Ajustes → Sitio web. Un dominio solo puede pertenecer a un sitio web. Al guardar se eliminan el esquema, el puerto y la ruta (https://Shop.de:8443/x → shop.de).
  • Sitio web predeterminado: las visitas a través de dominios que no están asignados a ningún sitio web, incluidos localhost o la dirección IP del servidor, muestran el sitio web predeterminado. Aparece arriba en el árbol de páginas y lleva la insignia Predeterminado.
  • Se comparten los Snippets, los componentes, los archivos CSS/JS, los archivos, las Collections y las fuentes REST. Así, un componente de cabecera puede funcionar en varios sitios web; con {{ site.title }} o {% if site.id == 1 %} puede variar según el sitio web.
  • Ver sin dominio real: el enlace de ruta de la parte superior del editor añade ?_site=<ID>. Los administradores con sesión iniciada ven entonces ese sitio web, también al seguir navegando, hasta que se elige otro. Para los visitantes, el parámetro no tiene efecto, y un dominio coincidente siempre tiene prioridad.
  • Probar en local con un dominio propio: añade además un dominio bajo .localhost, p. ej. shop.localhost. Los navegadores dirigen todo lo que está bajo .localhost a tu propio equipo sin DNS y sin archivo hosts: http://shop.localhost:8080/ muestra entonces ese sitio web, también sin iniciar sesión, es decir, tal como lo ven los visitantes. El puerto solo se indica en la dirección, no en los dominios. Herramientas como curl no siempre resuelven .localhost por sí mismas; ahí ayuda curl -H "Host: shop.localhost" http://127.0.0.1:8080/.
  • Eliminar un sitio web: en el editor de su página de inicio, en Ajustes. Se eliminan todas las páginas del sitio web; por seguridad tienes que escribir el nombre. También se puede eliminar el último sitio web: después, cualquier dirección devuelve la página 404 hasta que vuelvas a crear uno.

Para que un dominio llegue realmente a IllusionCMS, debe apuntar al servidor mediante DNS y estar configurado en el proxy inverso (consulta Puesta en marcha).

Sitios multilingües

Cada idioma es un árbol de páginas propio: un subárbol del mismo sitio (/en/…) o un sitio aparte con su propio dominio (firma.de y firma.com). Le dices a IllusionCMS qué idioma tiene un árbol y qué páginas van juntas – de hreflang, el sitemap y <html lang> se encarga él solo.

Definir el idioma: En el editor, en Ajustes → Idioma – un código BCP 47 como de, en, fr, de-at o pt-br (elígelo de la lista o escríbelo libremente). El idioma lo heredan todas las subpáginas sin uno propio: defínelo una vez en el sitio (página de inicio) y una vez en la página de inicio de cada subárbol de idioma, p. ej. /en. Vacío significa «hereda de arriba»; la indicación junto al campo muestra qué idioma rige ahora. Si ninguna página por encima tiene idioma, rige de. En el árbol de páginas, las páginas con idioma propio muestran un pequeño código.

La página recibe automáticamente <html lang="…">; en los templates el idioma está disponible como {{ page.lang }}. Un lang= en los Atributos para <html> sigue teniendo prioridad; al actualizar a esta versión se copió una vez al campo Idioma.

Vincular versiones de idioma: En la sección Versiones de idioma de los ajustes → Vincular… → busca páginas de todos los sitios por título, ruta o idioma y haz clic en la correcta. Aparecen en gris las páginas en el mismo idioma, las ya vinculadas y aquellas cuyo idioma ya existe en el grupo – una página por idioma. Si la página elegida ya está vinculada con otras versiones, IllusionCMS pregunta si debe moverla. La lista muestra idioma, título, ruta (en otros sitios con su nombre) y un enlace para abrirla. Desvincular quita una versión, Salir del grupo quita la página actual; si solo queda una página, el grupo se disuelve. Borrar una página también la desvincula. El vínculo usa el idioma guardado – tras cambiar el campo Idioma, guarda primero.

Automático en cuanto hay al menos dos versiones publicadas vinculadas:

  • hreflang: En el <head> hay por cada versión (también para la propia página) un <link rel="alternate" hreflang="en" href="https://firma.com/contact">. Las direcciones son absolutas – mediante el primer dominio del sitio correspondiente, sin dominio mediante la dirección solicitada. Si el campo head de la página ya contiene etiquetas rel="alternate" hreflang propias, IllusionCMS no emite ninguna. Además se añade hreflang="x-default": si todas las versiones están en el mismo sitio (subárboles como / y /de), apunta a la versión en el idioma de ese sitio; si no, a la del idioma del sitio predeterminado (si la hay).
  • Sitemap: Cada URL con versiones recibe entradas xhtml:link con hreflang, también en la exportación estática.

Los borradores no cuentan.

Selector de idioma: translations() devuelve las versiones publicadas de la página actual, ordenadas por código de idioma, cada una con lang, title, url y current (la propia página). Sin vínculos, la lista solo contiene la página actual – así que el selector puede estar en el layout y queda vacío donde no hay nada que cambiar ({% if translations()|length > 1 %}). language_name(code) muestra el nombre del idioma en ese mismo idioma:

<nav class="sprachen">
  {% for v in translations() %}
    {% if v.current %}<span aria-current="true">{{ language_name(v.lang) }}</span>
    {% else %}<a href="{{ v.url }}" hreflang="{{ v.lang }}" lang="{{ v.lang }}">{{ language_name(v.lang) }}</a>{% endif %}
  {% endfor %}
</nav>

Las versiones en otro sitio enlazan a su dominio.

Menú por idioma: nav() devuelve siempre las subpáginas de la página de inicio del sitio; en /en/… mostraría el menú alemán. lang_root() devuelve la página de inicio del árbol de idioma de la página actual: la propia página o la más cercana por encima con su propio Idioma; si no hay ninguna, la página de inicio del sitio (también en las páginas de detalle catch-all y en la vista previa). Así un único layout compartido construye para cada idioma el menú adecuado, con el enlace a la página de inicio incluido:

{% with start=lang_root() %}
<a class="logo" href="{{ start.path }}">{{ site.title }}</a>
<nav>{% for p in children(start.id) %}<a href="{{ p.path }}">{{ p.title }}</a>{% endfor %}</nav>
{% endwith %}

Si el árbol inglés está debajo de la página de inicio alemana (/en), activa Ocultar en menús en /en; si no, «English» aparece en el menú alemán. La página sigue siendo accesible desde el selector de idioma. lang_root(12) devuelve el árbol de idioma de la página 12.

Collections por idioma: Una Collection tiene un idioma (esquema → Idioma de las entradas). Para varios idiomas creas Collections separadas, p. ej. blog (idioma de) y blog-en (en), y vinculas las entradas en el diálogo de la entrada en Versiones de idioma – igual que las páginas; la búsqueda abarca las entradas de las demás Collections con idioma. Guarda primero las entradas nuevas. Si las Collections tienen una página de detalle (esquema), las páginas de detalle también reciben hreflang y entradas en el sitemap, y translations(post) devuelve las versiones de una entrada:

{% with post=item("blog", "slug", route.slug) %}
  {% for v in translations(post) %}<a href="{{ v.url }}" hreflang="{{ v.lang }}">{{ language_name(v.lang) }}</a> {% endfor %}
{% endwith %}

Límites:

  • IllusionCMS solo recuerda qué va junto. No traduce nada ni detecta si una versión está desactualizada.
  • Las páginas solo se pueden vincular con páginas, las entradas solo con entradas. Las entradas de Collections sin idioma no se pueden vincular.
  • nav() muestra siempre el menú principal del sitio (subpáginas de la página de inicio); para menús por idioma usa children(lang_root().id) (ver arriba).
  • El idioma de la interfaz de administración (abajo en el menú) no tiene nada que ver con el idioma del contenido.

Mover páginas

En el árbol de páginas, arrastrando y soltando:

  • sobre el borde superior de una página → se coloca delante,
  • sobre el borde inferior → detrás,
  • sobre el centro → como subpágina.

La página de inicio no se puede mover, y una página no se puede mover dentro de su propio subárbol. Al mover una página cambia su URL y la de todas sus subpáginas; los enlaces en el HTML de otras páginas no se ajustan automáticamente. Por eso, para los menús es mejor usar nav()/children() (consulta Templates), que devuelven las rutas actuales.

El árbol de páginas se puede contraer con la flecha de la cabecera si necesitas más espacio para el editor.

Publicar y borradores

  • Publicada: la página es accesible públicamente.
  • Borrador: la página devuelve 404 públicamente. Un borrador solo se oculta a sí mismo; las subpáginas publicadas siguen siendo accesibles. Así puedes crear «carpetas» como /blog, que no son una página en sí, pero cuyos artículos sí lo son.
  • Con la sesión iniciada sigues viendo los borradores: añade ?preview=1 a la URL (p. ej. /neue-seite?preview=1) o usa el enlace de ruta de la parte superior del editor.
  • Enlaces de vista previa para otras personas (p. ej. clientes): en la pestaña Ajustes, en Enlaces de vista previa → validez (1, 7 o 30 días) → Crear enlace (se copia al instante). El enlace muestra el estado guardado de la página y de sus subpáginas sin iniciar sesión, también como borrador, y en las páginas Catch-All también las entradas de Collection que aún son borrador (/blog/neuer-artikel?ic_preview=…; en el template, preview es entonces verdadero). No abre otras páginas. Los buscadores reciben noindex, las estadísticas no cuentan nada y no se guarda nada en caché. Los enlaces caducados o revocados (papelera) muestran «Vista previa caducada». En modo remoto, el enlace se crea en el servidor y apunta a su dirección.

Ajustes de la página

En la pestaña Ajustes del editor:

Ajuste Significado
Título Nombre de la página en el árbol de páginas, en los menús (nav()) y valor predeterminado de <title>.
Slug Parte de la URL. No se puede cambiar en la página de inicio.
Idioma Idioma del contenido como código (de, en, fr, de-at …), lo heredan las subpáginas sin uno propio. Vacío = hereda de arriba; la indicación muestra el heredado. Consulta Sitios multilingües.
Versiones de idioma Vincular la misma página en otros idiomas – para hreflang, sitemap y selectores de idioma.
Título SEO <title> opcional, evaluado como template, p. ej. con el título del artículo de blog actual. Vacío = título.
Metadescripción <meta name="description">, admite sintaxis de template.
Imagen de vista previa Imagen para las vistas previas de enlaces en mensajería y redes sociales (og:image), idealmente de 1200 × 630 px. Se aplica a todas las subpáginas que no tengan una propia; una imagen en el sitio web (página raíz) es, por tanto, el valor predeterminado para todas las páginas.
Atributos para <html> / <body> Se emiten sin cambios, p. ej. class="dark". Sin lang=, IllusionCMS pone lang a partir del campo Idioma; un lang= propio aquí tiene prioridad. Las importaciones de Webflow necesitan aquí data-wf-page/data-wf-site.
Publicada ver arriba
Ocultar en menús La página no aparece en nav() ni en children(), pero sigue publicada y accesible: para aviso legal, privacidad, páginas de agradecimiento, landing pages. Con nav(true) o children(id, true) la obtienes igualmente, p. ej. para el menú del pie. En el árbol de páginas aparece sin menú. No disponible en páginas de inicio.
No incluir en el sitemap La página no aparece en /sitemap.xml (páginas de agradecimiento, landing pages).
noindex Los buscadores no deben incluir la página en su índice. Establece <meta name="robots" content="noindex"> y quita la página del sitemap.
nofollow Los buscadores no deben seguir los enlaces de la página (<meta name="robots" content="nofollow">). Ambos juntos dan noindex, nofollow.
Desactivar caché La página se renderiza de nuevo en cada visita (consulta Caché).
Catch-All La página responde también a subrutas inexistentes: la base de las páginas dinámicas.

Vistas previas de enlaces (Open Graph): cada página recibe automáticamente og:title (título SEO), og:description (metadescripción), og:url, og:site_name (nombre del sitio web), og:type y twitter:card; con imagen de vista previa, además og:image con su tamaño y texto alternativo (de la gestión de archivos), y entonces como tarjeta grande. Las direcciones son absolutas: a través del primer dominio del sitio web o, sin dominio, a través de la dirección solicitada. Si una etiqueta ya está en el campo Head o en el HTML importado (Webflow trae las suyas), no se emite dos veces; así puedes, por ejemplo, poner una imagen propia para los artículos de blog de una página Catch-All:

{% if route.slug %}<meta property="og:image" content="https://www.firma.de{{ file(item("blog", "slug", route.slug).bild).url }}">{% endif %}

Archivar como MHTML (abajo en la pestaña) descarga el estado guardado de la página como un único archivo .mhtml, con CSS, imágenes, fuentes y favicon, también de servidores ajenos (p. ej. Google Fonts). Chrome y Edge lo abren con doble clic, también sin conexión; Firefox y Safari no pueden abrir MHTML. Está pensado como instantánea para archivar:

  • Sin scripts: los navegadores no ejecutan JavaScript en MHTML, por lo que los scripts ni siquiera se empaquetan. Los sliders, menús o contenidos cargados por JavaScript aparecen en su estado sin script.
  • Sin srcset: las imágenes llegan con el tamaño de src; srcset y <picture><source> se eliminan.
  • Los archivos de más de 25 MB (p. ej. vídeos) y los archivos inaccesibles se quedan fuera; la página sigue apuntando entonces a la dirección original.
  • Los cambios sin guardar del editor no se incluyen: guarda antes.

Página 404 propia

Cada sitio web puede tener su propia página de error. Se muestra para todas las rutas no encontradas, con estado 404, y recibe la ruta solicitada como route.path.

  • Elegir cualquier página: en el editor de la página de inicio, en Ajustes → Sitio web → Página 404. Se puede elegir cualquier página de ese sitio web; la página elegida sigue siendo accesible en su propia URL, pero no aparece en el sitemap. Los borradores se ignoran.
  • Automático (predeterminado): una página publicada con el slug 404 directamente bajo la página de inicio.
  • Si no existe ninguna de las dos, o aún no hay ningún sitio web, el CMS muestra una página estándar sencilla.

{{ not_found() }} en un template (p. ej. en páginas de detalle) devuelve la misma página 404.

Redirecciones

En Redirecciones (menú principal) rediriges direcciones que ya no existen a otras existentes, p. ej. URL antiguas tras la mudanza desde Webflow o entradas de una página Catch-All cuya parte de URL has cambiado (/blog/123 → /blog/mein-artikel).

  • Crear: De (dirección antigua: ruta, o simplemente pega la URL antigua), A (ruta o URL externa; sugerencias del árbol de páginas), tipo 301 permanente (predeterminado, para buscadores) o 302 temporal.
  • Las redirecciones solo actúan en direcciones muertas: si existe una página en esa ruta, se muestra la página. Las mayúsculas/minúsculas y la barra final no importan; los parámetros de consulta (?utm_source=…) se trasladan al destino.
  • Automático: si renombras o mueves una página publicada, IllusionCMS crea redirecciones desde las direcciones antiguas de la página y de todas sus subpáginas (marca auto). Las redirecciones existentes a la dirección antigua se actualizan también, de modo que no se forman cadenas.
  • Falta el destino marca las redirecciones cuyo destino ya no es una página.
  • Registro 404: debajo ves qué direcciones muertas se solicitan: cuántas veces, cuándo por última vez y desde dónde (p. ej. un enlace antiguo en Facebook). Redirigir lleva la dirección al formulario. Ignorar no elimina: solo oculta la dirección, que pasa con su contador a la pestaña Ignoradas y no vuelve a aparecer como abierta con nuevas solicitudes. Muchas entradas como /wp-login.php proceden de bots y se pueden ignorar. Si te equivocas, recupera la dirección con Restaurar en la pestaña Ignoradas; Ignorar todas y Restaurar todas actúan sobre toda la lista. Las direcciones ignoradas no aparecen en la exportación CSV.
  • Editar en Excel (CSV): Exportar CSV (arriba a la derecha) descarga como CSV las direcciones abiertas del registro 404 (las más frecuentes primero, columna A vacía) y, debajo, todas las redirecciones. Escribe los destinos en A (una ruta como /neu o una URL), cambia si hace falta los destinos o el Estado (301/302) de las redirecciones existentes y vuelve a subir el archivo con Importar CSV. La coincidencia se hace por De: las filas con destino crean o modifican redirecciones, las filas sin destino quedan abiertas. Con Eliminar redirecciones que faltan en el archivo o no tienen destino también limpias a través del archivo. La vista previa muestra cada cambio y todos los errores (p. ej. bucles, rutas duplicadas, rutas de páginas existentes); si hay errores, no se aplica nada. Excel: guarda como CSV UTF-8; las columnas Tipo, Accesos, Último y Procedencia son solo informativas. Las celdas que empiezan por =, +, - o @ reciben un ' inicial en la exportación (también en las collections) para que Excel no las ejecute como fórmulas; la importación lo quita.
  • En la exportación estática, las redirecciones van en el .htaccess; en los Bundles se transfieren también.

robots.txt

Cada sitio web tiene automáticamente un /robots.txt que lo permite todo a los buscadores y remite al sitemap:

User-agent: *
Allow: /

Sitemap: https://www.firma.de/sitemap.xml

Las reglas propias se introducen en el editor de la página de inicio, en Ajustes → Sitio web → robots.txt, p. ej. Disallow: /intern/. Si falta una línea Sitemap:, se añade. Las páginas individuales es mejor sacarlas del índice con noindex: una página bloqueada por robots.txt puede aparecer igualmente en los resultados de búsqueda, solo que sin contenido.

Sitemap

En /sitemap.xml, IllusionCMS genera automáticamente un sitemap de todas las páginas publicadas, sin la página 404 y sin las páginas con No incluir en el sitemap o noindex. Las subpáginas de borradores se incluyen (al fin y al cabo, son accesibles). Las páginas de detalle tras páginas Catch-All (artículos de blog individuales) se añaden automáticamente si la página lee su entrada como en el ejemplo de Catch-All mediante item("blog", "slug", route.slug): entonces cada entrada publicada con un slug no vacío aparece en el sitemap como /blog/<slug>, con la fecha de modificación de la entrada.


Estadísticas de visitantes

En Estadísticas ves cuántos visitantes llegaron, con varios sitios web para todos juntos (predeterminado; en la lista de páginas aparece entonces el sitio web delante de la ruta) o para uno seleccionado, qué páginas visitaron, de dónde venían (dominio del enlace de referencia o utm_source), desde qué países (mapa del mundo con lista) y con qué navegador, sistema operativo y dispositivo: para hoy, 7 o 30 días, 12 meses o un periodo propio (Desde – hasta, tres años como máximo), siempre comparado con el periodo anterior de la misma duración. Con más de tres meses, el gráfico muestra meses en lugar de días.

Cómo se cuenta: en el servidor, en cada visita a una página servida con éxito (también desde la caché), sin cookies, sin JavaScript y sin servicios externos. No se cuentan los bots y rastreadores, las páginas precargadas (prefetch), la vista previa ni tus propias visitas mientras tengas la sesión iniciada en el admin.

Los visitantes únicos se reconocen mediante un hash de la dirección IP, el identificador del navegador y un valor aleatorio que se genera de nuevo cada día; el anterior se elimina. Las direcciones IP nunca se guardan, y al día siguiente el hash ya no se puede asociar a nadie. Por eso, alguien que viene tres días cuenta como tres visitantes diarios: el número de visitantes de un periodo es la suma de los días. La procedencia, el país, el navegador, el sistema operativo y el dispositivo se cuentan por visitante y día, no por visita.

Descargas: la tarjeta Descargas muestra qué archivo se ha descargado y cuántas veces; se cuentan las solicitudes en /media/… de archivos como PDF, ZIP o documentos de Office, también mediante enlaces directos (p. ej. desde un boletín; el sitio web se deduce del dominio). Las imágenes, fuentes y CSS/JS nunca cuentan, igual que los archivos que una página incrusta (p. ej. un PDF en un <iframe>). En los vídeos y PDF que el navegador carga por partes, solo cuenta la primera solicitud. Como en las páginas, quedan excluidos los bots, el prefetch y tus propias solicitudes como administrador con sesión iniciada; Visitantes cuenta los visitantes únicos por archivo y día. Las descargas no cuentan como páginas vistas. Una descarga interrumpida cuenta igualmente: sin solicitudes individuales no se puede afinar más. En la exportación estática no hay recuento.

Países: al contar, el servidor busca la IP en las listas públicas de asignación de los cinco registros de Internet (RIPE NCC, ARIN, APNIC, LACNIC, AFRINIC), en local y sin servicios externos; solo se guarda el código de país. Es el país de registro del bloque de direcciones, normalmente el país del proveedor de Internet; con VPN, redes corporativas y algunos operadores móviles difiere de la ubicación real. Las ciudades no existen a propósito. IllusionCMS descarga las listas (unos 45 MB en total) justo después del primer arranque y luego semanalmente en la tarea nocturna; el estado lo ves en Ajustes → Sistema → Datos de países. Allí puedes actualizar de inmediato, desactivar los países por completo o, para servidores sin acceso a Internet, subir a mano los archivos delegated-…-extended-latest. Si una actualización falla, se mantienen los datos anteriores. Las visitas anteriores a la primera actualización no tienen país.

Exportar CSV descarga todos los valores diarios del periodo elegido (y del sitio web elegido o de todos): por cada día, una fila para el sitio web en conjunto, cada página, cada característica (procedencia, navegador, sistema operativo, dispositivo, país) y cada archivo descargado (tipo Download), con visitas o descargas y visitantes. El archivo se abre directamente en Excel y sirve para tablas dinámicas; las características solo cuentan visitantes.

Solo se guardan valores diarios; se conservan hasta que los restableces abajo en la página. Las estadísticas no forman parte de los Bundles. Si este método es admisible sin consentimiento para tu sitio web depende de cada caso: está diseñado para minimizar datos, pero no sustituye al asesoramiento jurídico; menciónalo en la política de privacidad.