4.3. 다중 서비스 등록


4.3.1. 서비스에 대한 정보 검색

적절한 등록 링크를 구성하는 데 필요한 서비스에 대한 모든 정보를 검색하려면 서비스 오브젝트를 통해 반복해야 합니다. 서비스는 모델 오브젝트의 일부입니다.

{% for service in provider.services %}
  .
  .
  .
{% endfor %}
Copy to Clipboard Toggle word wrap

4.3.2. 등록 열 구성

서비스 오브젝트에 대한 레이아웃과 루프가 이미 있습니다. 이제 서비스 및 등록 링크에 대한 정보를 표시하는 방법을 결정합니다. 예를 들어 서비스 설명과 하단의 등록 링크를 사용하여 열로 나눕니다. 모든 열은 필요한 모든 정보를 포함하는 service-column 클래스가 있는 div 박스가 됩니다.

{% for service in provider.services %}
  <div class="service-column">
    <p>{{ service.name }}</p>
    <p>{{ service.description }}</p>
    .
    .
    .
  </div>
{% endfor %}
Copy to Clipboard Toggle word wrap

내부 컨테이너는 사용자 지정 설명 필드 역할을 합니다. service.name은 서비스 이름입니다. 이 경우 컨테이너 이름이 됩니다.

4.3.3. 서브스크립션 구성

이제 사용자 정의 서비스 등록의 주요 부분 - 가입 링크를 만들려면 등록 URL과 서비스 ID를 추출합니다. URL 오브젝트에서 등록 URL과 루프에서 반복한 서비스 오브젝트의 서비스 ID를 가져옵니다. 최종 링크 코드는 다음과 같습니다.

<a href="{{ urls.signup }}?{{ service | toparam }}">Signup to {{ service.name }}</a>
Copy to Clipboard Toggle word wrap

또한 사용자가 이미 일부 서비스에 가입했을 수 있음을 고려해야 합니다. 확인할 조건부 블록을 만듭니다.

{% unless service.subscribed? %}
  <a href="{{ urls.signup }}?{{ service | toparam }}">Signup to {{ service.name }}</a>
{% endunless %}
Copy to Clipboard Toggle word wrap

이를 통해 최종 코드를 생성할 수 있습니다.

{% for service in provider.services %}
  <div class="service-column">
      <p>{{ service.name }}</p>
      <p>{{ service.description }}</p>
      {% unless service.subscribed? %}
        <a href="{{ urls.signup }}?{{ service | to_param }}">Signup to {{ service.name }}</a>
      {% endunless %}
  </div>
{% endfor %}
Copy to Clipboard Toggle word wrap

4.3.4. 스타일링

사용 중인 서비스 수에 따라 생성된 태그에 몇 가지 최종 영향을 추가합니다. 이 예제의 경우 두 가지이므로 service-column div의 CSS 코드는 다음과 같습니다.

.service-column {
    float: left;
    margin-left: 10%;
    width: 45%;
}
.service-column:first-child {
  margin-left: 0;
}
Copy to Clipboard Toggle word wrap

이 예제에서는 백분율 기반 레이아웃을 사용하여 포함된 div의 차원에 대한 열 기본의 너비를 동적으로 할당합니다.

이제 제대로 작동하고 좋은 여러 서비스 서브스크립션 페이지가 있어야 합니다. 축하합니다!

열을 특정 순서로 표시하려면 서비스 이름 또는 알고 있는 다른 값을 조건하는 조건부 식(if/else/case)을 사용해 보십시오.

맨 위로 이동
Red Hat logoGithubredditYoutubeTwitter

자세한 정보

평가판, 구매 및 판매

커뮤니티

Red Hat 문서 정보

Red Hat을 사용하는 고객은 신뢰할 수 있는 콘텐츠가 포함된 제품과 서비스를 통해 혁신하고 목표를 달성할 수 있습니다. 최신 업데이트를 확인하세요.

보다 포괄적 수용을 위한 오픈 소스 용어 교체

Red Hat은 코드, 문서, 웹 속성에서 문제가 있는 언어를 교체하기 위해 최선을 다하고 있습니다. 자세한 내용은 다음을 참조하세요.Red Hat 블로그.

Red Hat 소개

Red Hat은 기업이 핵심 데이터 센터에서 네트워크 에지에 이르기까지 플랫폼과 환경 전반에서 더 쉽게 작업할 수 있도록 강화된 솔루션을 제공합니다.

Theme

© 2025 Red Hat