Saludos, queridos lectores. En la última lección llenamos el sitio con algo de contenido (), ahora es el momento mostrar todo en el menú para que los usuarios puedan navegar hasta ellos.

Crear dinámica menú en MODX usaremos un fragmento PdoMenú del paquete pdoHerramientas. Antes de comenzar, lea la documentación principal.

pdoMenú Documentación

Opciones

Opciones de plantilla

Opciones de clase CSS

Ejemplos oficiales

Puedes leer la documentación oficial aquí. Ahora veamos las llamadas de menú más típicas.

Llamar PdoMenú

Opción 1. En lugar de este menú estático llamar al fragmento pdoMenu, para esto en el árbol de recursos, en la pestaña “ Elementos”en la sección de fragmentos, expanda el hilo pdoHerramientas, luego haga clic en pdoMenú botón izquierdo del mouse (no suelte el botón) y arrastre este fragmento al lugar donde desea abrir el menú, luego en la ventana que se abre, complete los parámetros necesarios y haga clic en " Ahorrar«.

Opción 2. Simplemente escribimos la llamada manualmente.

Ejemplos típicos

Menú normal de un nivel

Por ejemplo, tenemos el menú más común, con el siguiente marcado html.

El resultado es el siguiente código para llamar al menú:

• &parents=`0` - lista de padres (en mi caso no limito la selección, ya que de todos modos solo mostraré salida ciertas paginas);
• &level=`1` — nivel de anidamiento (en este caso no hay ninguno);
• &resources=`2,3,4,5` — lista de recursos que deben mostrarse en el menú;
• &firstClass=`0` — clase para el primer elemento del menú (no cuál);
• &lastClass=`0` — clase último punto menú (no cualquiera);
• &outerClass=`top-menu` — clase contenedora de menú (sustituida en ul);
• &hereClass=`current-menu-item` — clase para el elemento de menú activo (sustituido en li);
• &rowClass=`menu-item` - clase de una línea de menú (sustituida en li).

Menú de arranque personalizado de dos niveles

Estático código html se ve así:

Su código de salida será así:

Además, en la próxima lección daré un par de salidas más de menús desplegables basados ​​en bootstrap (y esto es para aquellos que no captaron la esencia. Bueno, entonces lo haremos).

A primera vista, todo parece complicado, pero no lo es, lee la documentación con más detalle, haz preguntas en los comentarios, definitivamente te ayudaré.

Puede cambiar el menú superior del panel de control de MODX cambiando el orden de los elementos u ocultando algunos de ellos a ciertos usuarios. También puede agregar nuevos elementos a los existentes o acciones personales, que usted crea. A continuación, veremos primero los métodos utilizados para modificar el menú superior y luego algunos ejemplos prácticos.

Conceptos principales del menú

El sistema de menús en Revolution tiene una arquitectura completamente nueva. No tiene casi nada en común con el sistema de menús Evolution excepto los nombres de algunos elementos. No necesitas entender para personalizar el menú. nuevo sistema menú, pero esta comprensión ayuda en el trabajo, especialmente si vas a crear paginas personales paneles de control, a los que se accederá a través del menú.

Árbol de menú superior

Ir a la sección del menú superior Sistema -> Acciones y verás los conceptos básicos del sistema de menús. El árbol de la derecha (Menú superior) contiene los elementos del menú y los submenús reales. Si expande las distintas secciones, verá que esta es una copia exacta del menú superior. Elementos nivel superior es lo que ves en la parte superior del panel de control. Casi siempre son contenedores para submenús. Cada submenú del árbol corresponde a una acción en el panel de control. Cuando hace clic en un submenú, se realiza una acción en el panel de control (por ejemplo, borrar el caché del sitio o ir al panel de control de acceso). De hecho, los elementos del menú superior pueden ser acciones, pero ninguno de ellos está configurado de esa manera.

Lo que sucede cuando hace clic en un elemento del menú se define aquí. Como verá, puede anular fácilmente lo que sucede cuando hace clic en un elemento del menú y también puede cambiar el nombre, ocultar o eliminar elementos de la lista del menú. También puedes agregar elementos al menú y configurar qué sucede cuando haces clic en ellos. De hecho, puedes crear un sistema de menú completamente nuevo para el panel de control que reemplaza al existente y diferentes usuarios pueden ver diferentes menús. Todo esto se puede hacer sin cambiar el núcleo MODX.

La visualización física del menú también se configura aquí. No es coincidencia que todos los elementos del menú estén en el mismo orden que en el menú superior. Si los mueves en el árbol, el menú superior también cambiará cuando se recargue la página.

Veamos algunas de las acciones del Panel de control, pero tenga cuidado de no cambiarlas: haga clic en el botón "Cancelar" después de verlas.

En el árbol ubicado a la derecha (Menú superior), haga clic en clic derecho en el elemento "Sitio" y seleccione "Editar" en el menú desplegable. Aparece un cuadro de diálogo Editar con campos que definen la acción del menú:

Nombre- nombre del elemento del menú

Descripción- descripción del elemento del menú

Acción- especificación del archivo PHP que se ejecutará

Icono- icono adicional para el elemento del menú

Opciones- parámetros opcionales $_GET para URL

Entrenador de animales- Código JS que se ejecutará

Derechos de acceso- lista separada por comas de derechos de acceso requeridos

Tenga en cuenta que la mayoría de los campos del elemento "Sitio" están vacíos. Esto se debe a que es un contenedor para los submenús que contiene. Si hace clic en el menú "Sitio" en el menú superior, no sucede nada.

Veamos una subsección del menú que hace algo. Haga clic en "Cancelar" para completar el cuadro de diálogo, expanda la sección "Sitio" del árbol del panel derecho, haga clic derecho en el submenú "Actualizar sitio" y seleccione "Editar".

