樣式圖

1、建立側邊欄模板

官方文件：建立自定義頁面模板 - Power Apps | Microsoft Docs

新增完成後在門戶管理中更新連線集：（連線集是側邊欄每個導航的指向連線）

 新增各連線。

此處id修改為對應連線集的id ：在位址列

 2、新增頁面模板：

 之後會在對應網站中的模板找到。

到此已經可以使用側邊欄；

3、新增側邊欄子頁面展示

修改web模板

<div class=container style="width:100%;">
  <div class=page-heading>
    <
 
ul class=breadcrumb>
      {% for crumb in page.breadcrumbs -%}
        <li>
          <a href={{ crumb.url }}>{{ crumb.title }}</a>
        </li>
      {% endfor -%}
      <li class=active>{{ page.title }}</li>
    </ul>   
  </div>
  <div class=row>
 

    <div class=col-sm-2 col-lg-2>
      {% block sidebar %}{% endblock %}
    </div>
    <div class=col-sm-10 col-lg-10>
      {% block content %}{% endblock %}
    </div>
  </div>
</div>

修改web模板

{% extends 'Two Column Layout' %}

{% block sidebar %}
  {% assign weblinkset_id = '353b8502-ecba-ec11-983f-000d3a85ad6e' %}
  {% if weblinkset_id %}
    {% assign nav = weblinks['353b8502-ecba-ec11-983f-000d3a85ad6e'] %}
    {% if nav %}
      
 
<ul class=nav navbar-nav weblinks>
        {% for link in nav.weblinks %}
          <li class ="weblink dropdown">
              {%- if link.weblinks.size > 0 -%}
                <a class="dropdown-toggle" data-toggle="dropdown" title={{ link.name }} 
                aria-haspopup="true" href={{ link.url }} aria-expanded="false">
              {%- endif -%}
              {%- if link.weblinks.size == 0 -%}
               <a class="dropdown-toggle" href={{ link.url }} >
              {%- endif -%}
              {{ link.name }}  
              {%- if link.weblinks.size > 0 -%}
                <span class="caret"></span>
              {%- endif -%}
            </a>
            <ul class="dropdown-menu">
              <li class="weblink dropdown" >
                {% for link in link.weblinks %}
                  <a class="list-group-item" href={{ link.url }}>
                    {{ link.name }}
                  </a>
                {% endfor %} 
              </li>
            </ul>
          </li>         
        {% endfor %}
        
      </ul>
        
    {% endif %}
  {% endif %}
{% endblock %}

{% block content %}
  <div class=page-copy>
     {% include 'Page Copy' %}//修改這個可以編輯
  </div>
{% endblock %}