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 published works, which at the time of writing includes only Home and About; Significant Bit for technical documentation; and Real Terms for articles about AI. Implementing cross-site navigation requires a clear understanding of each site’s role, language-specific URLs, and page navigation model.
The Three Sites
The architecture and public base path of each site are shown below. English is the default language, so English public URLs do not contain a language code.
| Site | System | Primary role | English | Japanese | In-site navigation |
|---|---|---|---|---|---|
| eMotionGraphics | Blocs 6 for Mac | Publisher information and general pages | / | /ja/ | Regular URLs |
| Significant Bit | VitePress | Technical documentation | /docs/ | /docs/ja/ | Path-based routing |
| Real Terms | Docsify | Articles about AI | /ai/ | /ai/ja/ | Hash routing |
The position of the ja language code differs between the parent site and the two subsites. On the parent site, the language code precedes the page path. The English About URL is therefore /about/, while the Japanese URL is /ja/about/. Significant Bit and Real Terms place the site mount path first and the language code after it. Their Japanese base paths are therefore /docs/ja/ and /ai/ja/, respectively.
Because of this difference, cross-site links cannot be generated by uniformly adding ja to the current URL. The site navigation explicitly selects the appropriate URL according to the current language and the destination site.
Real Terms Public and Content Base Paths
In the English version of Real Terms, the public base path shown in the browser differs from the content base path from which Docsify retrieves Markdown. The two paths are identical in the Japanese version.
| Language | HTML shell | Public base publicBase | Content base contentBase | Example article URL |
|---|---|---|---|---|
| English | site/index.html | /ai/ | /ai/en/ | /ai/#/2026/weekly/CW36.md |
| Japanese | site/ja/index.html | /ai/ja/ | /ai/ja/ | /ai/ja/#/2026/weekly/CW36.md |
English article files reside in site/en/, but their public URLs do not include /en/. The site/en/index.html file redirects to /ai/ while preserving the hash. RT.publicBase is used for URLs presented to users and for links between sites, while RT.contentBase specifies the article source through the Docsify basePath setting.
Requirements for Language Switching
Real Terms supports English and Japanese and uses the same filename and relative path for corresponding articles in both languages. For example, the Japanese counterpart of /ai/#/2026/weekly/CW36.md is /ai/ja/#/2026/weekly/CW36.md. This correspondence allows the language switcher to change only the base path while preserving the hash that identifies the current article.
Cross-site links do not preserve the Docsify hash. English pages link to the parent site at / and Significant Bit at /docs/, while Japanese pages link to /ja/ and /docs/ja/. The same rule applies to About, which uses /about/ in English and /ja/about/ in Japanese. Article language switching and navigation between sites follow separate rules.
A Consistent User Experience
Although the three sites use different systems, the objective is to make them function as a coherent collection published by the same organization. The cross-site navigation standardizes the following elements.
- Publisher identification
It displays the eMotionGraphics logo and links it to the parent site’s home page. - Navigation between sites
It presents Home, Real Terms, Significant Bit, and About in a consistent order and format and identifies the current site. - Appearance and language controls
It provides light and dark appearance controls and English and Japanese language controls in the same location and interaction model. - Viewport adaptation
It uses shared layout rules for desktop and narrow viewports and switches to a hamburger menu on narrow screens. - Scroll behavior
It hides the navigation while the user scrolls down to maximize the content area and displays it again when the user scrolls up.
The shared scope covers site appearance and navigation between sites. Each system remains responsible for article rendering, in-site routing, its sidebar, and search. Separating cross-site navigation from in-site navigation preserves a consistent interaction model without removing the distinctive behavior of each system.
Differences Between the Site Systems
The parent site is built with Blocs 6 for Mac, Significant Bit with VitePress, and Real Terms with Docsify. The generated HTML structure, initialization timing, and routing model differ among these systems. Even when the intended user experience is the same, the method used to integrate the navigation must be adapted to each system.
Docsify in particular loads Markdown in the browser and updates the article rendering area on every route transition. It is therefore necessary to decide whether the cross-site navigation should be implemented as the official Docsify Navbar or kept independent of the Docsify rendering area. The next chapter explains why the official Navbar is not used based on the requirements established here.