Tenga en cuenta que el cuadro de diálogo que se abre contiene el contenido de los campos "Manejador" y "Derechos de acceso". El campo Permisos nos dice que el usuario no puede realizar la acción de este subelemento del menú a menos que tenga el derecho de acceso a la caché vacía. El campo Controlador contiene el código JS real que se ejecuta cuando selecciona este subelemento. Todos los elementos en los que se realizan algunas acciones tienen los campos "Acción" o "Manejador" completados. Si se completa el campo "controlador", se ejecuta el código ubicado en este campo y se ignora el campo "Acción". Si el campo "Manejador" no está completo, se ejecuta la acción del campo "Acción". El campo "Acción" suele ser un puntero a un archivo de controlador o a una de las acciones en el árbol de "Acciones" ubicado a la izquierda (que en realidad apunta a los archivos de controlador correspondientes). Cierre el cuadro de diálogo haciendo clic en el botón "Cancelar".

Veamos una variante de un elemento de menú con una acción. Descargue e instale el complemento Batcher a través de Administración de paquetes, vuelva a cargar la página y vaya a la sección nuevamente Sistema -> Acciones. En la sección "Componentes" en el árbol derecho (expándala si es necesario), haga clic derecho en Batcher y seleccione "Editar". Ahora vemos el campo "Acción, no "Manejador" completado: loteador - índice. Complete el cuadro de diálogo de edición haciendo clic en el botón "Cancelar".

En el panel izquierdo, todos los elementos de nivel superior son espacios de nombres. En el árbol de Acciones de la izquierda, expanda el espacio de nombres "batcher". Deberías ver el índice de acciones. Esta es la acción que indica el menú Batcher que vimos en el panel derecho.

Veamos qué podemos hacer con el árbol del menú superior. Los elementos del árbol del menú superior se pueden reorganizar arrastrándolos. Si cambia la ubicación de un elemento de menú en el árbol, el menú superior real también cambiará, aunque deberá volver a cargar la página del Panel de control para verlo.

Para agregar un elemento al menú superior, puede hacer clic derecho en cualquier lugar del área del árbol y seleccionar "Agregar elemento del menú". Para agregar un elemento al menú de nivel superior, también puede hacer clic en el botón "Agregar elemento".

Los elementos del menú se pueden eliminar haciendo clic derecho sobre ellos y seleccionando "Eliminar". Si elimina un elemento del menú, el contenido de sus campos se pierde y se eliminan los elementos secundarios. Esta acción es irreversible.

Si desea eliminar un elemento del menú sin borrarlo (casi siempre es el mejor curso de acción), puede ocultarlo colocando algo en el campo Permisos. Si ya hay algo en este campo, agregue una coma y el nombre del nuevo permiso. Siempre que este derecho de acceso sea un derecho de acceso que nadie más tenga, el elemento del menú será invisible. Puede hacerlo visible nuevamente eliminando el permiso agregado. Si desea mostrar un elemento de menú específico a ciertos usuarios (pero no a todos), simplemente cree una nueva plantilla de política que contenga solo los derechos de acceso del usuario, cree una nueva política basada en esa plantilla y cree una entrada de ACL contextual que se aplique a esos usuarios y asignar esta política.

Para cambiar el título del menú superior, especifique su descripción. Luego ve a la sección de menú. Sistema->Administrar diccionarios. Seleccione el espacio de nombres "principal" y el tema del "menú superior". La lista desplegable de temas contiene más de una página, por lo que es posible que tengas que ir a la segunda página para encontrar el tema del "menú superior". Busque la cadena de idioma para el elemento del menú deseado, haga doble clic en su valor y cámbielo. Cualquier cambio que realice aquí permanecerá vigente después de actualizar su versión de MODX y después de actualizar cualquier componente de terceros.

El método anterior sólo funcionará para los elementos del menú integrados en el kernel. Para los elementos del menú de terceros, deberá seleccionar el espacio de nombres apropiado. Por ejemplo, si quisiera cambiar el elemento de menú correspondiente a Batcher, necesitaría cambiar el valor de la cadena de control del diccionario para el espacio de nombres de Batcher.

Árbol de acciones

Volver a la sección Sistema -> Acciones, si lo dejaste. En el panel izquierdo, haga clic en la acción "indexar" debajo del nombre del "dosificador" y seleccione "Editar" en la lista desplegable. Recuerde que esta es la acción indicada por el elemento del menú Batcher en el panel derecho. Verá que el controlador para esta acción será index y el espacio de nombres será por lotes. Si ahora vamos a la sección Sistema->Espacio de nombres, veremos que la ruta para el espacio de nombres del lote será:

(core_path)componentes/dosificador

Con un enlace de controlador que se ejecutará cuando se haga clic en este elemento del menú, MODX creará una ruta completa como esta:

ruta_espacio_nombres + nombre_controlador + .php

En otras palabras, asumiendo que el núcleo está en la ubicación predeterminada, MODX inicia la ejecución del archivo del controlador en:

núcleo/componentes/batcher/index.php

Si observa este archivo, verá que solo contiene un archivo index.php en el directorio core/components/batcher/controllers, que carga la clase Batcher y la inicializa, ejecutando Batcher en el panel de control. Crearemos un nuevo elemento de menú en Componentes un poco más adelante, cuando creemos páginas de panel personalizadas.

