Si j'ai beaucoup d'articles qui ont des titres différents, comment puis-je construire/compiler/créer une table des matières souple pour tous ces articles automatiquement?Comment construire/compiler/créer automatiquement une table des matières basée sur un code HTML fixe?
0
A
Répondre
0
Tout d'abord, vous avez besoin jQuery
et une mise en page fixe pour tous vos articles comme HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class='post-content'>
<div class='table-of-contents'></div>
<div id='anchor-a'>Heading A</div>
<div id='anchor-b'>Heading B</div>
<div id='anchor-c'>Heading C</div>
<!-- and so on -->
</div>
En second lieu, ajouter une ligne de mot - Table of Contents
et une liste HTML non non numérotée:
$('div.table-of-contents').html("<div>Table of Contents</div><ul></ul>");
en troisième lieu, ajouter une liste des rubriques dans la liste non ordonnée HTML:
$('div.post-content div[id^=anchor-]').each(function(){
$('div.table-of-contents ul').append("<li><a href='#" + $(this).attr('id') + "'>" + $(this).text() + "</a></li>");
}
Enfin, personnaliser votre Table of Contents
avec CSS
.
Voici un exemple de travail:
$(document).ready(function(){
$('div.table-of-contents').html("<div>Table of Contents</div><ul></ul>");
$('div.post-content div[id^=anchor-]').each(function(){
$('div.table-of-contents ul').append("<li><a href='#" + $(this).attr('id') + "'>" + $(this).text() + "</a></li>");
});
});
div.table-of-contents {
border: 2px solid black;
display: inline-block;
}
div.table-of-contents div {
font-size: x-large;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid black;
}
div.table-of-contents ul {
padding: 5px 5px 5px 30px;
margin: 0;
}
div.table-of-contents ul li {
font-size: large;
}
div[id^="anchor-"] {
margin-top: 1em;
font-size: large;
font-weight: bold;
}
div.footer {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='post-content'>
<div class='table-of-contents'></div>
<hr/>
<div id='anchor-a'>Heading A</div>
content of anchor-a
<hr/>
<div id='anchor-b'>Heading B</div>
content of anchor-b
<hr/>
<div id='anchor-c'>Heading C</div>
content of anchor-c
<hr/>
</div>
<div class='footer'>footer</div>