Represente hasta tres niveles de jerarquía de páginas mediante la navegación híbrida
Nota
A partir del 12 de octubre de 2022, los portales de Power Apps son Power Pages. Más información: Microsoft Power Pages ya está disponible para el público en general (blog)
Pronto migraremos y fusionaremos la documentación de los portales de Power Apps con la documentación de Power Pages.
Este ejemplo representa un tipo de navegación híbrida, en función del mapa del sitio del portal, que representa hasta tres niveles de jerarquía de páginas. Las reglas para este componente son:
- Las páginas antecesoras de la página actual se muestra hasta la página principal (o la profundidad máxima especificada por el parámetro depth_offset opcional).
- Si la página actual tiene secundarias, estas páginas secundarias se mostrarán.
- Si la página actual no tiene secundarias, se verán las páginas del mismo nivel que la página actual.
{% assign depth_offset = depth_offset | default: 0 %}
{% assign current_page = current_page | default: page %}
{% assign current_depth = 0 %}
{% if current_page.children.size > 0 %}
{% assign leaf_page = false %}
{% else %}
{% assign leaf_page = true %}
{% endif %}
{% capture page_item %}
<li class=active>
<a href={{ current_page.url | h }} title={{ current_page.title | h }}>
{% if leaf_page %}
<span class=fa fa-fw aria-hidden=true></span>
{% else %}
<span class=fa fa-fw fa-caret-down aria-hidden=true></span>
{% endif %}
{{ current_page.title | h }}
</a>
{% unless leaf_page %}
<ul>
{% for child in current_page.children %}
<li>
<a href={{ child.url | h }} title={{ child.title | h }}>
{% if child.children.size > 0 %}
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{% else %}
<span class=fa fa-fw aria-hidden=true></span>
{% endif %}
{{ child.title | h }}
{% if child.entity.logical_name == 'adx_shortcut' %}
<span class=fa fa-fw fa-external-link aria-hidden=true></span>
{% elsif child.entity.logical_name == 'adx_webfile' %}
<span class=fa fa-fw fa-file-o aria-hidden=true><span class=sr-only>(File)</span></span>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% endunless %}
</li>
{% endcapture %}
<ul class=side-nav role=navigation>
{% assign crumb_count = 0 %}
{% assign leaf_mode = false %}
{% for crumb in current_page.breadcrumbs %}
{% unless current_depth < depth_offset %}
{% if forloop.last and leaf_page %}
{% assign leaf_mode = true %}
{% else %}
<li>
<a href={{ crumb.url | h }} title={{ crumb.title | h }}>
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{{ crumb.title | h }}
</a>
</li>
{% endif %}
{% assign crumb_count = crumb_count | plus: 1 %}
{% endunless %}
{% assign current_depth = current_depth | plus: 1 %}
{% endfor %}
{% if crumb_count < 1 %}
{{ page_item }}
{% elsif crumb_count < 2 and leaf_mode %}
{% for parent_sibling in current_page.parent.parent.children %}
{% if parent_sibling.url == current_page.parent.url %}
<li>
<a href={{ current_page.parent.url | h }} title={{ current_page.parent.title | h }}>
<span class=fa fa-fw fa-caret-down aria-hidden=true></span>
{{ current_page.parent.title | h }}
</a>
<ul>
{% for sibling in current_page.parent.children %}
<li {% if sibling.url == current_page.url %}class=active{% endif %}>
<a href={{ sibling.url | h }} title={{ sibling.title | h }}>
{% if sibling.children.size > 0 %}
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{% else %}
<span class=fa fa-fw aria-hidden=true></span>
{% endif %}
{{ sibling.title | h }}
{% if sibling.entity.logical_name == 'adx_shortcut' %}
<span class=fa fa-fw fa-external-link aria-hidden=true></span>
{% elsif sibling.entity.logical_name == 'adx_webfile' %}
<span class=fa fa-fw fa-file-o aria-hidden=true><span class=sr-only>(File)</span></span>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
<a href={{ parent_sibling.url | h }} title={{ parent_sibling.title | h }}>
{% if parent_sibling.children.size > 0 %}
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{% else %}
<span class=fa fa-fw aria-hidden=true></span>
{% endif %}
{{ parent_sibling.title | h }}
{% if parent_sibling.entity.logical_name == 'adx_shortcut' %}
<span class=fa fa-fw fa-external-link aria-hidden=true></span>
{% elsif parent_sibling.entity.logical_name == 'adx_webfile' %}
<span class=fa fa-fw fa-file-o aria-hidden=true><span class=sr-only>(File)</span></span>
{% endif %}
</a>
</li>
{% endif %}
{% endfor %}
{% else %}
<li>
<ul>
{% if leaf_mode %}
{% for parent_sibling in current_page.parent.parent.children %}
{% if parent_sibling.url == current_page.parent.url %}
<li>
<a href={{ current_page.parent.url | h }} title={{ current_page.parent.title | h }}>
<span class=fa fa-fw fa-caret-down aria-hidden=true></span>
{{ current_page.parent.title | h }}
</a>
<ul>
{% for sibling in current_page.parent.children %}
<li {% if sibling.url == current_page.url %}class=active{% endif %}>
<a href={{ sibling.url | h }} title={{ sibling.title | h }}>
{% if sibling.children.size > 0 %}
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{% else %}
<span class=fa fa-fw aria-hidden=true></span>
{% endif %}
{{ sibling.title | h }}
{% if sibling.entity.logical_name == 'adx_shortcut' %}
<span class=fa fa-fw fa-external-link aria-hidden=true></span>
{% elsif sibling.entity.logical_name == 'adx_webfile' %}
<span class=fa fa-fw fa-file-o aria-hidden=true><span class=sr-only>(File)</span></span>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
<a href={{ parent_sibling.url | h }} title={{ parent_sibling.title | h }}>
{% if parent_sibling.children.size > 0 %}
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{% else %}
<span class=fa fa-fw aria-hidden=true></span>
{% endif %}
{{ parent_sibling.title | h }}
{% if parent_sibling.entity.logical_name == 'adx_shortcut' %}
<span class=fa fa-fw fa-external-link aria-hidden=true></span>
{% elsif parent_sibling.entity.logical_name == 'adx_webfile' %}
<span class=fa fa-fw fa-file-o aria-hidden=true><span class=sr-only>(File)</span></span>
{% endif %}
</a>
</li>
{% endif %}
{% endfor %}
{% else %}
{% for sibling in current_page.parent.children %}
{% if sibling.url == current_page.url %}
{{ page_item }}
{% else %}
<li>
<a href={{ sibling.url | h }} title={{ sibling.title | h }}>
{% if sibling.children.size > 0 %}
<span class=fa fa-fw fa-caret-right aria-hidden=true></span>
{% else %}
<span class=fa fa-fw aria-hidden=true></span>
{% endif %}
{{ sibling.title | h }}
{% if sibling.entity.logical_name == 'adx_shortcut' %}
<span class=fa fa-fw fa-external-link aria-hidden=true></span>
{% elsif sibling.entity.logical_name == 'adx_webfile' %}
<span class=fa fa-fw fa-file-o aria-hidden=true><span class=sr-only>(File)</span></span>
{% endif %}
</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
</ul>
</li>
{% endif %}
</ul>
<style type=text/css>
.side-nav {
border-right: solid 1px #eee;
}
.side-nav,
.side-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.side-nav ul {
margin-left: 20px;
}
.side-nav a {
display: block;
line-height: 30px;
overflow: hidden;
text-decoration: none;
white-space: nowrap;
}
.side-nav li > a:hover {
border-right: solid 1px #23527c;
}
.side-nav li.active > a,
.side-nav li.active > a:hover {
border-right: solid 1px #333;
color: #333;
font-weight: bold;
}
</style>
Vea también
Crear una plantilla de página personalizada con Liquid y una plantilla de página de plantilla web
Crear una plantilla de página personalizada para representar una fuente RSS
Representar la lista asociada a la página actual
Represente un encabezado y una barra de navegación principal de página web
Nota
¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)
La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de