Muchos elementos del menú en el panel derecho no tienen acciones activas que se muestran en el panel izquierdo. Esto sucede porque las rutas a los archivos de su controlador se almacenan en la base de datos MODX y no deben editarse (al menos es más difícil hacerlo). Estas rutas se almacenan en la tabla modx_actions. Cada acción tiene su propio identificador (ID) y la ruta a su controlador. La acción también tiene una URL auxiliar para obtener ayuda contextual cuando el controlador está activo y varios otros campos. Para las acciones que se muestran en el panel Acciones de la izquierda, puede ver el ID entre paréntesis junto al nombre de la acción.

Por lo tanto, agregar un elemento de menú al árbol para cualquier acción en el panel de control se realiza creando un elemento de menú en el panel derecho y creando una acción correspondiente (controlador) o agregando un controlador. Si el controlador ya existe, simplemente puede seleccionarlo en el menú desplegable Acciones. De lo contrario, deberías crear una acción en el panel izquierdo que apunte al controlador. Por ejemplo, no hay ningún elemento de menú para crear un nuevo usuario, pero como hay un controlador de archivos para esto, este elemento se puede agregar fácilmente al menú superior. En este caso, solo necesita crear un elemento de menú a la derecha y configurar la acción para el espacio de nombres "principal" en seguridad/usuario/crear. Como comprenderá, un elemento del menú superior que tiene un controlador, pero no tiene una acción correspondiente (como el elemento del menú "actualizar sitio") en el árbol "Acciones". No necesita un elemento de Acción porque el controlador contiene el código para eso. En lugar de ejecutar el controlador, MODX simplemente ejecuta el código en el campo del controlador.

Manejo de clics en menús

Observe la acción de índice del espacio de nombres de Batcher en el panel izquierdo. Anotemos su identificación. Cuando hace clic en un elemento del menú superior, MODX recibe esta ID. Luego, la URL de esta página se genera en el panel de control y el usuario accede a ella. En nuestro sitio web, este ID es 79. Cuando hacemos clic en Batcher en el menú superior, vemos en la barra de direcciones del navegador:

http://site/manager/index.php?a=79

Si hace clic en el elemento del menú Batcher, debería ver una URL similar donde verá el ID de su índice de acción de Batcher. Cuando el controlador de solicitudes recibe esta URL, verifica si el objeto de menú existe en la base de datos, si el usuario tiene permisos para ejecutarlo, establece la URL para obtener ayuda y ejecuta el archivo del controlador para esta acción (si hay un controlador, entonces se ejecuta el código JS del controlador).

Trabajar con el menú superior

Ahora que sabemos cómo MODX maneja los elementos del menú y sus acciones asociadas, modifiquemos el menú superior real en el Panel de control. Los métodos utilizados son bastante simples y para usarlos no es necesario comprender los mecanismos internos del menú/sistema de acción MODX.

Tenga cuidado aquí, ya que todos sus cambios seguirán vigentes ya sea que actualice el sitio o no. manera sencilla volver al menú predeterminado. La mayoría de los pasos que seguiremos aquí son fácilmente reversibles, pero querrás anotar la estructura del menú original antes de realizar cambios. Es mejor practicar primero. instalación MODX, que no se utilizará para este sitio.

Cambiar el orden de los elementos del menú

Puede cambiar el orden de los elementos del menú superior en el panel de control o cualquier elemento en sus submenús. Ir a la sección Sistema->Acciones y expanda el árbol de menús a la derecha (bajo el encabezado "Menú superior").

Como descubrimos anteriormente, este árbol es la base del menú superior del panel de control. Puede cambiar el orden de los elementos del menú superior arrastrándolos. Simplemente haga clic en el elemento del menú que desea mover y, mientras mantiene presionado el botón del mouse, muévalo a donde desee y suelte el botón del mouse. De esta manera puede cambiar el orden de los elementos del menú superior o de cualquier submenú. Puede mover elementos de un submenú a otro. También puede mover elementos del submenú al menú superior arrastrándolos a la carpeta del menú superior. Para ver los cambios, debe recargar la página del panel de control.

Agregar y eliminar elementos del menú

Agregar un nuevo elemento de menú es bastante simple. Ir a la sección Sistema->Acciones y expanda el árbol de menús a la derecha (bajo el encabezado "Menú superior"). Seleccione la parte del menú a la que desea agregar un elemento y haga clic en el botón "Agregar menú" (o haga clic derecho y seleccione "Agregar elemento de menú"). Ingrese el nombre del elemento del menú que necesita y haga clic en el botón "Guardar". Normalmente los usuarios de MODX añaden nuevos elementos al menú Componentes, pero puedes añadirlos en cualquier lugar. Para eliminar un elemento del menú, puede hacer clic derecho sobre él y seleccionar "Eliminar elemento del menú".

Si agrega un nuevo elemento de menú y luego recarga el navegador, es posible que no vea su nuevo elemento de menú en el menú superior. Los elementos del menú superior sin elementos secundarios y sin especificar una acción o controlador no aparecerán en el menú. Esta es la razón por la que el menú Componentes que ve en el árbol no aparece en el menú cuando instala MODX Revolution por primera vez; aún no hay componentes instalados.

Como ejemplo simple, creemos un nuevo menú personalizado que lo llevará a las secciones más utilizadas de su panel de control. Supongamos que su trabajo requiere visitas frecuentes a la configuración del sistema, creación/edición de documentos y control de acceso. Crearemos un elemento del menú superior llamado “Mi Menú”, en el que colocaremos los elementos especificados. Tenga en cuenta que haremos todo el trabajo en el panel derecho (Menú superior).

Ir a la sección Sistema->Acciones y (en el árbol de menú superior) haga clic en el botón "Agregar menú". Ingrese el nombre "Mi menú" en el campo "Nombre" y haga clic en el botón "Guardar".

Nombre - Nuevo documento

Acción-recurso-core/crear

Nombre- Configuración del sistema

