Bilingual Quarto Website Implementation Summary

✅ Completed Tasks

1. Directory Structure Created

.
├── zh/                      # Chinese source files
│   ├── _quarto.yml         # Chinese-specific config
│   ├── index.qmd
│   ├── about.qmd
│   └── publications.qmd
├── en/                      # English source files
│   ├── _quarto.yml         # English-specific config
│   ├── index.qmd
│   ├── about.qmd
│   └── publications.qmd
├── assets/
│   └── lang-switch.js      # Language switcher JavaScript
├── docs/
│   ├── index.html          # Root redirect page
│   ├── zh/                 # Chinese rendered output
│   ├── en/                 # English rendered output
│   ├── assets/             # Copied from root
│   ├── images/             # Copied from root
│   └── pdf/                # Copied from root
├── _quarto.yml             # Shared global config (deprecated for profiles)
├── _quarto-zh.yml          # Chinese profile config
├── _quarto-en.yml          # English profile config
├── build.bat               # Windows build script
├── build.sh                # Linux/Mac build script
└── BUILD_GUIDE.md          # Build documentation

2. Configuration Files

_quarto.yml (Shared - mostly for reference)

• Contains shared theme and formatting settings
• Not actively used with the directory-based build approach

zh/_quarto.yml (Chinese Configuration)

• Output directory: ../docs/zh
• Language: zh (Chinese)
• Chinese navbar labels
• Includes language switcher script

en/_quarto.yml (English Configuration)

• Output directory: ../docs/en
• Language: en (English)
• English navbar labels
• Includes language switcher script

3. Language Switcher JavaScript

File: assets/lang-switch.js

Features: - Automatically detects current language from URL path - Shows “EN” button on Chinese pages - Shows “中文” button on English pages - Maps corresponding pages: - /zh/about.html ↔︎ /en/about.html - /zh/publications.html ↔︎ /en/publications.html - Falls back to target language homepage if page doesn’t exist - Works with GitHub Pages subdirectory structure

How it works: 1. Runs on page load 2. Detects if URL contains /zh/ or /en/ 3. Generates the corresponding URL in the other language 4. Adds/updates a navbar link with appropriate label 5. Positions the link in the top-right of the navbar

4. Build Process

Manual Build:

# Build Chinese version
cd zh
quarto render
cd ..

# Build English version
cd en
quarto render
cd ..

# Copy resources
xcopy /E /I /Y assets docs\assets
xcopy /E /I /Y images docs\images
xcopy /E /I /Y pdf docs\pdf

Automated Build (use provided scripts):

# Windows
build.bat

# Linux/Mac
chmod +x build.sh
./build.sh

5. Content Files

All content files have been created with bilingual equivalents:

Chinese (zh/): - index.qmd - Homepage with bio, education, awards - about.qmd - About page - publications.qmd - Publications and research projects

English (en/): - index.qmd - Homepage with bio, education, awards - about.qmd - About page - publications.qmd - Publications and research projects

6. Root Redirect Page

File: docs/index.html

Features: - Auto-detects browser language - Redirects Chinese users to /zh/ - Redirects others to /en/ - Provides manual links for both languages - Clean, professional fallback UI

🚀 Deployment Instructions

For GitHub Pages:

1. Build the site:

   build.bat          # Windows
   ./build.sh         # Linux/Mac

2. Commit all files:

   git add .
   git commit -m "Implement bilingual website with language switcher"
   git push

3. Configure GitHub Pages:

   • Go to repository Settings > Pages
   • Set source to: main branch, /docs folder
   • Save

4. Access the site:

   • Root: https://JiajunDu-ReSustain.github.io/
   • Chinese: https://JiajunDu-ReSustain.github.io/zh/
   • English: https://JiajunDu-ReSustain.github.io/en/

🔧 Maintenance

Adding New Pages

1. Create .qmd file in both zh/ and en/ with the same filename
2. Add navigation entry to both zh/_quarto.yml and en/_quarto.yml
3. Rebuild the site
4. Language switcher will automatically handle the new page

Updating Content

1. Edit the .qmd files in zh/ or en/
2. Rebuild the affected language version
3. Commit and push changes

Updating Styles

1. Edit styles.scss in the root directory
2. Rebuild both language versions
3. Changes apply to both languages

✨ Features

• ✅ Fully static (no server-side logic required)
• ✅ GitHub Pages compatible
• ✅ Automatic language detection on root page
• ✅ Language switcher on every page
• ✅ Maintains URL structure when switching languages
• ✅ Graceful fallback if page doesn’t exist
• ✅ Clean, professional UI
• ✅ SEO-friendly with proper lang attributes
• ✅ Fast loading (static HTML)
• ✅ Easy to maintain and extend

📝 Notes

• The language switcher uses vanilla JavaScript (no dependencies)
• Resources (images, PDFs, assets) are shared between languages
• Each language has its own search index
• The navbar is customized per language
• All paths are relative and work locally and on GitHub Pages

🐛 Troubleshooting

Language switcher not working? - Ensure docs/assets/lang-switch.js exists - Check browser console for errors - Verify script is included in HTML (should be at end of body)

Images not loading? - Run resource copy commands after building - Verify docs/images/ and docs/pdf/ exist

Build fails? - Check Quarto version: quarto --version (should be 1.8+) - Ensure you’re in the correct directory when running render - Check for YAML syntax errors in _quarto.yml files

Wrong language on GitHub Pages? - Check docs/index.html exists and has redirect logic - Clear browser cache - Verify GitHub Pages is serving from docs/ folder

🎉 Success!

The bilingual website is now fully implemented and ready for deployment!