Menú
Gratis
Registro
hogar  /  Programas/ Menú MODX multinivel usando Bootstrap. PdoMenu: creación de menús en MODX Menús Modx en páginas específicas

Menú MODX multinivel usando Bootstrap. PdoMenu: creación de menús en MODX Menús Modx en páginas específicas

Hoy haremos un menú para nuestro blog usando el fragmento de Wayfinder (documentación del fragmento de Wayfinder). La navegación superior y principal de nuestro blog consta de dos partes:

  • Móvil
  • Plano

Por lo tanto, haremos la navegación por duplicado). Entonces, dividiremos nuestra navegación principal en partes. De acuerdo con la documentación, debería obtener 4 fragmentos (no olvide eliminar los espacios):

&outerTpl=` wayOuterTpl` - contenedor de fragmentos de la lista principal

&innerTpl=` wayInnerTpl` - contenedor de fragmentos para la lista desplegable

&rowTpl=` wayRowTpl` - fragmento que muestra los elementos de la lista

  • [ [+wf.linktext] ]
  • &parentRowTpl=`wayHasChildTpl` - Fragmento que muestra los elementos de la lista principal

    Y aquí está la llamada al fragmento en el fragmento del encabezado:

    [ ]

    &startId=`0`: establece el inicio del paso del fragmento, en nuestro caso desde la raíz del sitio.
    &level=`2` - el número de niveles en nuestro menú.

    El siguiente paso es desplegar nuestro menú móvil. El principio es similar al que mencioné anteriormente, aquí también necesitamos 4 trozos.

    &outerTpl=`wayOuterMobileTpl` - fragmento contenedor de la lista principal.

    &innerTpl=`wayInnerMobileTpl` - fragmento contenedor de lista interna.

    [ [+wf.envoltorio] ]

    &rowTpl=`wayRowMobileTpl` - Fragmento que muestra los elementos de la lista.

    [ [+wf.envoltorio] ]

    &innerRowTpl=`wayInnerRowMobileTpl` - Fragmento que muestra los elementos de la lista interna.

    [ [+wf.envoltorio] ]

    La llamada a Wayfinder se verá así:

    [ ]

    Todo es igual, solo han cambiado los trozos. Ahora que tenemos navegación móvil, puedes probarla con la herramienta Responsive Web Design Tester para Opera y Chrome.

    Aquí está el código completo para el fragmento de encabezado:

    ¡Nuestra navegación está lista! En el video, también analizamos la creación de un menú de categorías en un blog. Como el principio es el mismo, no lo consideré aquí, mira el video) ¡Nos vemos en las próximas lecciones!

    Comencemos la lección 8 de MODx Revolution para principiantes. Les recuerdo que estamos haciendo un sitio para aprender MODx Revolution. En la última lección, analizamos el concepto de fragmentos, que son piezas de código PHP que nos permiten agregar funcionalidad a nuestro sitio web. En este tutorial, veremos un fragmento especial: Wayfinder, y lo usaremos para crear un menú dinámico para nuestro sitio.

    ¿Qué es Wayfinder?

    Orientador es un fragmento que muestra una lista desordenada de enlaces a recursos en el árbol de su sitio, el tipo de salida de la lista depende de la llamada del fragmento y los parámetros de esta llamada. En términos generales, esto significa que cuando realiza una llamada a Wayfinder en su plantilla, comienza a buscar recursos que coincidan con los parámetros proporcionados en ella y devuelve una lista de enlaces a estos recursos en el formato de una lista sin clasificar o en el formato tu específicas.

    ¿Por qué usar Wayfinder?

    Usualmente uso Wayfinder para crear una navegación dinámica del sitio, es decir, un menú. Dado que la mayoría de las plantillas HTML utilizan listas desordenadas para crear menús, Wayfinder es la herramienta perfecta para ello. Al crear un sitio, puede insertar minuciosamente sus URL en el menú de navegación, tal como lo hizo antes en un sitio HTML estático. Al mismo tiempo, cada vez que necesite eliminar o crear una página, debe realizar los cambios apropiados en su menú, cambiar las URL. El uso del fragmento de Wayfinder para generar dinámicamente sus menús evita este dolor de cabeza, ya que detecta automáticamente los cambios y cambia su menú en consecuencia.

    Wayfinder es bastante flexible y le permite definir qué recursos incluir o excluir del menú, cuál es la plantilla del menú, qué tan profundo es el menú de su sitio. Sus límites están determinados por su código HTML/CSS.

    ¿Cómo usar Wayfinder?

    Como mencionamos en la lección anterior, la sintaxis para llamar fragmentos se ve así: [[!somesnippet]]

    Esta es solo una llamada básica y no es suficiente, aparte de eso, tenemos que definir algunas propiedades de esta llamada. En el caso de Wayfinder, lo mínimo que debe definirse en las propiedades es en qué parte del árbol de recursos Wayfinder debe comenzar a construir la lista de recursos. Por lo tanto, en la llamada del fragmento de Wayfinder, se debe especificar al menos un parámetro: la ID inicial. La llamada básica al fragmento de Wayfinder en este caso se vería así:

    Esta llamada le dice a Wayfinder que comience en la raíz del árbol ( IDENTIFICACIÓN 0 significa la raíz del sitio) y muestra todos los recursos que están publicados y no tienen una marca de verificación en la casilla de verificación Hide from Menus (Ocultar del Menú).

    Si echamos un vistazo a la plantilla que estamos usando, podemos ver un menú superior con varios elementos y desplegables.

    Echemos un vistazo a la plantilla y el código que representa este menú:

    Como puede ver, esta es una lista desordenada anidada. Reemplacemos este código con una llamada básica de Wayfinder y veamos qué sucede. Elimine el código anterior y péguelo en su lugar:

    [[!¿Camino? &startId=`0` ]]

    Si está utilizando la misma plantilla que yo, entonces su código se verá así:

    Guarde la plantilla y eche un vistazo a la página de inicio, debería verse así:

    ¡Fantástico! Puede ver que nuestro menú anterior, que tenía varios elementos, ahora ha sido reemplazado por un menú simple con un solo elemento: Inicio. Esto nos dice que Wayfinder está funcionando como se esperaba y está tomando una página de nuestro sitio y mostrando su título como un elemento del menú.

    Vamos a crear un par de recursos más. Voy a agregar una página Acerca de con 3 páginas secundarias (MODx, Tutoriales, Contacto y páginas de preguntas frecuentes). Puede crear cualquier recurso o página para su sitio. El propósito de este ejercicio es crear algunos recursos para que Wayfinder tenga algo que mostrar.

    Terminé de crear páginas y el árbol de recursos de mi sitio se ve así:

    Ahora que tenemos algunas páginas, veamos cómo llamar a Wayfinder generará un menú para nuestro sitio:

    La buena noticia es que todas nuestras páginas han aparecido en el menú y al hacer clic en cada elemento del menú llegamos a la página correspondiente. (Para probar este elemento, agregue texto a cada página, por ejemplo, en la página Acerca de puede agregar "Esta es una página Acerca de" y este mensaje aparecerá cuando se abra la página. Recuerde que necesitamos definir una plantilla para cada página, pero por el momento no me voy a preocupar por eso).

    La mala noticia es que el formato del menú no funciona, pero podemos arreglarlo. Haga clic derecho en la página web y mire el código fuente (o use firebug para eso), verá eso ahora Orientador genera HTML como este:

    • Hogar
    • Acerca de
      • CMS MODX
      • El teclado de codificación
        • El blog
        • Los servicios
    • Contáctenos
    • Tutoriales
    • Preguntas más frecuentes

    Como puede ver, se parece mucho a nuestro código estático inicial con algunas excepciones. Primero, Wayfinder generó