23.4
The landing page table of contents
Each individual web page in the website has a table of contents (TOC) at the start of it that contains links to all the other sections, subsection &c. that are part of the chapter with which the web page is associated.
For example, each web page associated with chapter 3 has the following TOC:
Each web page in chapter 4 has:
And so on, each section within a chapter has exactly the same TOC as every other section within that chapter. The way the TOC is constructed, if a link in the TOC is to a point on the current web page, it will slow scroll to that point, if the link is on a different page, it will jump directly to the correct point on that page.
It all just works (see § 11.5 for the details); the long and short of it is, once a TOC has been set up for one page in a chapter, it can just be copied (without change) to every other page in that chapter without modification and it will just work. It’s clever.
Now the landing page is basically a table of contents for the whole website. It has a few introductory and explanatory words, but it is basically there to provide an overview of the whole website and links to all the different chapters, section and subsections within it.
The TOC on the landing page is basically the same as the TOC on any other page within the website, it uses all the same structures and classes, there is nothing new at all (it is just the same as the TOC explained in § 11.5).
The only difference is that it is bigger; it has all the TOCs from every chapter.
This actually makes it quite easy to build, just copy the TOC from a web page in each chapter and paste it into the TOC on the landing page. Here’s an example:
<!-- ********************************************************************** [WP 000004]
TABLE OF CONTENTS
**********************************************************************-->
<div class="rg-row"> <!-- Start of TOC section -->
<div class="rg-col rg-span1-5"></div> <!-- Left col (not used for TOC) -->
<div class="rg-col rg-span3-5"> <!-- Start of TOC centre col) -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
TOC - PRACTICAL SERIES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<ul class="toc-line"> <!-- Start of TOC (level 1) -->
<li><a class="js--sc-000100" href="../index.html">
<div class="toc-lev"><span class="toc-lev1-num"></span><span class="toc-lev1-text">Practical Series Publications — Home Page</span></div></a>
</li>
</ul>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
TOC - A NOTE BY THE AUTHOR
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<ul class="toc-line">
<li><a class="js--sc-000100" href="index.html#js--000100">
<div class="toc-lev"><span class="toc-lev1lt-num"></span><span class="toc-lev1lt-text">A note by the author</span></div></a>
</li>
<li><a class="js--sc-000101" href="index.html#js--000101">
<div class="toc-lev"><span class="toc-lev1lt-num"></span><span class="toc-lev1lt-text">Additional note (June 2018)</span></div></a>
</li>
</ul>
...
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
TOC - 3. GRIDS, FONTS, COLUMNS AND RESPONSIVE DESIGN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<ul class="toc-line"> <!-- Start of TOC (level 1) -->
<li><a class="js--sc-030000" href="03-00-grid.html#js--000000">
<div class="toc-lev"><span class="toc-lev1-num">3</span><span class="toc-lev1-text">Grids, fonts, columns and responsive design</span></div></a>
</li>
</ul>
<ul class="toc-list">
<li><a class="js--sc-030100" href="03-00-grid.html#js--030100">
<div class="toc-lev"><span class="toc-lev2-num">3.1</span><span class="toc-lev2-text">The Gerstner grid</span></div></a>
</li>
...
<li><a class="js--sc-030400" href="03-04-grid.html#js--030400">
<div class="toc-lev"><span class="toc-lev2-num">3.4</span><span class="toc-lev2-text">Summary</span></div></a>
</li>
</ul>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
TOC - 4. GETTING STARTED
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<ul class="toc-line"> <!-- Start of full TOC (level 1) -->
<li><a class="js--sc-040000" href="04-00-starting.html#js--000000">
<div class="toc-lev"><span class="toc-lev1-num">4</span><span class="toc-lev1-text">Getting started</span></div></a>
</li>
</ul>
<ul class="toc-list">
<li><a class="js--sc-040100" href="04-01-starting.html#js--040100">
<div class="toc-lev"><span class="toc-lev2-num">4.1</span><span class="toc-lev2-text">The Brackets text editor</span></div></a>
</li>
...
<li><a class="js--sc-040300" href="04-03-starting.html#js--040300">
<div class="toc-lev"><span class="toc-lev2-num">4.3</span><span class="toc-lev2-text">The basics of a web page</span></div></a>
</li>
</ul>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
Remember that the landing page TOC is no different to any other page. The above is an extract of the TOC for my website. The bit at the top (in red) is the start of a TOC and is identical to every other TOC (it is discussed in § 11.5). The bit in orange is unique to the landing page, it links to section within the landing page itself, these will just slow scroll down the page to the correct point.
The bits in turquoise and purple are the TOCs copied from the relevant pages of the website.
The turquoise has been directly copied from a chapter 3 web page (it doesn’t matter which page in chapter 3, all the TOCs in chapter 3 are identical)
The purple has been directly copied from a chapter 4 web page.
This is repeated for all the chapters that are to feature within the landing page TOC.
I tend to list everything, but if you wanted to restrict the landing page to just the chapter level links (the TOC level 1 entries, just copy the TOC from the relevant section and delete everything but the toc-lev1 stuff).
