index.html.tmpl

<!DOCTYPE html>
<html lang="{% if is_en %}en{%else%}zh-Hans{% endif %}">
<head>
    <meta charset="UTF-8">
    <title>{% if not is_en %}深度学习入门{%else%}Deep Learning 101{% endif %}</title>
    <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/tether/1.4.0/js/tether.js"></script>
    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.slim.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href=".static/css/theme.css" type="text/css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/perfect-scrollbar/0.6.14/css/perfect-scrollbar.min.css" type="text/css" />
    <link rel="stylesheet" href=".static/css/override.css" type="text/css" />
    <style>
* {
    font-family:"Roboto","Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
}
.left-panel {
    background: #E5E6EA;
}

.left-panel .card-block a.click_active {
    background-color: #597cf1;
    color: #fff;
}
 
.left-panel .card-header {
    background: #ecedee;
}

{% if not is_en %}
.left-panel .card-header a {
    font-size: 14px;
}
{% endif %}

.left-panel .card-block a:not(.click_active) {
    background: #e4e6e9;
}

.left-panel .card-block a {
    border-radius: 0px;
    font-size: 13px;
    color: #2F323A;
    padding-left: 40px;
    border: 1px solid rgba(0,0,0,.125);
}

.left-panel .card-block a.active_color {
    color:  rgb(70, 74, 76);
    font-weight: bolder;
}

.left-panel .list-group-item {
    -moz-box-align: center;
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    margin-bottom: -1px;
    padding: 0.75rem 1.25rem;
    position: relative;
    color: #2f323a;
}

.navbar img {
    height: 90%;
    width: 90%;
}

   </style>
</head>
<body>
    <header class="site-header">
    <div class="site-logo">
      <a href="/"><img src=".theme/PP_w.png"></a>
    </div>
    <div class="site-nav-links">
      <div class="site-menu">
        <a class="fork-on-github" href="https://github.com/PaddlePaddle/Paddle" target="_blank">Fork me on Github</a>
        <div class="language-switcher dropdown">
            <li><a href="{% if is_en %}./index.html{% else %}./index.en.html{%endif%}">{% if is_en %}English{% else %}中文{% endif %}</a></li>
        </div>
        <ul class="site-page-links">
          <li><a>Home</a></li>
          <li><a>Get Started</a></li>
          <li class="active"><a>Documentation</a></li>
          <li><a>About Us</a></li>
        </ul>
      </div>
      <div class="doc-module">
        
        <ul class="current">
            <li class="toctree-l1"><a class="reference internal" href="#">{% if is_en %}GET STARTED{% else %}新手入门{% endif %}</a></li>
            <li class="toctree-l1"><a class="reference internal" href="#">{% if is_en %}TUTORIALS{% else %}完整教程{% endif %}</a></li>
            <li class="toctree-l1"><a class="reference internal" href="#">{% if is_en %}HOW TO{% else %}进阶指南{% endif%}</a></li>
            <li class="toctree-l1"><a class="reference internal" href="#">API</a></li>
            <li class="toctree-l1"><a class="reference internal" href="#">FAQ</a></li>
        </ul>

        
      </div>
    </div>
  </header>
    <div class="container-fluid">
        <div class="row">
            <div class="col-3 pl-1 pr-1 left-panel">
                <div id="accordion" role="tablist" aria-multiselectable="true">
                  <div class="card">
                    <div class="card-header" role="tab" id="headingOne">
                      <h5 class="mb-0">
                        <a aria-expanded="true" aria-controls="collapseOne">
                            {% if is_en %}Deep Learning 101<span class="sr-only">(current)</span>{% else %}深度学习入门{% endif %}
                        </a>
                      </h5>
                    </div>
                    <div id="collapseOne" class="rounded-0 collapse show" role="tabpanel" aria-labelledby="headingOne">
                      <div class="card-block pl-0 pr-0 pt-0 pb-0">
                        <div class="list-group ">
                          {% for chapter in chapters %}
                            <a href="{{ chapter.link }}" target="content_iframe" class="list-group-item list-group-item-action" style="border: 0px; border-bottom: 2px solid #dddfe3;">
                                {{ chapter.name }}
                            </a>
                          {% endfor %}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div class="col">
                <iframe src="./fit_a_line/index{% if is_en %}.en{% endif %}.html" style="border: none; overflow-y : hidden" width="100%" height="100%" name="content_iframe" id="content_iframe">
                </iframe>
            </div>
        </div>
    </div>
    <script>
    $('#content_iframe').on('load', function(){
        $("#content_iframe").height(200)  // trick code to shrink iframe size
        var body = $('#content_iframe').contents().find("body")
        body.css("overflow-y", "hidden")
        $("#content_iframe").height(body.height()+20)
        var alllinks = $('#content_iframe').contents().find("a")
        for (var i =0; i<alllinks.length; ++i) {
            alllinks[i].setAttribute("target", "_blank")
        }
    });
    $(".list-group a").click(function(){ 
       $(".list-group a.click_active").removeClass("click_active"); 
       $(this).addClass("click_active"); 
    })
    $($(".list-group a")[0]).addClass("click_active") 
    </script>
</body>
</html>