Acción- sistema central/configuraciones

Nombre- control de acceso

Acción- seguridad central/permiso

Asegúrese de que sus tres nuevos elementos de menú sean subelementos en el menú Mi menú. Si este no es el caso, arrástrelos a la ubicación deseada con el mouse. También puede cambiar el orden de los menús y submenús.

Una vez que haya logrado el diseño de menú deseado, vuelva a cargar la página del panel de control en su navegador. Debería ver un nuevo elemento Mi menú en el menú superior, que contiene tres submenús que deberían conducir a las secciones correspondientes del panel de control.

Si desea eliminar cualquier elemento del menú que haya creado, simplemente vaya a Sistema->Acciones, haga clic derecho sobre ellos y seleccione "Eliminar". Es una buena idea eliminar todos los submenús antes de eliminar el elemento del menú principal para que no permanezcan en la base de datos.

Cómo ocultar elementos del menú

Además de cambiar el orden de los elementos del menú, también puede ocultarlos utilizando los permisos adjuntos al elemento del menú. Ir a la sección Sistema->Acciones y expandir el árbol de menú con lado derecho(bajo el título "Menú superior").

Haga clic derecho en cualquier elemento o subelemento del menú y seleccione "Editar". Aparecerá un cuadro de diálogo con el campo inferior "Permisos". Tenga cuidado de no cambiar ningún otro campo.

Si intenta ocultar elementos de menú existentes, verá que algunos de ellos tienen el campo Permisos completo y otros no. La acción que debe realizar para ocultar un campo depende de si el campo está completo o no.

Si el campo Derechos de acceso contiene una lista de derechos de acceso, puede crear una nueva política de acceso (o editar una existente) para bloquear ese derecho de acceso y el elemento del menú se ocultará. Esta operación puede tener efectos secundarios porque otros elementos del menú en el Panel de control pueden depender de los mismos permisos. el mejor metodo Es posible que se puedan agregar especificaciones de permisos de usuario adicionales a este campo.

El campo Permisos puede contener una lista de derechos de acceso, separados por comas. Este elemento del menú solo será visible para los usuarios que tengan todos los derechos de acceso enumerados.

Veamos un ejemplo. Supongamos que necesita ocultar el submenú "Administración de usuarios" en el menú "Seguridad" a todos los usuarios, excepto al usuario con derechos ilimitados de Superusuario.

Ir a la sección Sistema->Acciones y expanda el árbol del menú, y luego haga clic derecho en el subelemento "Administración de usuarios" y seleccione "Editar". El campo Permisos debe contener view_user. Vamos a agregar otros permisos llamados my_view_user_menu. Para hacer esto, edite este campo para que contenga view_user,my_view_user_menu. Asegúrese de que no haya espacios en los datos ingresados. Ahora los usuarios necesitan tener ambos derechos de acceso para ver el subelemento Administrar usuarios, y como nadie tiene el segundo derecho de acceso (ya que lo acabamos de inventar), nadie verá este subelemento.

Para los elementos del menú que no tienen derechos de acceso, el procedimiento es similar. Simplemente agregue nuevos permisos de usuario al campo Permisos vacío.

Tenga en cuenta que después de haber agregado nuestros permisos de usuario, un usuario con derechos ilimitados de Superusuario tampoco verá el submenú "Administrar usuarios". Para solucionar este problema, debe otorgarle estos derechos de acceso. Si planea realizar estas operaciones en un sitio activo, primero otorgue siempre estos permisos a un administrador sin restricciones antes de crear permisos personalizados.

Dado que el grupo de administradores predeterminado en el Panel de control está protegido, debe crear nueva plantilla políticas de acceso que contienen derechos de acceso de los usuarios y una nueva política de acceso basada en ellos. Puede colocar todos sus derechos de acceso de usuario en esta plantilla de política de acceso. en la sección Seguridad->Control de acceso Haga clic en "Crear plantilla de política de acceso". Para el diálogo, utilice los siguientes parámetros:

Nombre : Plantilla de permiso personalizado

Grupo de plantillas : Administración

Descripción :

Después de eso, haga clic derecho en el botón "Agregar permiso". En el cuadro de diálogo, utilice los siguientes parámetros:

Nombre : mi_vista_menú_usuario

Descripción : Permisos de menú personalizados

Luego haga clic en la pestaña “Política de acceso”, luego en el botón “Crear política de acceso”. En el cuadro de diálogo, utilice los siguientes parámetros:

Nombre : Permisos personalizados

Plantilla de política de acceso : Plantilla de permiso personalizado

Descripción : Mis permisos de usuario

Haga clic en la política de acceso "Permisos personalizados" y seleccione "Editar". Desplácese hacia abajo hasta el permiso my_view_user_menu y marque la casilla junto a él. Haga clic en el botón "Guardar" en la parte superior derecha.

Ahora debemos otorgarle al superusuario sin restricciones este derecho de acceso creando un nuevo elemento de ACL. Ir a la sección Seguridad->Control de acceso->Grupos de usuarios". Haga clic derecho en el grupo de usuarios "Administrador" y seleccione "Editar grupo de usuarios", haga clic en la pestaña "Acceso contextual" y luego en el botón "Agregar contexto". Para el cuadro de diálogo, utilice los siguientes parámetros:

Contexto : monseñor

Rol mínimo : Superusuario - 0

Política de acceso : Permisos personalizados

Seleccionar en el menú superior Seguridad->Control de acceso. Nadie podrá ver este elemento del menú excepto un usuario con derechos ilimitados de Superusuario (y otros usuarios con esta política de acceso). Si inicia sesión en el panel de control como uno de los editores del sitio, debería faltar el subelemento "Administración de usuarios".

Atrás

Adelante

