netlink官网

What is nthlink? "nthlink" is a simple, practical pattern for deep-linking not just to a specific element by ID, but to the nth occurrence of a type of element or selector on a page (for example, the 3rd article, the 7th search result, or the 1st image in a gallery). Unlike traditional anchors that target a single ID, nthlink uses a numeric parameter in the URL (a fragment or query parameter) that client-side logic resolves to the corresponding DOM node and brings it into focus. This lets you create predictable, shareable links for repeated patterns without adding unique IDs to every instance. Why use nthlink? - Dynamic lists: When items are generated server-side or client-side without stable IDs, nthlink lets you link to the nth item reliably. - Pagination and search: Link directly to a particular result within a long result set using the list index. - Testing and debugging: QA can jump to the nth instance of a component quickly. - Content sharing: Users can share links that point to a specific occurrence (e.g., the 4th comment). Basic implementation approaches 1) URL format Decide on a URL convention. Examples: - Fragment: #nth-3 - Query: ?nth=3 - Selector + index: #article:3 (custom) 2) JavaScript handler On page load and on hashchange, parse the URL for the nth value, select matching elements using document.querySelectorAll(selector), then pick the [n-1] element and scroll it into view, and set focus. Example (conceptual): const selector = '.result'; function gotoNth() { const m = location.hash.match(/#nth-(\d+)/); if (!m) return; const n = parseInt(m[1], 10) - 1; const elems = document.querySelectorAll(selector); if (elems[n]) { elems[n].scrollIntoView({behavior: 'smooth', block: 'center'}); elems[n].setAttribute('tabindex', '-1'); elems[n].focus(); } } window.addEventListener('hashchange', gotoNth); window.addEventListener('load', gotoNth); Accessibility and SEO considerations - Focus management: After scrolling, programmatically set focus to the element (with tabindex if needed) so screen-reader users are notified. - Announcements: Use aria-live regions if jumping to content needs an explicit announcement. - Degradation: Ensure page is usable without JavaScript; provide server-side fallbacks or clear default behavior. - SEO: Search engines index stable content by URL. Using nthlink with dynamic content is fine for user navigation but avoid relying on it alone for canonical indexing. Best practices - Use human-friendly URLs and document the pattern if external systems will generate nthlinks. - Adjust for filtering/sorting: Indices should map to the visible ordering, or include state in the URL to make the target deterministic. - Avoid brittle dependencies on transient order unless you control update cycles. Conclusion nthlink is a lightweight, developer-friendly pattern for pointing users at the nth occurrence of repeated content. With a clear URL convention, small client-side logic, and attention to accessibility, it enhances navigability in list-driven UIs without cluttering markup with unique IDs.