헬프센터 타이틀과 카테고리 영역 추가
안녕하세요 헬프센터를 사용하기 위해 몇가지 궁금한게 있어 문의드립니다. (코딩을 잘 모릅니다.)
1. 헬프센터 메인에 카테고리 영역을 2가지 이상 만들고 싶습니다. 지금은 기본 가이드만 사용시 1가지 카테고리 영역에서 카테고리만 생성이 가능한데 2가지 이상 카테고리 영역을 만들어 사용하고 싶습니다.
2. 카테고리 영역 타이틀을 넣는 방법이 궁금합니다.
-
안녕하세요 윌 지 ,
주어진 기사를 사용하여 카테고리 만들기:-
카테고리 생성 후, 주어진 포인트를 따라 :-
나). 주어진 코드를 복사하여 home_page.hubs 페이지에 붙여넣으세요.
암호:-
<section class="categories blocks">
{{#each categories}}
{{#if ../has_multiple_categories}}
<h1>
{{name}}
</h1>
<ul class="blocks-list">
{{#each sections}}
<li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
<span class="blocks-item-title">
{{name}}
</span>
</a>
</li>
{{/each}}
</ul>
{{/if}}
{{/each}}
{{pagination}}
</section>
스크린샷:-
나 나). 주어진 코드를 복사하여 style.css 파일에 붙여넣기.
/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
padding: 0;
}
@media (min-width: 768px) {
.blocks-list {
margin: 0 -15px;
}
}
.blocks-item {
border: 1px solid $brand_color;
border-radius: 4px;
box-sizing: border-box;
color: $brand_color;
display: flex;
flex: 1 0 340px;
margin: 0 0 30px;
max-width: 100%;
text-align: center;
}
@media (min-width: 768px) {
.blocks-item {
margin: 0 15px 30px;
}
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
background-color: $brand_color;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
color: $brand_text_color;
text-decoration: none;
}
.blocks-item-internal {
background-color: transparent;
border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
height: 15px;
width: 15px;
bottom: 5px;
position: relative;
}
.blocks-item-internal a {
color: $text_color;
}
.blocks-item-link {
color: $brand_color;
padding: 20px 30px;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
color: inherit;
text-decoration: none;
}
.blocks-item-link:focus {
outline: 0;
box-shadow: 0 0 0 3px $brand_color;
text-decoration: none;
}
.blocks-item-title {
margin-bottom: 0;
font-size: 16px;
}
.blocks-item-description {
margin: 0;
}
.blocks-item-description:not(:empty) {
margin-top: 10px;
}
스크린샷:-
산출:-
추가 문의사항은 부담 없이 문의하세요 :)
감사해요
Team
-
답변 감사합니다.
카테고리 영역을 아래 이미지와 같이 3개로 나눠서 만드는 방법이 있나요?
-
안녕,
주어진 코드를 사용하여 각 행의 세 블록에 있는 범주를 가져옵니다. homee_page.hbs
<section class="categories blocks">
<ul class="blocks-list">
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
<span class="blocks-item-title">{{name}}</span>
<span class="blocks-item-description">{{excerpt description}}</span>
</a>
</li>
{{else}}
{{#each sections}}
<li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
<span class="blocks-item-title">
{{name}}
</span>
<span class="blocks-item-description">{{excerpt description}}</span>
</a>
</li>
{{/each}}
{{/if}}
{{/each}}
</ul>
{{pagination}}
</section>이 CSS 코드를 사용하여 style.css 파일에 추가하십시오.
/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
padding: 0;
}
@media (min-width: 768px) {
.blocks-list {
margin: 0 -15px;
}
}
.blocks-item {
border: 1px solid $brand_color;
border-radius: 4px;
box-sizing: border-box;
color: $brand_color;
display: flex;
flex: 1 0 340px;
margin: 0 0 30px;
max-width: 100%;
text-align: center;
}
@media (min-width: 768px) {
.blocks-item {
margin: 0 15px 30px;
}
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
background-color: $brand_color;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
color: $brand_text_color;
text-decoration: none;
}
.blocks-item-internal {
background-color: transparent;
border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
height: 15px;
width: 15px;
bottom: 5px;
position: relative;
}
.blocks-item-internal a {
color: $text_color;
}
.blocks-item-link {
color: $brand_color;
padding: 20px 30px;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
color: inherit;
text-decoration: none;
}
.blocks-item-link:focus {
outline: 0;
box-shadow: 0 0 0 3px $brand_color;
text-decoration: none;
}
.blocks-item-title {
margin-bottom: 0;
font-size: 16px;
}
.blocks-item-description {
margin: 0;
}
.blocks-item-description:not(:empty) {
margin-top: 10px;
}지식 기반에서 카테고리를 생성했는지 확인하십시오.
카테고리를 추가하려면
1. 고객센터 또는 Guide Admin의 상단 메뉴 표시줄에서 추가를 클릭한 다음 카테고리를 선택합니다.
카테고리 선택
2. 카테고리의 이름과 설명(선택사항)을 입력합니다.
3. 사이드바에서 올바른 출발어가 선택되었는지 확인합니다.
4. 추가를 클릭합니다.
5. 4~5개의 카테고리를 만드세요.
감사
Please sign in to leave a comment.
3 Comments