Πώς να δημιουργήσετε αυτόματα τον Πίνακα Περιεχομένων με τις αυλακώσεις HTML
Πίνακας περιεχομένων μπορεί να βελτιώσει σημαντικά την εμπειρία των χρηστών πολλών ιστότοπων, για παράδειγμα τόπους τεκμηρίωσης ή ηλεκτρονικές εγκυκλοπαίδειες όπως η Wikipedia. Ένας καλά σχεδιασμένος πίνακας περιεχομένων παρέχει μια επισκόπηση της σελίδας και βοηθά τους χρήστες να πλοηγούν γρήγορα στην ενότητα που τους ενδιαφέρει.
Παραδοσιακά, μπορείτε να δημιουργήσετε πίνακα περιεχομένων είτε σε μορφή HTML είτε με JavaScript, αλλά οι πρόσφατα τυποποιημένες υποδοχές HTML παρέχουν ένα μεσαία διαδρομή μεταξύ των δύο. Υποδοχή HTML είναι ένα πρότυπο ιστού που σας επιτρέπει να κάνετε προσθήκη παραληπτών σε μια ιστοσελίδα και αργότερα γεμίστε το με το περιεχόμενο δυναμικά.
Πότε πρέπει να χρησιμοποιήσετε το
Μπορείτε να τοποθετήσετε
Με αυτήν την τεχνική, πρέπει να δημιουργήσετε τον πηγαίο κώδικα HTML του πίνακα περιεχομένων με μη αυτόματο τρόπο. Το JavaScript δημιουργεί μόνο αυτόματα το περιεχόμενο κειμένου του πίνακα περιεχομένων, με βάση τις επικεφαλίδες ή τις υποδιαιρέσεις στη σελίδα.
Αν δεν θέλετε να υπάρχει πίνακας περιεχομένων που θα πρέπει να υπάρχει στο HTML που χρειάζεστε Δημιουργία τόσο της διάταξης όσο και του περιεχομένου με το JavaScript.
1. Δημιουργήστε το HTML
Ο πηγαίος κώδικας HTML για το TOC (πίνακας περιεχομένων) θα είναι μέσα σε α ετικέτα. Ο κώδικας μέσα δεν θα αποκατασταθεί μέχρι να προστεθεί στο έγγραφο από τη JavaScript. Το TOC μας θα έχει εντολοδότες, που πραγματοποιήθηκε στο
ο όνομα χαρακτηριστικό του καθενός θυρίδα στην αντίστοιχη επικεφαλίδα και στις διακρίσεις του εγγράφου.
Παρακάτω, μπορείτε να δείτε a δείγμα HTML Το Velociraptor (που σημαίνει "γρήγορος καταστροφέας" στα Λατινικά) είναι ένα ... Το Velociraptor ήταν ένα μεσαίου μεγέθους dromaeosaurid, με ενήλικες ... Τα απολιθώματα των dromaeosaurids πιο πρωτόγονα από ... Κατά τη διάρκεια μιας εκστρατείας του Αμερικανικού Μουσείου Φυσικής Ιστορίας ... Το Velociraptor είναι μέλος της ομάδας Eudromaeosauria, μια προερχόμενη υποομάδα ... Το δείγμα "Fighting Dinosaurs", που βρέθηκε το 1971, διατηρεί ένα ... Το 2010, ο Hone και οι συνεργάτες του δημοσίευσαν ένα έγγραφο σχετικά με ... Το Velociraptor ήταν θερμόαιμο σε κάποιο βαθμό, καθώς απαιτούσε ... Ένα κρανίο του Βελοσρατοπώρου κρατά δύο παράλληλα ... Όπως μπορείτε να δείτε, κάθε τίτλος είναι δεδομένης μιας μοναδικής Και, εδώ είναι το Κωδικός HTML του TOC, μέσα σε α Στα δύο αποκόμματα κώδικα παραπάνω, παρατηρήστε το αντιστοίχιση Πριν κοιτάξετε τον κώδικα JavaScript που θα προσθέσει το TOC από το Βεβαιωθείτε ότι το Τώρα, προσθέτουμε το σενάριο αυτό εισάγει το TOC πάνω από το Το απόσπασμα κώδικα παραπάνω δημιουργεί ένα αντίγραφο του Στη συνέχεια, ο κλωνοποιημένος Εάν θα επαναφέραμε τον μετρητή CSS στο Εδώ είναι το στιγμιότυπο οθόνης της εξόδου: Αν θέλεις συνδέστε τους τίτλους του TOC με τις αντίστοιχες επικεφαλίδες και υποδιαιρέσεις τους προσθέτοντας Το Velociraptor (που σημαίνει "γρήγορος καταστροφέας" στα Λατινικά) είναι ένα ... Το Velociraptor ήταν ένα μεσαίου μεγέθους dromaeosaurid, με ενήλικες ... Τα απολιθώματα των dromaeosaurids πιο πρωτόγονα από ... Όπως μπορείτε να δείτε παραπάνω, το Και το οι τίτλοι μέσα στον πίνακα περιεχομένων είναι αγκυροβολημένοι: Στην παραπάνω γραμμή παραπάνω, όλα Δείτε το στιγμιότυπο οθόνης του συνδέεται με τον πίνακα περιεχομένων παρακάτω: Μπορείτε να δείτε, να κατεβάσετε ή να χρησιμοποιήσετε τον κωδικό που χρησιμοποιείται σε αυτήν την ανάρτηση από το Github Repo. με ορισμένες επικεφαλίδες και υποτιτλίες. ο
Περιγραφή
Φτερά
Ιστορία της ανακάλυψης
Ταξινόμηση
Paleobiology
Συμπεριφορά δέσμευσης
Μεταβολισμός
Παθολογία
θυρίδα αξία. ετικέτα.
θυρίδα και όνομα γνωρίσματα μέσα στις επικεφαλίδες και στο 2. Αριθμός των επικεφαλίδων
στο έγγραφο, ας είναι προσθέστε σειριακούς αριθμούς για τις επικεφαλίδες, χρησιμοποιώντας μετρητές CSS. άρθρο counter-reset: επικεφαλίδα. άρθρο h2 :: πριν από counter-increment: heading; περιεχόμενο: '0'counter (τίτλος)': ';
αντιστροφέα ο κανόνας ανήκει στο στοιχείο που είναι το άμεσος γονέας όλων των τίτλων που φέρουν το θυρίδα Χαρακτηριστικό (Ποιο είναι το στοιχείο στον κώδικα μας).3. Τοποθετήστε το TOC στο έγγραφο
ετικέτα, μεσα στην δοχείο. templateContent = document.querySelector ('πρότυπο'). άρθρο = document.querySelector ('άρθρο') cloneNode (true); article.attachShadow (mode: 'κλειστό')) appendChild (templateContent.cloneNode (true)); document.querySelector ('# toc') appendChild (άρθρο); και αποδίδει σκιά DOM Tree σε αυτό. Εμείς επίσης προσθέστε ένα αντίγραφο του του περιεχομένου σε αυτό το δέντρο DOM Shadow. εισάγεται στο στοιχείο είναι που είναι τώρα παρούσα και στο TOC, ωστόσο είναι ορατά μόνο οι επικεφαλίδες και οι υποκατηγορίες που βρήκαν ένα σύμβολο κράτησης θέσης μέσα στο TOC. σώμα ή html στοιχείο αντί για άρθρο, ο μετρητής θα είχε υπολογίσει και τον κατάλογο των επικεφαλίδων μέσα στο TOC. Γι 'αυτό πρέπει επαναφέρετε τους μετρητές στο άμεσο γονέα των επικεφαλίδων.
4. Προσθέστε υπερσυνδέσμους
ταυτότητα στις επικεφαλίδες και στην αγκύρωση του αντίστοιχου κειμένου TOC θα πρέπει να κάνετε αφαιρέστε το επαναληπτικό ταυτότητα από τις κλωνοποιημένες άρθρο.
Περιγραφή
Φτερά
ταυτότητα χαρακτηριστικό είναι προστέθηκαν σε κάθε τίτλο και υπότιτλο του άρθρου.
ταυτότητα χαρακτηριστικά είναι από το κλωνοποιημένο αντικείμενο πριν προσαρμόζοντας το δέντρο δέντρου Σκιά σε αυτό. templateContent = document.querySelector ('πρότυπο'). άρθρο = document.querySelector ('άρθρο') cloneNode (true); (mode: 'closed') appendChild (templateContent.cloneNode (true)). )). document.querySelector ('# toc') appendChild (άρθρο); 
Github demo