Pero esto no es para nosotros ;).

Haremos todo desde cero. ¿Por qué nosotros (yo) necesitábamos esto, si ya existen opciones listas para usar? Porque me gusta más así. Porque creo que este enfoque es el más correcto. Porque, sabiendo cómo desarrollar el nuestro, podemos comprender fácilmente el código de otra persona, cambiarlo, corregir errores o complementarlo con la funcionalidad necesaria en un caso particular. Y, al final, ¡hacer el tuyo propio suele ser muy agradable!

La siguiente narrativa asumirá que el lector tiene un conocimiento mínimo programación PHP. Teóricamente, aquellas personas que no comprendan el código en absoluto podrán copiarlo y reproducir todas las acciones que se comentarán a continuación. Sin embargo, puede ser mejor para ellos usar fragmentos ya preparados a la Ditto, ya que brindan muchas opciones para la configuración externa sin tener que acceder al código principal.

No quiero discutir qué es mejor para el usuario: tomar uno ya hecho o desarrollar uno propio... Ambos casos tienen sus pros y sus contras. Para mí personalmente, la segunda opción tiene más ventajas. Además, cada lector decidirá por sí mismo.

Entonces, echemos un vistazo al nuestro nuevamente. Dado que hay bastantes partes de software diferentes en nuestro sitio web y necesitamos comenzar por algún lado, programemos...

Menú superior

Por el término "menú superior" me refiero a un conjunto de enlaces a páginas en la parte superior del sitio (ver imagen a continuación):

Describiré el primer ejemplo de creación de un fragmento con gran detalle; en el futuro me centraré principalmente en los detalles más importantes.

Comparémoslo con nuestro árbol de sitios en el sistema de gestión, que construimos en el artículo anterior:

Como puede verse en la figura, cuatro documentos están resaltados en el árbol del sitio (a saber, "Blog", "Acerca de los autores", "Fotos" y " Comentario"), que posteriormente creará enlaces en el menú superior.

Permítanme recordarles también que anteriormente hemos ocultado documentos que no queremos mostrar en el menú. Por ejemplo, en la configuración de un documento llamado "Búsqueda del sitio" eliminamos la casilla de verificación "Mostrar en el menú" y ocultamos los dos documentos restantes "Enlaces" y "Categorías" en el sitio al desmarcar la casilla de verificación "Publicar" en el configuración del documento (la pestaña “Configuración de página”) en la configuración del documento).

Así, en el artículo anterior preparamos el menú superior en el sistema de control.

Pasemos ahora a la cuestión de mostrar nuestras acciones directamente en el sitio.

La mayoría de los programas del sitio los realiza el llamado. " ", es decir. piezas individuales de código (también pueden entenderse como funciones individuales o subrutinas) en PHP. Por lo tanto, para implementar una visualización del menú superior en MODx, también debemos crear un nuevo fragmento, programarlo y agregar una llamada a este fragmento en la plantilla en el lugar correcto.

Vayamos al sistema de gestión, abramos la pestaña "Recursos" -> "Gestión de recursos" -> la pestaña "Fragmentos" y hagamos clic en el enlace "Nuevo fragmento". En el campo "Nombre del fragmento", ingrese "TopMenu" sin comillas y por ahora simplemente guarde el fragmento vacío sin código. Después de guardar, veremos el nombre de nuestro fragmento en la pestaña "Fragmentos".

Permítanme recordarles que en nuestra plantilla colocamos el menú superior en el fragmento "TOPMENU". Cambiemos a la pestaña "Fragmentos" y abramos el fragmento " ". En el contenido de este fragmento veremos el siguiente código:

• Blog


• Sobre los autores


• Fotos


• Comentario

Este código es lo que crea nuestro menú. Comentémoslo y agreguemos una llamada al fragmento "TopMenu" en el fragmento:

[]

Aquí nuevamente tendremos que hacer una pequeña digresión para explicar el significado de esta construcción []. El hecho es que es con la ayuda de construcciones como [] o [!SnippetName!] que podemos realizar llamadas a fragmentos en cualquier lugar de nuestras plantillas, fragmentos e incluso en cualquier lugar. pagina separada sitio.

En este caso, la construcción [] denota una llamada almacenable en caché fragmento, es decir llamar a una subrutina dinámica, cuyo resultado se calculará y ejecutará una vez, y posteriormente, al cargar la página donde se llama este fragmento, el resultado no cambiará, porque El fragmento ya no se vuelve a llamar. De esta forma ahorramos recursos en nuestro servidor web (y esto siempre es muy importante cuando hay mucho tráfico hacia el recurso).

Sin embargo, hay situaciones en las que necesita volver a ejecutar el fragmento de código todo el tiempo y no puede almacenar en caché los resultados. En tales casos, se utiliza la construcción [!SnippetName!], que siempre obligará a que el fragmento se ejecute sin almacenamiento en caché. Por analogía, esta construcción se llama llamada. no almacenable en caché retazo.

Entonces, guardemos el fragmento "TOPMENU" y actualicemos la página del sitio. Mmmm, aunque parezca extraño, el menú superior ha desaparecido. ¿Pero es esto realmente tan sorprendente? Al comentar el código HTML del menú en el fragmento, ocultamos su visualización en el navegador (verifique esto mirando código fuente páginas HTML). Pero nuestro fragmento "TopMenu" no hace nada porque todavía no se le ha agregado nada. Corrijamos esta deficiencia :).

Volvamos a la pestaña "Fragmentos", abramos el fragmento "TopMenu" creado e intentemos probar sus capacidades... Paciencia, mis lectores avanzados, no todos están familiarizados con estos detalles.

Primero, escribamos el código más simple (código PHP normal):

