템플릿을 사용하여 Azure API Management 개발자 포털을 사용자 지정하는 방법

2019-11-04

Azure API Management에서 개발자 포털을 사용자 지정하는 세 가지 기본 방법이 있습니다.

정적 페이지 및 페이지 레이아웃 요소의 내용 편집
개발자 포털 페이지 요소에 사용되는 스타일을 업데이트합니다.
포털 생성된 페이지에 사용되는 템플릿 수정(이 가이드에 설명)

템플릿은 시스템에서 생성된 개발자 포털 페이지(예: API 문서, 제품, 사용자 인증 등)의 콘텐츠를 사용자 지정하는 데 사용됩니다. DotLiquid 구문 및 제공된 지역화된 문자열 리소스, 아이콘 및 페이지 컨트롤 집합을 사용하면 페이지 콘텐츠를 원하는 대로 유연하게 구성할 수 있습니다.

비고

다음 설명서 콘텐츠는 사용되지 않는 개발자 포털에 관한 것입니다. 모든 API Management 서비스에서 제거되는 2023년 10월 만료될 때까지 평상시와 같이 계속 사용할 수 있습니다. 사용되지 않는 포털은 중요한 보안 업데이트만 받습니다. 자세한 내용은 다음 문서를 참조하세요.

새 개발자 포털 마이그레이션하는 방법을 알아봅니다.
Azure API Management 새 개발자 포털 개요
새 개발자 포털 액세스 및 사용자 지정

적용 대상: 개발자 | 기본 | 표준 | 프리미엄

개발자 포털 템플릿 개요

템플릿 편집은 관리자 권한으로 로그인한 상태에서 개발자 포털에서 이루어집니다. 먼저 Azure Portal을 열고 API Management 인스턴스의 서비스 도구 모음에서 개발자 포털 클릭합니다.

개발자 포털 템플릿에 액세스하려면 왼쪽의 사용자 지정 아이콘을 클릭하여 사용자 지정 메뉴를 표시하고 템플릿클릭합니다.

템플릿 목록에는 개발자 포털의 여러 페이지를 다루는 여러 범주의 템플릿이 표시됩니다. 각 템플릿은 다르지만 템플릿을 편집하고 변경 내용을 게시하는 단계는 동일합니다. 템플릿을 편집하려면 템플릿의 이름을 클릭합니다.

템플릿을 클릭하면 해당 템플릿에서 사용자 지정할 수 있는 개발자 포털 페이지로 이동합니다. 이 예제에서는 제품 목록 템플릿이 표시됩니다. 제품 목록 템플릿은 빨간색 사각형으로 표시된 화면 영역을 제어합니다.

제품 목록 템플릿

사용자 프로필 템플릿과 같은 일부 템플릿은 동일한 페이지의 다른 부분을 사용자 지정합니다.

각 개발자 포털 템플릿의 편집기에서는 페이지 아래쪽에 두 개의 섹션이 표시됩니다. 왼쪽에는 템플릿의 편집 창이 표시되고 오른쪽에는 템플릿의 데이터 모델이 표시됩니다.

템플릿 편집 창에는 개발자 포털에서 해당 페이지의 모양과 동작을 제어하는 태그가 포함되어 있습니다. 템플릿의 태그는 DotLiquid 구문을 사용합니다. DotLiquid의 편집기 중 인기 있는 하나는 'DotLiquid for Designers'입니다. 편집 중에 템플릿을 변경한 내용은 브라우저에 실시간으로 표시되지만, 저장하고 템플릿을 게시할 때까지 고객에게 표시되지 않습니다.

템플릿 태그

템플릿 데이터 창에서는 특정 템플릿에서 사용할 수 있는 엔터티에 대한 데이터 모델에 대한 가이드를 제공합니다. 개발자 포털에 현재 표시되는 라이브 데이터를 표시하여 이 가이드를 제공합니다. 템플릿 데이터 창의 오른쪽 위 모서리에 있는 사각형을 클릭하여 템플릿 창을 확장할 수 있습니다.

템플릿 데이터 모델

이전 예제에서는 다음 예제와 같이 템플릿 데이터 창에 표시된 데이터에서 검색된 두 개의 제품이 개발자 포털에 표시됩니다.

{
    "Paging": {
        "Page": 1,
        "PageSize": 10,
        "TotalItemCount": 2,
        "ShowAll": false,
        "PageCount": 1
    },
    "Filtering": {
        "Pattern": null,
        "Placeholder": "Search products"
    },
    "Products": [
        {
            "Id": "56ec64c380ed850042060001",
            "Title": "Starter",
            "Description": "Subscribers will be able to run 5 calls/minute up to a maximum of 100 calls/week.",
            "Terms": "",
            "ProductState": 1,
            "AllowMultipleSubscriptions": false,
            "MultipleSubscriptionsCount": 1
        },
        {
            "Id": "56ec64c380ed850042060002",
            "Title": "Unlimited",
            "Description": "Subscribers have completely unlimited access to the API. Administrator approval is required.",
            "Terms": null,
            "ProductState": 1,
            "AllowMultipleSubscriptions": false,
            "MultipleSubscriptionsCount": 1
        }
    ]
}

제품 목록 템플릿의 태그는 제품 컬렉션을 반복하여 데이터를 처리하고, 각 개별 제품에 대한 정보와 링크를 표시하여 원하는 출력을 제공합니다. 마크업의 <search-control> 및 <page-control> 요소를 유의하십시오. 이러한 컨트롤은 페이지에서 검색 및 페이징 컨트롤의 표시를 제어합니다. ProductsStrings|PageTitleProducts 페이지의 h2 헤더 텍스트를 포함하는 지역화된 문자열 참조입니다. 개발자 포털 템플릿에서 사용할 수 있는 문자열 리소스, 페이지 컨트롤 및 아이콘 목록은 API Management 개발자 포털 템플릿 참조참조하세요.

<search-control></search-control>
<div class="row">
    <div class="col-md-9">
        <h2>{% localized "ProductsStrings|PageTitleProducts" %}</h2>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
    {% if products.size > 0 %}
    <ul class="list-unstyled">
    {% for product in products %}
        <li>
            <h3><a href="/products/{{product.id}}">{{product.title}}</a></h3>
            {{product.description}}
        </li>
    {% endfor %}
    </ul>
    <paging-control></paging-control>
    {% else %}
    {% localized "CommonResources|NoItemsToDisplay" %}
    {% endif %}
    </div>
</div>