From 33753d3b688a984b5f0beed288eef2ca3ca7eee1 Mon Sep 17 00:00:00 2001 From: Svetlana Karslioglu Date: Mon, 4 Nov 2024 17:16:13 -0800 Subject: [PATCH 1/2] Enable multi-level nav in the left nav bar (#3125) * Enable multi-level nav in the left nav bar * Update .lycheeignore * Add beginner_source/introyt/introy_index.html to validate_tutorial_built.py to skip building since there is no code * Add .js to keep left nav expanded * Expand only Learn the Basics * Remember user selection for collapsed/uncollapsed content * emove the bullet from the list --------- Co-authored-by: Jane (Yuan) Xu <31798555+janeyx99@users.noreply.github.com> --- .jenkins/validate_tutorials_built.py | 1 + .lycheeignore | 3 ++ _static/css/custom2.css | 18 ++++++++ _static/js/custom.js | 52 ++++++++++++++++++++++++ _templates/layout.html | 19 +++++++++ beginner_source/basics/intro.py | 14 ++++++- beginner_source/introyt.rst | 27 ++---------- beginner_source/introyt/README.txt | 2 +- beginner_source/introyt/introyt_index.py | 38 +++++++++++++++++ conf.py | 4 ++ index.rst | 38 ++++------------- 11 files changed, 159 insertions(+), 57 deletions(-) create mode 100644 _static/js/custom.js create mode 100644 beginner_source/introyt/introyt_index.py diff --git a/.jenkins/validate_tutorials_built.py b/.jenkins/validate_tutorials_built.py index 642f2a4665..2aaa5d6ef7 100644 --- a/.jenkins/validate_tutorials_built.py +++ b/.jenkins/validate_tutorials_built.py @@ -10,6 +10,7 @@ NOT_RUN = [ "beginner_source/basics/intro", # no code + "beginner_source/introyt/introyt_index", # no code "beginner_source/onnx/intro_onnx", "beginner_source/profiler", "beginner_source/saving_loading_models", diff --git a/.lycheeignore b/.lycheeignore index cfda1534a3..4894b6d72f 100644 --- a/.lycheeignore +++ b/.lycheeignore @@ -6,3 +6,6 @@ file:///f:/libtmp/some_file #Ignore links with "file:///" to catch any other example links file:\/\/\/.* + +# Ignore colab link in the setting of conf.py +https://pytorch.org/tutorials/beginner/colab/n diff --git a/_static/css/custom2.css b/_static/css/custom2.css index 4e263b6775..a4ec9396ee 100644 --- a/_static/css/custom2.css +++ b/_static/css/custom2.css @@ -17,3 +17,21 @@ margin-bottom: 5px; } } + +/* Left nav for 2nd level nav */ + +.pytorch-left-menu li.toctree-l2 { + padding-left: 10px; +} + +.pytorch-left-menu li.toctree-l2.current > a, { + color: #ee4c2c; +} + +.pytorch-left-menu li.toctree-l2.current a:link.reference.internal { + color: #ee4c2c; +} + +.pytorch-left-menu li.toctree-l1.current > a:before { + content: ""; +} diff --git a/_static/js/custom.js b/_static/js/custom.js new file mode 100644 index 0000000000..3e6c7fb831 --- /dev/null +++ b/_static/js/custom.js @@ -0,0 +1,52 @@ +document.addEventListener("DOMContentLoaded", function() { + // Select all
  • elements with the class "toctree-l1" + var toctreeItems = document.querySelectorAll('li.toctree-l1'); + + toctreeItems.forEach(function(item) { + // Find the link within the item + var link = item.querySelector('a'); + var nestedList = item.querySelector('ul'); + + if (link && nestedList) { + // Create a span element for the "[+]" or "[-]" sign + var expandSign = document.createElement('span'); + expandSign.style.cursor = 'pointer'; // Make it look clickable + + // Use the link text as a unique key for localStorage + var sectionKey = 'section_' + link.textContent.trim().replace(/\s+/g, '_'); + + // Retrieve the saved state from localStorage + var isExpanded = localStorage.getItem(sectionKey); + + // If no state is saved, default to expanded for "Learn the Basics" and collapsed for others + if (isExpanded === null) { + isExpanded = (link.textContent.trim() === 'Learn the Basics') ? 'true' : 'false'; + localStorage.setItem(sectionKey, isExpanded); + } + + if (isExpanded === 'true') { + nestedList.style.display = 'block'; // Expand the section + expandSign.textContent = '[-] '; // Show "[-]" since it's expanded + } else { + nestedList.style.display = 'none'; // Collapse the section + expandSign.textContent = '[+] '; // Show "[+]" since it's collapsed + } + + // Add a click event to toggle the nested list + expandSign.addEventListener('click', function() { + if (nestedList.style.display === 'none') { + nestedList.style.display = 'block'; + expandSign.textContent = '[-] '; // Change to "[-]" when expanded + localStorage.setItem(sectionKey, 'true'); // Save state + } else { + nestedList.style.display = 'none'; + expandSign.textContent = '[+] '; // Change back to "[+]" when collapsed + localStorage.setItem(sectionKey, 'false'); // Save state + } + }); + + // Insert the sign before the link + link.parentNode.insertBefore(expandSign, link); + } + }); +}); diff --git a/_templates/layout.html b/_templates/layout.html index 1c632de63f..fc120ef502 100644 --- a/_templates/layout.html +++ b/_templates/layout.html @@ -1,5 +1,23 @@ {% extends "!layout.html" %} + + +{% block menu %} + {% if 'singlehtml' not in builder %} + {% set global_toc = toctree(collapse=theme_collapse_navigation|tobool, + includehidden=theme_includehidden|tobool, + titles_only=True) %} + {% endif %} + {% if global_toc %} + {{ global_toc }} + {% else %} + +
    {{ toc }}
    + {% endif %} +{% endblock %} + + + {%- block content %} {{ super() }}