echo "Probando...";
?>

Antes de guardar, seleccione “Continuar editando”, porque Tendremos que cambiar el contenido de nuestro fragmento más de una vez y luego guardaremos el fragmento. Actualicemos la página del sitio y veamos en lugar del menú superior... bueno, para ser honesto, a primera vista no veremos casi ningún cambio, excepto el fondo azul ligeramente expandido del menú. Presionemos "CRTL+A" para seleccionar todo el texto en la página del sitio y veremos que nuestro fragmento muestra el texto "Probando..." en lugar del menú, solo el color del texto coincide con el color de fondo.

Cambiemos el código del fragmento a lo siguiente:

eco " Pruebas...";
?>

Ahora podemos ver claramente que nuestro fragmento funciona e incluso (!) muestra algo de texto. Bueno, esto es genial, pero no suficiente para nuestra tarea, ya que debemos asegurarnos de que nuestro fragmento muestre enlaces del sistema de control y exactamente en el mismo código HTML que comentamos en el fragmento "TOPMENU".

Y de nuevo una pequeña distracción...

Todo el sistema de relaciones de documentos en MODx se basa en el principio: cada "documento principal" contiene de cero a muchos "documentos secundarios" ("padre" -> "secundarios").

Cada documento en la base de datos MODx tiene su propio identificador único "ID"; este es el número que vemos entre paréntesis en el árbol del sitio junto a cada documento.

Por cierto, este identificador único tiene un solo significado: identifica de forma única un documento específico en el sistema de gestión. y nada mas! Enfatizo específicamente este hecho, ya que me he encontrado con repetidos intentos de cambiar estos identificadores para una amplia variedad de propósitos... Debe recordar de inmediato que esto es simplemente inútil, así que no intente cambiar estos números. No deberías prestarles mucha atención; normalmente estos números se utilizan simplemente para generar enlaces a ciertos documentos.

La base de datos MODx también crea un campo "principal" especial para cada documento. El valor de este campo es un número que indica el identificador único del documento principal o, si el documento está en la raíz del árbol, cero. Por lo tanto, siempre puede determinar sin ambigüedades qué documento es el documento principal de un documento determinado.

Para ver claramente de lo que acabamos de hablar, abra phpMyAdmin, seleccione su base de datos y busque la tabla (PREFIX)site_content, donde (PREFIX) es el prefijo que ingresó durante la instalación. Verá muchos campos que almacenan datos de documentos específicos, incluido "ID", un identificador único, "padre", el número del documento principal, "título de la página", el título de la página y otros.

Entonces usando esta información Sobre el principio de almacenar y vincular documentos en MODx, podemos entender cómo obtener los datos necesarios para mostrar los enlaces del menú superior: necesitamos encontrar en la base de datos todos los documentos que se encuentran en la raíz del árbol del sitio, es decir. tener el valor cero en el campo "principal".

Usando lenguaje SQL, una consulta similar se describiría así (puede intentar escribir esta solicitud en el campo de entrada SQL en phpMyAdmin, después de reemplazar "modx_" con su prefijo):

SELECCIONAR *
DESDE `modx_site_content`
DONDE `padre` = 0;

Sin embargo, dicha solicitud nos devolverá absolutamente todos los documentos desde la raíz del sitio, lo cual no es del todo correcto, teniendo en cuenta la tarea principal: mostrar enlaces solo a aquellos documentos que tengan:

• estado de publicación (en la base de datos, este elemento está representado por el campo “publicado”, donde valor = 1 significa que el documento está publicado y valor = 0 significa no publicado).
• recuperado (el campo "eliminado", donde 1 se elimina y 0 no se elimina),
• y que tienen configurada la opción “Mostrar en menú” (el campo “ocultar menú”, donde 1 significa ocultar y 0 significa mostrar en el menú).

Además, mirando un poco hacia adelante, inmediatamente ordenaremos los documentos por el parámetro “Posición en el menú”, que determinará la posición de cada enlace en nuestro menú.

Bueno, desde un punto de vista SQL, esto es absolutamente tarea fácil y se resuelve así:

SELECCIONAR *
DESDE `modx_site_content`
DONDE `publicado` = 1
Y `padre` = 0
Y `eliminado` = 0
Y `ocultar menú` = 0
ORDEN POR `menuindex` ASC;

En teoría, todas las consultas SQL se pueden ejecutar en fragmentos directamente desde usando PHP scripts, conectar la base de datos de nuevo cada vez y realizar muchas otras operaciones de rutina, repitiéndolas una y otra vez... Pero, verá, esto anularía el sentido de utilizar un marco, que ciertamente es nuestro sistema de gestión, porque MODx, entre otras ventajas, proporciona un conjunto de herramientas ya preparadas. interfaz de software(API, Interfaz de programación de aplicaciones). Las API son funciones de software que unifican y facilitan muchos procesos de procesamiento de datos.

Usemos una de las funciones API mencionadas "getDocumentChildren" en nuestro fragmento. La función "getDocumentChildren" recibe como parámetros los siguientes datos:

• $id - número de documento principal,
• $activo: seleccione solo documentos publicados o no publicados (1 o 0 respectivamente),
• $eliminados: seleccione solo documentos eliminados o no eliminados (1 | 0),
• $fields: campos que se seleccionan de la base de datos,
• $donde - condiciones especiales, es decir DONDE condición en la consulta SQL,
• $sort - campo por el cual se deben ordenar los resultados
• $dirección: dirección de clasificación, puede tomar valores ASC o DESC, es decir ordenar del valor más pequeño al más grande o viceversa
• $limit - límite de solicitud, es decir Condición LIMIT en consulta SQL

