Apidoc: 탐색 패널에 머리글 및 바닥글의 부제목 표시

+1은 매우 좋을 것입니다

예를 들어 헤더 템플릿을 사용하여 API의 개요(7개 섹션 포함)를 제공하고 이러한 섹션/부제목도 사이드바에서 클릭 가능한 섹션으로 갖는 것이 좋습니다.

+1 나도 줘

좋아요, 정말 필요해서 JS를 조금 썼습니다. 관심 있는 사람이 공유하고 적용할 수 있을 만큼 깨끗합니다. 여기 간다.

1) apidoc_nav.js라는 파일을 만들고 그 안에 다음 코드를 넣습니다.

/**
 * Add navigation items by analyzing the HTML content and searching for h2 tags
 * <strong i="7">@param</strong> nav Object the navigation array
 * <strong i="8">@param</strong> content string the compiled HTML content
 * <strong i="9">@param</strong> index where to insert items: either 1 or nav.length
 */
function add_nav(nav, content, index) {
    if (!content)   return;
    var topics = content.match(/<h2>(.+?)<\/h2>/gi);
    topics.forEach(function(entry) {
        var title = entry.replace(/<.+?>/g, '');    // Remove all HTML tags for the title
        var entry_tags = entry.match(/id="(?:api-)?([^\-]+)-(.+)"/);    // Find the group and name in the id property
        var group = (entry_tags ? entry_tags[1] : null);
        var name = (entry_tags ? entry_tags[2] : null);
        if (title && group && name)    {
            nav.splice(index, 0, {
                group: group,
                name: name,
                isHeader: false,
                title: title,
                isFixed: false,
                version: '1.0'
            });
            index++;
        }
    });
}

/**
 * Add navigation items for the header and the footer
 * <strong i="10">@param</strong> nav Object the navigation array
 * <strong i="11">@param</strong> apiProject Object the apiProject data
 */
function add_header_footer_nav(nav, apiProject)
{
    if (apiProject.header) {
        add_nav(nav, apiProject.header.content, 1);
    }
    if (apiProject.footer && apiProject.footer.title != null) {
        add_nav(nav, apiProject.footer.content, nav.length);
    }
}

2) main.js 파일에서 220행 주위에 다음 코드를 삽입합니다.

    // Add Header and Footer navigation sub-titles
    add_header_footer_nav(nav, apiProject);

3) index.html 파일에서 main.js 호출 직전에 apidoc_nav.js를 호출합니다.

<script src="apidoc_nav.js"></script>  <!-- Add this -->
<script data-main="main.js" src="vendor/require.min.js"></script>

그것은 무엇을합니까? 코드는 머리글 및 바닥글 파일을 구문 분석하고 <h2> 태그를 검색합니다. api-group-something 형식을 따르는 이름으로 id 를 추출할 수 있으면 탐색 모음에 항목이 생성됩니다. 따라서 레벨 2 제목을 만들고 약간의 HTML을 사용하여 'd'를 붙이기만 하면 됩니다.

예:

여기서 ## 마크다운 태그 뒤에 <span> 태그를 사용합니다. "그룹"은 intro 이고 나머지는 start-well 입니다.

## <span id="api-intro-start-well">Starting Well with APIDoc</span>

레벨 2 타이틀에 대해 대체 ----- 마크다운 태그를 사용하는 동일한 예:

<span id="api-intro-start-well">Starting Well with APIDoc</span>
----------------------------------------------------------

id 가 api- 로 시작하고 다른 단어(그룹), 대시 및 이름(대시를 포함할 수 있음)을 갖는 것이 중요하다는 것을 기억하십시오.

그런 다음 나머지 문서에서 일반 마크다운을 사용하여 다음 항목을 쉽게 가리킬 수 있습니다.

Learn [how to start well with APIDoc](#api-intro-start-well)

즐기다!

사용자로 종료하면 솔루션이 제공됩니다.