Implementing Cross-Site Navigation with Docsify
Real Terms uses Docsify 5 as its client-side renderer. Docsify handles hash routing, the sidebar, search, and article rendering. The navigation at the top of the page, however, does not use the official Navbar feature. To provide a consistent user experience with the parent site built in Blocs 6 for Mac and Significant Bit built with VitePress, the eMotionGraphics cross-site interface is implemented independently in app.js and theme.css.
This series first establishes the three-site architecture and language-specific URLs, then explains why the official Navbar is not used, followed by initialization order, DOM structure, scroll behavior, route transitions, and responsive presentation. It uses no external modules. In the following chapters, “official Navbar” refers to the Docsify Navbar feature, while “site navigation” refers to the custom header.eg-site-nav implementation.
Cross-Site Navigation
0. Designing the System Architecture and Language-Specific URLs
emotiongraphics.jp hosts three sites built with different systems under the same origin. These are the parent site for photo galleries, travelogues, and publish…
1. Why the Official Navbar Is Not Used
The official Docsify Navbar is designed to provide navigation among pages within a documentation site. Setting loadNavbar: true and adding _navbar.md generates…
2. Docsify Initialization Order and Site Navigation Mounting
The English HTML shell is site/index.html, and the Japanese shell is site/ja/index.html. The principal elements in each shell’s body are the Docsify mount point…
3. Site Navigation DOM Structure and Toolbar
After ensureSiteNav() runs, it generates the following DOM structure. None of these elements are present in the HTML shell; JavaScript adds all of them. The log…
4. Scroll Behavior and Route Transitions
Keeping the site navigation visible at all times reduces the space available for content in long weekly articles. Real Terms therefore hides the site navigation…
5. Responsive Layout and CSS Responsibilities
On desktop, the site links and toolbar are arranged in a single row, and the hamburger button is hidden with display: none. At viewport widths of 768px and belo…