Add layout partial list.html for sequential links #1395
Conversation
Added a partial that creates sequential page navigation. At bottom of each page. Thought it would make the site a bit better as when reading sequentially you can click to the next page in the current section. Some of the links had to be modified with JavaScript as was not able to achieve sequential weight navigation with Hugo.
|
@jhauga is attempting to deploy a commit to the Mastodon Team on Vercel. A member of the Team first needs to authorize it. |
jhauga
changed the title
Disable initial state and change innerHTML of filler sequential page links.
| </aside> | ||
| <div class="e-content"> | ||
| {{ .Content }} | ||
| {{ partial "list.html" . }} |
There was a problem hiding this comment.
Including new partial template list.html after generated content. Output is essentially :
Previous - Page Next - Page
To Expand:
"Page" is changed to the page's innerText from the side nav or the page name as Hugo reads it. Links that are alphabetically sorted used Hugo, but had to use JavaScript to make sequential weighted links.
layouts/partials/list.html
Outdated
| {{ if $currentPage.IsMenuCurrent "docs" . }} | ||
| <!-- Add filler html and use JavaScript to put in correct links. --> | ||
| <div style="margin: {{ $verticalMargin }} 0px"> | ||
| <a id="previousLink" href="javascript:void(0)" style="font-size: {{ $fontSize }}">Previous - Page</a> |
There was a problem hiding this comment.
Changed href to "javascript:void(0)" as if an error occurs, worst case scenario are un-working links with generic filler text. outputting:
Previous - Page Next - Page
To Expand:
Per testing links changed consistently for me. I made a support repo with a working example - Pull #1395 working example. You'll have to use "Codesapces" then localhost it. I used php -S localhost:8000, GitHub prompts with link, and a working (mostly) example.
With the "Codespaces" localhost the links in section "API Entities" go to a table of contents like page, but this happens when clicking on side nav and clicking on sequential nav.
layouts/partials/list.html
Outdated
| var pageTurnSpacer = document.getElementById("pageTurnSpacer"); | ||
| var useJS = document.getElementById("useJS"); | ||
|
|
||
| // Only run statement to add correct links if html id useJS innerHTLM is 1. |
There was a problem hiding this comment.
Using html from Hugo build (id="useJS") for variable that tells if content is genereated from Hugo (alphabetical sorted pages) or needs links and text to be changed with JavaScript.
* Keep partials DRY and fix nested page sequential links Utilize new partial to keep DRY (Don't Repeat Yourself) and got sequential links working for nested pages in all sections. * Keep partials DRY and fix nested page sequential links Utilize new partial to keep DRY (Don't Repeat Yourself) and got sequential links working for nested pages in all sections.
|
Utilized a new partial to keep DRY (Don't Repeat Yourself) and got sequential links working for nested pages in all sections. A working sample, more details, and the testing procedure for this pull request can be found in a supporting supplemental repo: |
| {{ end }} | ||
|
|
||
| <script> | ||
| // IMPORTANT NOTE - this depends on HTML attributes to work. |
| // and text output of links will render as: | ||
| // <- Page Page -> | ||
|
|
||
| // DEPENDENT VARIABLES - redefine if HTML attributes or semantics change. |
There was a problem hiding this comment.
Variables in case dependent HTML tags and/or attributes change. These could be implemented elsewhere though.
| nextLink.href = nextHref; // set href for next page | ||
| nextLink.innerHTML = nextLink.innerHTML.replace("Page", nextName); // set text for next page | ||
| } // IMPORTANT NOTE: | ||
| // WELL - VERY IMPORTANT NOTE - this all depends on current HTML attributes to work. // |
There was a problem hiding this comment.
See top of script - the "FIRST SET OF VARIABLES" (its' important)
Added a partial that creates sequential page navigation at the bottom of each page. Thought it would make the site a bit better as when reading sequentially you can click to the next page in the current section without scrolling up.
Some of the links had to be modified with JavaScript as was not able to achieve sequential weight navigation with Hugo.
Added support repo documentation-sequential-links with built site (
hugo). Was hoping to have it deployed and fully working with GitHub "Pages", but had to use "Codespaces" for everything (most) to work correctly. I just started a codespace for main branch and started a local host withphp -S localhost:8000. From there GitHub prompts with link to open in browser.