Flask-AutoIndex - 使用可访问的 html 使用键盘导航？

这是我如何使用替换模板和 javascript 完成的

只需将此模板文件放在

templates/autoindex.html

{% extends '__autoindex__/autoindex.html' %}

{% block meta %}
  {{ super() }}
  <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}" />
  <style>
    .highlight { background-color:#ff0; }
  </style>

  <script>
  // Set up a counter to keep track of which anchor is selected
  var selectedIndex = 0;

  document.addEventListener("keydown", function(event){
  var listItems = document.querySelectorAll("a");

  // Initialize first li as the selected (focused) one:
  listItems[selectedIndex].classList.add("highlight");

    // Check for up/down key presses
    switch(event.keyCode){
      case 38: // Up arrow    
        // Highlight the previous element
        listItems[selectedIndex].classList.remove("highlight");
        
        selectedIndex = selectedIndex > 0 ? --selectedIndex : 0;
        listItems[selectedIndex].classList.add("highlight");
        break;
      case 40: // Down arrow
        // Highlight the next element
        listItems[selectedIndex].classList.remove("highlight");
        
        selectedIndex = selectedIndex < listItems.length-1 ? ++selectedIndex : listItems.length-1; 
        listItems[selectedIndex].classList.add("highlight");       
        break;    
      case 13: // Enter key is pressed - go to selected item
        var items = document.querySelectorAll(".highlight");
        if (items.length != 1){
          return;
        }

        var selectedItem = items[0];
        console.log('item:' +  selectedItem.length);
        var href = selectedItem.getAttribute('href');
        window.location.href = href;
        break;    
      case 27: // Esc is pressed - navigate "up" in path
        window.location.href = '../'
        break;    
    }
  });
  </script>
{% endblock %}

{% block header %}
  <div style="width: 500px; margin: 30px auto;">
  <h2>Your Application</h2>
{% endblock %}

{% block footer %}
  </div>
{% endblock %}

或此变体

{% extends '__autoindex__/autoindex.html' %}

{% block meta %}
  {{ super() }}
  <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}" />
  <style>
    .highlight { background-color:#ff0; }
    body {
      -moz-transform: scale(1.3); /* for Firefox, default 1*/
      zoom:150%; /* For Chrome, IE, default 100%*/
    }
    
  </style>

  <script>
    function getItems(){
      return document.querySelectorAll("a");
    }

    var selectedIndex = 3;
    var listItems = getItems();

    function highlightItem(index){
      //console.log(index, listItems.length);
      listItems = getItems();
      var item = listItems[selectedIndex];
      item.classList.add("highlight");
      //console.log(item, index);
    }

    function ready(fn) {
      if (document.readyState !== 'loading') {
        fn();
        return;
      }
      document.addEventListener('DOMContentLoaded', fn);
    }

    function ready(callback){
      // in case the document is already rendered
      if (document.readyState!='loading') callback();
      // modern browsers
      else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
      // IE <= 8
      else document.attachEvent('onreadystatechange', function(){
          if (document.readyState=='complete') callback();
      });
    }

    ready(function(){
      highlightItem(selectedIndex);
    });

  document.addEventListener("keydown", function(event){
    // Get all the <li> elements into a collection
    listItems = getItems();
    //console.log(listItems);
    //console.log(event.keyCode);

    // Check for up/down key presses
    switch(event.keyCode){
      case 38: // Up arrow    
        // Remove the highlighting from the previous element
        listItems[selectedIndex].classList.remove("highlight");
        
        if (selectedIndex > 0){
          selectedIndex--;
        }
        else {
          selectedIndex = listItems.length-1;
        }
        highlightItem(selectedIndex);
        break;
      case 40: // Down arrow
        // Remove the highlighting from the next element
        listItems[selectedIndex].classList.remove("highlight");
        
        if (selectedIndex < listItems.length-1){
          selectedIndex++;
        }
        else {
          selectedIndex = 0;
        }
        highlightItem(selectedIndex);
        break;    
      case 13: // Enter key is pressed - go to selected item
        var items = document.querySelectorAll(".highlight");
        if (items.length != 1){
          console.log('skip, ' + items.length );
          return;
        }

        var selectedItem = items[0];

        console.log('item:' +  selectedItem.length);
        //var href = $(selectedItem).attr('href');
        var href = selectedItem.getAttribute('href');
        window.location.href = href;
        break;    
      case 27: // Esc is pressed - navigate "up" in path
        window.location.href = '../'
        break;    
      default:
        console.log(event.keyCode)
        break;
    }
  });
  </script>
{% endblock %}

{% block header %}
  <div style="width: 75%; margin: 30px auto;">
{% if not curdir.is_root() %}
  <h2>{{ curdir.path }}</h2>
{% else %}
  <h2>&nbsp;</h2>
{% endif %}
{% endblock %}

  {% block table %}
    <table>
      <thead>
        {{ thead() }}
        {% if False and not curdir.is_root() %}
          <tr>
            <td class="breadcrumb" colspan="4">
              <h1>{{ breadcrumb(curdir) }}</h1>
            </td>
          </tr>
        {% endif %}
      </thead>
      <tbody>
        {% for ent in entries %}
          {{ entry(ent) }}
        {% endfor %}
      </tbody>
    </table>
  {% endblock %}

{% block footer %}
  </div>
{% endblock %}