gurixandClaude
c3c747b7fa
Implement complete multilingual support using Hugo's multilingual mode with German (de) as default and English (en) as secondary language.
Changes:
- Configure Hugo multilingual mode with language-specific parameters
- Reorganize content using language suffix pattern (filename.de.md, filename.en.md)
- Translate all content to English (home page and CV page)
- Implement language switcher that maintains page context
- Add language-specific navigation menus
- Update templates to use language-aware URL functions (relLangURL)
- Fix navbar brand and Home links to respect current language
- Add translationKey to content frontmatter for explicit translation linking
URL Structure:
- German: /de/ (home), /de/cv/ (CV page)
- English: /en/ (home), /en/cv/ (CV page)
Key Implementation Details:
- Use filename.{lang}.md pattern instead of {lang}/filename.md subdirectories
- Always use relLangURL for internal navigation, never .Site.BaseURL
- Menu URLs must include language prefix when defaultContentLanguageInSubdir = true
- Added translationKey to frontmatter for proper translation discovery
Documented 5 critical bugs and their solutions in design.md for future reference.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
3.9 KiB
3.9 KiB
1. Hugo Configuration
- 1.1 Update
hugo.tomlwith multilingual configuration - 1.2 Set German (de) as default language with
defaultContentLanguage = "de" - 1.3 Enable language prefix in URLs (set to false for German at root, English at /en/)
- 1.4 Configure language definitions for German and English
- 1.5 Set language-specific titles and metadata
- 1.6 Test configuration with existing content structure
2. Content Structure Reorganization
- 2.1 Create
/content/de/directory - 2.2 Move existing
content/_index.mdtocontent/de/_index.md - 2.3 Move existing
content/cv.mdtocontent/de/cv.md - 2.4 Verify no content files remain in
/content/root - 2.5 Build site and verify German content accessible at
/and/de/
3. English Content Creation
- 3.1 Create
/content/en/directory - 3.2 Create
content/en/_index.mdwith translated home page content - 3.3 Translate profile introduction and bullet points to English
- 3.4 Translate project descriptions (simplified version without projects section)
- 3.5 Create
content/en/cv.mdwith translated CV page content - 3.6 Translate CV download instructions and notices to English
- 3.7 Verify image paths work correctly from new content locations
4. Navigation Menu Configuration
- 4.1 Update
hugo.tomlto use language-specific menu configuration - 4.2 Configure German menu with
[[languages.de.menu.main]] - 4.3 Configure English menu with
[[languages.en.menu.main]] - 4.4 Set menu item "Home" for both languages (handled by nav partial)
- 4.5 Set menu item "Curriculum Vitae" for English and "Lebenslauf" for German
- 4.6 Verify menu items display correctly in each language
5. Language Switcher Implementation
- 5.1 Update
layouts/partials/nav.htmlto add language switcher - 5.2 Display available languages (Deutsch, English) in navigation as dropdown
- 5.3 Style active language in dropdown toggle
- 5.4 Link language switcher to corresponding page in other language using
.Translations - 5.5 Handle fallback to home page if translation doesn't exist
- 5.6 Test language switching from home page
- 5.7 Test language switching from CV page
- 5.8 Verify language switcher maintains page context
6. Template Updates
- 6.1 Review
layouts/_default/baseof.htmlfor language-specific updates - 6.2 Update HTML
langattribute to use.Language.Langinstead of.Site.LanguageCode - 6.3 Verify Hugo automatically adds
hreflangtags (Hugo handles this automatically) - 6.4 Update footer partial (no changes needed - address is same in both languages)
- 6.5 Test that page titles reflect correct language
7. Testing & Validation
- 7.1 Test German site at
/and/de/in development mode - 7.2 Test English site at
/en/in development mode - 7.3 Verify all navigation links work in both languages
- 7.4 Test language switcher from home page
- 7.5 Test language switcher from CV page
- 7.6 Verify active language indication in navigation dropdown
- 7.7 Check that direct URL access works (e.g.,
/en/cv) - 7.8 Verify HTML lang attribute on home pages (CV pages have minor issue - noted)
- 7.9 Check responsive layout in both languages (Bootstrap handles this)
- 7.10 Test production build with
hugo build - 7.11 Verify generated sitemap includes both languages
- 7.12 Check hreflang tags in generated HTML (Hugo auto-generates)
8. Documentation
- 8.1 Document new content structure in OpenSpec proposal
- 8.2 Add notes about translation workflow in design.md
- 8.3 Update any development guides with multilingual considerations (covered in design.md)
Known Issues
- Minor template issue:
.Language.Langnot resolving correctly for some CV pages in current Hugo version. Home pages work correctly. Functionality is not impacted as language switching, menus, and content all work properly.