$resultados = $modx->getDocumentChildren(
$identificación = 0,
$activo = 1,
$eliminado = 0,
$dónde = "ocultar menú = 0",
$sort="menuindex",
$dir="ASC",
límite de $
);

Imprimir("

Foreach($resultados como $clave => $valor) (
print_r($valor);
}

Imprimir("");
?>

Guarde el fragmento y actualice la página. Como resultado de ejecutar el fragmento actualizado "TopMenu", verá una lista de matrices y sus valores, ordenados por los valores del campo "menuindex" de menor a mayor. Intente cambiar el parámetro $dir="ASC" a $dir="DESC"; como resultado, las matrices se reconstruirán y el documento con el valor más alto del campo "menuindex" se mostrará como el primer documento.

Los programadores experimentados probablemente comprendan que el resultado obtenido ya proporciona todo lo necesario para crear un menú listo para usar con enlaces. Bueno, casi todo. En cualquier caso, continuaré: reescribamos el código PHP para acercarnos lo más posible al resultado deseado.

$resultados = $modx->getDocumentChildren(
$identificación = 0,
$activo = 1,
$eliminado = 0,
"id, título de página, publicado, índice de menú, eliminado, ocultar menú, título de menú",
$dónde = "ocultar menú = 0",
$sort="menuindex",
$dir="ASC",
límite de $
);

$elementos = "";
$salida = "";

Foreach($resultados como $clave => $valor) (
$elementos .= "

".$valor["título de página"]."

\norte";
}

Si ($elementos != "") (
$salida = "

\norte";
$salida .= $artículos;
$salida .= "

\norte";
}

Devuelve $salida;

No analizaremos el código en detalle, ya que este es el código PHP más común, nada más. Si alguien no comprende el significado de alguna construcción, deje un comentario o, mejor aún, vaya a los foros de soporte correspondientes.

salvemos nuevo codigo fragmento y actualice la página. Como resultado de ejecutar el código, veremos casi lo que queríamos obtener:

Aquellos. Estos ya son enlaces generados automáticamente, cuya estructura repite completamente la estructura de los documentos en el árbol MODx. Para probar esto, intente crear algún documento de prueba en la raíz del sitio y actualice la página.

Sin embargo, eso no es todo. Muchos probablemente ya se habrán dado cuenta de que hay enlaces, pero no hay enlaces... Paradoja :). Quiero decir que los nombres de los documentos se muestran en el menú, pero los enlaces a ellos no funcionan. Esto es lógico, ya que por ahora el código del enlace muestra "#" en lugar de rutas reales.

Para resolver este problema, necesitas aprender sobre otro extremadamente oportunidad útil MODx: la dirección de cualquier página interna del sitio se puede obtener usando la siguiente construcción [~id~], donde id es un número único el documento requerido, es decir. el mismo número indicado entre paréntesis junto al nombre de cada documento en el árbol del sitio. Por lo tanto, al agregar dicha construcción [~1~] en el contenido de la plantilla/fragmento/página,

• • índice – alias del documento "Blog", si ingresamos "índice" como alias del documento, o
  • 1.html, si no ingresamos nada en el campo "Apodo" del documento "Blog"
• si los enlaces amigables están deshabilitados, veremos el texto index.php?id=1

Reescribamos el fragmento usando esta información:

$resultados = $modx->getDocumentChildren(
$identificación = 0,
$activo = 1,
$eliminado = 0,
"id, título de página, publicado, índice de menú, eliminado, ocultar menú, título de menú",
$dónde = "ocultar menú = 0",
$sort="menuindex",
$dir="ASC",
límite de $
);

$elementos = "";
$salida = "";

Foreach($resultados como $clave => $valor) (
$elementos .= "

".$valor["título de página"]."

\norte";
}

Si ($elementos != "") (
$salida = "

\norte";
$salida .= $artículos;
$salida .= "

\norte";
}

Devuelve $salida;

Entonces cambiamos # a [~".$value["id"].."~], es decir de hecho, para cada documento de la matriz, su ID único se sustituye dentro de la construcción [~id~]. Como resultado, obtenemos un menú con enlaces que funcionan.

Casi hemos logrado el ideal... Sin embargo, todavía hay un detalle que debemos tener en cuenta: el diseñador determinó que nuestro enlace activo debería resaltarse con un fondo blanco y, en consecuencia, el color del enlace debería cambiarse a naranja.

Para lograrlo, volveremos a revelar los secretos de MODx CMS :). Oculta en la API está la función $modx->documentIdentifier, que devuelve un valor identificador único página actual. Lo necesitaremos para determinar la página activa y resaltarla en el menú:

$resultados = $modx->getDocumentChildren (
$identificación = 0,
$activo = 1,
$eliminado = 0,
"id, título de página, publicado, índice de menú, eliminado, ocultar menú, título de menú",
$dónde = "ocultar menú = 0",
$sort="menuindex",
$dir="ASC",
límite de $
);

$cid = $modx->documentIdentifier;

$elementos = "";
$salida = "";

Foreach($resultados como $clave => $valor) (
si ($valor["id"] == $cid) (
$activo = " id=\"activo\"";
}
demás(
$activo = "";
}
$elementos .= "
".$valor["título de página"]."
\norte";
}

Si ($elementos != "") (
$salida = "

\norte";
$salida .= $artículos;
$salida .= "

\norte";
}

Devuelve $salida;

Bueno, ¿cómo resultó? ¡Funcionó!

Pero no pensaste que todo esto terminaría ahí, ¿verdad? Y con razón. Nos ponemos el listón más alto, queremos aprovechar al máximo las capacidades de MODx. Y por eso hay un pequeño detalle más que se nos pasó por alto.

