Dynamically Generate Version Dropdown (#18473)

* dynamically generate general version dropdown * dynamic generate installation guide version dropdown * fix type * use var Co-authored-by: Yang Shi <[email protected]>
apache · Jun 3, 2020 · 691cf95 · 691cf95
1 parent d3df744
commit 691cf95
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 23 deletions.
diff --git a/docs/static_site/src/_includes/get_started/get_started.html b/docs/static_site/src/_includes/get_started/get_started.html
@@ -22,22 +22,19 @@ <h2>Installing MXNet</h2>
             <div class="col-9 install-right">
                 <div class="dropdown" id="version-dropdown-container">
                     <button class="current-version dropbtn btn" type="button" data-toggle="dropdown">
-                        v1.6.0
+                        Version: {{site.versions[1]}}
                         <svg class="dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true">
                             <path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path>
                         </svg>
                     </button>
                     <ul class="opt-group version-dropdown">
-                        <li class="opt versions"><a href="#">master</a></li>
-                        <li class="opt active versions"><a href="#">v1.6.0</a></li>
-                        <li class="opt versions"><a href="#">v1.5.1</a></li>
-                        <li class="opt versions"><a href="#">v1.4.1</a></li>
-                        <li class="opt versions"><a href="#">v1.3.1</a></li>
-                        <li class="opt versions"><a href="#">v1.2.1</a></li>
-                        <li class="opt versions"><a href="#">v1.1.0</a></li>
-                        <li class="opt versions"><a href="#">v1.0.0</a></li>
-                        <li class="opt versions"><a href="#">v0.12.1</a></li>
-                        <li class="opt versions"><a href="#">v0.11.0</a></li>
+                        {% for version in site.versions %}
+                            {% if version == site.versions[1] %}
+                                <li class="opt active versions"><a href="#">{{version}}</a></li>
+                            {% else %}
+                                <li class="opt versions"><a href="#">{{version}}</a></li>
+                            {% endif %}
+                        {% endfor %}
                     </ul>
                 </div>
             </div>

diff --git a/docs/static_site/src/_includes/header.html b/docs/static_site/src/_includes/header.html
@@ -91,16 +91,13 @@
             <svg class="dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true"><path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path></svg>
           </span>
           <div class="dropdown-content">
-            <a class="dropdown-option-active" href="/">master</a>
-            <a href="/versions/1.6/">1.6</a>
-            <a href="/versions/1.5.0/">1.5.0</a>
-            <a href="/versions/1.4.1/">1.4.1</a>
-            <a href="/versions/1.3.1/">1.3.1</a>
-            <a href="/versions/1.2.1/">1.2.1</a>
-            <a href="/versions/1.1.0/">1.1.0</a>
-            <a href="/versions/1.0.0/">1.0.0</a>
-            <a href="/versions/0.12.1/">0.12.1</a>
-            <a href="/versions/0.11.0/">0.11.0</a>
+            {% for version in site.versions %}
+              {% if version == site.versions[0] %}
+                <a class="dropdown-option-active" href="/">{{version}}</a>
+              {% else %}
+                <a href="/versions/{{version}}/">{{version}}</a>
+              {% endif %}
+            {% endfor %}
           </div>
         </div>
       </div>

diff --git a/docs/static_site/src/assets/js/options.js b/docs/static_site/src/assets/js/options.js
@@ -52,7 +52,7 @@ $(document).ready(function () {
             versionSelect = urlParams.get('version');
             $('li.versions').removeClass('active');
             $('li.versions').each(function () { is_a_match($(this), versionSelect) });
-            $('.current-version').html(versionSelect + '<svg class="dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true"><path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path></svg>');
+            $('.current-version').html("Version: " + versionSelect + '<svg class="dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true"><path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path></svg>');
             queryString += 'version=' + versionSelect + '&';
         }
         if (urlParams.get('platform')) {
@@ -109,7 +109,7 @@ $(document).ready(function () {
         el.siblings().removeClass('active');
         el.addClass('active');
         if ($(this).hasClass("versions")) {
-            $('.current-version').html($(this).text());
+            $('.current-version').html("Version: " + $(this).text());
             urlParams.set("version", $(this).text());
         } else if ($(this).hasClass("platforms")) {
             urlParams.set("platform", label($(this).text()));