Gengive op til tre niveauer af sidehierarki ved hjælp af hybridnavigation
Bemærk
Fra 12. oktober 2022 bliver Power Apps-portaler til Power Pages. Flere oplysninger: Microsoft Power Pages er nu generelt tilgængelig (blog)
Vi overfører og fletter snart dokumentationen til Power Apps-portalerne med Power Pages-dokumentationen.
I dette eksempel gengives en form for hybridnavigation baseret på oversigt over websted for portalen, der gengiver et sidehierarki i op til tre niveauer. Reglerne for denne komponent er:
- Den aktuelle sides overordnede sider vises tilbage til startsiden (eller til den maksimale dybde, der er angivet med den valgfrie depth_offset-parameter).
- Hvis den aktuelle side har underordnede sider, vises de.
- Hvis den aktuelle side ikke har nogen underordnede sider, vises sider på samme niveau som den aktuelle side.
{% 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>
Se også
Oprette en brugerdefineret sideskabelon ved hjælp af Liquid og en sideskabelon i en webskabelon
Oprette en brugerdefineret sideskabelon til gengivelse af et RSS-feed
Gengive listen, der er tilknyttet den aktuelle side
Gengive et websteds sidehoved og primære navigationslinje
Bemærk
Kan du fortælle os om dine sprogpræferencer for dokumentation? Tag en kort undersøgelse. (bemærk, at denne undersøgelse er på engelsk)
Undersøgelsen tager ca. syv minutter. Der indsamles ingen personlige data (erklæring om beskyttelse af personlige oplysninger).
Feedback
Kommer snart: I hele 2024 udfaser vi GitHub-problemer som feedbackmekanisme for indhold og erstatter det med et nyt feedbacksystem. Du kan få flere oplysninger under: https://aka.ms/ContentUserFeedback.
Indsend og få vist feedback om