Veamos detenidamente los nombres de los campos que solicitamos usando la función getDocumentChildren: "id, título de página, publicado, índice de menú, eliminado, ocultarmenu, título de menú". Entre ellos hay un campo como "título del menú". Como sugiere el nombre, este campo puede almacenar título del menú. El control dispone además de un campo de entrada "Elemento de menú". Este campo es opcional. Sin embargo, la lógica es que si se rellena este campo, entonces debemos sustituir el texto del enlace en el menú por el introducido por el usuario. Bueno, hagamos esto:

/********************************
Nombre: Menú superior
Propósito: Mostrar el menú superior
Proyecto: Demostración MODx
********************************/

$resultados = $modx->getDocumentChildren(
$id = 0, // ID del documento principal
$active = 1, // Seleccionar solo documentos publicados
$eliminado = 0, // Seleccionar solo documentos no eliminados
"id, título de página, publicado, índice de menú, eliminado, ocultarmenu, título de menú", // Seleccionar campos de la base de datos
$where = "hidemenu = 0", // Selecciona solo aquellos documentos que deben publicarse en el menú
$sort="menuindex", // Ordenar documentos por el campo menuindex
$dir="ASC", // Ordenar documentos en orden ascendente
$limit = "" // No establecemos restricciones (parámetro LIMIT en la consulta SQL)
);

$cid = $modx->documentIdentifier; //obtener el ID de la página actual

$elementos = "";
$salida = "";

Foreach($resultados como $clave => $valor) (
si ($valor["id"] == $cid) (
$activo = " id=\"activo\"";
}
demás(
$activo = "";
}
if ($valor["menutitle"] != "") (
$título = $valor["menutitle"];
}
demás(
$título = $valor["título de la página"];
}
$elementos .= "
".$título."
\n"; //recopila elementos del menú
}

// Si logramos encontrar al menos un elemento del menú,
// crear código de menú HTML
si ($elementos != "") (
$salida = "

\norte";
$salida .= $artículos;
$salida .= "

\norte";
}

// Devuelve el resultado del fragmento
devolver $salida;

Ahora intente ingresar algo de texto en el campo de entrada "Elemento de menú" de cualquier documento... ¿Funciona todo? ¡Asombroso!

P.D.: Algunos lectores pueden sorprenderse de que cuando siguen los enlaces de nuestro menú, el contenido de las páginas no cambia, aunque parece que, a juzgar por la ruta en la dirección del navegador, nos estamos moviendo a nuevas páginas... Cree Para mí esto es absolutamente normal, porque Absolutamente todas las páginas utilizan actualmente la misma plantilla. De hecho, en esta plantilla hasta ahora sólo hemos dinamizado el menú superior, todos los demás detalles permanecen sin cambios. Definitivamente hablaremos de esto más adelante, pero por ahora, que no cunda el pánico;).

Conclusión:

Entonces, otro artículo ha llegado a su conclusión lógica.

Resultados de la formación:

• Intentamos comprender el propósito de algunos de los campos de entrada en los documentos MODx y analizamos almacenar esta información en una base de datos;
• Aprendimos sobre nuevos diseños especiales de MODx: [], [!SnippetName!], [~id~];
• Aprendimos sobre la disponibilidad de una API especial y aprovechamos algunas funciones de la API;
• ¡Y basándonos en este conocimiento, creamos nuestro nuevo fragmento en MODx!

Saludos, queridos lectores. En la última lección llenamos el sitio con algo de contenido (), ahora es el momento mostrar todo en el menú para que los usuarios puedan navegar hasta ellos.

Crear dinámica menú en MODX usaremos un fragmento PdoMenú del paquete pdoHerramientas. Antes de comenzar, lea la documentación principal.

pdoMenú Documentación

Opciones

Opciones de plantilla

Opciones de clase CSS

Ejemplos oficiales

Puedes leer la documentación oficial aquí. Ahora veamos las llamadas de menú más típicas.

Llamar PdoMenú

Opción 1. En lugar de este menú estático llamar al fragmento pdoMenu, para esto en el árbol de recursos, en la pestaña “ Elementos”en la sección de fragmentos, expanda el hilo pdoHerramientas, luego haga clic en pdoMenú botón izquierdo del mouse (no suelte el botón) y arrastre este fragmento al lugar donde desea abrir el menú, luego en la ventana que se abre, complete los parámetros necesarios y haga clic en " Ahorrar«.

Opción 2. Simplemente escribimos la llamada manualmente.

Ejemplos típicos

Menú normal de un nivel

Por ejemplo, tenemos el menú más común, con el siguiente marcado html.

El resultado es el siguiente código para llamar al menú:

• &parents=`0` - lista de padres (en mi caso no limito la selección, ya que de todos modos solo mostraré ciertas páginas);
• &level=`1` — nivel de anidamiento (en este caso no hay ninguno);
• &resources=`2,3,4,5` — lista de recursos que deben mostrarse en el menú;
• &firstClass=`0` — clase para el primer elemento del menú (no cuál);
• &lastClass=`0` — clase del último elemento del menú (no cuál);
• &outerClass=`top-menu` — clase contenedora de menú (sustituida en ul);
• &hereClass=`current-menu-item` — clase para el elemento de menú activo (sustituido en li);
• &rowClass=`menu-item` - clase de una línea de menú (sustituida en li).

Menú de arranque personalizado de dos niveles

El código HTML estático se ve así:

Su código de salida será así:

Además, en la próxima lección daré un par de salidas más de menús desplegables basados ​​en bootstrap (y esto es para aquellos que no captaron la esencia. Bueno, entonces lo haremos).

A primera vista, todo parece complicado, pero no lo es, lee la documentación con más detalle, haz preguntas en los comentarios, definitivamente te ayudaré.